@ereo/plugin-tailwind 0.1.6

package/README.md

@@ -0,0 +1,204 @@
+# @ereo/plugin-tailwind
+
+Zero-config Tailwind CSS integration for the EreoJS framework. Includes a custom preset with animations, colors, and sensible defaults.
+
+## Installation
+
+```bash
+bun add @ereo/plugin-tailwind tailwindcss
+```
+
+## Quick Start
+
+```typescript
+// ereo.config.ts
+import { defineConfig } from '@ereo/core'
+import tailwind from '@ereo/plugin-tailwind'
+
+export default defineConfig({
+  plugins: [
+    tailwind() // Zero-config setup
+  ]
+})
+```
+
+## Plugin Options
+
+```typescript
+interface TailwindPluginOptions {
+  /** Content paths to scan (auto-detected by default) */
+  content?: string[]
+  /** Path to tailwind.config.js (auto-detected by default) */
+  config?: string
+  /** Enable dark mode */
+  darkMode?: 'class' | 'media' | false
+  /** Use EreoJS preset */
+  usePreset?: boolean
+}
+```
+
+### Default Values
+
+```typescript
+const defaults = {
+  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  config: 'tailwind.config.js',
+  darkMode: 'class',
+  usePreset: true
+}
+```
+
+### With Custom Options
+
+```typescript
+import tailwind from '@ereo/plugin-tailwind'
+
+export default defineConfig({
+  plugins: [
+    tailwind({
+      content: ['./src/**/*.{js,ts,jsx,tsx}'],
+      darkMode: 'media',
+      usePreset: true
+    })
+  ]
+})
+```
+
+## Key Features
+
+- **Zero Configuration**: Works out of the box with sensible defaults
+- **EreoJS Preset**: Custom preset with animations, typography, and colors
+- **Dark Mode Support**: Built-in dark mode with class-based toggling (default)
+- **Animation Utilities**: Pre-built fade, slide, and scale animations
+- **Custom Color Palette**: EreoJS brand colors (`ereo-50` through `ereo-950`)
+- **Typography Defaults**: Inter and JetBrains Mono font families
+- **Virtual CSS Module**: Import Tailwind via `virtual:tailwind.css`
+- **Config Generation**: Helper functions to generate Tailwind config files
+
+## EreoJS Preset
+
+The preset includes the following extensions:
+
+### Color Palette
+
+| Class | Hex |
+|-------|-----|
+| `ereo-50` | `#f5f7ff` |
+| `ereo-100` | `#ebf0fe` |
+| `ereo-200` | `#d6e0fd` |
+| `ereo-300` | `#b3c7fb` |
+| `ereo-400` | `#8aa8f8` |
+| `ereo-500` | `#6285f4` |
+| `ereo-600` | `#4361ee` |
+| `ereo-700` | `#3451d1` |
+| `ereo-800` | `#2c43aa` |
+| `ereo-900` | `#273b87` |
+| `ereo-950` | `#1a2552` |
+
+### Animations
+
+- `animate-fade-in` - Fade in (0.2s ease-out)
+- `animate-slide-in` - Slide in from left (0.3s ease-out)
+- `animate-slide-up` - Slide up from bottom (0.3s ease-out)
+- `animate-scale-in` - Scale in (0.2s ease-out)
+
+### Extended Spacing
+
+- `18` = 4.5rem (72px)
+- `88` = 22rem (352px)
+- `128` = 32rem (512px)
+
+### Font Families
+
+- `font-sans`: Inter, ui-sans-serif, system-ui, ...
+- `font-mono`: JetBrains Mono, ui-monospace, ...
+
+### Additional Utilities
+
+- Border radius: `rounded-4xl` (2rem)
+- Box shadow: `shadow-inner-sm`
+- Z-index: `z-60`, `z-70`, `z-80`, `z-90`, `z-100`
+
+## Using the Preset
+
+```typescript
+// tailwind.config.js
+import { getEreoTailwindConfig } from '@ereo/plugin-tailwind'
+
+export default getEreoTailwindConfig({
+  // Add your customizations here
+  theme: {
+    extend: {
+      colors: {
+        brand: '#ff6b6b'
+      }
+    }
+  }
+})
+```
+
+## Virtual CSS Module
+
+Import Tailwind styles without creating a CSS file:
+
+```typescript
+import 'virtual:tailwind.css'
+```
+
+## Helper Functions
+
+### generateConfig(options?)
+
+Generate Tailwind config file content:
+
+```typescript
+import { generateConfig } from '@ereo/plugin-tailwind'
+
+const configContent = generateConfig()
+```
+
+### generateCSSEntry()
+
+Generate CSS entry file content:
+
+```typescript
+import { generateCSSEntry } from '@ereo/plugin-tailwind'
+
+const cssContent = generateCSSEntry()
+// Returns:
+// @tailwind base;
+// @tailwind components;
+// @tailwind utilities;
+//
+// /* Custom styles below */
+```
+
+## Exports
+
+```typescript
+// Default export
+import tailwind from '@ereo/plugin-tailwind'
+
+// Named exports
+import {
+  ereoPreset,
+  getEreoTailwindConfig,
+  generateConfig,
+  generateCSSEntry
+} from '@ereo/plugin-tailwind'
+
+// Types
+import type { TailwindPluginOptions } from '@ereo/plugin-tailwind'
+```
+
+## Documentation
+
+For full documentation, visit the [EreoJS Documentation](https://ereojs.dev/docs/plugins/tailwind).
+
+## Part of EreoJS
+
+This package is part of the [EreoJS](https://github.com/ereojs/ereo) monorepo - a modern full-stack JavaScript framework.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @ereo/plugin-tailwind
+ *
+ * Zero-config Tailwind CSS integration for EreoJS.
+ */
+import type { Plugin } from '@ereo/core';
+/**
+ * Tailwind plugin options.
+ */
+export interface TailwindPluginOptions {
+    /** Content paths to scan (auto-detected by default) */
+    content?: string[];
+    /** Path to tailwind.config.js (auto-detected by default) */
+    config?: string;
+    /** Enable dark mode */
+    darkMode?: 'class' | 'media' | false;
+    /** Use EreoJS preset */
+    usePreset?: boolean;
+}
+/**
+ * Create Tailwind CSS plugin.
+ *
+ * @example
+ * import { defineConfig } from '@ereo/core';
+ * import tailwind from '@ereo/plugin-tailwind';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     tailwind(), // Zero-config
+ *   ],
+ * });
+ */
+export default function tailwind(options?: TailwindPluginOptions): Plugin;
+export { ereoPreset, getEreoTailwindConfig } from './preset';
+/**
+ * Generate Tailwind config file content.
+ */
+export declare function generateConfig(options?: TailwindPluginOptions): string;
+/**
+ * Generate CSS entry file.
+ */
+export declare function generateCSSEntry(): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAGzC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;IACrC,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAYD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CA+F5E;AAGD,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAE7D;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CAwB1E;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAQzC"}

package/dist/index.js

@@ -0,0 +1,224 @@
+// @bun
+// src/index.ts
+import { join } from "path";
+
+// src/preset.ts
+var ereoPreset = {
+  theme: {
+    extend: {
+      animation: {
+        "fade-in": "fadeIn 0.2s ease-out",
+        "slide-in": "slideIn 0.3s ease-out",
+        "slide-up": "slideUp 0.3s ease-out",
+        "scale-in": "scaleIn 0.2s ease-out"
+      },
+      keyframes: {
+        fadeIn: {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" }
+        },
+        slideIn: {
+          "0%": { transform: "translateX(-10px)", opacity: "0" },
+          "100%": { transform: "translateX(0)", opacity: "1" }
+        },
+        slideUp: {
+          "0%": { transform: "translateY(10px)", opacity: "0" },
+          "100%": { transform: "translateY(0)", opacity: "1" }
+        },
+        scaleIn: {
+          "0%": { transform: "scale(0.95)", opacity: "0" },
+          "100%": { transform: "scale(1)", opacity: "1" }
+        }
+      },
+      fontFamily: {
+        sans: [
+          "Inter",
+          "ui-sans-serif",
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "Roboto",
+          "sans-serif"
+        ],
+        mono: [
+          "JetBrains Mono",
+          "ui-monospace",
+          "SFMono-Regular",
+          "Menlo",
+          "Monaco",
+          "monospace"
+        ]
+      },
+      spacing: {
+        "18": "4.5rem",
+        "88": "22rem",
+        "128": "32rem"
+      },
+      colors: {
+        ereo: {
+          50: "#f5f7ff",
+          100: "#ebf0fe",
+          200: "#d6e0fd",
+          300: "#b3c7fb",
+          400: "#8aa8f8",
+          500: "#6285f4",
+          600: "#4361ee",
+          700: "#3451d1",
+          800: "#2c43aa",
+          900: "#273b87",
+          950: "#1a2552"
+        }
+      },
+      borderRadius: {
+        "4xl": "2rem"
+      },
+      boxShadow: {
+        "inner-sm": "inset 0 1px 2px 0 rgb(0 0 0 / 0.05)"
+      },
+      zIndex: {
+        "60": "60",
+        "70": "70",
+        "80": "80",
+        "90": "90",
+        "100": "100"
+      }
+    }
+  },
+  plugins: []
+};
+function getEreoTailwindConfig(overrides = {}) {
+  return {
+    presets: [ereoPreset],
+    content: [
+      "./app/**/*.{js,ts,jsx,tsx}",
+      "./components/**/*.{js,ts,jsx,tsx}"
+    ],
+    darkMode: "class",
+    ...overrides,
+    theme: {
+      extend: {
+        ...ereoPreset.theme.extend,
+        ...overrides.theme?.extend
+      }
+    }
+  };
+}
+
+// src/index.ts
+var defaults = {
+  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
+  config: "tailwind.config.js",
+  darkMode: "class",
+  usePreset: true
+};
+function tailwind(options = {}) {
+  const opts = { ...defaults, ...options };
+  let tailwindCSS = null;
+  let configLoaded = false;
+  return {
+    name: "ereo:tailwind",
+    async setup(context) {
+      const root = context.root;
+      const configPath = join(root, opts.config);
+      try {
+        const hasConfig = await Bun.file(configPath).exists();
+        if (hasConfig) {
+          console.log("  Using existing tailwind.config.js");
+          configLoaded = true;
+        } else {
+          if (opts.usePreset) {
+            console.log("  Using EreoJS Tailwind preset");
+          }
+        }
+      } catch (error) {
+        console.warn("  Warning: Could not check for Tailwind config");
+      }
+    },
+    resolveId(id) {
+      if (id === "virtual:tailwind.css" || id === "/__tailwind.css") {
+        return "\x00virtual:tailwind.css";
+      }
+      return null;
+    },
+    async load(id) {
+      if (id === "\x00virtual:tailwind.css") {
+        if (tailwindCSS) {
+          return tailwindCSS;
+        }
+        return `
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+        `.trim();
+      }
+      return null;
+    },
+    async transform(code, id) {
+      if (!id.endsWith(".css")) {
+        return null;
+      }
+      if (!code.includes("@tailwind")) {
+        return null;
+      }
+      return code;
+    },
+    async configureServer(server) {
+      server.middlewares.push(async (request, context, next) => {
+        const url = new URL(request.url);
+        if (url.pathname === "/__tailwind.css") {
+          const css = `
+/* Tailwind CSS - Development Mode */
+@import url('https://cdn.tailwindcss.com');
+          `.trim();
+          return new Response(css, {
+            headers: {
+              "Content-Type": "text/css",
+              "Cache-Control": "no-cache"
+            }
+          });
+        }
+        return next();
+      });
+    }
+  };
+}
+function generateConfig(options = {}) {
+  const opts = { ...defaults, ...options };
+  if (opts.usePreset) {
+    return `
+import { getEreoTailwindConfig } from '@ereo/plugin-tailwind';
+
+export default getEreoTailwindConfig({
+  // Add your customizations here
+});
+    `.trim();
+  }
+  return `
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ${JSON.stringify(opts.content, null, 2)},
+  darkMode: '${opts.darkMode}',
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+  `.trim();
+}
+function generateCSSEntry() {
+  return `
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles below */
+  `.trim();
+}
+export {
+  getEreoTailwindConfig,
+  generateConfig,
+  generateCSSEntry,
+  ereoPreset,
+  tailwind as default
+};

package/dist/preset.d.ts

@@ -0,0 +1,200 @@
+/**
+ * @ereo/plugin-tailwind - Framework Preset
+ *
+ * Tailwind CSS preset with sensible defaults for EreoJS apps.
+ */
+/**
+ * EreoJS Tailwind preset.
+ */
+export declare const ereoPreset: {
+    theme: {
+        extend: {
+            animation: {
+                'fade-in': string;
+                'slide-in': string;
+                'slide-up': string;
+                'scale-in': string;
+            };
+            keyframes: {
+                fadeIn: {
+                    '0%': {
+                        opacity: string;
+                    };
+                    '100%': {
+                        opacity: string;
+                    };
+                };
+                slideIn: {
+                    '0%': {
+                        transform: string;
+                        opacity: string;
+                    };
+                    '100%': {
+                        transform: string;
+                        opacity: string;
+                    };
+                };
+                slideUp: {
+                    '0%': {
+                        transform: string;
+                        opacity: string;
+                    };
+                    '100%': {
+                        transform: string;
+                        opacity: string;
+                    };
+                };
+                scaleIn: {
+                    '0%': {
+                        transform: string;
+                        opacity: string;
+                    };
+                    '100%': {
+                        transform: string;
+                        opacity: string;
+                    };
+                };
+            };
+            fontFamily: {
+                sans: string[];
+                mono: string[];
+            };
+            spacing: {
+                '18': string;
+                '88': string;
+                '128': string;
+            };
+            colors: {
+                ereo: {
+                    50: string;
+                    100: string;
+                    200: string;
+                    300: string;
+                    400: string;
+                    500: string;
+                    600: string;
+                    700: string;
+                    800: string;
+                    900: string;
+                    950: string;
+                };
+            };
+            borderRadius: {
+                '4xl': string;
+            };
+            boxShadow: {
+                'inner-sm': string;
+            };
+            zIndex: {
+                '60': string;
+                '70': string;
+                '80': string;
+                '90': string;
+                '100': string;
+            };
+        };
+    };
+    plugins: never[];
+};
+/**
+ * Get Tailwind config with EreoJS preset.
+ */
+export declare function getEreoTailwindConfig(overrides?: Record<string, any>): {
+    theme: {
+        extend: any;
+    };
+    presets: {
+        theme: {
+            extend: {
+                animation: {
+                    'fade-in': string;
+                    'slide-in': string;
+                    'slide-up': string;
+                    'scale-in': string;
+                };
+                keyframes: {
+                    fadeIn: {
+                        '0%': {
+                            opacity: string;
+                        };
+                        '100%': {
+                            opacity: string;
+                        };
+                    };
+                    slideIn: {
+                        '0%': {
+                            transform: string;
+                            opacity: string;
+                        };
+                        '100%': {
+                            transform: string;
+                            opacity: string;
+                        };
+                    };
+                    slideUp: {
+                        '0%': {
+                            transform: string;
+                            opacity: string;
+                        };
+                        '100%': {
+                            transform: string;
+                            opacity: string;
+                        };
+                    };
+                    scaleIn: {
+                        '0%': {
+                            transform: string;
+                            opacity: string;
+                        };
+                        '100%': {
+                            transform: string;
+                            opacity: string;
+                        };
+                    };
+                };
+                fontFamily: {
+                    sans: string[];
+                    mono: string[];
+                };
+                spacing: {
+                    '18': string;
+                    '88': string;
+                    '128': string;
+                };
+                colors: {
+                    ereo: {
+                        50: string;
+                        100: string;
+                        200: string;
+                        300: string;
+                        400: string;
+                        500: string;
+                        600: string;
+                        700: string;
+                        800: string;
+                        900: string;
+                        950: string;
+                    };
+                };
+                borderRadius: {
+                    '4xl': string;
+                };
+                boxShadow: {
+                    'inner-sm': string;
+                };
+                zIndex: {
+                    '60': string;
+                    '70': string;
+                    '80': string;
+                    '90': string;
+                    '100': string;
+                };
+            };
+        };
+        plugins: never[];
+    }[];
+    content: string[];
+    darkMode: "class";
+};
+export default ereoPreset;
+//# sourceMappingURL=preset.d.ts.map

package/dist/preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGtB,CAAC;AAEF;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBxE;AAED,eAAe,UAAU,CAAC"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ereo/plugin-tailwind",
+  "version": "0.1.6",
+  "license": "MIT",
+  "author": "Ereo Team",
+  "homepage": "https://ereo.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ereojs/ereo.git",
+    "directory": "packages/plugin-tailwind"
+  },
+  "bugs": {
+    "url": "https://github.com/ereojs/ereo/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun build ./src/index.ts --outdir ./dist --target bun --external @ereo/core --external tailwindcss && bun run build:types",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "dev": "bun build ./src/index.ts --outdir ./dist --target bun --watch",
+    "test": "bun test",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@ereo/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.1.0",
+    "typescript": "^5.4.0"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  }
+}