tailwindcss

A utility-first CSS framework for rapidly building custom user interfaces.

weekly downloads44.0M

versionv4.2.0

licenseMIT

categorystyling

Overview

Tailwind CSS is a utility-first CSS framework that fundamentally changes how developers approach styling by providing thousands of single-purpose utility classes. Instead of writing custom CSS files with semantic class names, you compose designs directly in your markup using classes like flex, pt-4, text-center, and rotate-90. The framework includes a Just-in-Time compiler that scans your template files and generates only the CSS you actually use, keeping production bundles minimal.

With over 43 million weekly downloads, Tailwind has become one of the most popular styling solutions in modern web development. It's widely adopted by companies and projects that need to build custom designs quickly without fighting against opinionated component libraries. The framework works seamlessly with React, Vue, Angular, Svelte, and other JavaScript frameworks, integrating into your build pipeline through PostCSS or dedicated plugins.

Tailwind CSS v4.0 represents a major architectural shift, moving from JavaScript-based configuration to CSS-first customization. This version eliminates most dependencies, removes the need for explicit content path configuration through automatic template detection, and exposes design tokens as native CSS variables. The framework now leverages modern CSS features like cascade layers and registered custom properties, resulting in smaller bundle sizes and better runtime performance.

Developers choose Tailwind when they need complete design control without starting from scratch. The framework provides a comprehensive design system out of the box—spacing scales, color palettes, typography, shadows—while remaining fully customizable. The constraint-based approach encourages consistent UIs by limiting arbitrary values, though arbitrary properties are supported when needed. For JavaScript developers, Tailwind eliminates context switching between HTML/JSX and CSS files, keeping styling decisions co-located with component logic.

Quick Start

typescript

// tailwind.config.js (v3) or styles.css (v4)
// For v4, add this to your main CSS file:
/*
@import "tailwindcss";

@theme {
  --color-brand-primary: #3b82f6;
  --color-brand-secondary: #8b5cf6;
  --spacing-section: 6rem;
}
*/

// React component using Tailwind utilities
import React, { useState } from 'react';

function ProductCard({ product }) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      className="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white hover:shadow-2xl transition-shadow duration-300"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="relative h-48 overflow-hidden">
        <img 
          className={`w-full h-full object-cover transition-transform duration-300 ${
            isHovered ? 'scale-110' : 'scale-100'
          }`}
          src={product.image}
          alt={product.name}
        />
        {product.onSale && (
          <span className="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
            SALE
          </span>
        )}
      </div>
      
      <div className="p-6">
        <h3 className="font-bold text-xl mb-2 text-gray-900 line-clamp-2">
          {product.name}
        </h3>
        <p className="text-gray-600 text-sm mb-4 line-clamp-3">
          {product.description}
        </p>
        
        <div className="flex items-center justify-between">
          <div className="flex items-baseline gap-2">
            <span className="text-2xl font-bold text-gray-900">
              ${product.price}
            </span>
            {product.originalPrice && (
              <span className="text-sm text-gray-500 line-through">
                ${product.originalPrice}
              </span>
            )}
          </div>
          
          <button className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
}

export default ProductCard;

Use Cases

Rapid Prototyping and MVPs: Build functional, good-looking interfaces quickly without writing custom CSS. The utility-first approach lets you iterate on designs directly in markup, making it ideal for startups and early-stage products where speed matters more than perfectly optimized code organization.

Design System Implementation: Establish a consistent design language across large applications by customizing Tailwind's configuration to match brand guidelines. The framework's design tokens (colors, spacing, typography) become the single source of truth, ensuring UI consistency across teams without requiring dedicated CSS architecture.

Component Libraries and UI Kits: Create reusable component libraries where Tailwind utilities handle styling while JavaScript manages behavior. Many popular component libraries like Headless UI and shadcn/ui use Tailwind as their styling layer, providing unstyled components that consume Tailwind classes.

Responsive Web Applications: Build complex responsive layouts using Tailwind's breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:) without writing media queries. The mobile-first approach and container queries support make it straightforward to adapt UIs across device sizes.

Marketing Sites and Landing Pages: Craft pixel-perfect marketing pages with custom designs that don't look like typical Bootstrap or Material UI templates. Tailwind's utility classes provide the flexibility needed for unique layouts while maintaining clean markup and minimal CSS output.

Pros & Cons

Pros

+Eliminates CSS naming decisions and reduces context switching by keeping styles co-located with markup
+Automatic purging removes unused styles, resulting in production CSS files typically under 10KB
+Highly customizable through configuration while maintaining consistent design constraints across the application
+Excellent developer experience with IntelliSense support, automatic class sorting, and tight framework integrations
+Fast iteration cycles since changes happen directly in markup without touching separate CSS files

Cons

−HTML markup becomes verbose with long strings of utility classes, potentially reducing readability
−Learning curve requires memorizing utility class names and Tailwind's naming conventions
−Extracting components becomes necessary to avoid repetition, adding architectural decisions
−Debugging can be harder when tracking down which of many classes is causing layout issues
−Team adoption requires everyone to learn Tailwind's system rather than leveraging existing CSS knowledge

Alternatives

styled-componentsv6.3.10

CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.

stylingreactcss

7.8M / week

unocssv66.6.0

The instant on-demand Atomic CSS engine.

stylingunocssatomic-css

314K / week

Comparisons

tailwindcss vs unocss

styling

tailwindcss vs styled-components

styling

Install

bash

npm install tailwindcss

bash

pnpm add tailwindcss

bash

bun add tailwindcss

Overview

Quick Start

typescript

// tailwind.config.js (v3) or styles.css (v4)
// For v4, add this to your main CSS file:
/*
@import "tailwindcss";

@theme {
  --color-brand-primary: #3b82f6;
  --color-brand-secondary: #8b5cf6;
  --spacing-section: 6rem;
}
*/

// React component using Tailwind utilities
import React, { useState } from 'react';

function ProductCard({ product }) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      className="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white hover:shadow-2xl transition-shadow duration-300"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="relative h-48 overflow-hidden">
        <img 
          className={`w-full h-full object-cover transition-transform duration-300 ${
            isHovered ? 'scale-110' : 'scale-100'
          }`}
          src={product.image}
          alt={product.name}
        />
        {product.onSale && (
          <span className="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
            SALE
          </span>
        )}
      </div>
      
      <div className="p-6">
        <h3 className="font-bold text-xl mb-2 text-gray-900 line-clamp-2">
          {product.name}
        </h3>
        <p className="text-gray-600 text-sm mb-4 line-clamp-3">
          {product.description}
        </p>
        
        <div className="flex items-center justify-between">
          <div className="flex items-baseline gap-2">
            <span className="text-2xl font-bold text-gray-900">
              ${product.price}
            </span>
            {product.originalPrice && (
              <span className="text-sm text-gray-500 line-through">
                ${product.originalPrice}
              </span>
            )}
          </div>
          
          <button className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
}

export default ProductCard;

Use Cases

Pros & Cons

Pros

+Eliminates CSS naming decisions and reduces context switching by keeping styles co-located with markup
+Automatic purging removes unused styles, resulting in production CSS files typically under 10KB
+Highly customizable through configuration while maintaining consistent design constraints across the application
+Excellent developer experience with IntelliSense support, automatic class sorting, and tight framework integrations
+Fast iteration cycles since changes happen directly in markup without touching separate CSS files

Cons

−HTML markup becomes verbose with long strings of utility classes, potentially reducing readability
−Learning curve requires memorizing utility class names and Tailwind's naming conventions
−Extracting components becomes necessary to avoid repetition, adding architectural decisions
−Debugging can be harder when tracking down which of many classes is causing layout issues
−Team adoption requires everyone to learn Tailwind's system rather than leveraging existing CSS knowledge