Tailwind CSS

CSS is what controls everything visual on a web page — color, size, spacing, fonts, borders, shadows, layout, hover effects, animations. Without CSS, a web page is unstyled black text on a white background. With CSS, it becomes a professional product.

The traditional way to write CSS is to create a separate stylesheet file, invent names for each element, and write rules for each name.

This works. But it has problems:

• You invent names constantly — what do you call the third div inside the second section?
• The CSS file grows without bound
• Styles become disconnected from the elements they style — you have to jump between two files
• Unused styles accumulate invisibly

Tailwind CSS solves all of this.

What Tailwind Does Differently

Instead of writing CSS in a separate file, Tailwind gives you utility classes — small, single-purpose classes that map directly to CSS properties.

p-4 means padding: 16px. bg-white means background-color: white. rounded-lg means border-radius: 8px. shadow-sm means a subtle box shadow.

The visual behavior is directly readable in the code. You do not need to open a stylesheet to know what p-4 bg-white rounded-lg shadow-sm looks like.

The Excel Analogy

Excel's conditional formatting works by applying visual rules directly to cells — you select a cell and choose "fill color: green". You do not write a separate "cell style" file and give the rule a name. The formatting is attached to the cell.

Tailwind works exactly like this. The styling is attached directly to the element. No separate file. No naming. The element and its appearance live in the same place.

Core Utility Categories

Every Tailwind class belongs to a category. Here are the ones you will use on every project.

Spacing — p-, m-

Padding (space inside) and margin (space outside).

Tailwind uses a 4px base unit. p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px. This consistent scale is one reason Tailwind layouts feel clean — everything aligns to the same grid.

Layout — flex, grid

Colors — bg-, text-, border-

Typography

Borders and Shadows

States — hover, focus, disabled

Try It: Build a Component with Tailwind Classes

The playground below shows a card element. The dropdowns on the left let you pick from real Tailwind classes in each category. The right side shows the exact className string that produces what you see. The bottom table maps each class to its CSS equivalent.

This is how Tailwind works in practice: you pick classes from categories, they combine into a className string, and the element changes. No separate CSS file. No naming anything. The class is the style.

The Responsive Prefix

Tailwind has built-in responsiveness. You prefix any class with a breakpoint to apply it only at that screen size and above.

Dark Mode

Tailwind supports dark mode with the dark: prefix:

When the user's system is in dark mode (or when your app sets dark mode), the dark: classes activate automatically. The non-dark: classes are the light mode defaults.

10 Patterns You Will Use Constantly

These are real class combinations extracted from the Udyogaseva codebase. They appear repeatedly across the admin dashboard, candidate pages, and recruiter flows.

1. Stat card with icon

2. Page header row

3. Five-column stat grid

4. Status badge (active/inactive)

5. Search input with icon

6. Data table row

7. Sidebar nav link (active state)

8. Loading skeleton row

9. Empty state

10. Form section with label and input

Tailwind IntelliSense in VS Code

Install the Tailwind CSS IntelliSense extension in VS Code. It autocompletes every Tailwind class as you type, shows you the actual CSS it generates on hover, and flags class name typos immediately.

This is not optional — it is the tool that makes Tailwind practical. Without it, you would need to memorize every class name. With it, you start typing flex and VS Code shows you every flex-related class available.

What You Will Not Do

You will almost never open a .css file in this program. You will not write color: #3b82f6 or border-radius: 8px manually. Tailwind's classes handle all of it.

The one exception: if you need an animation or transition that Tailwind does not have a class for, you write it as a CSS variable in index.css. This happens rarely — maybe once per project.

In the next lesson, we go one level up from individual classes to a system: the design system that makes an entire application feel coherent.

• I understand what Tailwind does differently — no naming, no separate stylesheet, classes live with the element
• I know the 4px base unit: p-1=4px, p-2=8px, p-4=16px, p-8=32px
• I can read p-4 bg-white rounded-lg shadow-sm and describe the visual result without looking it up
• I understand responsive prefixes: md: means 768px and wider, overrides the unprefixed value
• The Tailwind CSS IntelliSense extension is installed in VS Code and autocomplete works
• I have built at least one component using Tailwind classes and can identify what each class does