@nuvia/tailwind-config 1.0.0 → 1.1.1

package/README.md

@@ -1,6 +1,6 @@
 # @nuvia/tailwind-config
 
-Tailwind CSS preset for the Nuvia Design System.
+Tailwind CSS v4 preset for the Nuvia Design System.
 
 ## Installation
 
@@ -8,7 +8,44 @@ Tailwind CSS preset for the Nuvia Design System.
 pnpm add @nuvia/tailwind-config tailwindcss
 ```
 
-## Usage
+## Setup by Framework
+
+### Vite (React, Vue, Svelte, etc.)
+
+```bash
+pnpm add -D @tailwindcss/vite
+```
+
+```typescript
+// vite.config.ts
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
+```
+
+### Next.js / Webpack / Other
+
+```bash
+pnpm add -D @tailwindcss/postcss
+```
+
+```javascript
+// postcss.config.mjs
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
+```
+
+## Tailwind Config
 
 ### Basic Setup
 
@@ -28,23 +65,59 @@ export default {
   ...config,
   content: [
     ...config.content,
-    "./app/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@nuvia/components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       ...config.theme?.extend,
       // Your custom extensions
+      colors: {
+        ...config.theme?.extend?.colors,
+        custom: "#ff0000",
+      },
     },
   },
 } satisfies Config;
 ```
 
+## CSS File
+
+```css
+/* globals.css */
+@import "tailwindcss";
+@import "@nuvia/components/styles/globals.css";
+
+@config "./tailwind.config.ts";
+```
+
+> **Note:** In Tailwind v4, `@import` must come before `@config`.
+
 ## Included Features
 
-- Dark mode support (`class` strategy)
-- Nuvia brand colors (zafiro, madrugada, nimbus, indigo, lumen, lilas, magenta, magma)
-- Semantic color tokens (background, foreground, border, etc.)
-- Animation keyframes (accordion, fade)
-- Typography plugin configuration
-- tailwindcss-animate plugin
+### Colors
+
+| Type | Colors |
+|------|--------|
+| **Brand** | zafiro, madrugada, nimbus, indigo, lumen, lilas, magenta, magma |
+| **Semantic** | background, foreground, card, popover, primary, secondary, muted, accent, destructive |
+| **Feedback** | success, warning, danger |
+| **UI** | border, input, ring, sidebar, chart-1 to chart-5 |
+
+### Plugins
+
+- `tailwindcss-animate` — Animation utilities
+- `@tailwindcss/typography` — Prose styling
+
+### Animations
+
+- `accordion-down` / `accordion-up`
+- `fade-in` / `fade-out`
+
+### Dark Mode
+
+Configured with `darkMode: "class"` strategy. Add `dark` class to enable.
+
+## Usage with @nuvia/components
+
+This package is designed to work with `@nuvia/components`. See the [@nuvia/components README](../components/README.md) for complete setup instructions.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvia/tailwind-config",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@tailwindcss/typography": "^0.5.15",
     "tailwindcss-animate": "^1.0.7",
-    "@nuvia/tokens": "1.0.0"
+    "@nuvia/tokens": "1.1.1"
   },
   "devDependencies": {
     "tailwindcss": "^4.1.18",