@nuvia/tailwind-config

Tailwind CSS v4 preset for the Nuvia Design System.

Installation

pnpm add @nuvia/tailwind-config tailwindcss

Setup by Framework

Vite (React, Vue, Svelte, etc.)

pnpm add -D @tailwindcss/vite

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

pnpm add -D @tailwindcss/postcss

// postcss.config.mjs
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

Tailwind Config

Basic Setup

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

Extended Setup

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

/* 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 for complete setup instructions.