Tailwind CSS
Utility-first CSS framework with an optimizing compiler.
What Tailwind CSS is good at
- +Fast to build
- +Tiny production CSS
- +Design system in config
- −Verbose class lists
- −HTML looks noisy
Coding-agent prompt
Drop into Claude / Cursor to get idiomatic Tailwind CSS code.
You're styling with Tailwind CSS. Follow these rules: - Use utility classes directly in markup. Don't prematurely extract `@apply` unless a pattern truly repeats in 5+ places. - Define tokens in `tailwind.config` (`theme.extend.colors`) rather than one-off hex values in classes. - Use `@layer` for anything that must win over utilities. - Dark mode: `dark:` variants with `darkMode: "class"` if you control the class, or `"media"` to follow OS. - Prefer container queries (`@container`) over viewport breakpoints for component-level responsiveness. - Keep class lists readable — break long ones across lines or extract a component.
Beginner's guide to Tailwind CSS
In one line: Style your app by writing tiny utility classes instead of a separate stylesheet.
CSS is the language that tells the browser how things should look — colors, spacing, fonts. Tailwind gives you pre-made classes like `bg-blue-500` or `p-4` (padding) that you drop right onto your HTML elements. No switching between files.
Instead of painting with a custom palette for every room, Tailwind hands you a huge box of labeled crayons.
npm install -D tailwindcss @tailwindcss/postcssInstall Tailwind as a dev dependency.
Popular pairings with Tailwind CSS
Next.jsFrontendNext.js lists Tailwind CSS as a supported pairing.
shadcn/uiStyling / UI & Animationshadcn/ui lists Tailwind CSS as a supported pairing.
Headless UIStyling / UI & AnimationHeadless UI lists Tailwind CSS as a supported pairing.
daisyUIStyling / UI & AnimationdaisyUI lists Tailwind CSS as a supported pairing.
HeroUIStyling / UI & AnimationHeroUI lists Tailwind CSS as a supported pairing.