create-aziz-app 3.0.11 → 3.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "3.0.11",
+  "version": "3.0.13",
   "description": "Create Aziz.js apps — lightweight Next.js clone with file-based routing, React hooks, and API routes",
   "keywords": [
     "aziz.js",

package/template/.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+    "tailwindCSS.includeLanguages": {
+        "javascript": "javascriptreact"
+    },
+    "tailwindCSS.experimental.classRegex": [
+        ["class\\s*=\\s*[\"'`]([^\"'`]*)[\"'`]", "([^\"'`]*)"],
+        ["className\\s*=\\s*[\"'`]([^\"'`]*)[\"'`]", "([^\"'`]*)"]
+    ],
+    "editor.quickSuggestions": {
+        "strings": "on"
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}

package/template/README.md

@@ -597,12 +597,27 @@ Edit `styles/globals.css` for global styles. Built-in utility classes:
 
 ### Tailwind CSS
 
-Choose Tailwind during project creation, or add it manually to `index.html`:
+Tailwind CSS is included by default via CDN with `primary` and `dark` colors pre-configured:
 
-```html
-<script src="https://cdn.tailwindcss.com"></script>
+```js
+// Use Tailwind classes directly in any file
+<div class="flex items-center gap-4 p-6 bg-white rounded-lg shadow">
+    <h1 class="text-2xl font-bold text-dark">Hello</h1>
+    <button class="bg-primary text-dark font-bold px-4 py-2 rounded-lg">
+        Click me
+    </button>
+</div>
 ```
 
+Custom colors available out of the box:
+
+| Class | Value |
+|-------|-------|
+| `bg-primary` / `text-primary` | `#61dafb` (cyan) |
+| `bg-dark` / `text-dark` | `#282c34` (dark) |
+
+To extend the config, edit the `tailwind.config` block in `index.html`.
+
 ---
 
 ## Dev Server

package/template/index.html

@@ -5,6 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
     <title>My App</title>
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#61dafb',
+                        dark:    '#282c34',
+                    }
+                }
+            }
+        }
+    </script>
+
+    <!-- Global styles (nav, cards, buttons, etc.) -->
     <link rel="stylesheet" href="/styles/globals.css">
 </head>
 <body>

package/template/styles/globals.css

@@ -1,6 +1,6 @@
 /* ============================================================
    GLOBAL STYLES
-   Base styles that work with all CSS frameworks
+   Base styles that work alongside Tailwind CSS
    ============================================================ */
 
 /* Reset */

package/template/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        './index.html',
+        './app/**/*.{js,jsx}',
+        './components/**/*.{js,jsx}',
+        './lib/**/*.{js,jsx}',
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};