Repository files navigation

TailUI

The semantic CSS layer for Tailwind CSS

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

Documentation ·Components ·Examples

<!-- ❌ Before: Tailwind at scale --><buttonclass="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 --><buttonclass="ui-button ui-primary">Save</button>

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

npm install tailuicss

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

// postcss.config.jsplugins:{'tailuicss/postcss':{},tailwindcss:{},}

That's it. Start usingui-button,ui-card,ui-input, and20 more components.

• 🎨20 production-ready components — Button, Card, Modal, Input, Toast, and more
• 🌙Dark mode built-in — Onedata-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

👉Read the full documentation →

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

TailUI provides allms.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.

MIT