@apollo-deploy/tailwind-config 1.0.0

package/index.js

@@ -0,0 +1,51 @@
+/**
+ * Shared Tailwind CSS configuration for the Apollo monorepo
+ * 
+ * This configuration is used by all three applications:
+ * - apollo-app
+ * - apollo-auth  
+ * - apollo-marketing
+ * 
+ * All applications use Tailwind CSS 4 with CSS variables defined in their globals.css
+ * The theme is defined using CSS custom properties and @theme inline directive
+ * 
+ * Common patterns across all apps:
+ * - CSS variables for colors (--background, --foreground, --primary, etc.)
+ * - Dark mode support via .dark class and @custom-variant
+ * - Custom radius values (sm, md, lg, xl)
+ * - Chart colors (chart-1 through chart-5)
+ * - Sidebar colors (for apollo-app)
+ * - Shadow and spacing utilities
+ * - Font families (sans, serif, mono)
+ * 
+ * Note: With Tailwind CSS 4, most theme configuration is done via CSS variables
+ * in the application's globals.css file using the @theme inline directive.
+ * This shared config is primarily for plugins and any JavaScript-based configuration.
+ * 
+ * Each application should:
+ * 1. Import this config
+ * 2. Define their content paths
+ * 3. Add any app-specific overrides if needed
+ * 
+ * @type {import('tailwindcss').Config}
+ */
+module.exports = {
+  theme: {
+    extend: {
+      // Theme extensions are handled via CSS variables in each app's globals.css
+      // using the @theme inline directive in Tailwind CSS 4
+      // 
+      // Common CSS variables across all apps:
+      // - Colors: background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring
+      // - Chart colors: chart-1 through chart-5
+      // - Radius: sm, md, lg, xl (calculated from --radius)
+      // - Fonts: sans, serif, mono
+      // - Shadows: 2xs, xs, sm, md, lg, xl, 2xl
+      // - Tracking: tighter, tight, normal, wide, wider, widest
+    },
+  },
+  plugins: [
+    // tw-animate-css provides animation utilities
+    // This is the only shared plugin across all applications
+  ],
+};

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@apollo-deploy/tailwind-config",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "main": "index.js",
+  "dependencies": {
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4"
+  }
+}

package/preset.js

@@ -0,0 +1,37 @@
+/**
+ * Shared Tailwind CSS preset for the Apollo monorepo
+ * 
+ * This configuration is used by all three applications:
+ * - apollo-app
+ * - apollo-auth
+ * - apollo-marketing
+ * 
+ * All applications use Tailwind CSS 4 with CSS variables defined in their globals.css
+ * The theme is defined using CSS custom properties and @theme inline directive
+ * 
+ * Common patterns:
+ * - CSS variables for colors (--background, --foreground, --primary, etc.)
+ * - Dark mode support via .dark class
+ * - Custom radius values
+ * - Chart colors (chart-1 through chart-5)
+ * - Sidebar colors
+ * - Shadow and spacing utilities
+ * 
+ * Note: With Tailwind CSS 4, most theme configuration is done via CSS variables
+ * in the application's globals.css file using the @theme inline directive.
+ * This preset file is primarily for shared plugins and any JavaScript-based configuration.
+ * 
+ * @type {import('tailwindcss').Config}
+ */
+module.exports = {
+  theme: {
+    extend: {
+      // Theme extensions are handled via CSS variables in each app's globals.css
+      // using the @theme inline directive in Tailwind CSS 4
+    },
+  },
+  plugins: [
+    // tw-animate-css provides animation utilities
+    // This is the only shared plugin across all applications
+  ],
+}