Tailwind CSS Cheat Sheet
A reference for Tailwind CSS utility classes, responsive breakpoints, state variants, and configuration for building custom designs.
2 PagesBeginnerFeb 28, 2026
Setup & Config
Installing Tailwind and wiring up the config and base directives.
bash
# installnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p# tailwind.config.jsmodule.exports = { content: ['./src/**/*.{html,js,jsx,ts,tsx}'], theme: { extend: { colors: { brand: '#1e40af' }, }, }, plugins: [],};/* input.css */@tailwind base;@tailwind components;@tailwind utilities;
Layout & Spacing
Flexbox, grid, and spacing utilities composed together.
html
<div class="flex items-center justify-between p-4 gap-4 max-w-3xl mx-auto"> <div class="w-1/3 bg-gray-100 rounded-lg shadow p-6">Sidebar</div> <div class="flex-1 grid grid-cols-2 gap-4"> <div class="col-span-2 p-4 bg-white border rounded">Content</div> </div></div>
Common Utility Categories
The classes you will reach for on nearly every element.
- Spacing- p-4, px-2, py-1, m-4, -mt-2, gap-4 (scale in rem, based on a 4px unit)
- Flexbox/Grid- flex, grid, grid-cols-3, items-center, justify-between, flex-col
- Typography- text-lg, font-bold, leading-6, tracking-wide, text-gray-700
- Colors- bg-blue-500, text-red-600, border-slate-200 (each color has shades from 50-950)
- Sizing- w-full, h-screen, max-w-md, min-h-screen
- Borders/Effects- rounded-lg, border, shadow-md, ring-2, opacity-50
- Transitions/Animation- transition, duration-200, ease-in-out, animate-spin
- Arbitrary values- w-[137px], bg-[#1e40af] for one-off values outside the design scale
Responsive & State Variants
Mobile-first breakpoints and pseudo-class/dark-mode variants.
html
<!-- mobile-first breakpoints: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px --><div class="text-sm md:text-base lg:text-lg">Responsive text</div><button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50 focus:ring-2"> Submit</button><div class="dark:bg-gray-900 dark:text-white">Dark mode aware</div>
Writing a Custom Plugin
Registering new utility classes and component classes via the plugin API instead of long @apply chains.
javascript
// tailwind.config.jsconst plugin = require('tailwindcss/plugin');module.exports = { plugins: [ plugin(function ({ addUtilities, addComponents, matchUtilities, theme }) { addUtilities({ '.text-shadow': { textShadow: '0 2px 4px rgba(0,0,0,.3)' }, '.scrollbar-none': { scrollbarWidth: 'none', '&::-webkit-scrollbar': { display: 'none' } }, }); addComponents({ '.btn-primary': { padding: theme('spacing.3') + ' ' + theme('spacing.6'), borderRadius: theme('borderRadius.md'), backgroundColor: theme('colors.blue.600'), color: theme('colors.white'), }, }); // dynamic utility family: generates text-glow-{value} from arbitrary values matchUtilities( { 'text-glow': (value) => ({ textShadow: `0 0 8px ${value}` }) }, { values: theme('colors') } ); }), ],};
Container Queries & :has()
Sizing children off a container's own width, and styling parents based on descendant state (Tailwind v3.4+).
html
<!-- container query: @container establishes the containment context --><div class="@container"> <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3"> <div class="p-4 @md:p-8">Card</div> </div></div><!-- :has() based state variants --><label class="has-[:checked]:bg-blue-50 has-[:checked]:ring-2 has-[:checked]:ring-blue-500 flex items-center gap-2 p-3 rounded-lg"> <input type="checkbox" class="peer" /> <span class="peer-checked:font-semibold">Enable notifications</span></label><!-- group-has for compound parent/child relationships --><div class="group"> <div class="group-has-[.error]:border-red-500 border rounded p-4"> <p class="error hidden">Validation failed</p> </div></div>
CSS Variables via theme() and @layer
Exposing the design-token scale as native custom properties and layering raw CSS safely alongside utilities.
css
@layer base { :root { --color-brand: theme('colors.blue.600'); --radius-card: theme('borderRadius.lg'); } h1 { @apply text-3xl font-bold tracking-tight; }}@layer components { .card { background: white; border-radius: var(--radius-card); box-shadow: theme('boxShadow.md'); }}@layer utilities { /* custom utility that still participates in variant stacking, e.g. md:text-balance */ .text-balance { text-wrap: balance; }}
Advanced Variant Stacking & Modifiers
Less common variants that compose to express precise structural and stateful selectors.
- first:/last:/only:- :first-child, :last-child, :only-child structural selectors without extra markup
- even:/odd:- :nth-child(even/odd) for zebra-striped rows
- peer-* and group-*- style a sibling/ancestor based on another element's state (peer-invalid:, group-hover:)
- aria-[checked=true]:/data-[state=open]:- arbitrary attribute variants for headless UI libraries that drive state via ARIA/data attributes
- supports-[gap]:- apply utilities only when the browser supports a given CSS feature (@supports)
- important modifier (!)- prefix a utility with ! (e.g. !text-red-500) to emit it with !important, for overriding third-party CSS
- Stacking order- variants apply left-to-right (md:hover:disabled:bg-gray-300); order in the class string doesn't change specificity, only readability
Arbitrary Properties & Variants
Escaping the design scale entirely for one-off CSS properties and custom selectors under the JIT engine.
html
<!-- arbitrary property: square-bracket any CSS property name --><div class="[mask-image:linear-gradient(to_bottom,white,transparent)] [grid-template-areas:'header_header'_'sidebar_content']"></div><!-- arbitrary variant: square-bracket any selector, use & for the element itself --><ul class="[&>li]:border-b [&>li:last-child]:border-none [&_a]:text-blue-600"> <li><a href="#">Item</a></li></ul><!-- arbitrary variant combined with a breakpoint --><div class="lg:[&:nth-child(3)]:col-span-2">Featured</div>
Pro Tip
Tailwind's build scans the 'content' paths in tailwind.config.js for class name strings -- never construct class names dynamically via concatenation, e.g. `text-${color}-500`, since the scanner cannot detect them and they get stripped from the production build.
Was this cheat sheet helpful?
Explore Topics
#TailwindCSS#TailwindCSSCheatSheet#WebDevelopment#Beginner#SetupConfig#LayoutSpacing#CommonUtilityCategories#ResponsiveStateVariants#OOP#CheatSheet#SkillVeris
