Tailwind CSS v4 — Utility-First CSS Framework

What it is

Tailwind CSS is the most popular utility-first CSS framework. Version 4 rewrites the core engine in Rust, delivering 10x faster build times, automatic content detection (no more configuring content paths), and a simplified setup that requires zero configuration files.

Tailwind targets frontend developers who prefer composing UI directly in HTML with utility classes rather than writing custom CSS files. It is used by teams of all sizes, from solo developers to large enterprises.

How it saves time or tokens

Traditional CSS requires naming classes, organizing stylesheets, and managing specificity conflicts. Tailwind eliminates this: you write flex items-center gap-4 p-6 bg-white rounded-xl directly in your HTML. The v4 engine detects which classes you use automatically, so the final CSS bundle contains only what is needed.

For AI-generated UIs, Tailwind is ideal because LLMs can produce working UI code in a single HTML file without creating separate CSS files.

How to use

1. Install Tailwind CSS v4:

npm install tailwindcss @tailwindcss/vite

1. Import Tailwind in your CSS:

/* app.css */
@import "tailwindcss";

1. Use utility classes in your HTML:

<div class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-md">
  <img class="w-12 h-12 rounded-full" src="avatar.jpg" />
  <div>
    <h2 class="text-lg font-semibold text-gray-900">Jane Smith</h2>
    <p class="text-sm text-gray-500">Software Engineer</p>
  </div>
</div>

Example

<!-- Responsive card grid with Tailwind v4 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-8">
  <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-lg transition-shadow">
    <h3 class="text-xl font-bold text-gray-900">Project Alpha</h3>
    <p class="mt-2 text-gray-600">A description of the project.</p>
    <div class="mt-4 flex gap-2">
      <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">React</span>
      <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">TypeScript</span>
    </div>
  </div>
</div>

Related on TokRepo

• AI Tools for Design -- Design tools and UI frameworks for developers
• AI Tools for Coding -- Development tools for frontend and full-stack work

Common pitfalls

• Tailwind v4 has breaking changes from v3. The configuration file format changed, and some utility names were renamed. Check the migration guide before upgrading.
• Long lists of utility classes can make HTML hard to read. Extract common patterns into components (React/Vue/Svelte) rather than creating custom CSS classes.
• Tailwind's JIT engine in v4 requires a build step. It does not work by including a CDN script in production (the CDN version is for prototyping only).