@clipto/tailwind-config

@clipto/tailwind-config

Tailwind CSS configuration package for Clipto UI Kit, providing design tokens from Figma in both Tailwind CSS v3 and v4 formats.

Installation

pnpm add @clipto/tailwind-config

Usage

Tailwind CSS v3

For Tailwind CSS v3, you need to:

1. Import the CSS variables file in your main CSS file:

@import "@clipto/tailwind-config/variables";

1. Import the JavaScript configuration in your tailwind.config.js:

// tailwind.config.js
import config from '@clipto/tailwind-config';

export default {
  ...config,
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
  ],
};

Or using CommonJS:

// tailwind.config.js
const config = require('@clipto/tailwind-config');

module.exports = {
  ...config,
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
  ],
};

Tailwind CSS v4

For Tailwind CSS v4, import the CSS file in your main CSS file:

@import "@clipto/tailwind-config/v4";
@import "tailwindcss";

Or directly:

@import "@clipto/tailwind-config/tailwind.css";

Design Tokens

This package includes design tokens extracted from Figma:

Colors

Base Colors (Semantic)

• primary: 50-900 scale with foreground
• success: 50-900 scale with foreground
• warning: 50-900 scale with foreground
• danger: 50-900 scale with foreground

Common Colors (from colors/common/*)

Available under the common namespace:

• common.blue: 50-900 scale
• common.zinc: 50-900 scale
• common.green: 50-900 scale
• common.yellow: 50-900 scale
• common.red: 50-900 scale
• common.purple: 50-900 scale
• common.pink: 50-900 scale
• common.cyan: 50-900 scale
• common.black: 50-900 scale (with DEFAULT: #000000)
• common.white: 50-900 scale (with DEFAULT: #ffffff)

Base Colors (from Figma colors/base/*)

• base.primary: 50, 900, foreground
• base.success: 50, 900, foreground
• base.warning: 50, 900, foreground
• base.danger: 50, 900, foreground
• base.default: 100, 200, 600, foreground

Content Colors

• content.text1: Primary text color
• content.text-white-1: White text color
• content.bg1: Primary background color
• content.bg2: Secondary background color
• content.text2: Secondary text color

Layout Colors

• layout.foreground: Layout foreground color
• layout.border1: Border color
• layout.divider: Divider color

Function Colors

• function.teriary-default: Tertiary default color

Spacing

• unit: 4px
• unit-2: 8px
• unit-3: 12px
• unit-4: 16px
• unit-6: 24px
• unit-8: 32px
• unit-10: 40px

Typography

• Font sizes: tiny (12px), medium (16px)
• Line heights: tiny (16px)
• Font family: Inter (with system fallbacks)

Border Radius

• small: 8px

Shadows

• shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.08)
• shadow-1: 0 4px 8px 0 rgba(0, 0, 0, 0.08)
• shadow-3: 0 16px 24px 0 rgba(0, 0, 0, 0.08)

Examples

Using colors

<div className="bg-primary-500 text-primary-foreground">
  Primary button
</div>

<div className="bg-success-500 text-success-foreground">
  Success message
</div>

<div className="bg-common-yellow-800 text-white">
  Warning with common color
</div>

<div className="text-content-text1 bg-content-bg1">
  Content area
</div>

Using spacing

<div className="p-unit-4 m-unit-2">
  Spaced content
</div>

Using shadows

<div className="shadow-1">
  Card with shadow
</div>

CSS Variables

All design tokens are available as CSS variables in variables.css. You can import this file separately if you need direct access to CSS variables:

@import "@clipto/tailwind-config/variables";

License

MIT