open-index/open-npm huggingface dataset:
npm package: @nuvia/tailwind-config
Description: Tailwind CSS v4 preset for the Nuvia Design System.
Latest version: 1.6.0

# @nuvia/tailwind-config

Tailwind CSS v4 preset for the Nuvia Design System.

## Installation

```bash
pnpm add @nuvia/tailwind-config tailwindcss
```

## 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

```typescript
// tailwind.config.ts
export { config as default } from "@nuvia/tailwind-config";
```

### Extended Setup

```typescript
// tailwind.config.ts
import { config } from "@nuvia/tailwind-config";
import type { Config } from "tailwindcss";

export default {
  ...config,
  content: [
    ...config.content,
    "./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

### 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.