Tailwind CSS lets you style websites by adding small class names directly to your HTML — no separate CSS files needed. Think of it like LEGO blocks for design: snap together small pieces to build any look you want. This guide covers everything you need to know.
Tailwind CSS is a "utility-first" CSS framework. In plain English: instead of writing long CSS files to style your website, you add short class names directly to your HTML elements. Each class does one small thing — like setting a color, adding padding, or rounding corners.
For example, the classes bg-blue-500 text-white p-4 rounded-lg give you a blue background, white text, some padding (breathing room), and rounded corners. That is four tiny instructions that create a polished-looking box — no CSS file required.
Think of traditional CSS like painting a house with custom-mixed colors — you have to create every color from scratch. Tailwind is like having a paint store with thousands of pre-mixed colors ready to go. Just pick the one you need and apply it.
Tailwind is the most popular CSS framework in the world. It is free, open source, and used by companies like Netflix, Shopify, and GitHub. Most AI coding tools generate Tailwind CSS by default because it is so widely adopted.
Whether you are using AI tools or coding by hand, Tailwind makes styling faster and more consistent. It works with every framework.
Most AI tools (Cursor, Bolt, Lovable, Claude Code) generate Tailwind by default. Understanding the basics helps you read and tweak what they create.
No more switching between HTML and CSS files. No more inventing class names. Just add utility classes right where you need them.
Tailwind comes with a built-in design system — consistent colors, spacing, and sizes. Everyone on the team uses the same building blocks.
Pricing: Tailwind CSS is completely free and open source. The team also sells Tailwind UI (pre-built component templates) starting at $149, but you absolutely do not need it — especially when using AI tools that generate components for you.
If you are using Bolt, Lovable, Cursor, or Claude Code, Tailwind is usually already set up for you. Most AI tools include it automatically when they create a new project.
Every Tailwind class follows a pattern: what-you-want-value. For example, 'text-red-500' means 'text color, red, medium shade.' Once you see the pattern, it starts to click.
Learn a handful of classes first: bg- (background color), text- (text color), p- (padding), m- (margin), rounded- (rounded corners), font- (font weight). These cover 80% of what you will use.
Go to tailwindcss.com/docs whenever you need to find a class. The search is excellent — type what you want (like 'shadow') and it shows you every option.
When you want a specific style, just describe it to your AI tool. Say 'make this card have a subtle shadow and rounded corners' and it will pick the right Tailwind classes for you.
Pre-built classes for colors, spacing, sizing, borders, shadows, typography, and more. Everything you need to style any design.
Add sm:, md:, or lg: before any class to make it apply only on certain screen sizes. 'hidden sm:block' hides something on phones but shows it on larger screens.
Add dark: before any class to set its dark mode style. 'bg-white dark:bg-gray-900' means white background normally, dark background in dark mode.
Add hover: or focus: before classes for interactive styles. 'hover:bg-blue-600' changes the background to a darker blue when someone hovers over it.
Tailwind only includes the classes you actually use in your final build. Your CSS file stays small, which makes your website load faster.
Change colors, fonts, spacing, and breakpoints in a config file. Build your own design system or extend the defaults.
If you find yourself repeating the same group of classes, you can combine them into a custom class using @apply. Like creating a shortcut.
Add extra features like typography styling, forms, animations, and more through official and community plugins.
The most commonly used Tailwind classes, organized by category. You do not need to memorize these — just know they exist so you can ask your AI tool to use them.
p-4 (padding all sides) | px-6 (padding left & right) | py-2 (padding top & bottom) | m-4 (margin all sides) | mt-8 (margin top) | mb-4 (margin bottom) | gap-4 (gap between grid/flex items)
text-white | text-gray-500 | text-blue-600 | bg-white | bg-gray-100 | bg-blue-500 | border-gray-200 | Colors go from 50 (lightest) to 950 (darkest)
text-sm (small) | text-base (normal) | text-lg (large) | text-xl (extra large) | font-bold | font-semibold | font-normal | leading-relaxed (line height) | tracking-tight (letter spacing)
flex (flexbox) | grid (CSS grid) | grid-cols-2 (2 columns) | grid-cols-3 (3 columns) | items-center (vertical center) | justify-center (horizontal center) | justify-between (space between)
w-full (full width) | w-1/2 (half width) | h-screen (full viewport height) | max-w-md (max width medium) | max-w-4xl (max width large) | min-h-screen
border (thin border) | border-2 (thicker) | rounded (slight round) | rounded-lg (more round) | rounded-full (circle) | shadow-sm | shadow-md | shadow-lg
sm: (640px+) | md: (768px+) | lg: (1024px+) | xl: (1280px+) | Example: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' = 1 column on mobile, 2 on tablet, 3 on desktop
Copy these prompts into your AI tool whenever you need help with styling. They work in Cursor, Claude Code, Bolt, Lovable, and any other AI coding tool.
1. Center something on the page
"Center this element both horizontally and vertically on the page using Tailwind CSS. Use flexbox. The container should take up the full screen height."
2. Build a responsive grid
"Create a responsive grid using Tailwind CSS that shows 1 column on mobile, 2 columns on tablets (md:), and 3 columns on desktop (lg:). Add a gap of 6 between items."
3. Style a card
"Style this as a card component using Tailwind CSS. Add a white background, subtle border, rounded corners (rounded-xl), a small shadow, and padding of 6. On hover, make the shadow slightly larger."
4. Create a sticky navbar
"Build a navbar using Tailwind CSS that sticks to the top of the page when scrolling. It should have a white background with a bottom border, logo on the left, navigation links in the center, and a button on the right. On mobile, collapse the links into a hamburger menu."
5. Add a gradient background
"Add a gradient background to this section using Tailwind CSS. Go from purple-500 on the left to pink-500 on the right. Make the text white. Add generous padding (py-20 px-8)."
6. Animate an element on hover
"Add a smooth hover animation to this card using Tailwind CSS. On hover, it should scale up slightly (scale-105), increase the shadow, and transition smoothly. Use the transition and duration classes."
7. Add dark mode
"Add dark mode support to this page using Tailwind CSS dark: prefix. Light mode should have a white background with dark text. Dark mode should have a gray-900 background with gray-100 text. Style all cards, buttons, and borders for both modes."
8. Style a form
"Style this form using Tailwind CSS. Add rounded inputs with a border that turns blue on focus. Include proper spacing between fields, labels above each input, and a full-width submit button with a gradient background. Make it look professional and clean."
9. Create a hero section
"Build a hero section using Tailwind CSS with a large bold heading, a subtitle paragraph in muted text, and two buttons side by side (primary filled, secondary outlined). Center everything. Add a gradient background and generous vertical padding."
10. Make text responsive
"Make the heading text size responsive using Tailwind CSS. Use text-2xl on mobile, text-4xl on tablets (md:), and text-6xl on desktop (lg:). Also adjust the line height and letter spacing for each size."
11. Build a footer
"Create a website footer using Tailwind CSS with a dark background. Include 4 columns: company info with logo, quick links, resources, and social media icons. On mobile, stack the columns vertically. Add a bottom bar with copyright text."
12. Create a pricing table
"Build a pricing table with 3 tiers using Tailwind CSS. Each tier should be a card with the plan name, price, feature list with checkmarks, and a CTA button. Highlight the middle tier as 'Most Popular' with a colored border and slightly larger size. Make it responsive."
Nobody remembers all of Tailwind's classes. Use the docs, let your AI tool pick classes for you, and learn the common ones over time through repetition.
Tailwind classes without a prefix apply to all screen sizes. Add sm:, md:, and lg: only for larger screens. Design for phones first, then make it look better on bigger screens.
Stick to a few spacing values like p-4, p-6, and p-8 throughout your project. Consistent spacing makes designs look professional without extra effort.
When you have many classes on one element, mentally group them: layout first, then spacing, then colors, then effects. This makes long class lists easier to scan.
Tailwind colors go from 50 (very light) to 950 (very dark). 500 is the 'base' shade. Use 100-200 for backgrounds, 500-600 for buttons, and 700-900 for text.
Tailwind lets you use custom values like w-[347px], but try to use the built-in scale first. Sticking to the system keeps your design consistent.
Tailwind only generates classes it finds in your code. If you are building class names dynamically (like 'bg-' + color), Tailwind cannot see them. Always write the full class name so Tailwind can detect it.
Make sure you are using valid Tailwind color names (like blue-500, not blue-550). Check that your tailwind config file has not overridden the default color palette. Ask your AI tool: 'Show me all available Tailwind colors.'
Remember that Tailwind is mobile-first. Classes without a prefix apply to all sizes. The sm: prefix applies at 640px and above, not below. If something looks wrong on mobile, check your unprefixed classes.
Tailwind dark mode needs to be configured. In v4, it uses the 'class' strategy by default, meaning a 'dark' class must be added to your HTML element. Ask your AI tool: 'Set up dark mode toggling with Tailwind CSS.'
This is normal during development — Tailwind includes all possible classes. When you build for production, it automatically removes unused classes. Your production CSS file will be tiny.
If two classes conflict (like text-red-500 and text-blue-500 on the same element), the last one in Tailwind's stylesheet wins — not the last one in your class list. Use your AI tool to help resolve conflicts.
Wondering how Tailwind compares to other ways of styling websites? Here is a quick breakdown.
Plain CSS gives you total freedom but requires you to name every class and organize your stylesheets. Tailwind gives you pre-built classes so you never have to invent names or manage separate files. For AI coders, Tailwind is much easier because your AI tool can apply styles directly without creating extra files.
Bootstrap gives you pre-designed components (like buttons and navbars) that all look the same. Tailwind gives you building blocks to create your own unique designs. Bootstrap sites tend to look similar to each other. Tailwind sites can look like anything. Most modern AI tools prefer Tailwind.
Styled-components is a 'CSS-in-JS' approach where you write CSS inside your JavaScript files. It is powerful but more complex. Tailwind keeps things simpler — just add class names. If your AI tool generates styled-components, it works fine, but Tailwind is easier to read and tweak by hand.
Sass is a CSS preprocessor that adds features like variables and nesting to regular CSS. Tailwind replaces the need for most of these features with its utility classes and config file. For beginners, Tailwind is much easier to get started with.
