Modernize templates with Tailwind v4 and ESLint flat config

- Add Tailwind CSS v4 to Next.js template with zero-config setup
- Migrate both templates to ESLint flat config (eslint.config.mjs)
- Add proper .gitignore files to vanilla and nextjs templates
- Simplify root .gitignore to only Nix artifacts
- Update styling for consistent visual identity across templates
- Update README to reflect Tailwind inclusion and flat config

templates/nextjs/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": ["next/core-web-vitals", "next/typescript"]
-}

templates/nextjs/.gitignore

@@ -0,0 +1,38 @@
+# Dependencies
+node_modules
+
+# Next.js build output
+.next
+out
+
+# Production
+build
+dist
+
+# Nix
+.direnv
+result
+
+# Misc
+.DS_Store
+*.pem
+*.log
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Bun
+bun.lockb
+
+# Environment
+.env
+.env*.local
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts

templates/nextjs/app/globals.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 * {
   margin: 0;
   padding: 0;
@@ -7,58 +9,6 @@
 body {
   font-family: system-ui, -apple-system, sans-serif;
   line-height: 1.6;
-  padding: 2rem;
   background: #f5f5f5;
   color: #333;
 }
-
-main {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 2rem;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-h1 {
-  margin-bottom: 1rem;
-  color: #2c3e50;
-}
-
-p {
-  margin-bottom: 1.5rem;
-}
-
-code {
-  padding: 0.2em 0.4em;
-  background: #f0f0f0;
-  border-radius: 3px;
-  font-family: 'Monaco', 'Courier New', monospace;
-  font-size: 0.9em;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.links {
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.links a {
-  padding: 0.5rem 1rem;
-  background: #2c3e50;
-  color: white;
-  text-decoration: none;
-  border-radius: 4px;
-  transition: background 0.2s;
-}
-
-.links a:hover {
-  background: #34495e;
-}

templates/nextjs/app/page.tsx

@@ -1,18 +1,21 @@
 export default function Home() {
   return (
-    <main>
-      <div className="container">
-        <h1>Welcome to {{package-name}}</h1>
-        <p>
-          A minimal Next.js TypeScript template with App Router, powered by
-          Bun and Nix.
+    <div className="p-8">
+      <main className="max-w-3xl mx-auto p-8 bg-white rounded-lg shadow-md">
+        <h1 className="mb-4 text-gray-800">Welcome to {{package-name}}</h1>
+        <p className="mb-6">
+          A minimal Next.js TypeScript template with App Router, powered by Bun
+          and Nix.
         </p>
-
-        <div className="links">
+        <p className="mb-6">
+          Edit <code className="px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono">app/page.tsx</code> to get started.
+        </p>
+        <nav className="flex gap-4 flex-wrap">
           <a
             href="https://nextjs.org/docs"
             target="_blank"
             rel="noopener noreferrer"
+            className="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700 transition-colors"
           >
             Next.js Docs
           </a>
@@ -20,6 +23,7 @@ export default function Home() {
             href="https://react.dev"
             target="_blank"
             rel="noopener noreferrer"
+            className="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700 transition-colors"
           >
             React Docs
           </a>
@@ -27,11 +31,12 @@ export default function Home() {
             href="https://www.typescriptlang.org/docs"
             target="_blank"
             rel="noopener noreferrer"
+            className="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700 transition-colors"
           >
             TypeScript Docs
           </a>
-        </div>
-      </div>
-    </main>
+        </nav>
+      </main>
+    </div>
   );
 }

templates/nextjs/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  globalIgnores([
+    '.next/**',
+    'out/**',
+    'build/**',
+    'dist/**',
+    'node_modules/**',
+    'next-env.d.ts',
+  ]),
+]);
+
+export default eslintConfig;

templates/nextjs/package.json

@@ -15,11 +15,14 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "eslint": "^9.0.0",
     "eslint-config-next": "^15.0.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.6.0"
   }
 }

templates/nextjs/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

templates/vanilla/.gitignore

@@ -0,0 +1,23 @@
+# Dependencies
+node_modules
+
+# Build output
+dist
+build
+
+# Nix
+.direnv
+result
+
+# Misc
+.DS_Store
+*.log
+*.pem
+
+# Bun
+bun.lockb
+
+# Environment
+.env
+.env.local
+.env*.local

templates/vanilla/eslint.config.js

@@ -1,13 +1,15 @@
-export default [
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+const eslintConfig = defineConfig([
+  globalIgnores(['dist/**', 'build/**', 'node_modules/**']),
   {
-    ignores: ["dist", "build", "node_modules"],
-  },
-  {
-    files: ["**/*.js"],
+    files: ['**/*.js'],
     languageOptions: {
-      ecmaVersion: "latest",
-      sourceType: "module",
+      ecmaVersion: 'latest',
+      sourceType: 'module',
     },
     rules: {},
   },
-];
+]);
+
+export default eslintConfig;

templates/vanilla/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>JavaScript App</title>
+    <title>{{package-name}}</title>
     <link rel="stylesheet" href="src/style.css">
   </head>
   <body>

templates/vanilla/src/main.js

@@ -1,7 +1,8 @@
 const app = document.getElementById("app");
 
 app.innerHTML = `
-  <h1>JavaScript Template</h1>
+  <h1>Welcome to {{package-name}}</h1>
+  <p>A minimal JavaScript template with Vite, powered by Bun and Nix.</p>
   <p>Edit <code>src/main.js</code> to get started.</p>
 `;
 

templates/vanilla/src/style.css

@@ -26,6 +26,10 @@ h1 {
   color: #2c3e50;
 }
 
+p {
+  margin-bottom: 1.5rem;
+}
+
 code {
   padding: 0.2em 0.4em;
   background: #f0f0f0;