The Tailwind classes AI agents reach for, and what to write instead
Ask Claude Code, Cursor or Lovable for a landing page in Tailwind and the same few classes come back: an indigo or violet accent, a blurred glass card, a coloured glow shadow, a row of three identical boxes. This page lists the exact class names that give the default look away, what to write instead, and the one accessibility class that agents often get wrong.
The class names to look for
These are the patterns a checker can find by reading the class names in your markup. Search your project for them (a plain text search is enough).
| You find | Why it reads as default | Write instead |
|---|---|---|
bg-indigo-600, from-violet-500, to-purple-600, text-indigo-500, ring-violet-400 (shades 400 to 700) | Tailwind's own indigo, violet and purple are what an agent picks when no colour was chosen. | One colour chosen for this subject, named once as a theme token and used by name. |
backdrop-blur-md, backdrop-blur-xl | Frosted glass over a gradient is the second most common tell after the gradient itself. | A solid surface colour with a 1px border to separate layers. |
shadow-2xl, shadow-indigo-500/30, blur-3xl blobs | Large soft shadows and glows make every card float the same way. | No shadow, or one small neutral shadow. Use a border or a background step to show depth. |
grid-cols-3 over three boxes that each have rounded-xl p-6 shadow | Three equal cards with an icon each is the shape of most generated feature sections. | Show the three things in the form that fits them: a ruled list, a table, numbered steps or two sentences of prose. |
font-inter, font-['Inter'], font-roboto, font-poppins | The font an agent picks when nobody chose one. | A deliberate stack, for example Georgia or Charter for text, or a system sans, set once in the theme. |
Set the choices once, in the theme
The fix that lasts is to define your palette and fonts in one place and tell the agent to use only those. In Tailwind v4 that is the @theme block in your CSS file:
@import "tailwindcss";
@theme {
--color-paper: #fbf6ec;
--color-ink: #1d1a16;
--color-accent: #8a2a1f;
--font-sans: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
--font-serif: Georgia, "Times New Roman", serif;
}Those values are an example, not a recommendation: pick your own, and check that text on its background reaches a 4.5:1 contrast ratio (WCAG 2.2 success criterion 1.4.3). Then add a line to your agent's rules file: use only paper, ink and accent colours and the two font families above, and never an indigo, violet or purple utility. Naming the specific classes to avoid works better than "make it look original", because a general instruction tends to swap one default for another.
The accessibility class agents get wrong
outline-none removes the browser's focus ring. Agents add it to inputs and buttons to tidy the look and leave nothing in its place, so keyboard users cannot see where they are (WCAG 2.2 success criterion 2.4.7, Focus Visible). If you use it, pair it with a replacement on the same element:
<button class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
Book a class
</button>The same applies to plain CSS: a rule such as .btn:focus { outline: none; } needs a .btn:focus-visible rule with an outline or box-shadow beside it. Changing only the border colour on focus is a weak cue and may not be visible against the page.
Check the result
You can search for the classes in the table by hand. To scan a whole page at once, paste its HTML or Tailwind markup into the free AI design tells checker. It runs in your browser, reports the line and a fix for each finding, and it only reads the class names written in the markup you paste: it does not run Tailwind, read tailwind.config or follow imports, so class names built at run time are invisible to it. The same engine is the MIT-licensed slop-lint command line tool if you want it in a script.
If you would rather start from a finished look than remove defaults, Looksheet has five original looks with a DESIGN.md, working pages and rules files for Claude Code, Cursor and Copilot, and a free DESIGN.md template shows the shape of the file. The guide to the tells explains why agents produce this look.