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

.gitignore

@@ -1,16 +1,3 @@
-# Dependencies
+# Nix
-node_modules/
-bun.lockb
-
-# Build output
-dist/
-build/
-.next/
-out/
-
-# TypeScript
-*.tsbuildinfo
-next-env.d.ts
-
-# Direnv
 .direnv/
+result

README.md

@@ -39,6 +39,7 @@ TypeScript template with App Router for modern web applications.
 - Next.js 15 with App Router
 - React 19
 - TypeScript
+- Tailwind CSS (utility-first styling)
 - Optimized for Vercel deployment
 
 ## Shared Foundation
@@ -153,9 +154,8 @@ All templates provide minimal, sensible defaults. Customize as needed:
 **Next.js:**
 
 - Configure Next.js in `next.config.js`
-- Customize ESLint rules in `.eslintrc.json`
+- Customize ESLint rules in `eslint.config.mjs`
 - Adjust TypeScript settings in `tsconfig.json`
-- Extend ESLint config for stricter rules
 
 **Both templates:**
 
@@ -166,10 +166,11 @@ All templates provide minimal, sensible defaults. Customize as needed:
 ## Template Comparison
 
 | Feature            | Vanilla     | Next.js     |
-| ------------------ | ------- | ------- |
+| ------------------ | ----------- | ----------- |
 | Framework          | None        | Next.js     |
 | Language           | JS          | TS          |
 | Bundler            | Vite        | Next.js     |
+| Styling            | Vanilla CSS | Tailwind v4 |
 | Client-side only   | ✓           | ✗           |
 | Server-side API    | ✗           | ✓           |
 | Static generation  | ✓           | ✓           |

nix/modules/template.nix

@@ -15,7 +15,7 @@ in {
     };
 
     om.templates = {
-      default = {
+      vanilla = {
         template = templates.default;
         params = [
           {

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="p-8">
-      <div className="container">
+      <main className="max-w-3xl mx-auto p-8 bg-white rounded-lg shadow-md">
-        <h1>Welcome to {{package-name}}</h1>
+        <h1 className="mb-4 text-gray-800">Welcome to {{package-name}}</h1>
-        <p>
+        <p className="mb-6">
-          A minimal Next.js TypeScript template with App Router, powered by
+          A minimal Next.js TypeScript template with App Router, powered by Bun
-          Bun and Nix.
+          and Nix.
         </p>
-
+        <p className="mb-6">
-        <div className="links">
+          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>
+        </nav>
-      </div>
       </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/flake.nix

@@ -1,5 +1,5 @@
 {
-  description = "Nix templates for JavaScript projects, powered by Bun";
+  description = "Next.js TypeScript project with App Router, Bun, and Nix";
 
   inputs = {
     nixpkgs.url = "github:nixos/nixpkgs/nixos-24.11";
@@ -12,7 +12,6 @@
       systems = import inputs.systems;
       imports = [
         ./nix/modules/devshell.nix
-        ./nix/modules/template.nix
       ];
     };
 }

templates/nextjs/nix/modules/template.nix

@@ -1,41 +0,0 @@
-{inputs, ...}: let
-  root = inputs.self;
-in {
-  flake = rec {
-    templates = {
-      default = {
-        description = "Minimal JavaScript template with Vite and Bun";
-        path = "${root}/vanilla";
-      };
-
-      nextjs = {
-        description = "Next.js TypeScript template with App Router";
-        path = "${root}/nextjs";
-      };
-    };
-
-    om.templates = {
-      default = {
-        template = templates.default;
-        params = [
-          {
-            name = "package-name";
-            description = "Name of the JavaScript package";
-            placeholder = "my-project";
-          }
-        ];
-      };
-
-      nextjs = {
-        template = templates.nextjs;
-        params = [
-          {
-            name = "package-name";
-            description = "Name of the Next.js project";
-            placeholder = "my-nextjs-app";
-          }
-        ];
-      };
-    };
-  };
-}

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",
+      ecmaVersion: 'latest',
-      sourceType: "module",
+      sourceType: 'module',
     },
     rules: {},
   },
-];
+]);
+
+export default eslintConfig;

templates/vanilla/flake.nix

@@ -1,5 +1,5 @@
 {
-  description = "Nix templates for JavaScript projects, powered by Bun";
+  description = "Vanilla JavaScript project with Vite, Bun, and Nix";
 
   inputs = {
     nixpkgs.url = "github:nixos/nixpkgs/nixos-24.11";
@@ -12,7 +12,6 @@
       systems = import inputs.systems;
       imports = [
         ./nix/modules/devshell.nix
-        ./nix/modules/template.nix
       ];
     };
 }

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/nix/modules/devshell.nix

@@ -22,7 +22,6 @@ in {
         [
           bun
           nodejs
-          typescript
           eslint
           just
           prettierd

templates/vanilla/nix/modules/template.nix

@@ -1,41 +0,0 @@
-{inputs, ...}: let
-  root = inputs.self;
-in {
-  flake = rec {
-    templates = {
-      default = {
-        description = "Minimal JavaScript template with Vite and Bun";
-        path = "${root}/vanilla";
-      };
-
-      nextjs = {
-        description = "Next.js TypeScript template with App Router";
-        path = "${root}/nextjs";
-      };
-    };
-
-    om.templates = {
-      default = {
-        template = templates.default;
-        params = [
-          {
-            name = "package-name";
-            description = "Name of the JavaScript package";
-            placeholder = "my-project";
-          }
-        ];
-      };
-
-      nextjs = {
-        template = templates.nextjs;
-        params = [
-          {
-            name = "package-name";
-            description = "Name of the Next.js project";
-            placeholder = "my-nextjs-app";
-          }
-        ];
-      };
-    };
-  };
-}

templates/vanilla/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "javascript-template",
+  "name": "{{package-name}}",
   "version": "1.0.0",
   "type": "module",
   "scripts": {

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;