Frontend

Tailwind CSS

A utility-first CSS framework: styles are composed from small classes right in the markup.

Official siteRepository

What it is

Tailwind CSS was created by Adam Wathan and is developed by Tailwind Labs, with a first release in 2017. Instead of ready components (like Bootstrap) it provides atomic classes: flex, p-4, text-sm, bg-blue-600.

Styles are written in the markup, and at build time Tailwind keeps only the classes actually used in the final CSS, so the file is small. Design tokens (colors, spacing, fonts) are defined in config or through CSS variables in @theme (Tailwind 4).

The approach pairs well with component frameworks (React, Vue, Svelte): repeated pieces go into a component, not a separate CSS class. Responsiveness and states use prefixes: md:, hover:, dark:.

Use it when

  • You build a custom design quickly without switching between HTML and CSS files.
  • A component-based frontend (React, Vue, Svelte) where styles live with the component.
  • You need a consistent token-based design system.

Avoid it when

  • The team dislikes long class strings in markup and prefers semantic CSS.
  • You need ready styled components without a designer: Bootstrap or a component library fits.

Key concepts

Utility classes
One class maps to one CSS property or a small group.
Variants
The hover:, focus:, md: and dark: prefixes add states and breakpoints.
Design tokens
Colors, spacing and fonts are defined once in the theme.
JIT / content scanning
CSS is generated only for classes found in your code.
Arbitrary values
Arbitrary values in square brackets: w-[320px], bg-[#1da1f2].

Example

A button with states and responsiveness using classes only.

Interview questions

  1. 1. What is the idea of utility-first?

    Instead of named CSS classes you compose the look from small classes right in the markup. That removes naming and CSS growth, but makes markup longer.

  2. 2. Why is the final CSS small?

    Tailwind scans your project files and generates rules only for classes in use, so unused CSS never reaches the build.

  3. 3. How do you avoid duplicating long class strings?

    Extract repeated markup into a component (React, Vue) rather than using @apply. Keep @apply for rare cases.

  4. 4. How do you do responsive design in Tailwind?

    Mobile-first prefixes: a class without a prefix always applies, and md: or lg: overrides it from a screen width upward.

Related technologies

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).

Explore the platform