@ramdasiakshay01/tailwind-config 1.0.3 → 2.0.1

package/package.json

@@ -1,11 +1,20 @@
 {
   "name": "@ramdasiakshay01/tailwind-config",
-  "version": "1.0.3",
+  "version": "2.0.1",
   "description": "Shared Tailwind CSS v4 configuration for organization",
   "main": "index.css",
+  "exports": {
+    ".": "./src/index.css",
+    "./theme": "./src/theme/index.css",
+    "./theme/colors": "./src/theme/colors.css",
+    "./theme/radius": "./src/theme/radius.css",
+    "./theme/shadows": "./src/theme/shadows.css",
+    "./base": "./src/base/index.css",
+    "./base/reset": "./src/base/reset.css",
+    "./base/dark-mode": "./src/base/dark-mode.css"
+  },
   "files": [
-    "index.css",
-    "tailwind.config.js"
+    "src"
   ],
   "peerDependencies": {
     "tailwindcss": "^4.0.0"

package/src/base/dark-mode.css

@@ -0,0 +1,10 @@
+@layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  /* Support the .dark class on the html/body tag */
+  :is(.dark) {
+    color-scheme: dark;
+  }
+}

package/src/base/index.css

@@ -0,0 +1,3 @@
+/* Import all base modules */
+@import './dark-mode.css';
+@import './reset.css';

package/src/base/reset.css

@@ -0,0 +1,8 @@
+/* Global reset and base styles */
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--color-bg);
+  color: var(--color-text-primary);
+}

package/src/index.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@import './theme/index.css';
+@import './base/index.css';

package/src/theme/colors.css

@@ -0,0 +1,23 @@
+@theme {
+  /* Background colors */
+  --color-bg: light-dark(#f9fafb, #0f172a);
+  --color-surface: light-dark(#ffffff, #1e293b);
+  --color-border: light-dark(#e5e7eb, #334155);
+
+  /* Text colors */
+  --color-text-primary: light-dark(#1f2937, #f1f5f9);
+  --color-text-secondary: light-dark(#4b5563, #cbd5e1);
+
+  /* Primary brand colors */
+  --color-primary: light-dark(#0064e0, #0064e0);
+  --color-primary-hover: light-dark(#3b5b92, #60a5fa);
+
+  /* Secondary brand colors */
+  --color-secondary: light-dark(#2f9e44, #22c55e);
+  --color-secondary-hover: light-dark(#4cc46a, #4ade80);
+
+  /* Semantic colors */
+  --color-success: #16a34a;
+  --color-warning: #f59e0b;
+  --color-error: #dc2626;
+}

package/src/theme/index.css

@@ -0,0 +1,4 @@
+/* Import all theme modules */
+@import './colors.css';
+@import './radius.css';
+@import './shadows.css';

package/src/theme/radius.css

@@ -0,0 +1,6 @@
+@theme {
+  /* Border radius tokens */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+}

package/src/theme/shadows.css

@@ -0,0 +1,5 @@
+@theme {
+  /* Shadow tokens */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+}

package/index.css

@@ -1,53 +0,0 @@
-@import "tailwindcss";
-
-@theme {
-  /* Colors */
-  --color-primary-50: #eff6ff;
-  --color-primary-100: #dbeafe;
-  --color-primary-200: #bfdbfe;
-  --color-primary-500: #3b82f6;
-  --color-primary-600: #2563eb;
-  --color-primary-700: #1d4ed8;
-  --color-primary-900: #1e3a8a;
-
-  --color-secondary-500: #8b5cf6;
-  --color-secondary-600: #7c3aed;
-
-  /* Spacing */
-  --spacing-18: 4.5rem;
-  --spacing-22: 5.5rem;
-
-  /* Font families */
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
-
-  /* Font sizes */
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-
-  /* Border radius */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-
-  /* Breakpoints */
-  --breakpoint-sm: 640px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1280px;
-  --breakpoint-2xl: 1536px;
-}
-
-/* Custom utilities */
-@utility container-narrow {
-  max-width: 960px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}

package/tailwind.config.js

@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: 'class',
-  content: [], // IMPORTANT: leave empty
-  corePlugins: {
-    preflight: false,
-  },
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};