Tailwind CSS: A Guide to the Utility-First CSS Framework

Tailwind CSS is a utility-first CSS framework that provides low-level classes for quickly styling interfaces. Instead of ready-made components, Tailwind provides atomic classes: flex, p-4, text-blue-500. This article covers the fundamentals, configuration, and common patterns for working with Tailwind.

Tailwind's philosophy

Tailwind follows the utility-first principle: instead of semantic classes such as .button or .card, it uses combinations of utilities. This reduces context switching between HTML and CSS, speeds up layout work, and reduces duplicated styles.

Installation

Using npm (recommended)

npm install -D tailwindcss
npx tailwindcss init

Configuration

The tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
export default {
  content: {
    files: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  },
  theme: {
    extend: {},
  },
  plugins: [],
}

Adding it to CSS

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

Tailwind CLI

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

Core utilities

Spacing and sizing

Flexbox

Typography

Colors and backgrounds

Responsive design

The sm:, md:, lg:, xl:, and 2xl: prefixes are used for media queries:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- 1 колонка на мобильных, 2 на планшетах, 3 на десктопе -->
</div>

States

hover:, focus:, active:, disabled::

<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-300">
  Кнопка
</button>

Theme configuration

Extend the palette, fonts, and spacing in tailwind.config.js:

theme: {
  extend: {
    colors: {
      brand: {
        50: '#f0f9ff',
        500: '#0ea5e9',
        900: '#0c4a6e',
      },
    },
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
    },
    spacing: {
      '18': '4.5rem',
    },
  },
},

Components with @apply

For repeated combinations, you can use @apply:

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:ring-2 focus:ring-blue-300;
  }
}

Use it sparingly: excessive use of @apply undermines the benefits of utility-first.

Performance

Tailwind generates only the classes that are used. The production CSS bundle is usually small. Make sure that content includes all files containing Tailwind classes.

Arbitrary values

For values not included in the theme, use square brackets:

<div class="w-[347px] top-[117px] bg-[#1da1f2]">
  Произвольные значения
</div>

Dark mode

The dark: class is applied when prefers-color-scheme: dark or when the dark class is present on html:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Адаптация под тему
</div>

In tailwind.config.js:

darkMode: 'class', // или 'media'

Containers

container centers content and sets a max-width. Sizes can be configured in the theme:

theme: {
  container: {
    center: true,
    padding: '2rem',
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
  },
},

Plugins

Official plugins: @tailwindcss/forms, @tailwindcss/typography, @tailwindcss/aspect-ratio. Third-party plugins: tailwindcss-animate, @tailwindcss/line-clamp.

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
],

Further reading

Framework integration

React / Next.js

Install Tailwind and configure PostCSS. In Next.js 13+, Tailwind is added through tailwind.config.js and postcss.config.js. Apply classes directly in JSX.

Vue

The setup is similar. In Single File Components, set classes in the class attribute. For dynamic classes, use object or array syntax.

Svelte

Tailwind works with Svelte without additional configuration. Use the class: directive for conditional classes.

Production optimization

Tailwind removes unused classes during the build. Make sure that content includes all files where classes may appear, including dynamically generated strings. For dynamic classes, list them in safelist in the config.

Customization with plugins

You can add custom utilities through addUtilities:

plugin(function({ addUtilities }) {
  addUtilities({
    '.scrollbar-hide': {
      '-ms-overflow-style': 'none',
      'scrollbar-width': 'none',
      '&::-webkit-scrollbar': { display: 'none' }
    }
  })
})

Conflicts with other CSS

Tailwind uses low specificity. To resolve conflicts with global styles, use @layer to set the correct cascade order, or the ! modifier for important.

Naming recommendations

Avoid duplication: flex items-center justify-center is easier to read than a custom class with the same content. For repeated blocks consisting of 5+ utilities, consider @apply or a component.

Grid in Tailwind

Tailwind provides classes for CSS Grid:

For responsive grids: grid-cols-1 md:grid-cols-2 lg:grid-cols-3.

Animations

Built-in animations: animate-spin, animate-ping, animate-pulse, animate-bounce. Add custom animations through theme.extend.animation and @keyframes.

Variants

Application order: responsive (sm:, md:), state (hover:, focus:), dark (dark:). Custom variants can be added through plugins.

PostCSS compatibility

Tailwind works as a PostCSS plugin. In postcss.config.js:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Versioning

Tailwind v4 changed the configuration approach (CSS-first). Check the documentation for your version. v3 remains a stable choice for most projects.