tailwindcss.com Paid content

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework, available at Tailwind CSS. Rather than offering prebuilt components, it provides small single-purpose classes for spacing, typography, color, layout and responsive behavior that you apply directly in your markup.

How it differs from component frameworks

Who it suits

• Developers who prefer styling inside templates rather than separate stylesheets
• Teams wanting consistent design tokens for color, spacing and breakpoints
• Projects using component frameworks such as React or Vue, where classes can be reused in components

A common concern is readability: long class lists may feel cluttered, so teams often extract repeated patterns into components. Tailwind is typically configured through a build step, and it is also offered as a hosted option for teams that prefer not to manage that setup. It is a strong fit for custom interfaces rather than sites that mainly need a ready-made theme.

How does Tailwind CSS differ from other CSS frameworks like Bootstrap?

Tailwind CSS takes a utility-first approach: instead of shipping prebuilt components, it provides small, single-purpose classes such as spacing, color, and flexbox helpers that you combine directly in your markup. Bootstrap, by contrast, is component-first — it offers ready-made buttons, cards, navbars and a grid, styled by default and customized through themes or overrides.

Practical differences

• Styling model: Tailwind favors composing classes in HTML; Bootstrap favors applying a component class and adjusting variables.
• Default look: Bootstrap produces a recognizable, opinionated appearance out of the box. Tailwind pages typically look unstyled until you assemble utilities, which suits bespoke designs.
• Customization: Tailwind is configured through a config file that defines your design tokens. Bootstrap customization often means overriding Sass variables or writing extra CSS.
• Markup: Tailwind class lists can be long and repetitive; Bootstrap markup is shorter but harder to diverge from without overrides.
• Ecosystem: Both have component libraries and templates. Bootstrap's are long-established; Tailwind's tend to be community-driven or commercial.

Who each suits

Tailwind is often chosen by teams building custom interfaces who want design consistency enforced by tokens and who don't mind verbose markup. Bootstrap is well suited to projects needing a polished result quickly, prototypes, admin panels, or teams that prefer conventional components and minimal CSS decisions.

Neither is strictly better; the trade-off is control and uniqueness versus speed and convention. See Tailwind CSS and Bootstrap for their own documentation.

How do I install and set up Tailwind CSS in a project?

Tailwind CSS is a utility-first CSS framework. Instead of writing custom classes, you compose small single-purpose utilities directly in your markup. Installation has two common paths, and the right one depends on your stack.

Two common setups

PostCSS-based build (recommended for most projects). Install Tailwind as a dependency through your package manager, then add it as a PostCSS plugin in a config file. You create a tailwind.config.js file to declare which files Tailwind should scan for class names, and a CSS entry file with @tailwind base;, @tailwind components;, and @tailwind utilities;. Your build tool then generates only the utilities you actually use.

CLI or standalone binary. If you don't have a Node toolchain, the standalone build can compile your CSS from the command line, which suits simple static sites or quick prototypes.

Framework integrations

Many frameworks have official guides covering the same steps with framework-specific config files. The core idea is unchanged: install, point Tailwind at your content, add the directives, and build.

Trade-offs

Utility classes keep styling close to markup and avoid naming overhead, but markup becomes verbose and teams typically extract components when patterns repeat. A build step is effectively required for production because unused utilities are purged at compile time.

Start with the official documentation at Tailwind CSS, which lists installation instructions per framework and tool.

What are utility classes in Tailwind CSS and how are they used?

Utility classes in Tailwind CSS are small, single-purpose CSS classes that each apply one specific style. Instead of writing custom CSS for a component, you compose styles directly in your markup by combining many of these classes.

How they work

Each class maps to a narrow declaration. For example, a padding class sets one padding value, a text-color class sets one color, and a flex class sets a display mode. You build a design by stacking them on an element:

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

Here each class controls one aspect: horizontal padding, vertical padding, corner rounding, background color and text color.

Common categories

• Layout: display, position, flex and grid utilities
• Spacing: margin and padding
• Typography: font size, weight, color and alignment
• Color and background: text, border and fill colors
• Effects: shadows, opacity and transitions
• Responsive and state variants: prefixes such as md: or hover: apply a utility only at a breakpoint or interaction state

Trade-offs

The approach keeps styling close to structure and avoids inventing class names, which suits teams building interfaces quickly and consistently. The cost is longer class attributes, and reusable components often need extraction into templates or component classes to stay readable. It differs from frameworks like Bootstrap, which ship prebuilt component classes such as buttons and cards rather than only single-purpose utilities.

Can Tailwind CSS be used with JavaScript frameworks like React or Vue?

Yes. Tailwind CSS is designed to sit alongside component-based JavaScript frameworks rather than replace them. Because it is essentially a set of CSS utility classes, it works with React, Vue, Svelte, Angular, Solid and others, as well as with plain HTML and server-rendered templates.

How it typically fits in

In a React or Vue project, you usually import Tailwind through your build pipeline (for example, PostCSS or a framework-specific integration) and then apply utility classes directly in your JSX or single-file component markup. Class names can be composed conditionally with JavaScript expressions, computed properties or helper functions, which suits dynamic interfaces such as toggled states, themes and responsive layouts.

Trade-offs to consider

• Classes live in markup, so components can look verbose; extracting reusable components or using a class-merging helper often helps.
• Teams unfamiliar with utility-first CSS may need time to adjust, especially if they expect prebuilt component styles.
• Framework integrations vary in setup effort, and configuration is usually shared across the project.

Where it is commonly used

It is well suited to design-system work, dashboards, marketing sites and applications where teams want consistent spacing, colour and typography tokens without writing bespoke CSS for every element. For official guidance, see Tailwind CSS. Framework documentation, such as React or Vue guides, can clarify integration details.

How do I customize the default Tailwind CSS configuration?

Customizing Tailwind CSS means editing the tailwind.config.js file that sits in your project root. This file holds the design tokens Tailwind uses to generate utility classes, so changes there ripple across your whole stylesheet.

Main customization points

• theme: Extend or replace defaults for colors, spacing, fonts, breakpoints, border radius and more. Use theme.extend to add values while keeping Tailwind's originals, or theme directly to override them.
• content: List the files Tailwind should scan for class names. Missing paths mean unused utilities get purged from production builds.
• plugins: Register official or third-party plugins, or write your own with plugin().
• variants / corePlugins: Control which utilities exist and which states (hover, focus, dark) they support.

Extend versus override

Practical notes

Configuration is plain JavaScript, so you can import values, compute scales or share tokens between projects. Referencing theme() inside CSS, or using @apply, keeps custom styles consistent with your config. For larger teams, a single shared config file helps keep spacing, color and typography decisions aligned.

The official documentation at Tailwind CSS covers each key in detail, including examples for extending colors, fonts and screens. Start with extend unless you deliberately want to remove default values.