Tailwind CSS Cheat Sheet 2025 β Complete Utility Class Guide
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>



