In short
Tailwind lets you style straight in your HTML with small utility classes. Many Next.js and React teams use it, so you'll likely meet it in internships.
A utility-first CSS framework where you compose designs directly in markup using small, single-purpose classes (`flex`, `p-4`, `text-lg`) instead of writing custom CSS. Its utility-first model can make styles local and predictable, but teams still need conventions for component boundaries, repeated patterns, responsive behavior, and design tokens.
Think of it like this
The masala dabba
Instead of buying a ready-made 'paneer masala' packet, you keep a dabba of basic spices and add a pinch of each. Tailwind classes are those spices: p-4, text-lg, bg-pink-500. You combine small ones to make any dish.
Watch it happen
How Tailwind builds your CSS
1/4You write classes like p-4, sm:grid-cols-2 and hover:shadow-md in your markup.
The big ideas
What you need to know
Utility classes
Each class does one small job: flex, gap-4, rounded-xl. You build the design by combining them.
Responsive prefixes
md:grid-cols-3 means 'three columns from the md breakpoint up'. Mobile first, built in.
State prefixes
hover:, focus-visible: and dark: apply a class only in that state.
Only what you use
Tailwind scans your files and only ships the classes you actually used, so the CSS stays small.
See it in code
Walk through the code
1<div class="mx-auto grid max-w-5xl gap-6 p-4 sm:grid-cols-2 lg:grid-cols-3">2 <article class="rounded-2xl border border-gray-200 p-5 shadow-sm3 transition hover:-translate-y-1 hover:shadow-md4 dark:border-gray-700 dark:bg-gray-900">5 <h3 class="text-lg font-semibold">Hackathon Kit</h3>6 <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">7 Starter templates for your next 24-hour build.8 </p>9 <button class="mt-4 rounded-lg bg-pink-500 px-4 py-2 text-white10 hover:bg-pink-600 focus-visible:outline-2">11 Get it12 </button>13 </article>14</div>1/4A centred grid: one column on phones, two from sm, three from lg.
One column on phones, two from sm, three from lg, plus hover lift and dark mode, all without leaving the HTML.
Save yourself the pain
Common mistakes
Oops
Learning Tailwind before plain CSS.
Do this instead
Tailwind classes map to CSS properties. If you don't know Flexbox, flex justify-between will feel like magic words.
Oops
Building class names with string pieces like "bg-" + colour.
Do this instead
Tailwind can't detect dynamic names. Write full class names, like bg-red-500, in your code.
Your mission
Rebuild a card in Tailwind
Quick check
What does the class md:flex do in Tailwind?
Go deeper
- 1Rebuild one existing component using only Tailwind utility classes. Validate your understanding by applying it in a small practical example.
- 2Learn Tailwind's responsive (`sm:`, `md:`) and state (`hover:`, `focus:`) prefixes. Focus on understanding the underlying reason it works, not only memorizing the definition.
- 3Read about `@apply` for extracting repeated utility patterns into components.
More styling tools & libraries at this stop
Bootstrap
SCSS/SASS
Styled Components
CSS Modules
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
