Rapidly build modern websites without ever leaving your HTML.

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Get started
<div class="flex flex-col items-center rounded-2xl">  <div>    <img class="size-48 shadow-xl" alt="" src="/img/cover.png" />  </div>  <div class="flex">    <span>Class Warfare</span>    <span>The Anti-Patterns</span>    <span class="flex">      <span>No. 4</span>      <span>·</span>      <span>2025</span>    </span>  </div></div>
Class WarfareThe Anti-PatternsNo. 4·2025

Why Tailwind CSS?

Built for the modern web.

Tailwind is unapologetically modern, and takes advantage of all the latest and greatest CSS features to make the developer experience as enjoyable as possible.

Responsive design

Okay, it’s not exactly cutting edge, but just throw a screen size in front of literally any utility to apply it at a specific breakpoint.

Mobile
sm
md
lg
xl
Entire houseBeach House on Lake Huron
Entire house
Beach House on Lake Huron2.66(128 reviews)·Bayfield, ON

This sunny and spacious room is for those traveling light and looking for a comfy and cozy place to lay their head for a night...

Show more
Filters

What’s a website these days without a few backdrop blurs? Keep stacking filters until your designer asks you to please, please stop.

blur-sm
brightness-150
grayscale
contrast-150
saturate-200
sepia
Dark mode

If you’re not a fan of burning your retinas, just stick dark: in front of any color to apply it in dark mode.

CSS variables

Customizing your theme is as simple as creating a few CSS variables.

@theme {  --font-sans: "Inter", sans-serif;  --font-mono: "IBM Plex Mono", monospace;  --text-tiny: 0.625rem;  --text-tiny--line-height: 1.5rem;  --color-mint-100: oklch(0.97 0.15 145);  --color-mint-200: oklch(0.92 0.18 145);  --color-mint-300: oklch(0.85 0.22 145);  --color-mint-400: oklch(0.78 0.25 145);  --color-mint-500: oklch(0.7 0.28 145);  --color-mint-600: oklch(0.63 0.3 145);  --color-mint-700: oklch(0.56 0.32 145);  --color-mint-800: oklch(0.48 0.35 145);  --color-mint-900: oklch(0.4 0.37 145);  --color-mint-950: oklch(0.3 0.4 145);}
P3 colors

The color palette now uses more vibrant wide gamut colors without you needing to understand what any of that even means.

red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
950
oklch(25.8% 0.092 26.042)
oklch(26.6% 0.079 36.259)
oklch(27.9% 0.077 45.635)
oklch(28.6% 0.066 53.813)
oklch(27.4% 0.072 132.109)
oklch(26.6% 0.065 152.934)
oklch(26.2% 0.051 172.552)
oklch(27.7% 0.046 192.524)
oklch(30.2% 0.056 229.695)
oklch(29.3% 0.066 243.157)
oklch(28.2% 0.091 267.935)
oklch(25.7% 0.09 281.288)
oklch(28.3% 0.141 291.089)
oklch(29.1% 0.149 302.717)
oklch(29.3% 0.136 325.661)
oklch(28.4% 0.109 3.907)
oklch(27.1% 0.105 12.094)
900
oklch(39.6% 0.141 25.723)
oklch(40.8% 0.123 38.172)
oklch(41.4% 0.112 45.904)
oklch(42.1% 0.095 57.708)
oklch(40.5% 0.101 131.063)
oklch(39.3% 0.095 152.535)
oklch(37.8% 0.077 168.94)
oklch(38.6% 0.063 188.416)
oklch(39.8% 0.07 227.392)
oklch(39.1% 0.09 240.876)
oklch(37.9% 0.146 265.522)
oklch(35.9% 0.144 278.697)
oklch(38% 0.189 293.745)
oklch(38.1% 0.176 304.987)
oklch(40.1% 0.17 325.612)
oklch(40.8% 0.153 2.432)
oklch(41% 0.159 10.272)
800
oklch(44.4% 0.177 26.899)
oklch(47% 0.157 37.304)
oklch(47.3% 0.137 46.201)
oklch(47.6% 0.114 61.907)
oklch(45.3% 0.124 130.933)
oklch(44.8% 0.119 151.328)
oklch(43.2% 0.095 166.913)
oklch(43.7% 0.078 188.216)
oklch(45% 0.085 224.283)
oklch(44.3% 0.11 240.79)
oklch(42.4% 0.199 265.638)
oklch(39.8% 0.195 277.366)
oklch(43.2% 0.232 292.759)
oklch(43.8% 0.218 303.724)
oklch(45.2% 0.211 324.591)
oklch(45.9% 0.187 3.815)
oklch(45.5% 0.188 13.697)
700
oklch(50.5% 0.213 27.518)
oklch(55.3% 0.195 38.402)
oklch(55.5% 0.163 48.998)
oklch(55.4% 0.135 66.442)
oklch(53.2% 0.157 131.589)
oklch(52.7% 0.154 150.069)
oklch(50.8% 0.118 165.612)
oklch(51.1% 0.096 186.391)
oklch(52% 0.105 223.128)
oklch(50% 0.134 242.749)
oklch(48.8% 0.243 264.376)
oklch(45.7% 0.24 277.023)
oklch(49.1% 0.27 292.581)
oklch(49.6% 0.265 301.924)
oklch(51.8% 0.253 323.949)
oklch(52.5% 0.223 3.958)
oklch(51.4% 0.222 16.935)
600
oklch(57.7% 0.245 27.325)
oklch(64.6% 0.222 41.116)
oklch(66.6% 0.179 58.318)
oklch(68.1% 0.162 75.834)
oklch(64.8% 0.2 131.684)
oklch(62.7% 0.194 149.214)
oklch(59.6% 0.145 163.225)
oklch(60% 0.118 184.704)
oklch(60.9% 0.126 221.723)
oklch(58.8% 0.158 241.966)
oklch(54.6% 0.245 262.881)
oklch(51.1% 0.262 276.966)
oklch(54.1% 0.281 293.009)
oklch(55.8% 0.288 302.321)
oklch(59.1% 0.293 322.896)
oklch(59.2% 0.249 0.584)
oklch(58.6% 0.253 17.585)
500
oklch(63.7% 0.237 25.331)
oklch(70.5% 0.213 47.604)
oklch(76.9% 0.188 70.08)
oklch(79.5% 0.184 86.047)
oklch(76.8% 0.233 130.85)
oklch(72.3% 0.219 149.579)
oklch(69.6% 0.17 162.48)
oklch(70.4% 0.14 182.503)
oklch(71.5% 0.143 215.221)
oklch(68.5% 0.169 237.323)
oklch(62.3% 0.214 259.815)
oklch(58.5% 0.233 277.117)
oklch(60.6% 0.25 292.717)
oklch(62.7% 0.265 303.9)
oklch(66.7% 0.295 322.15)
oklch(65.6% 0.241 354.308)
oklch(64.5% 0.246 16.439)
400
oklch(70.4% 0.191 22.216)
oklch(75% 0.183 55.934)
oklch(82.8% 0.189 84.429)
oklch(85.2% 0.199 91.936)
oklch(84.1% 0.238 128.85)
oklch(79.2% 0.209 151.711)
oklch(76.5% 0.177 163.223)
oklch(77.7% 0.152 181.912)
oklch(78.9% 0.154 211.53)
oklch(74.6% 0.16 232.661)
oklch(70.7% 0.165 254.624)
oklch(67.3% 0.182 276.935)
oklch(70.2% 0.183 293.541)
oklch(71.4% 0.203 305.504)
oklch(74% 0.238 322.16)
oklch(71.8% 0.202 349.761)
oklch(71.2% 0.194 13.428)
300
oklch(80.8% 0.114 19.571)
oklch(83.7% 0.128 66.29)
oklch(87.9% 0.169 91.605)
oklch(90.5% 0.182 98.111)
oklch(89.7% 0.196 126.665)
oklch(87.1% 0.15 154.449)
oklch(84.5% 0.143 164.978)
oklch(85.5% 0.138 181.071)
oklch(86.5% 0.127 207.078)
oklch(82.8% 0.111 230.318)
oklch(80.9% 0.105 251.813)
oklch(78.5% 0.115 274.713)
oklch(81.1% 0.111 293.571)
oklch(82.7% 0.119 306.383)
oklch(83.3% 0.145 321.434)
oklch(82.3% 0.12 346.018)
oklch(81% 0.117 11.638)
200
oklch(88.5% 0.062 18.334)
oklch(90.1% 0.076 70.697)
oklch(92.4% 0.12 95.746)
oklch(94.5% 0.129 101.54)
oklch(93.8% 0.127 124.321)
oklch(92.5% 0.084 155.995)
oklch(90.5% 0.093 164.15)
oklch(91% 0.096 180.426)
oklch(91.7% 0.08 205.041)
oklch(90.1% 0.058 230.902)
oklch(88.2% 0.059 254.128)
oklch(87% 0.065 274.039)
oklch(89.4% 0.057 293.283)
oklch(90.2% 0.063 306.703)
oklch(90.3% 0.076 319.62)
oklch(89.9% 0.061 343.231)
oklch(89.2% 0.058 10.001)
100
oklch(93.6% 0.032 17.717)
oklch(95.4% 0.038 75.164)
oklch(96.2% 0.059 95.617)
oklch(97.3% 0.071 103.193)
oklch(96.7% 0.067 122.328)
oklch(96.2% 0.044 156.743)
oklch(95% 0.052 163.051)
oklch(95.3% 0.051 180.801)
oklch(95.6% 0.045 203.388)
oklch(95.1% 0.026 236.824)
oklch(93.2% 0.032 255.585)
oklch(93% 0.034 272.788)
oklch(94.3% 0.029 294.588)
oklch(94.6% 0.033 307.174)
oklch(95.2% 0.037 318.852)
oklch(94.8% 0.028 342.258)
oklch(94.1% 0.03 12.58)
50
oklch(97.1% 0.013 17.38)
oklch(98% 0.016 73.684)
oklch(98.7% 0.022 95.277)
oklch(98.7% 0.026 102.212)
oklch(98.6% 0.031 120.757)
oklch(98.2% 0.018 155.826)
oklch(97.9% 0.021 166.113)
oklch(98.4% 0.014 180.72)
oklch(98.4% 0.019 200.873)
oklch(97.7% 0.013 236.62)
oklch(97% 0.014 254.604)
oklch(96.2% 0.018 272.314)
oklch(96.9% 0.016 293.756)
oklch(97.7% 0.014 308.299)
oklch(97.7% 0.017 320.058)
oklch(97.1% 0.014 343.198)
oklch(96.9% 0.015 12.422)
CSS grid layout

Using grid utilities directly in your HTML makes it so much easier to reason about complex layouts.

Browse properties

Treehouses
Mansions
Lakefront cottages
Designer homes
Transitions and animations

Transitions that work the way you'd expect — throw a few utilities on an element and you're in business.

linear

ease-out

ease-in-out

ease-in

Cascade layers

Tailwind uses CSS layers so you don’t have to worry about specificity issues.

@layer theme, base, components, utilities;@layer theme {  :root {    /* Your theme variables */  }}@layer base {  /* Preflight styles */}@layer components {  /* Your custom components */}@layer utilities {  /* Your utility classes */}
Logical properties

Supporting multiple language text directions is no longer a nightmare.

ltr
rtl
Will WintonDirector of Operations
Kristin YardlyMarketing Coordinator
Emanual CuccittiniStaff Engineer
Kiara SmithVP of Engineering
سارة أحمدمديرة مشاريع
علي محمدمطور برمجيات
خالد عمرمصمم واجهات المستخدم
Container queries

Tag an element as a container to let children adapt to changes in its size.

<div class="@container">  <div class="grid grid-cols-1 @sm:grid-cols-2">    <img      src="/img/photo-1.jpg"      class="aspect-square @sm:aspect-3/2 object-cover"    />    <img      src="/img/photo-2.jpg"      class="aspect-square @sm:aspect-3/2 object-cover"    />    <img      src="/img/photo-3.jpg"      class="aspect-square @sm:aspect-3/2 object-cover"    />    <img      src="/img/photo-4.jpg"      class="aspect-square @sm:aspect-3/2 object-cover"    />  </div></div>
Gradients

No need to remember that complicated gradient syntax — create silky-smooth gradients with just a few utility classes.

Power Meets Precision

Redefining real-time performance

Our next-generation rendering engine delivers unmatched speed and efficiency, empowering creators to push boundaries like never before.

Render time performance
6.4x
Real-time frame rate
4.2x
Multi-platform build time
2.7x
3D transforms

Sometimes two dimensions aren’t enough. Scale, rotate, and translate any element in 3D space to add a touch of depth.

How it works

Ship faster and smaller.

text-base text-gray-950

Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10kB of CSS to the client.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Tailwind CSS</title>    <link rel="stylesheet" href="/build.css" />  </head>  <body>    <button class=""></button>  </body></html>
@layer utilities {}

Tailwind in the wild

Build whatever you want, without touching your CSS file.

text-base text-gray-950

Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite sites are built with Tailwind, and you probably had no idea.

Ready-made Components

Move even faster with Tailwind Plus.

Tailwind Plus is a collection of beautiful, fully responsive UI components, designed and developed by us, the creators of Tailwind CSS. It's got hundreds of ready-to-use examples to choose from, and is guaranteed to help you find the perfect starting point for what you want to build.

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy