tailwindcss

Tailwind CSS is a utility-first CSS framework used to build user interfaces by applying small, single-purpose classes directly in markup. It's aimed at frontend developers who want to style components without switching files or writing custom CSS rules, and it works with any framework or plain HTML.

Instead of writing semantic class names and separate stylesheets, you compose designs from low-level utilities like flex, pt-4, text-center, and bg-blue-500. This keeps styling colocated with markup and avoids the naming and specificity problems that come with traditional CSS architectures.

Key features

• Utility-first classes: thousands of small, composable classes cover spacing, layout, typography, color, and more, so you rarely write raw CSS.
• Responsive design: breakpoint prefixes (sm:, md:, lg:) let you apply utilities conditionally at different screen sizes without media query boilerplate.
• State variants: modifiers like hover:, focus:, and dark: apply styles for interaction states and dark mode directly in class names.
• Customization: a config file lets you extend or override the default design tokens (colors, spacing scale, fonts, breakpoints) to match a project's design system.
• On-demand engine: Tailwind scans your source files and generates only the CSS for classes you actually use, keeping output small.
• Arbitrary values: square-bracket syntax (e.g. top-[117px]) covers one-off values that don't fit the default scale, without editing config.
• PostCSS integration: works as a PostCSS plugin, so it fits into existing build pipelines alongside autoprefixer and other transforms.
• CLI tool: a standalone CLI builds and watches CSS without requiring a separate PostCSS setup.

Ideal use cases

Tailwind fits projects where developers want fast iteration on UI without maintaining a separate CSS architecture: dashboards, marketing sites, internal tools, and component libraries built with React, Vue, Svelte, or plain HTML templates. It's a good fit for teams that want design constraints enforced through a shared config rather than through convention alone.

It's also useful for prototyping, since you can style elements directly in markup without opening a stylesheet, and for design systems where a config file becomes the single source of truth for spacing, color, and typography scales.

It's less of a fit if a project needs to ship hand-authored semantic CSS for reasons like extremely tight CSS payload budgets on legacy browsers, or if a team strongly prefers separating markup and style for handoff to designers who edit CSS directly. Long lists of utility classes in markup can also feel noisy to developers used to BEM or component-scoped CSS, so teams that value minimal class attributes may prefer a different approach.

Installation

Install Tailwind CSS via npm alongside your build tool:

npm install tailwindcss

Generate a config file:

npx tailwindcss init

Add the paths to your template files in tailwind.config.js so Tailwind knows which files to scan for class names:

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your main CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Build the CSS using the CLI:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Alternatively, add tailwindcss as a PostCSS plugin in postcss.config.js if your build tool (Vite, webpack, etc.) already runs PostCSS. Full setup guides for specific frameworks are on the official documentation site.