tailuicss

TailUI

The semantic CSS layer for Tailwind CSS

Stop writing 40 utility classes per element. Write ui-button ui-primary instead.

Documentation · Components · Examples

Why TailUI?

<!-- ❌ Before: Tailwind at scale -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium
  transition-all hover:bg-blue-700 active:bg-blue-800 shadow-sm
  disabled:opacity-50 disabled:cursor-not-allowed">
  Save
</button>

<!-- ✅ After: TailUI -->
<button class="ui-button ui-primary">Save</button>

Same output. 80% less code. Zero runtime. Pure CSS.

Quick Start

npm install tailuicss

// tailwind.config.js
plugins: [require('tailuicss')()]

// postcss.config.js
plugins: {
  'tailuicss/postcss': {},
  tailwindcss: {},
}

That's it. Start using ui-button, ui-card, ui-input, and 20 more components.

Features

• 🎨 20 production-ready components — Button, Card, Modal, Input, Toast, and more
• 🌙 Dark mode built-in — One data-theme="dark" attribute switches everything
• 🔧 Full Tailwind power — Use @apply, CSS variables, and all Tailwind utilities
• 📦 Framework agnostic — React, Vue, Svelte, Angular, Astro, plain HTML
• 🤖 AI generation — Generate typed components with OpenAI, Claude, Gemini, or Mistral
• 🔄 Migration CLI — Convert existing Tailwind code to TailUI automatically
• ⚡ Zero JS runtime — Pure CSS, no bundle bloat

Documentation

👉 Read the full documentation →

• Installation
• Configuration
• Components
• Dark Mode
• CLI Commands
• AI Generation
• Migration Guide

AI & Editor Integration

TailUI provides a llms.txt file for AI assistants and code editors:

https://tailuicss.com/llms.txt

Add this to your Cursor rules, Windsurf, or any AI-powered editor for perfect TailUI code generation.

License

MIT