tailcss - Tailwind-like API for Design Systems

A JavaScript/TypeScript library that provides an isolated and flexible Tailwind-like API for building design systems. Create customizable, reusable design tokens with a powerful utility-first approach.

Features

• 🎨 Design System First - Built specifically for design systems and component libraries
• 📦 Multiple Export Formats - ES modules, UMD, and CommonJS
• 🔧 TypeScript Support - Fully typed with TypeScript
• ⚡ Zero Dependencies - Lightweight and dependency-free
• 📚 Storybook Ready - Includes Storybook for component documentation
• 🧹 Code Quality - ESLint, Stylelint, and Prettier configured

Installation

npm install tailcss
# or
pnpm install tailcss
# or
yarn add tailcss

Usage

import tailcss from 'tailcss';

// Combine utility classes
const className = tailcss('flex', 'flex-row', 'gap-4', 'p-8');
// Result: 'flex flex-row gap-4 p-8'

Development

Setup

Install dependencies:

pnpm install

Available Scripts

• pnpm dev - Start Vite dev server
• pnpm build - Build the library (TypeScript + Vite)
• pnpm preview - Preview production build
• pnpm storybook - Start Storybook dev server (port 6006)
• pnpm build:storybook - Build Storybook for production
• pnpm test - Run tests with Vitest
• pnpm test:ui - Run tests with Vitest UI dashboard

Code Quality

• pnpm lint - Run ESLint
• pnpm lint:fix - Fix ESLint issues
• pnpm style - Check CSS/SCSS with Stylelint
• pnpm style:fix - Fix style issues
• pnpm format - Format code with Prettier
• pnpm format:check - Check formatting without modifying

Project Structure

tailcss/
├── src/
│   ├── __tests__/           # Test files
│   │   └── tailcss.test.ts
│   ├── components/          # React components
│   │   ├── Button.tsx
│   │   └── Button.stories.ts
│   ├── docs/                # Documentation stories
│   │   └── tailcss.stories.tsx
│   └── index.ts             # Main entry point
├── .storybook/              # Storybook configuration
├── dist/                    # Build output
├── .eslintrc.js             # ESLint configuration
├── .prettierrc.json         # Prettier configuration
├── .stylelintrc.json        # Stylelint configuration
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts           # Vite configuration
├── vitest.config.ts         # Vitest configuration
└── package.json

Technologies

• TypeScript - For type safety
• Vite - Fast build tool and dev server
• React - For component examples and Storybook
• Storybook - Component documentation
• Vitest - Unit testing framework
• ESLint - Code linting
• Stylelint - CSS/SCSS linting
• Prettier - Code formatting

Build Output

The library is built with multiple export formats:

• ES Module - dist/tailcss.js (default)
• UMD - dist/tailcss.umd.js (universal)
• CommonJS - dist/tailcss.cjs (Node.js)

Contributing

1. Create a feature branch
2. Make your changes
3. Run pnpm format and pnpm lint:fix to ensure code quality
4. Commit your changes
5. Open a pull request

License

Apache-2.0

Author

Jean-Michel FRANCOIS