💨

Tailwind CSS 4

Tailwind CSS 4 is the latest major version of the utility-first CSS framework, maintained by Tailwind Labs. It ranks #3 among trending tech tags at roughly 21.8% usage share. It's trending because version 4 ships a rewritten, much faster "Oxide" engine plus a simpler CSS-first configuration model, letting most projects skip a JavaScript config file entirely.

Quick facts
Type: Utility-first CSS framework
Made by: Tailwind Labs
License: Free / open-source (MIT)
Language/Platform: CSS; works with any HTML/frontend framework (React, Vue, plain HTML)
Primary use case: Styling UI directly in markup with composable utility classes instead of writing separate CSS files

Jump to: Example Getting started Best for

Example

Utility classes style elements directly in your HTML, and Tailwind 4's new @theme directive lets you define design tokens straight in CSS instead of a config file.

/* app.css -- Tailwind 4 CSS-first theme config */
@import "tailwindcss";

@theme {
  --color-brand: #7c3aed;
  --font-display: "Inter", sans-serif;
}

<!-- index.html -->
<button class="bg-brand text-white font-display px-4 py-2 rounded-lg hover:opacity-90">
  Get started
</button>

Getting started

Install Tailwind CSS 4 and its Vite plugin (or the standalone CLI), then import it in one CSS file.

# install Tailwind 4 with the Vite plugin
npm install tailwindcss @tailwindcss/vite

# then add @import "tailwindcss"; to your main CSS file
npm run dev

Best for: Any frontend project — from a static landing page to a full React/Next.js app — where teams want fast, consistent styling directly in markup without hand-writing and naming custom CSS classes for every element.