FRONT END

Home › Glossary › Front End· 407 ·

Tailwind CSS

\\tayl-wind see-ess-ess\\n.

Filed underFront EndSoftware EngineeringDesign

In brief · quick answer

Tailwind CSS is a utility-first CSS framework that provides low-level, composable utility classes for building custom designs directly in HTML, eliminating the need to write custom CSS.

§ 1 Definition

Tailwind CSS is a utility-first CSS framework created by Adam Wathan. Instead of providing pre-built components like Bootstrap or Material UI, Tailwind offers thousands of atomic utility classes (like `flex`, `pt-4`, `text-center`, `bg-blue-500`) that you compose directly in your HTML or JSX to build any design. Tailwind is designed around a configurable design system with a predefined spacing scale, color palette, typography scale, and breakpoint system, all of which can be customized in `tailwind.config.js`. The framework includes built-in responsive prefixes (`sm:`, `md:`, `lg:`), state variants (`hover:`, `focus:`, `active:`), dark mode support, and a JIT (just-in-time) compiler that generates only the CSS you actually use, resulting in production bundles typically under 10KB gzipped.

§ 2 Utility-First Philosophy

The utility-first approach means you build components by combining small, single-purpose classes rather than naming abstract CSS classes and writing custom styles. Instead of creating a class like `.blog-card` and writing `padding: 1rem; border-radius: 0.5rem; box-shadow: ...;` in separate CSS files, you write `<div class="p-4 rounded-lg shadow-md">` directly in the template. This eliminates context switching between HTML and CSS files, prevents CSS specificity wars, and makes it immediately clear what any element looks like without searching stylesheets.

§ 3 Design System Configuration

Tailwind's configuration file defines your design tokens: colors, fonts, spacing, breakpoints, shadows, and more. All utility classes are generated from this configuration, ensuring consistency across your entire project. You can extend or override any part of the default theme. The JIT engine (default since v3.0) generates CSS on-demand by scanning your template files, so only the classes you actually use end up in production.

§ 4 Note

Common misunderstanding: Tailwind is not just 'inline styles with classes.' Utility classes follow a consistent design system (spacing scale, color palette, typography) that inline styles lack. Inline styles use arbitrary values (padding: 17px); Tailwind uses constrained values from your design tokens (p-4 = 1rem). Another misconception: Tailwind produces bloated HTML. Production class names are short (p-4, flex, text-lg), and the JIT engine outputs less than 10KB of CSS for most sites.

§ 5 In code

```html
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800">
  <img class="w-full h-48 object-cover" src="/photo.jpg" alt="Photo">
  <div class="px-6 py-4">
    <h2 class="font-bold text-xl mb-2 text-gray-900 dark:text-white">Card Title</h2>
    <p class="text-gray-700 dark:text-gray-300 text-base">
      Content goes here.
    </p>
  </div>
</div>
```

§ 6 Common questions

Q. Does Tailwind replace CSS?: A. No. Tailwind is a CSS framework. You still use CSS concepts (flexbox, grid, colors, spacing) but through utility classes rather than custom property declarations. You can and should write custom CSS for truly unique designs.
Q. Is Tailwind only for prototyping?: A. No. Tailwind is production-ready. Companies like OpenAI, GitHub, Netflix, and Shopify use Tailwind in production. The JIT compiler produces minimal CSS output.

Key takeaways

Tailwind provides low-level utility classes that compose into any design, eliminating custom CSS.
The JIT compiler generates only the CSS you use, keeping production bundles under 10KB.
Tailwind enforces a consistent design system through its configurable theme.

How Atomic Glue helps

Tailwind CSS is the default styling approach for Atomic Glue web projects. It enforces design consistency, speeds up development by removing context switching between HTML and CSS, and produces smaller CSS bundles than traditional approaches. Our team builds custom design systems on top of Tailwind's configuration layer, giving clients a unique look and feel without the maintenance burden of hand-written CSS. It is a core piece of our website development workflow.

Get in touch

# Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides low-level, composable utility classes for building custom designs directly in HTML, eliminating the need to write custom CSS.

Category: Front End (also: Software Engineering, Design)

Author: Atomic Glue Development Team

## Definition

## Utility-First Philosophy

## Design System Configuration

## Note

## In code

## Common questions
Q: Does Tailwind replace CSS?
A: No. Tailwind is a CSS framework. You still use CSS concepts (flexbox, grid, colors, spacing) but through utility classes rather than custom property declarations. You can and should write custom CSS for truly unique designs.
Q: Is Tailwind only for prototyping?
A: No. Tailwind is production-ready. Companies like OpenAI, GitHub, Netflix, and Shopify use Tailwind in production. The JIT compiler produces minimal CSS output.

## Key takeaways

Tailwind provides low-level utility classes that compose into any design, eliminating custom CSS.
The JIT compiler generates only the CSS you use, keeping production bundles under 10KB.
Tailwind enforces a consistent design system through its configurable theme.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/tailwind-css