blinkk · jeremydw · Feb 25, 2026 · Feb 25, 2026 · Feb 25, 2026 · Feb 25, 2026
diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@examples/tailwind",
+  "description": "Root.js project with Tailwind CSS.",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "root dev",
+    "build": "rm -rf dist/ && root build",
+    "preview": "rm -rf dist/ out/ && root build --ssr-only && root preview",
+    "start": "root start",
+    "test": "pnpm run build"
+  },
+  "dependencies": {
+    "@blinkk/root": "workspace:*",
+    "@tailwindcss/vite": "^4.0.0",
+    "preact": "10.27.1",
+    "preact-render-to-string": "6.6.1",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.11.18"
+  }
+}
diff --git a/examples/tailwind/root.config.ts b/examples/tailwind/root.config.ts
@@ -0,0 +1,18 @@
+import path from 'node:path';
+import {URL} from 'node:url';
+import {defineConfig} from '@blinkk/root';
+import tailwindcss from '@tailwindcss/vite';
+
+const rootDir = new URL('.', import.meta.url).pathname;
+
+export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()],
+    resolve: {
+      alias: {
+        '@': path.resolve(rootDir),
+      },
+    },
+  },
+  prettyHtml: true,
+});
diff --git a/examples/tailwind/routes/index.tsx b/examples/tailwind/routes/index.tsx
@@ -0,0 +1,40 @@
+// Needed for prod mode (included in SSG build).
+import '../styles/index.css';
+
+import {Body, Head, Html} from '@blinkk/root';
+import type {GetStaticPaths} from '@blinkk/root';
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {paths: [{params: {}}]};
+};
+
+export default function Index() {
+  return (
+    <Html>
+      <Head>
+        <title>Root.js + Tailwind CSS</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        {/** Needed for dev mode (loaded as a direct stylesheet). NOTE: We should suppress this <link> in prod mode as it 404s. */}
+        <link rel="stylesheet" href="/styles/index.css" />
+      </Head>
+      <Body>
+        <div class="min-h-screen bg-gray-50 flex items-center justify-center p-8">
+          <div class="text-center">
+            <h1 class="text-4xl font-bold text-secondary sm:text-primary">
+              Hello, Root.js + Tailwind CSS
+            </h1>
+            <p class="mt-4 text-lg text-gray-600">
+              A minimal example using Root.js with Tailwind CSS v4.
+            </p>
+            <a
+              href="https://rootjs.dev"
+              class="mt-6 inline-block rounded-md bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-500 transition-colors"
+            >
+              Learn More
+            </a>
+          </div>
+        </div>
+      </Body>
+    </Html>
+  );
+}
diff --git a/examples/tailwind/styles/index.css b/examples/tailwind/styles/index.css
@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #C141E2;
+  --color-secondary: #256ABC;
+  --breakpoint-sm: 640px;
+}
diff --git a/examples/tailwind/tsconfig.json b/examples/tailwind/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "node16",
+    "moduleResolution": "node16",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "types": ["@blinkk/root/client"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules"]
+}