@artivism/tailwind-preset

Tailwind v4 CSS utilities for the Artivism Design System.

Installation

npm install @artivism/tailwind-preset

Usage

Tailwind v4 (CSS mode)

Import directly in your globals.css:

@import "tailwindcss";
@import "@artivism/tokens/dist/index.css";
@import "@artivism/tailwind-preset";

Tailwind v3 (Config mode - Legacy)

Use the v3 export in your tailwind.config.ts:

import preset from "@artivism/tailwind-preset/v3";

export default {
  presets: [preset],
  // your config
};

Included Utilities

This preset provides utility classes for:

• Background colors: .bg-primary, .bg-secondary, .bg-accent, etc.
• Text colors: .text-primary, .text-muted-foreground, etc.
• Border colors: .border-border, .border-ring, etc.
• Border radius: .rounded-full, .rounded-xl, .rounded-lg, etc.
• Hover states: .hover:bg-primary/90, .hover:text-accent-foreground, etc.
• Focus states: .focus-visible:ring-ring/50, etc.

All utilities use CSS variables from @artivism/tokens.

Version

• v0.2.0+: Tailwind v4 CSS utilities (default export)
• v0.1.x: Tailwind v3 config preset (available at /v3 export)