v2.4.0 — Light Edition

Stop writing
40 classes
per element.

TailUI is the semantic bridge for Tailwind. Write cleaner code, maintain your sanity, and build faster.

1<section class="ui-card ui-elevated ui-hoverable">
2  <header class="ui-header ui-sticky">
3    <h3>Analytics</h3>
4    <button class="ui-button ui-ghost ui-sm">...</button>
5  </header>
6  <div class="ui-body">
7    <p>Total users</p>
8    <strong>12,458</strong>
9  </div>
10  <footer class="ui-footer">
11    <button class="ui-button ui-secondary">Export</button>
12    <button class="ui-button ui-primary">Details</button>
13  </footer>
14</section>

Core Capabilities

Why TailUI? Built for builders.

Everything you need to build beautiful, maintainable UIs — without the utility class fatigue.

CSS-First

Zero JS runtime. Pure CSS selectors powered by Tailwind. No hydration cost.

Free Composition

Combine tokens freely. class="ui-card ui-elevated" just works.

Agnostic

Works with React, Vue, Svelte, or plain HTML. No dependencies.

Enterprise Ready

Built for scale. Tokens, themes, and whitelabel support.

Powerful CLI

Interactive setup with stack detection and AI configuration.

Dark Mode

First-class support via data-theme on all 20 components.

20 Components

Buttons, Cards, Modals, and more. Optimized for speed.

AI Generation

Generate accessible components with OpenAI, Claude or Gemini.

Developer Experience

Write CSS the way you love it.
Keep your components pure.

TailUI lets you combine custom CSS with Tailwind utilities in dedicated stylesheets. Maintain separation of concerns without losing the utility power.

The "Class Soup"

Button.tsx — Messy

// 😵 Logic mixed with 40+ classes
<button className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus:ring-blue-500' : 'bg-gray-100 text-gray-900 border border-gray-200'}`}>
  {children}
</button>

Style pollution makes logic hard to read. Conditional strings are a nightmare to maintain and prone to syntax errors.

TailUI Method

Button.tsx — Clean

// 😍 Semantic & Crystal Clear
<button className={`ui-button ui-${variant}`}>
  {children}
</button>

Style Implementation

.ui-button {
  @apply px-4 py-2 rounded-lg transition-all;
  &.ui-primary { @apply bg-brand-600 text-white; }
}

Perfect separation. Components stay lean. Styles are reusable, semantic, and powered by the full Tailwind engine.

Pure Separation

Logic in JS, styles in CSS. No more className sprawl.

Standard CSS

Use Nesting, Variables, and Media Queries natively.

Zero Runtime

All styles are compiled at build time. Super fast.

AI Friendly

LLMs write better components when styles are semantic.

I finally enjoy writing CSS again. TailUI gives me the utility power of Tailwind with the cleanliness of a world-class design system.

Alex Rivest

Lead Frontend Engineer

See the difference

Same result. Fraction of the code. All the readability.

Before — Raw Tailwind

1<!-- Raw Tailwind CSS -->
2<button class="px-4 py-2 bg-blue-600
3  text-white rounded-lg font-medium
4  transition-all duration-200 cursor-pointer
5  inline-flex items-center justify-center
6  gap-2 text-sm hover:bg-blue-700
7  active:bg-blue-800 shadow-sm
8  hover:shadow-md">
9  Save Changes
10</button>
11
12<div class="rounded-xl border border-gray-200
13  bg-white text-gray-800 overflow-hidden
14  shadow-lg transition-all duration-200
15  hover:shadow-2xl hover:-translate-y-1">
16  <div class="flex items-center justify-between
17    px-5 py-4 border-b border-gray-100
18    font-semibold">
19    Dashboard
20  </div>
21  <div class="p-5">Content here</div>
22</div>

After — TailUI

1<!-- TailUI -->
2<button class="ui-button ui-primary">
3  Save Changes
4</button>
5
6<div class="ui-card ui-elevated ui-hoverable">
7  <div class="ui-header">Dashboard</div>
8  <div class="ui-body">Content here</div>
9</div>

~80%

Less code

reduction in markup

0kb

Zero runtime

JavaScript overhead

100%

Full power

of Tailwind under the hood

Up and running in 60 seconds

Three steps. No complex configuration.

1Install

npm install tailuicss tailwindcss postcss autoprefixer

2Configure

config

// tailwind.config.js
plugins: [require('tailuicss')()]
// postcss.config.js
plugins: { 'tailuicss/postcss': {}, tailwindcss: {} }

3Use

index.html

<!-- That's it. Start using it. -->
<button class="ui-button ui-primary">Save</button>
<div class="ui-card ui-elevated ui-hoverable">
  <div class="ui-header">Dashboard</div>
  <div class="ui-body">Your content</div>
</div>

Already have a project?

Migrate your existing code

Got verbose Tailwind classes scattered across your components? One command converts them to clean, semantic .ui-* classes.

Before — verbose utilities

src/components/SaveButton.tsx

export function SaveButton() {
  return (
    <button 
      className="px-4 py-2 rounded-lg font-medium text-sm 
        bg-blue-600 text-white hover:bg-blue-700 
        active:bg-blue-800 shadow-sm hover:shadow-md 
        transition-all duration-200 cursor-pointer 
        inline-flex items-center justify-center gap-2"
    >
      Save Changes
    </button>
  );
}

The magic command

# Migrate this specific file
npx tailui migrate -f src/components/SaveButton.tsx
# Or preview changes first (dry-run)
npx tailui migrate -f src/components/SaveButton.tsx --dry-run
# Migrate all components in a directory
npx tailui migrate --all src/components

After — semantic classes

src/components/SaveButton.tsx

export function SaveButton() {
  return (
    <button className="ui-button ui-primary">
      Save Changes
    </button>
  );
}

Tag-first detection

HTML tags determine components — no guessing

Safe & reversible

Auto-backup before every change, undo anytime

Preserves structure

Keeps your margins, flex, grid classes intact

Ready to write cleaner CSS?

Start using TailUI today. No migration needed — it works alongside your existing Tailwind setup.

How to use ?Star on GitHub

Stop writing 40 classes per element.