Introduction

This section explains the main idea: you style by adding utility classes to your HTML. You do not start by writing lots of custom CSS.

What it is

A utility class is a small CSS rule in a short name. Example: mt-4 means “margin-top: 1rem”.

Why it is used (real-life example)

When you build a dashboard, you repeat common patterns: padding, borders, and text styles. Utilities help you reuse these patterns without creating many custom CSS files.

Step-by-step explanation

• Step 1: Start with plain HTML elements.
• Step 2: Add one utility class and see the change (for example, add padding).
• Step 3: Add another class for color or text size.
• Step 4: Keep adding small utilities until the element looks correct.

Code example 1

<p class="text-sm text-slate-600">This is small gray text.</p>

Code example 2

<div class="border border-slate-300 rounded-lg p-4"><p class="font-medium">Card title</p><p class="mt-1 text-slate-700">Card content goes here.</p></div>

Common mistakes

• Adding many classes at once and not knowing which one caused the change.
• Mixing custom CSS and Tailwind in random ways, which makes debugging harder.

Tips / best practices

• Learn the most common utilities first: spacing, typography, colors, layout.
• Change one thing at a time while you are learning.

Syntax

Tailwind syntax means how class names are written and how you combine them on one element.

What it is

Most class names follow a pattern like property-value. Example: p-4 is padding with value 4. Some classes are single words like flex.

Why it is used (real-life example)

When you edit a button, you can read the class list and quickly understand it: padding, color, rounded corners, and hover styles.

Step-by-step explanation

• Step 1: Put classes inside the class attribute.
• Step 2: Separate each class with a space.
• Step 3: Use readable groups: spacing first, then layout, then colors, then states.
• Step 4: Add state prefixes like hover: to change style on interaction.

Code example 1

<a class="text-blue-700 underline hover:text-blue-900" href="#">Read more</a>

Code example 2

<button class="px-5 py-2 rounded-md bg-emerald-600 text-white hover:bg-emerald-700">Create</button>

Common mistakes

• Forgetting the colon in prefixes (writing hoverbg-blue-700 instead of hover:bg-blue-700).
• Putting commas between class names (Tailwind uses spaces, not commas).

Tips / best practices

• Keep class lists tidy. If an element has too many classes, consider making a reusable component later.
• Use your editor autocomplete if available. It helps avoid typos.

Utilities

What it is: Utilities are small CSS classes that do only one job, like setting color, padding, or text size.

Why it is used (real-life example): When you build a button, you can quickly add spacing, color, and rounded corners without writing custom CSS files.

Step-by-step

• Start with a simple HTML element (like a button).
• Add one utility at a time (padding first, then color, then shape).
• Read the class name as a tiny rule (example: p-4 means padding: 1rem).

Code example 1: simple button

<button class="px-4 py-2 bg-sky-600 text-white rounded">
  Save
</button>

This adds horizontal padding (px-4), vertical padding (py-2), a background color, white text, and rounded corners.

Code example 2: text styling

<p class="text-lg font-semibold text-slate-800">
  Welcome back
</p>

This makes the text larger, slightly bold, and dark gray.

Common mistakes

• Adding many classes without checking what each one does.
• Mixing conflicting utilities (example: text-sm and text-lg on the same element). The last one usually wins.
• Forgetting that classes are applied directly in HTML, not in a separate CSS file.

Tips / best practices

• Add utilities one by one and preview the result often.
• Keep components readable: group classes by type (spacing, color, typography).
• When something feels repeated, later you can extract a component or use a reusable pattern.

Spacing

What it is: Spacing utilities control padding and margin. Padding is space inside an element. Margin is space outside an element.

Why it is used (real-life example): In a card layout, you need padding inside the card so text does not touch the edges, and margin between cards so they do not stick together.

Step-by-step

• Use p-* for padding and m-* for margin.
• Use axis versions: px-* for left/right, py-* for top/bottom.
• Use side versions: pt-*, pr-*, pb-*, pl-* (same for margin).

Code example 1: padded card

<div class="p-6 bg-white rounded shadow">
  <h2 class="text-xl font-bold">Card title</h2>
  <p class="mt-2 text-slate-600">This card has inner space.</p>
</div>

p-6 adds inner space. mt-2 adds a top margin to separate the paragraph from the title.

Code example 2: spacing between items

<ul class="space-y-3">
  <li class="p-3 bg-slate-100 rounded">Item A</li>
  <li class="p-3 bg-slate-100 rounded">Item B</li>
  <li class="p-3 bg-slate-100 rounded">Item C</li>
</ul>

space-y-3 adds equal vertical gaps between list items without adding margin to each item.

Common mistakes

• Using margin for inner space (use padding instead).
• Adding margins to many children when space-x-* or space-y-* would be simpler.
• Forgetting that negative margin exists (like -mt-2), which can cause overlap if used by accident.

Tips / best practices

• Use padding for touch targets (buttons, inputs) so they are easier to click.
• Prefer consistent spacing scales across the page (example: mostly 2, 4, 6, 8).
• Use space-* utilities for clean, predictable gaps in flex and list layouts.

Colors

What it is: Color utilities set text color, background color, and border color using named palettes like slate, sky, and emerald.

Why it is used (real-life example): You can show status with color: green for success, red for error, yellow for warning.

Step-by-step

• Pick what you want to color: background, text, or border.
• Use the right prefix: bg-*, text-*, or border-*.
• Choose a shade number (like 50, 100, 500, 900). Smaller is lighter, bigger is darker.

Code example 1: status badges

<span class="px-2 py-1 text-xs font-semibold bg-emerald-100 text-emerald-800 rounded">
  Paid
</span>
<span class="px-2 py-1 text-xs font-semibold bg-rose-100 text-rose-800 rounded">
  Failed
</span>

Light backgrounds with darker text are easy to read and look like common UI badges.

Code example 2: colored border card

<div class="p-4 border-l-4 border-sky-500 bg-sky-50">
  <p class="text-sky-900 font-medium">Info</p>
  <p class="text-sky-800 text-sm">Your profile was updated.</p>
</div>

The left border draws attention, and the soft background keeps it calm.

Common mistakes

• Using low contrast text (example: text-slate-300 on bg-white can be hard to read).
• Mixing too many colors on one screen, making the UI feel messy.
• Forgetting border needs a width (like border or border-2) to be visible, unless you use a side border like border-l-4.

Tips / best practices

• Pick a small set of main colors (primary, success, warning, error).
• Use lighter shades for backgrounds and darker shades for text.
• Check contrast for important text so it stays readable.

Typography

What it is: Typography means how text looks. In Tailwind, you change text size, weight, alignment, and line height using small classes.

Why it is used (real-life example): On a blog page, headings must be bold and large, and paragraphs must be easy to read. Good text styles help people read faster.

Step-by-step

• Start with a normal HTML heading and paragraph.
• Add a text size class like text-xl.
• Add weight like font-bold for headings.
• Add line height like leading-relaxed for paragraphs.
• Optionally add alignment like text-center.

Code example 1: Simple heading and paragraph

<h1 class="text-3xl font-bold text-slate-900">Welcome to my blog</h1>
<p class="mt-3 text-base leading-relaxed text-slate-700">This is a short intro. It should be easy to read on phones and laptops.</p>

Code example 2: Text alignment and small labels

<div class="text-center">
  <p class="text-sm uppercase tracking-wide text-slate-500">New</p>
  <h2 class="text-2xl font-semibold">Product Update</h2>
</div>

Common mistakes

• Using too many different text sizes on one page, which looks messy.
• Forgetting line height, so paragraphs feel tight and hard to read.
• Using very light colors for text, which hurts readability.

Tips / best practices

• Pick a small set of text sizes (like text-sm, text-base, text-xl, text-3xl) and reuse them.
• Use leading-relaxed for longer paragraphs.
• Use font-semibold for headings when font-bold feels too heavy.

Borders

What it is: A border is a line around an element. Tailwind lets you control border width, color, and radius (rounded corners) with classes.

Why it is used (real-life example): In a settings page, input fields often have borders so users can see where to type.

Step-by-step

• Add border to turn on a default 1px border.
• Pick a border color like border-slate-300.
• Add rounding with rounded-md or rounded-full.
• If needed, change thickness like border-2.

Code example 1: Input with border

<label class="block">
  <span class="text-sm text-slate-700">Email</span>
  <input class="mt-1 w-full border border-slate-300 rounded-md px-3 py-2" type="email" placeholder="[email protected]" />
</label>

Code example 2: Card with rounded border

<div class="border-2 border-slate-200 rounded-xl p-4">
  <h3 class="font-semibold">Plan</h3>
  <p class="text-sm text-slate-600">Choose the plan that fits your needs.</p>
</div>

Common mistakes

• Adding border-slate-300 without border, so no border appears.
• Using too dark borders everywhere, which can make the UI feel heavy.
• Mixing many different rounding sizes, so components look inconsistent.

Tips / best practices

• Use light border colors for most UI, and stronger borders only for focus or important areas.
• Pick 1 or 2 rounding styles (like rounded-md and rounded-xl) and reuse them.
• Combine borders with spacing (padding) so content does not touch the border.

Shadows

What it is: A shadow is a soft dark area behind an element. It helps the element look lifted from the background. Tailwind uses classes like shadow-sm and shadow-lg.

Why it is used (real-life example): A dropdown menu should appear above the page. A shadow helps users understand it is on top.

Step-by-step

• Start with a box like a card or menu.
• Add a background color so the shadow is visible (often bg-white).
• Add a shadow level like shadow-md.
• Add rounding to match your design, like rounded-lg.

Code example 1: Simple card shadow

<div class="bg-white shadow-md rounded-lg p-5">
  <h3 class="font-semibold">Invoice Ready</h3>
  <p class="text-sm text-slate-600">You can download your invoice from the billing page.</p>
</div>

Code example 2: Menu panel with stronger shadow

<div class="w-64 bg-white shadow-lg rounded-xl p-3">
  <p class="text-sm font-medium">Menu</p>
  <ul class="mt-2 space-y-2 text-sm text-slate-700">
    <li class="px-2 py-1 rounded hover:bg-slate-100">Profile</li>
    <li class="px-2 py-1 rounded hover:bg-slate-100">Settings</li>
  </ul>
</div>

Common mistakes

• Using a very strong shadow everywhere, which makes the page look noisy.
• Forgetting a background color, so the shadow is hard to see on busy backgrounds.
• Adding shadows to flat elements like text, where it does not help meaning.

Tips / best practices

• Use small shadows (shadow-sm or shadow) for cards, and bigger shadows only for overlays.
• Use shadows to show hierarchy: higher importance can have a stronger shadow.
• Keep shadow styles consistent across similar components.

Layout

What it is: Layout utilities control how elements are placed on the page. This includes things like display type (block, inline, flex) and positioning (relative, absolute).

Why it is used (real-life example): When you build a website header, you often need the logo on the left and buttons on the right. Layout utilities help you place these items correctly.

Step-by-step

• Start with a container element.
• Choose a display type like flex to place items in a row.
• Use alignment classes like items-center and justify-between.
• If you need an element to sit on top of another, use relative on the parent and absolute on the child.

Code example 1: Simple header row

<header class="flex items-center justify-between p-4 bg-white">
  <div class="font-bold">MySite</div>
  <nav class="flex gap-4">
    <a class="text-blue-600" href="#">Home</a>
    <a class="text-blue-600" href="#">Docs</a>
  </nav>
</header>

Code example 2: Badge on top of an icon (positioning)

<div class="relative inline-block">
  <button class="p-3 bg-gray-100 rounded-full">🔔</button>
  <span class="absolute -top-1 -right-1 bg-red-600 text-white text-xs px-2 py-0.5 rounded-full">3</span>
</div>

Common mistakes

• Forgetting relative on the parent when using absolute on the child. The child may jump to a strange place.
• Using justify-between without flex. It will not work because it needs flex layout.

Tips / best practices

• Use flex for simple rows and columns. It is beginner-friendly.
• Keep layout classes on the parent, and keep content classes on the children. This stays readable.

Flexbox

What it is: Flexbox is a layout system for placing items in a row or column. In Tailwind, you turn it on with flex.

Why it is used (real-life example): Product cards often need an image, text, and a button aligned nicely. Flexbox makes it easy to align and space these parts.

Step-by-step

• Add flex to the parent to enable flexbox.
• Use flex-col for a column, or keep the default row.
• Use gap-* to create space between items.
• Use items-* for vertical alignment and justify-* for main-direction alignment.

Code example 1: Center items in a row

<div class="flex items-center justify-center gap-3 h-24 bg-gray-50">
  <div class="w-10 h-10 bg-blue-500"></div>
  <div class="w-10 h-10 bg-green-500"></div>
  <div class="w-10 h-10 bg-yellow-500"></div>
</div>

Code example 2: Sidebar layout (row with fixed + flexible)

<div class="flex min-h-48 border">
  <aside class="w-48 bg-gray-100 p-3">Sidebar</aside>
  <main class="flex-1 p-3">Main content grows</main>
</div>

Common mistakes

• Adding items-center on a child instead of the flex parent. Alignment classes usually go on the parent.
• Forgetting flex-1 when you want an area to grow and fill empty space.

Tips / best practices

• Use gap-* instead of adding spacing on every child. It is cleaner.
• When a layout feels hard, first draw: what is the parent, and what are the children? Then add classes slowly.

Grid

What it is: CSS Grid is a layout system for making rows and columns at the same time. In Tailwind, you enable it with grid and choose columns with grid-cols-*.

Why it is used (real-life example): A photo gallery or a list of product cards often needs equal columns that wrap. Grid makes this simple and consistent.

Step-by-step

• Add grid to the parent container.
• Choose the number of columns using grid-cols-2, grid-cols-3, etc.
• Add spacing between items with gap-*.
• If one item should be wider, use col-span-2 (or more) on that item.

Code example 1: Simple 3-column card grid

<div class="grid grid-cols-3 gap-4 p-4">
  <div class="p-4 bg-white border rounded">Card 1</div>
  <div class="p-4 bg-white border rounded">Card 2</div>
  <div class="p-4 bg-white border rounded">Card 3</div>
</div>

Code example 2: Featured item using column span

<div class="grid grid-cols-3 gap-4 p-4">
  <div class="col-span-2 p-4 bg-blue-50 border rounded">Featured (spans 2 columns)</div>
  <div class="p-4 bg-white border rounded">Side card</div>
  <div class="p-4 bg-white border rounded">Card A</div>
  <div class="p-4 bg-white border rounded">Card B</div>
</div>

Common mistakes

• Forgetting to add grid. If you only add grid-cols-3, nothing will happen.
• Using very large column counts on small screens without responsive classes. Items become too narrow.

Tips / best practices

• Start with a small number of columns, then add responsive columns later (example: grid-cols-1 on small screens, more on larger screens).
• Use gap-* to keep spacing consistent across the whole grid.

Responsive

What it is: Responsive design means your page changes based on screen size (phone, tablet, desktop). Tailwind does this with breakpoint prefixes like sm:, md:, and lg:.

Why it is used (real-life example): A menu may need to be stacked on a phone, but placed in a row on a laptop.

Step-by-step

• Start with the “mobile” style (no prefix).
• Add a breakpoint prefix to change the style on larger screens.
• Remember: prefixed classes apply at that screen size and up.

Code example 1: Change layout direction

<div class="flex flex-col md:flex-row gap-4"><div class="bg-slate-100 p-4">Item A</div><div class="bg-slate-100 p-4">Item B</div></div>

Explanation: flex-col stacks items on small screens. md:flex-row changes to a row on medium screens and bigger.

Code example 2: Adjust text size by screen

<h1 class="text-2xl sm:text-3xl lg:text-5xl font-semibold">Welcome</h1>

Explanation: The heading starts at text-2xl. It becomes bigger at sm: and bigger again at lg:.

Common mistakes

• Putting the wrong order in your head: the unprefixed class is the default (usually mobile).
• Expecting md: to apply only at exactly “md” size (it applies at md and up).
• Forgetting to test on different screen sizes.

Tips / best practices

• Design mobile-first: write the small-screen style first.
• Change only what you need at each breakpoint (avoid repeating many classes).
• Use the browser dev tools to preview sizes quickly.

States

What it is: States are styles that apply when something happens, like hover, focus, or disabled. Tailwind uses prefixes like hover:, focus:, and disabled:.

Why it is used (real-life example): A button should change color when the user hovers it, and show a clear outline when focused using the keyboard.

Step-by-step

• Write the normal style first.
• Add a state prefix to change style only in that situation.
• Test with mouse (hover) and keyboard (Tab for focus).

Code example 1: Hover and focus button

<button class="px-4 py-2 rounded bg-sky-600 text-white hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-400">Save</button>

Explanation: hover:bg-sky-700 changes the background on hover. focus:ring-2 adds a visible ring when the button is focused.

Code example 2: Disabled input and button

<input disabled class="w-full p-2 rounded border disabled:bg-slate-100 disabled:text-slate-400" placeholder="Email" /><br><button disabled class="mt-3 px-4 py-2 rounded bg-slate-300 text-slate-600 disabled:cursor-not-allowed">Submit</button>

Explanation: The disabled: classes only apply when the element has the disabled attribute.

Common mistakes

• Using hover: on touch devices and assuming it will always show (touch behaves differently).
• Removing focus styles completely, which makes keyboard use hard.
• Forgetting to add the real disabled attribute while using disabled: classes.

Tips / best practices

• Always keep a visible focus style for accessibility.
• Use small, clear hover changes (color, shadow) instead of big layout shifts.
• Combine state prefixes carefully so the button still looks consistent.

Dark mode

What it is: Dark mode is an alternative color style for dark screens. Tailwind can apply dark styles using the dark: prefix when dark mode is active.

Why it is used (real-life example): Many apps let users switch to a dark theme at night to reduce glare.

Step-by-step

• Decide how dark mode is enabled: by system preference or by a class on the page.
• Write the normal (light) styles first.
• Add dark: classes for the dark version.
• When using class-based dark mode, toggle the dark class on a parent element (often html).

Code example 1: Light and dark card styles

<div class="p-4 rounded bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100"><h2 class="font-semibold">Card title</h2><p class="mt-1 text-sm text-slate-600 dark:text-slate-300">This text changes in dark mode.</p></div>

Explanation: In dark mode, the background becomes dark and text becomes light using dark:* classes.

Code example 2: Class-based toggle idea

<html class="dark"><body class="bg-slate-50 dark:bg-slate-950"><div class="p-6 text-slate-900 dark:text-slate-100">Dark mode is on.</div></body></html>

Explanation: Adding dark on html turns on all dark: styles inside it (when your Tailwind config uses class-based dark mode).

Common mistakes

• Using dark: classes but not enabling dark mode correctly in the project settings.
• Only changing backgrounds, but forgetting text and border colors (causes low contrast).
• Mixing too many dark colors so everything looks the same.

Tips / best practices

• Always check contrast: light text on dark background should be easy to read.
• Start by darkening surfaces (backgrounds) and then adjust text and borders.
• Keep a small set of consistent dark colors for a clean look.

Sizing

What it is: Sizing utilities set the width and height of elements. In Tailwind, you use classes like w-*, h-*, min-w-*, and max-w-*.

Why it is used (real-life example): When you build a card list, you often want every image to have the same height, and you may want the card to never become too wide on big screens.

Step-by-step

• Pick a width class like w-64 to give a fixed width.
• Pick a height class like h-40 to control height.
• Use w-full when an element should fill its parent.
• Use max-w-md (or similar) to stop content from becoming too wide.

Code examples

Example 1: Fixed card size with an image area.

<div class="w-64 border rounded-lg overflow-hidden"><div class="h-32 bg-gray-200">Image Area</div><div class="p-4"><h3 class="font-semibold">Card Title</h3><p class="text-sm">This card stays the same width.</p></div></div>

Example 2: Full-width input but limited container width.

<div class="max-w-md mx-auto"><label class="block text-sm font-medium mb-2">Email</label><input class="w-full border rounded px-3 py-2" placeholder="[email protected]" /></div>

Common mistakes

• Using w-full but forgetting the parent container is also full width, so the element becomes too wide.
• Setting only width but not height for media areas, causing uneven card layouts.
• Using fixed sizes everywhere, which can look bad on very small screens.

Tips / best practices

• Use max-w-* for readable text blocks (helps long lines).
• Mix w-full with max-w-* to get flexible layouts that still have limits.
• For consistent UI, give repeated components the same height for their “media” area (like h-32).

Positioning

What it is: Positioning controls where an element sits on the page using classes like relative, absolute, fixed, and offset classes like top-*, right-*.

Why it is used (real-life example): You may want a small “New” badge on the top-right corner of a product card, or a header that stays on screen while you scroll.

Step-by-step

• Make the parent relative if you want to place a child inside it with absolute.
• Set the child to absolute and choose offsets like top-2 right-2.
• Use fixed for elements that should stay in the same screen position when scrolling.
• Use z-* if the element is hidden behind other elements.

Code examples

Example 1: Badge inside a card (absolute inside relative).

<div class="relative w-72 border rounded-lg p-4"><span class="absolute top-2 right-2 bg-blue-600 text-white text-xs px-2 py-1 rounded">New</span><h3 class="font-semibold">Product</h3><p class="text-sm">This badge is pinned to the corner.</p></div>

Example 2: Fixed bottom help button.

<button class="fixed bottom-4 right-4 bg-black text-white px-4 py-2 rounded-full shadow-lg">Help</button>

Common mistakes

• Forgetting to add relative to the parent, so the absolute child is positioned relative to the page instead.
• Using fixed and covering important content because you did not leave space.
• Not using z-* when elements overlap (your badge might be hidden).

Tips / best practices

• Use positioning for small UI details (badges, icons, floating buttons), not for full page layout.
• Keep offsets simple (like top-2 right-2) so spacing stays consistent.
• If a fixed element overlaps content, add padding to the page container (for example, extra bottom padding).

Transforms

What it is: Transform utilities let you move, rotate, scale, or skew elements. In Tailwind you use classes like translate-x-*, translate-y-*, scale-*, and rotate-*.

Why it is used (real-life example): When a user hovers a button, you can slightly scale it up to make it feel clickable. You can also rotate an icon to show “expanded” or “collapsed”.

Step-by-step

• Start with a simple element like a button or icon.
• Add a transform class such as scale-105 or rotate-6.
• If you want it to happen on hover, prefix with hover:.
• Add transition and duration-* so the change feels smooth.

Code examples

Example 1: Hover scale on a button.

<button class="bg-blue-600 text-white px-4 py-2 rounded transition duration-200 hover:scale-105">Buy now</button>

Example 2: Rotating a caret icon to show “open”.

<div class="flex items-center gap-2"><span class="text-sm">Details</span><span class="inline-block transition duration-200 rotate-180">&#9662;</span></div>

Common mistakes

• Forgetting transition, so the transform feels sudden and rough.
• Using large transforms (like big scaling) that break the layout or overlap other items.
• Applying transforms to text blocks, which can reduce readability.

Tips / best practices

• Use small changes like hover:scale-105 for a clean, modern feel.
• Combine transforms with duration-200 (or similar) for smooth motion.
• Prefer transforms for micro-interactions (buttons, icons, cards), not for core layout structure.

Animation

What it is: Animation in Tailwind means adding simple movement effects, like spinning, bouncing, or fading. Tailwind gives you ready-made animation classes.

Why it is used (real-life example): You can show a loading spinner while a page is fetching data, so the user knows something is happening.

Step-by-step

• Pick an element you want to animate (like an icon).
• Add one animation class such as animate-spin.
• Optionally control motion with utility classes like motion-reduce:animate-none for accessibility.

Code examples

Example 1: Loading spinner

<div class="flex items-center gap-3">
  <div class="h-6 w-6 rounded-full border-4 border-slate-300 border-t-sky-500 animate-spin"></div>
  <span class="text-slate-700">Loading...</span>
</div>

Example 2: Respect reduced motion

<button class="px-4 py-2 rounded bg-sky-600 text-white animate-pulse motion-reduce:animate-none">
  Saving
</button>

Common mistakes

• Animating too many things at once, making the page feel noisy.
• Forgetting accessibility: some users prefer reduced motion.
• Using animation when a simple state change (color, opacity) would be clearer.

Tips / best practices

• Use animation for feedback (loading, success), not decoration everywhere.
• Add motion-reduce:* variants to be friendly to all users.
• Keep animations short and subtle so they do not distract.

Filters

What it is: Filters change how an element looks, like making an image blurry, brighter, or grayscale. Tailwind provides filter utilities you can turn on and adjust.

Why it is used (real-life example): You can blur a background photo behind a sign-in card to make the form easier to read.

Step-by-step

• Decide which element needs the effect (often an image).
• Add filter to enable filters.
• Add a specific filter utility like blur-sm or grayscale.
• Test readability and performance, especially on large images.

Code examples

Example 1: Blur a background image

<div class="relative w-full max-w-md">
  <img class="w-full h-48 object-cover rounded-lg filter blur-sm" src="/photo.jpg" alt="Background" />
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="bg-white/80 rounded p-4">Sign in</div>
  </div>
</div>

Example 2: Grayscale on hover

<img
  class="w-48 rounded filter grayscale hover:grayscale-0 transition"
  src="/team.jpg"
  alt="Team"
/>

Common mistakes

• Forgetting the filter class, so the effect does not show.
• Using heavy blur on large images, which can feel slow on old devices.
• Reducing contrast too much (users cannot read text on top).

Tips / best practices

• Use filters lightly; combine with overlays like bg-black/40 for readable text.
• Prefer hover filters for small UI polish, not for important information.
• Test on mobile: filters can be more expensive there.

Tables

What it is: Tables display data in rows and columns. Tailwind helps you style tables with spacing, borders, zebra stripes, and alignment using utility classes.

Why it is used (real-life example): In a dashboard, you might show a list of invoices with date, status, and total amount.

Step-by-step

• Start with correct HTML: table, thead, tbody, tr, th, td.
• Add w-full so the table can use the available width.
• Use text-left, padding classes, and border classes for readability.
• Add row hover styles so users can track which row they are looking at.

Code examples

Example 1: Simple styled table

<table class="w-full text-sm">
  <thead class="text-slate-600">
    <tr class="border-b">
      <th class="py-2 text-left font-semibold">Invoice</th>
      <th class="py-2 text-left font-semibold">Status</th>
      <th class="py-2 text-right font-semibold">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-b hover:bg-slate-50">
      <td class="py-2">#1024</td>
      <td class="py-2">Paid</td>
      <td class="py-2 text-right">$49.00</td>
    </tr>
    <tr class="border-b hover:bg-slate-50">
      <td class="py-2">#1025</td>
      <td class="py-2">Open</td>
      <td class="py-2 text-right">$120.00</td>
    </tr>
  </tbody>
</table>

Example 2: Zebra stripes using odd/even

<table class="w-full text-sm">
  <tbody>
    <tr class="odd:bg-white even:bg-slate-50">
      <td class="p-2">Alice</td>
      <td class="p-2">Admin</td>
    </tr>
    <tr class="odd:bg-white even:bg-slate-50">
      <td class="p-2">Bob</td>
      <td class="p-2">Editor</td>
    </tr>
  </tbody>
</table>

Common mistakes

• Not using th for headers, which hurts accessibility.
• Forgetting alignment: numbers usually look best with text-right.
• Making tables too wide on small screens without a plan to scroll.

Tips / best practices

• Use consistent padding like py-2 and p-2 for clean rows.
• Add subtle hover backgrounds so users can follow a row easily.
• For small screens, consider wrapping the table in a container with horizontal scrolling (covered later).