Stack

Tailwind CSS

Item: Tailwind CSS
Rating: 4.8

“Style directly in the HTML: no more CSS files to manage, no more BEM naming.”

From €0Try Tailwind CSS

Quick summary

Ideal forDevelopers who want to style quickly without leaving their HTML/JSX file

Use caseStyling React, Next.js and Vue components, from prototype to production

StrengthDevelopment speed: no more naming classes or switching between files

WeaknessVerbose HTML with long class strings: readability needs work with cn()

Tailwind changed the way we write CSS. Once you adopt it, going back to classic CSS or Bootstrap feels laborious.

Pros & cons

Pros

No class naming: no more invented ".card-header-title-wrapper"
Minimal CSS bundle in production: Tailwind automatically removes unused classes
Implicit design system: consistent spacing, colors and typography by default
Excellent integration with React, Next.js, Vue, Astro, Laravel
Rich ecosystem: shadcn/ui, Headless UI, Radix, all based on Tailwind

Cons

Verbose HTML: classes pile up fast (`className="flex items-center gap-4 px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-lg font-medium text-white"`)
Initial learning curve: remembering the mappings (px-4 = 1rem, text-sm = 0.875rem)
No global styles without configuration: some patterns need @layer
Less suited to sites with dynamic content coming from a CMS (classes in the content are not purged)

Pricing

Open Source

€0/month

Complete CSS framework
Automatic CSS purge (minimal bundle in prod)
JIT (Just-in-Time) mode
Official plugins (Typography, Forms, Aspect Ratio)
CLI and PostCSS plugin

All web developers: no paid plan

Main features

JIT (Just-in-Time) mode

Generates only the CSS classes used in the code, on the fly

Tiny CSS bundle in production, arbitrary variants (w-[347px], bg-[#1a1a2e])

Variants

Prefixes for states: hover:, focus:, dark:, md:, lg:, group-hover:...

Handle responsive, dark mode and interactive states without writing media queries

Built-in design tokens

Consistent, customizable color palette, spacing and typography

Turnkey design system, customizable through tailwind.config

Typography plugin

Typographic styles for rich markdown/HTML content (prose)

Style blog articles and MDX content without writing custom CSS

Arbitrary values

Use any CSS value directly in a class ([color:#1a1a2e])

Specific cases without leaving Tailwind or creating a custom class

Comparison with the alternatives

Each alternative has its own page. See all comparisons.

CSS Modules

Better at:Clean, readable HTML, native scoping, no classes to memorize

Worse at:Separate CSS files to maintain, names to invent, slower to iterate

CSS Modules for teams that want clean separate files. Tailwind for iteration speed.

Tailwind CSS vs CSS Modules comparison

Bootstrap

Better at:Ready-to-use pre-built components, exhaustive documentation, very well known

Worse at:Uniform design that is hard to customize, heavier bundle, less flexible

Bootstrap to start very fast with components. Tailwind for a custom design.

Tailwind CSS vs Bootstrap comparison

styled-components / Emotion

Better at:CSS-in-JS with dynamic props, perfect style/component colocation

Worse at:Performance (runtime CSS), heavier bundle, more complex configuration

CSS-in-JS for highly dynamic styles tied to props. Tailwind for the vast majority of cases.

Tailwind CSS vs styled-components / Emotion comparison

Compatibility

Frequently asked questions

Is Tailwind CSS free?

Yes, fully free and open source (MIT). Tailwind UI (premium components) is paid.

Does Tailwind bloat the final CSS?

No: JIT mode only generates the classes that are used. The final CSS is usually <10 KB gzipped.

Is Tailwind suited to dark mode?

Yes, the `dark:` prefix handles dark mode automatically based on the system preference or a class on the <html>.

Tailwind vs shadcn/ui?

shadcn/ui is a component library based on Tailwind. The two are complementary, not competing.

Final verdict

Value for money: Excellent

“The CSS framework that changed the industry. Once adopted, there's no going back.”

I recommend it toEvery front-end web developer, especially with React, Next.js or Vue.

Not suited forProjects with fully dynamic content from a CMS (classes can't be detected at compile time).

Try Tailwind CSS

All my tools

Quick summary

Ideal forDevelopers who want to style quickly without leaving their HTML/JSX file

Use caseStyling React, Next.js and Vue components, from prototype to production

StrengthDevelopment speed: no more naming classes or switching between files

WeaknessVerbose HTML with long class strings: readability needs work with cn()

Tailwind changed the way we write CSS. Once you adopt it, going back to classic CSS or Bootstrap feels laborious.

Pros & cons

Pros

No class naming: no more invented ".card-header-title-wrapper"
Minimal CSS bundle in production: Tailwind automatically removes unused classes
Implicit design system: consistent spacing, colors and typography by default
Excellent integration with React, Next.js, Vue, Astro, Laravel
Rich ecosystem: shadcn/ui, Headless UI, Radix, all based on Tailwind

Cons

Verbose HTML: classes pile up fast (`className="flex items-center gap-4 px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-lg font-medium text-white"`)
Initial learning curve: remembering the mappings (px-4 = 1rem, text-sm = 0.875rem)
No global styles without configuration: some patterns need @layer
Less suited to sites with dynamic content coming from a CMS (classes in the content are not purged)

Main features

JIT (Just-in-Time) mode

Generates only the CSS classes used in the code, on the fly

Tiny CSS bundle in production, arbitrary variants (w-[347px], bg-[#1a1a2e])

Variants

Prefixes for states: hover:, focus:, dark:, md:, lg:, group-hover:...

Handle responsive, dark mode and interactive states without writing media queries

Built-in design tokens

Consistent, customizable color palette, spacing and typography

Turnkey design system, customizable through tailwind.config

Typography plugin

Typographic styles for rich markdown/HTML content (prose)

Style blog articles and MDX content without writing custom CSS

Arbitrary values

Use any CSS value directly in a class ([color:#1a1a2e])

Specific cases without leaving Tailwind or creating a custom class

Comparison with the alternatives

Each alternative has its own page. See all comparisons.

CSS Modules

Better at:Clean, readable HTML, native scoping, no classes to memorize

Worse at:Separate CSS files to maintain, names to invent, slower to iterate

CSS Modules for teams that want clean separate files. Tailwind for iteration speed.

Tailwind CSS vs CSS Modules comparison

Bootstrap

Better at:Ready-to-use pre-built components, exhaustive documentation, very well known

Worse at:Uniform design that is hard to customize, heavier bundle, less flexible

Bootstrap to start very fast with components. Tailwind for a custom design.

Tailwind CSS vs Bootstrap comparison

styled-components / Emotion

Better at:CSS-in-JS with dynamic props, perfect style/component colocation

Worse at:Performance (runtime CSS), heavier bundle, more complex configuration

CSS-in-JS for highly dynamic styles tied to props. Tailwind for the vast majority of cases.

Tailwind CSS vs styled-components / Emotion comparison

Frequently asked questions

Is Tailwind CSS free?

Yes, fully free and open source (MIT). Tailwind UI (premium components) is paid.

Does Tailwind bloat the final CSS?

No: JIT mode only generates the classes that are used. The final CSS is usually <10 KB gzipped.

Is Tailwind suited to dark mode?

Yes, the `dark:` prefix handles dark mode automatically based on the system preference or a class on the <html>.

Tailwind vs shadcn/ui?

shadcn/ui is a component library based on Tailwind. The two are complementary, not competing.

Final verdict

Value for money: Excellent

“The CSS framework that changed the industry. Once adopted, there's no going back.”

I recommend it toEvery front-end web developer, especially with React, Next.js or Vue.

Not suited forProjects with fully dynamic content from a CMS (classes can't be detected at compile time).

Try Tailwind CSS

Tailwind CSS

Quick summary

Pros & cons

Pricing

Main features

Comparison with the alternatives

Compatibility

Frequently asked questions

Final verdict

One letter a month, on what I build and what I learn.

Tailwind CSS

Quick summary

Pros & cons

Pricing

Main features

Comparison with the alternatives

Compatibility

Frequently asked questions

Final verdict