Getting Tailwind CSS Right in AI Prompts

Why Tailwind Prompts Fail

You tell the AI "use Tailwind CSS" and the generated code looks nothing like what you had in mind. The colors are off, the spacing feels wrong, and half the classes don't even exist in Tailwind v4. Sound familiar?

The problem isn't the AI — it's the prompt. Tailwind is highly configurable, and without specifics, the model makes dozens of decisions you probably disagree with.

Always Specify the Version

Tailwind v3 and v4 have meaningfully different APIs. In v4, the config file is gone — you configure everything via CSS using `@theme` blocks. In v3, you use `tailwind.config.ts`. If you don't specify which version, the AI will guess, and it often guesses wrong.

Add to your prompt: "Tailwind CSS v4 with `@import 'tailwindcss'` in globals.css and `@theme inline` for custom tokens."

Name Your Component Library

Shadcn/UI, DaisyUI, and Flowbite all sit on top of Tailwind but generate very different code. Shadcn uses Radix UI primitives; DaisyUI uses semantic class names. Tell the AI which one you want, including the base color if you're using Shadcn.

Example: "Shadcn/UI components with the `slate` base color and `zinc` for neutral surfaces."

Define Your Design Tokens Upfront

The AI can't read your mind about your brand colors. Give it a design token block in the prompt:

``` Primary: #6C47FF Background: #0A0A0F Surface: #14141C Border: #2A2A3A Text muted: #8888AA ```

When these are in the prompt, the AI will use them consistently across every component. Without them, you'll get a different shade of blue on every element.

Specify Dark Mode Strategy

Tailwind supports three dark mode strategies: `media` (system preference), `class` (manual toggle), and `selector`. If you want a permanently dark site, say "dark mode always active" — otherwise you might get a light-mode default with broken dark styles.

The Typography Setup

If you're using `@tailwindcss/typography` for blog or docs content, mention it explicitly and specify the prose variant: "Use prose-invert for dark backgrounds with prose-sm for sidebar content."

Putting It All Together

A complete Tailwind spec in your prompt looks like this:

"Use Tailwind CSS v4 with `@import 'tailwindcss'`. Shadcn/UI components with slate base color. Custom colors: primary `#6C47FF`, background `#0A0A0F`. Dark mode always active (no toggle). Geist Sans for headings, Inter for body."

This single paragraph eliminates the most common sources of Tailwind-related AI output failures. WebPromptify generates this kind of Tailwind spec automatically — try it on your next project.