Tool page

Tailwind CSS

Item: Tailwind CSS
Rating: 4.8

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

Category: Stack
Pricing: €0 · Free
How often: Per project
My rating: 4.8 out of 5

Try Tailwind CSS (official site, new tab)

In short

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

Ideal for: Developers who want to style quickly without leaving their HTML/JSX file
Use case: Styling React, Next.js and Vue components, from prototype to production

What it costs

Entry price: €0. Prices taken from the official site, excluding tax.

What it costs
Plan	Per month	Per year	For whom
Open Source	€0	–	All web developers: no paid plan

Alternatives I ruled out

Alternatives I ruled out
Alternative	Why I did not keep it
CSS Modules	CSS Modules for teams that want clean separate files. Tailwind for iteration speed. Better at: Clean, readable HTML, native scoping, no classes to memorize Worse at: Separate CSS files to maintain, names to invent, slower to iterate
Bootstrap	Bootstrap to start very fast with components. Tailwind for a custom design. 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
styled-components / Emotion	CSS-in-JS for highly dynamic styles tied to props. Tailwind for the vast majority of cases. Better at: CSS-in-JS with dynamic props, perfect style/component colocation Worse at: Performance (runtime CSS), heavier bundle, more complex configuration

Strengths and limits

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

Compatibility

macOS : compatible
Windows : compatible
Linux : compatible
iOS : not compatible
Android : not compatible
Browser : compatible
API : not compatible
n8n : not compatible
Zapier : not compatible

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

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

I recommend it to: Every front-end web developer, especially with React, Next.js or Vue.
Not suited for: Projects with fully dynamic content from a CMS (classes can't be detected at compile time).
Value for money: Excellent · 4.8 out of 5

Other tools on the workbench

Stack · €0 (self-hosted)
n8n
Stack · €0
Docker
Stack · €0
Appwrite

Plan

Per month

Per year

For whom

Open Source

€0

–

All web developers: no paid plan

Alternatives I ruled out

Alternatives I ruled out
Alternative	Why I did not keep it
CSS Modules	CSS Modules for teams that want clean separate files. Tailwind for iteration speed. Better at: Clean, readable HTML, native scoping, no classes to memorize Worse at: Separate CSS files to maintain, names to invent, slower to iterate
Bootstrap	Bootstrap to start very fast with components. Tailwind for a custom design. 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
styled-components / Emotion	CSS-in-JS for highly dynamic styles tied to props. Tailwind for the vast majority of cases. Better at: CSS-in-JS with dynamic props, perfect style/component colocation Worse at: Performance (runtime CSS), heavier bundle, more complex configuration

Strengths and limits

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

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

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

I recommend it to: Every front-end web developer, especially with React, Next.js or Vue.
Not suited for: Projects with fully dynamic content from a CMS (classes can't be detected at compile time).
Value for money: Excellent · 4.8 out of 5

Tailwind CSS

In short

What it costs

Alternatives I ruled out

Strengths and limits

Pros

Cons

Main features

Compatibility

Frequently asked questions

Final verdict

Other tools on the workbench

n8n

Docker

Appwrite

Tailwind CSS

In short

What it costs

Alternatives I ruled out

Strengths and limits

Pros

Cons

Main features

Compatibility

Frequently asked questions

Final verdict

Other tools on the workbench

n8n

Docker

Appwrite