🎨 Tailwind CSS

Getting started with Tailwind CSS.

Why Use Tailwind CSS

There are two main types of CSS frameworks. One is component-based—such as Bootstrap—which provides prebuilt UI components. The other is utility-based, including frameworks like Tailwind CSS and UnoCSS.

Component-based frameworks have long been the standard for quickly building websites. However, they often lead to sites that look similar unless heavily customized, and deep customization can be difficult and time-consuming. Component-based styles are easy to use but can be inflexible.

Utility-first frameworks were created to address these limitations. Utility classes provide low-level styling options, offering more power and flexibility than component classes. They are fully customizable and extensible, making it easier to build unique, custom designs without fighting against unwanted styles. Utility classes also help enforce a consistent design system, but you can still extract common patterns into your own reusable components. In summary, utility-first frameworks offer a balance between flexibility and structure.

Additional Benefits:

No naming headaches: No need to invent class names for every style or component.
Dead code elimination: Tailwind’s content configuration removes unused CSS, resulting in tiny production bundles.
Rapid prototyping: Quickly iterate on designs directly in your markup.
Consistent spacing and color scales: Enforces design consistency across your project.
First-class support for dark mode, logical properties, and CSS variables (v4+).
Great integration: Works seamlessly with React, Vue, Svelte, Next.js, Nuxt, and more.
Excellent documentation and ecosystem: Rich plugin system, official UI kits, and a vibrant community.

Getting Started

Tailwind CSS v4 brings a simplified setup, improved performance, and new features like built-in CSS variables and logical properties.

Recommended: Use pnpm as your package manager for speed and disk efficiency.

For installation and integration, always refer to the official documentation: Tailwind CSS Installation Guide and Tailwind CLI. The official docs provide up-to-date instructions for different stacks (Vite, Next.js, Nuxt, plain HTML/CSS, etc.) and are the best source for the latest setup practices.

What’s New in Tailwind CSS v4

CSS Variables: All colors, spacing, and other design tokens are now CSS variables, making them easier to customize and theme.
Logical Properties: Utilities like ps-4 (padding-inline-start) and pe-4 (padding-inline-end) support RTL layouts out of the box.
Faster builds: The JIT engine is always on, with improved performance for large projects.
Simplified configuration: Smarter defaults and a smaller config file.
Preflight off by default: The CSS reset is now opt-in.
Enhanced dark mode: Supports media, class, and selector strategies.
Improved plugin API: Easier to write and maintain custom plugins.

See the v4 release notes for more details.

Handling Hover, Focus, and Other States

Every utility class in Tailwind can be conditionally applied by adding a modifier to the beginning of the class name.

For example, to apply bg-sky-700 on hover, use hover:bg-sky-700:

<button class="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>

Tailwind includes modifiers for:

Pseudo-classes: :hover, :focus, :active, :first-child, :required, etc.
Pseudo-elements: ::before, ::after, ::placeholder, ::selection
Media and feature queries: Responsive breakpoints, dark mode, prefers-reduced-motion, print, etc.
Attribute selectors: [dir="rtl"], [open], [aria-*], etc.

You can also combine multiple modifiers for complex states, e.g. md:hover:bg-blue-700 focus:ring-2.

Responsive Design

Tailwind provides five default breakpoints inspired by common device resolutions:

Breakpoint prefix	Minimum width	CSS
`sm`	640px	`@media (min-width: 640px) { ... }`
`md`	768px	`@media (min-width: 768px) { ... }`
`lg`	1024px	`@media (min-width: 1024px) { ... }`
`xl`	1280px	`@media (min-width: 1280px) { ... }`
`2xl`	1536px	`@media (min-width: 1536px) { ... }`

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="..." />

Mobile-first workflow

Use unprefixed utilities for mobile, and override them at larger breakpoints:

<!-- Center text on mobile, left-align on screens 640px and wider -->
<div class="text-center sm:text-left"></div>

Targeting a breakpoint range

<div class="md:max-xl:flex">
  <!-- ... -->
</div>

You can customize breakpoints in your tailwind.config.js to fit your design system.

Dark Mode

Tailwind includes a dark variant to style your site differently when dark mode is enabled:

<div class="bg-white dark:bg-slate-800">
  <h3 class="mt-5 text-base font-medium text-slate-900 dark:text-white">...</h3>
  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
    Lorem ipsum dolor sit amet consectetur.
  </p>
</div>

By default, Tailwind uses the media strategy (respects OS preference).
You can build sites that support toggling dark mode manually by overriding the dark variant.
Combine with logical properties for full RTL and dark mode support.

Accessibility

Accessibility is a first-class concern in Tailwind:

Screen readers: Use sr-only to visually hide content but keep it accessible.

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

Show/hide for different breakpoints: Use not-sr-only to reveal content at certain breakpoints.
```
<span class="sr-only sm:not-sr-only">Settings</span>
```
Focus states: Use focus:ring, focus-visible:ring, and outline utilities for keyboard navigation.
Color contrast: Tailwind’s palette is designed for accessibility, but always check your combinations with tools like WebAIM Contrast Checker.
ARIA and attribute selectors: Easily style elements based on ARIA attributes or state.

Customization and Plugins

Tailwind is highly customizable. Extend the default theme, add custom colors, fonts, spacing, and more in your css entry file.

@import 'tailwindcss';
@plugin "@tailwindcss/typography";
@theme {
  --font-display: 'Satoshi', 'sans-serif';
 
  --color-avocado-100: oklch(0.99 0 0);
 
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
 
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  /* Remove default breakpoints */
  --breakpoint-3xl: initial;
}

Best Practices

Extract components: Use @apply in your CSS for repeated patterns.
Use Prettier plugins: prettier-plugin-tailwindcss auto-sorts class names.
Leverage JIT: JIT is always on in v4.
Document your design tokens: Keep your design system and Tailwind config in sync.
Prefer logical properties: Use logical utilities for better internationalization and RTL support.
Stay up to date: Regularly check the release notes for new features and best practices.

Resources

Tailwind CSS Documentation
Tailwind Play (online playground)
shadcn/ui – A set of beautifully-designed, accessible components and a code distribution platform.
Headless UI – Unstyled, accessible UI primitives for React and Vue
Heroicons – Beautiful hand-crafted SVG icons by the makers of Tailwind CSS
Awesome Tailwind CSS – Curated list of Tailwind resources

Summary

Tailwind CSS v4 is a powerful, flexible utility-first CSS framework that enables rapid UI development, consistent design, and easy customization. With built-in CSS variables, logical properties, and a blazing-fast JIT engine, Tailwind is ready for modern web development. By mastering its utility classes, responsive design, dark mode, accessibility features, and customization options, you can build modern, maintainable, and beautiful web interfaces with ease.