What it is : Tailwind CSS is a utility-first CSS framework with ready-made classes.

1. Responsive prefixes :

These are prefixes like sm:, md:, lg:, etc. used to make styles apply only at specific screen sizes. They allow you to build responsive designs that adapt across devices.

• sm: → Small screens (≥640px).
• md: → Medium screens (≥768px).
• lg: → Large screens (≥1024px).
• xl: → Extra large (≥1280px).
• 2xl: → Extra extra large (≥1536px).

👉 Used to change styles at different screen sizes.

<p class="text-base md:text-xl">Hello</p>

• hover:,focus:→ Add styles when user hovers or focuses.

<button class="bg-blue-500 hover:bg-blue-700">Click</button>

Dark mode :

dark: → Applies style in dark mode.

<div class="bg-white dark:bg-gray-800">Box</div>

2. Layout & Display :

This section includes utilities that control how an element is displayed — as a block, inline, flexbox, grid, or hidden. It also has helpers like container and mx-auto for responsive layouts.

block → Element takes full width (new line).

<div class="block">Box</div>

inline-block → Acts inline but allows width/height.

<span class="inline-block w-20">Box</span>

inline → Flows with text, no width/height control.

<span class="inline">Text</span>

flex → Turns element into a flexbox container.

<div class="flex">Items</div>

grid → Turns element into a grid container.

<div class="grid grid-cols-2">Two cols</div>

hidden → Hides the element.

<p class="hidden">Not visible</p>

Container & Responsive Widths :

container → Adds a fixed max-width that adjusts with screen size.

<div class="container">Content</div>

mx-auto → Centers the element horizontally.

<div class="container mx-auto">Centered</div>

3. Flexbox -

Flexbox utilities help arrange items inside a container. You can control direction, alignment, spacing, and wrapping. It’s mainly used for one-dimensional layouts (rows/columns).

Direction

• flex-row → Items in a row.
• flex-col → Items in a column.

<div class="flex flex-col">...</div>

Justify (horizontal alignment)

• justify-start → Items at start.
• justify-center → Items in center.
• justify-between → Space between items.

<div class="flex justify-between">...</div>

Align (vertical alignment)

• items-start → Align top.
• items-center → Align center.
• items-end → Align bottom.

<div class="flex items-center">...</div>

Wrap

• flex-wrap → Items move to next line.
• flex-nowrap → Items stay in one line.

<div class="flex flex-wrap">...</div>