Name

### [Divide selector](https://tailwindcss.com/docs/upgrade-guide#divide-selector) We've changed the selector used by the [`divide-x-*` and `divide-y-*` utilities](https://tailwindcss.com/docs/border-width#between-children) to address serious performance issues on large pages: CSS /* Before */.divide-y-4 > :not([hidden]) ~ :not([hidden]) { border-top-width: 4px;}/* Now */.divide-y-4 > :not(:last-child) { border-bottom-width: 4px;} You might see changes in your project if you were ever using these utilities with inline elements, if you were adding other margins/padding to child elements to tweak their spacing, or adjusting the borders of specific child elements. ### [Using variants with gradients](https://tailwindcss.com/docs/upgrade-guide#using-variants-with-gradients) In v3, overriding part of a gradient with a variant would "reset" the entire gradient, so in this example the `to-*` color would be transparent in dark mode instead of yellow: HTML

In v4, these values are preserved which is more consistent with how other utilities in Tailwind work. This means you may need to explicitly use `via-none` if you want to "unset" a three-stop gradient back to a two-stop gradient in a specific state: HTML

### [Container configuration](https://tailwindcss.com/docs/upgrade-guide#container-configuration) In v3, the `container` utility had several configuration options like `center` and `padding` that no longer exist in v4. To customize the `container` utility in v4, extend it using the `@utility` directive: CSS @utility container { margin-inline: auto; padding-inline: 2rem;} ### [Default border color](https://tailwindcss.com/docs/upgrade-guide#default-border-color) In v3, the `border-*` and `divide-*` utilities used your configured `gray-200` color by default. We've changed this to `currentColor` in v4 to make Tailwind less opinionated and match browser defaults. To update your project for this change, make sure you specify a color anywhere you're using a `border-*` or `divide-*` utility:

Alternatively, add these base styles to your project to preserve the v3 behavior: CSS @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentColor); }} ### [Default ring width and color](https://tailwindcss.com/docs/upgrade-guide#default-ring-width-and-color) We've changed the width of the `ring` utility from 3px to 1px and changed the default color from `blue-500` to `currentColor` to make things more consistent the `border-*`, `divide-*`, and `outline-*` utilities. To update your project for these changes, replace any use of `ring` with `ring-3`: Then make sure to add `ring-blue-500` anywhere you were depending on the default ring color: Alternatively, add these theme variables to your CSS to preserve the v3 behavior: CSS @theme { --default-ring-width: 3px; --default-ring-color: var(--color-blue-500);} Note though that these variables are only supported for compatibility reasons, and are not considered idiomatic usage of Tailwind CSS v4.0. ### [Preflight changes](https://tailwindcss.com/docs/upgrade-guide#preflight-changes) We've made a couple small changes to the base styles in Preflight in v4: #### [New default placeholder color](https://tailwindcss.com/docs/upgrade-guide#new-default-placeholder-color) In v3, placeholder text used your configured `gray-400` color by default. We've simplified this in v4 to just use the current text color at 50% opacity. You probably won't even notice this change (it might even make your project look better), but if you want to preserve the v3 behavior, add this CSS to your project: CSS @layer base { input::placeholder, textarea::placeholder { color: var(--color-gray-400); }} #### [Buttons use the default cursor](https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor) Buttons now use `cursor: default` instead of `cursor: pointer` to match the default browser behavior. If you'd like to continue using `cursor: pointer` by default, add these base styles to your CSS: CSS @layer base { button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; }} #### [Dialog margins removed](https://tailwindcss.com/docs/upgrade-guide#dialog-margins-removed) Preflight now resets margins on `` elements to be consistent with how other elements are reset. If you still want dialogs to be centered by default, add this CSS to your project: CSS @layer base { dialog { margin: auto; }} #### [Hidden attribute takes priority](https://tailwindcss.com/docs/upgrade-guide#hidden-attribute-takes-priority) Display classes like `block` or `flex` no longer take priority over the `hidden` attribute on an element. Remove the `hidden` attribute if you want an element to be visible to the user. Note that this does not apply to `hidden="until-found"`. ### [Using a prefix](https://tailwindcss.com/docs/upgrade-guide#using-a-prefix) Prefixes now look like variants and are always at the beginning of the class name:

When using a prefix, you should still configure your theme variables as if you aren't using a prefix: @import "tailwindcss" prefix(tw);@theme { --font-display: "Satoshi", "sans-serif"; --breakpoint-3xl: 120rem; --color-avocado-100: oklch(0.99 0 0); --color-avocado-200: oklch(0.98 0.04 113.22); --color-avocado-300: oklch(0.94 0.11 115.03); /* ... */} The generated CSS variables _will_ include a prefix to avoid conflicts with any existing variables in your project: :root { --tw-font-display: "Satoshi", "sans-serif"; --tw-breakpoint-3xl: 120rem; --tw-color-avocado-100: oklch(0.99 0 0); --tw-color-avocado-200: oklch(0.98 0.04 113.22); --tw-color-avocado-300: oklch(0.94 0.11 115.03); /* ... */} ### [The important modifier](https://tailwindcss.com/docs/upgrade-guide#the-important-modifier) In v3 you could mark a utility as important by placing an `!` at the beginning of the utility name (but after any variants). In v4 you should place the `!` at the very end of the class name instead:

The old way is still supported for compatibility but is deprecated. ### [Adding custom utilities](https://tailwindcss.com/docs/upgrade-guide#adding-custom-utilities) In v3, any custom classes you defined within `@layer utilities` or `@layer components` would get picked up by Tailwind as a true utility class and would automatically work with variants like `hover`, `focus`, or `lg` with the difference being that `@layer components` would always come first in the generated stylesheet. In v4 we are using native cascade layers and no longer hijacking the `@layer` at-rule, so we've introduced the `@utility` API as a replacement: CSS @layer utilities { .tab-4 { tab-size: 4; }}@utility tab-4 { tab-size: 4;} Custom utilities are now also sorted based on the amount of properties they define. This means that component utilities like this `.btn` can be overwritten by other Tailwind utilities without additional configuration: CSS @layer components { .btn { border-radius: 0.5rem; padding: 0.5rem 1rem; background-color: ButtonFace; }}@utility btn { border-radius: 0.5rem; padding: 0.5rem 1rem; background-color: ButtonFace;} Learn more about registering custom utilities in the [adding custom utilities documentation](https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities) . ### [Variant stacking order](https://tailwindcss.com/docs/upgrade-guide#variant-stacking-order) In v3, stacked variants were applied from right to left, but in v4 we've updated them to apply left to right to look more like CSS syntax. To update your project for this change, reverse the order of any order-sensitive stacked variants in your project: HTML

One
Two
Three

If you need access to a resolved CSS variable value in JS, you can use `getComputedStyle` to get the value of a theme variable on the document root: spaghetti.js let styles = getComputedStyle(document.documentElement);let shadow = styles.getPropertyValue("--shadow-xl"); ### [Using @apply with Vue, Svelte, or CSS modules](https://tailwindcss.com/docs/upgrade-guide#using-apply-with-vue-svelte-or-css-modules) In v4, stylesheets that are bundled separately from your main CSS file (e.g. CSS modules files, ` Alternatively, you can use your CSS theme variables directly instead of using `@apply` at all, which will also improve performance since Tailwind won't need to process these styles: Vue You can find more documentation on [using Tailwind with CSS modules](https://tailwindcss.com/docs/compatibility#css-modules) . ### [Using Sass, Less, and Stylus](https://tailwindcss.com/docs/upgrade-guide#using-sass-less-and-stylus) Tailwind CSS v4.0 is not designed to be used with CSS preprocessors like Sass, Less, or Stylus. Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus. Because of this it is not possible to use Sass, Less, or Stylus for your stylesheets or ` Or just use your globally defined CSS variables instead of features like `@apply`, which don't require Tailwind to process your component CSS at all: Button.vue ### On this page * [Browser support](https://tailwindcss.com/docs/compatibility#browser-support) * [Sass, Less, and Stylus](https://tailwindcss.com/docs/compatibility#sass-less-and-stylus) * [Build-time imports](https://tailwindcss.com/docs/compatibility#build-time-imports) * [Variables](https://tailwindcss.com/docs/compatibility#variables) * [Nesting](https://tailwindcss.com/docs/compatibility#nesting) * [Loops](https://tailwindcss.com/docs/compatibility#loops) * [Color and math functions](https://tailwindcss.com/docs/compatibility#color-and-math-functions) * [CSS modules](https://tailwindcss.com/docs/compatibility#css-modules) * [Scoping concerns](https://tailwindcss.com/docs/compatibility#scoping-concerns) * [Performance](https://tailwindcss.com/docs/compatibility#performance) * [Explicit context sharing](https://tailwindcss.com/docs/compatibility#explicit-context-sharing) * [Vue, Svelte, and Astro](https://tailwindcss.com/docs/compatibility#vue-svelte-and-astro) Copyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https://tailwindcss.com/brand) --- # Responsive design - Core concepts - Tailwind CSS [](https://tailwindcss.com/) v4.2 ⌘KCtrl K[Docs](https://tailwindcss.com/docs) [Blog](https://tailwindcss.com/blog) [Showcase](https://tailwindcss.com/showcase) [Sponsor](https://tailwindcss.com/sponsor) [Plus](https://tailwindcss.com/plus?ref=top) [](https://github.com/tailwindlabs/tailwindcss) 1. Core concepts 2. Responsive design Core concepts Responsive design ================= Using responsive utility variants to build adaptive user interfaces. [Overview](https://tailwindcss.com/docs/responsive-design#overview) -------------------------------------------------------------------- Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML. First, make sure you've added the [viewport meta tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) to the `` of your document: index.html Then to add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the `:` character: HTML

There are five breakpoints by default, inspired by common device resolutions: | Breakpoint prefix | Minimum width | CSS | | --- | --- | --- | | `sm` | 40rem _(640px)_ | `@media (width >= 40rem) { ... }` | | `md` | 48rem _(768px)_ | `@media (width >= 48rem) { ... }` | | `lg` | 64rem _(1024px)_ | `@media (width >= 64rem) { ... }` | | `xl` | 80rem _(1280px)_ | `@media (width >= 80rem) { ... }` | | `2xl` | 96rem _(1536px)_ | `@media (width >= 96rem) { ... }` | This works for **every utility class in the framework**, which means you can change literally anything at a given breakpoint — even things like letter spacing or cursor styles. Here's a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens:

Company retreats

Incredible accommodation for your team

Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that.

Here's how the example above works: * By default, the outer `div` is `display: block`, but by adding the `md:flex` utility, it becomes `display: flex` on medium screens and larger. * When the parent is a flex container, we want to make sure the image never shrinks, so we've added `md:shrink-0` to prevent shrinking on medium screens and larger. Technically we could have just used `shrink-0` since it would do nothing on smaller screens, but since it only matters on `md` screens, it's a good idea to make that clear in the class name. * On small screens the image is automatically full width by default. On medium screens and up, we've constrained the width to a fixed size and ensured the image is full height using `md:h-full md:w-48`. We've only used one breakpoint in this example, but you could easily customize this component at other sizes using the `sm`, `lg`, `xl`, or `2xl` responsive prefixes as well. [Working mobile-first](https://tailwindcss.com/docs/responsive-design#working-mobile-first) -------------------------------------------------------------------------------------------- Tailwind uses a mobile-first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap. What this means is that unprefixed utilities (like `uppercase`) take effect on all screen sizes, while prefixed utilities (like `md:uppercase`) only take effect at the specified breakpoint _and above_. ### [Targeting mobile screens](https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens) Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the `sm:` prefixed version. Don't think of `sm:` as meaning "on small screens", think of it as "at the small _breakpoint_". Don't use `sm:` to target mobile devices HTML

Use unprefixed utilities to target mobile, and override them at larger breakpoints HTML

For this reason, it's often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for `sm` screens, followed by `md` screens, etc. ### [Targeting a breakpoint range](https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range) By default, styles applied by rules like `md:flex` will apply at that breakpoint and stay applied at larger breakpoints. If you'd like to apply a utility _only_ when a specific breakpoint range is active, stack a responsive variant like `md` with a `max-*` variant to limit that style to a specific range: HTML

Tailwind generates a corresponding `max-*` variant for each breakpoint, so out of the box the following variants are available: | Variant | Media query | | --- | --- | | `max-sm` | `@media (width < 40rem) { ... }` | | `max-md` | `@media (width < 48rem) { ... }` | | `max-lg` | `@media (width < 64rem) { ... }` | | `max-xl` | `@media (width < 80rem) { ... }` | | `max-2xl` | `@media (width < 96rem) { ... }` | ### [Targeting a single breakpoint](https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint) To target a single breakpoint, target the range for that breakpoint by stacking a responsive variant like `md` with the `max-*` variant for the next breakpoint: HTML

Read about [targeting breakpoint ranges](https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range) to learn more. [Using custom breakpoints](https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints) ---------------------------------------------------------------------------------------------------- ### [Customizing your theme](https://tailwindcss.com/docs/responsive-design#customizing-your-theme) Use the `--breakpoint-*` theme variables to customize your breakpoints: app.css @import "tailwindcss";@theme { --breakpoint-xs: 30rem; --breakpoint-2xl: 100rem; --breakpoint-3xl: 120rem;} This updates the `2xl` breakpoint to use `100rem` instead of the default `96rem`, and creates new `xs` and `3xl` breakpoints that can be used in your markup: HTML

Note that it's important to always use the same unit for defining your breakpoints or the generated utilities may be sorted in an unexpected order, causing breakpoint classes to override each other in unexpected ways. Tailwind uses `rem` for the default breakpoints, so if you are adding additional breakpoints to the defaults, make sure you use `rem` as well. Learn more about customizing your theme in the [theme documentation](https://tailwindcss.com/docs/theme) . ### [Removing default breakpoints](https://tailwindcss.com/docs/responsive-design#removing-default-breakpoints) To remove a default breakpoint, reset its value to the `initial` keyword: app.css @import "tailwindcss";@theme { --breakpoint-2xl: initial;} You can also reset all of the default breakpoints using `--breakpoint-*: initial`, then define all of your breakpoints from scratch: app.css @import "tailwindcss";@theme { --breakpoint-*: initial; --breakpoint-tablet: 40rem; --breakpoint-laptop: 64rem; --breakpoint-desktop: 80rem;} Learn more removing default theme values in the [theme documentation](https://tailwindcss.com/docs/theme) . ### [Using arbitrary values](https://tailwindcss.com/docs/responsive-design#using-arbitrary-values) If you need to use a one-off breakpoint that doesn’t make sense to include in your theme, use the `min` or `max` variants to generate a custom breakpoint on the fly using any arbitrary value.

Learn more about arbitrary value support in the [arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) documentation. [Container queries](https://tailwindcss.com/docs/responsive-design#container-queries) -------------------------------------------------------------------------------------- ### [What are container queries?](https://tailwindcss.com/docs/responsive-design#what-are-container-queries) [Container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) are a modern CSS feature that let you style something based on the size of a parent element instead of the size of the entire viewport. They let you build components that are a lot more portable and reusable because they can change based on the actual space available for that component. ### [Basic example](https://tailwindcss.com/docs/responsive-design#basic-example) Use the `@container` class to mark an element as a container, then use variants like `@sm` and `@md` to style child elements based on the size of the container: HTML

Just like breakpoint variants, container queries are mobile-first in Tailwind CSS and apply at the target container size and up. ### [Max-width container queries](https://tailwindcss.com/docs/responsive-design#max-width-container-queries) Use variants like `@max-sm` and `@max-md` to apply a style below a specific container size: HTML

### [Container query ranges](https://tailwindcss.com/docs/responsive-design#container-query-ranges) Stack a regular container query variant with a max-width container query variant to target a specific range: HTML

### [Named containers](https://tailwindcss.com/docs/responsive-design#named-containers) For complex designs that use multiple nested containers, you can name containers using `@container/{name}` and target specific containers with variants like `@sm/{name}` and `@md/{name}`: HTML

This makes it possible to style something based on the size of a distant container, rather than just the nearest container. ### [Using custom container sizes](https://tailwindcss.com/docs/responsive-design#using-custom-container-sizes) Use the `--container-*` theme variables to customize your container sizes: app.css @import "tailwindcss";@theme { --container-8xl: 96rem;} This adds a new `8xl` container query variant that can be used in your markup: HTML

Learn more about customizing your theme in the [theme documentation](https://tailwindcss.com/docs/theme) . ### [Using arbitrary values](https://tailwindcss.com/docs/responsive-design#using-arbitrary-container-query-values) Use variants like `@min-[475px]` and `@max-[960px]` for one-off container query sizes you don't want to add to your theme: HTML

### [Using container query units](https://tailwindcss.com/docs/responsive-design#using-container-query-units) Use [container query length units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries#container_query_length_units) like `cqw` as arbitrary values in other utility classes to reference the container size: HTML

### [Container size reference](https://tailwindcss.com/docs/responsive-design#container-size-reference) By default, Tailwind includes container sizes ranging from 16rem _(256px)_ to 80rem _(1280px)_: | Variant | Minimum width | CSS | | --- | --- | --- | | `@3xs` | 16rem _(256px)_ | `@container (width >= 16rem) { … }` | | `@2xs` | 18rem _(288px)_ | `@container (width >= 18rem) { … }` | | `@xs` | 20rem _(320px)_ | `@container (width >= 20rem) { … }` | | `@sm` | 24rem _(384px)_ | `@container (width >= 24rem) { … }` | | `@md` | 28rem _(448px)_ | `@container (width >= 28rem) { … }` | | `@lg` | 32rem _(512px)_ | `@container (width >= 32rem) { … }` | | `@xl` | 36rem _(576px)_ | `@container (width >= 36rem) { … }` | | `@2xl` | 42rem _(672px)_ | `@container (width >= 42rem) { … }` | | `@3xl` | 48rem _(768px)_ | `@container (width >= 48rem) { … }` | | `@4xl` | 56rem _(896px)_ | `@container (width >= 56rem) { … }` | | `@5xl` | 64rem _(1024px)_ | `@container (width >= 64rem) { … }` | | `@6xl` | 72rem _(1152px)_ | `@container (width >= 72rem) { … }` | | `@7xl` | 80rem _(1280px)_ | `@container (width >= 80rem) { … }` | ### On this page * [Overview](https://tailwindcss.com/docs/responsive-design#overview) * [Working mobile-first](https://tailwindcss.com/docs/responsive-design#working-mobile-first) * [Targeting mobile screens](https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens) * [Targeting a breakpoint range](https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range) * [Targeting a single breakpoint](https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint) * [Using custom breakpoints](https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints) * [Customizing your theme](https://tailwindcss.com/docs/responsive-design#customizing-your-theme) * [Removing default breakpoints](https://tailwindcss.com/docs/responsive-design#removing-default-breakpoints) * [Using arbitrary values](https://tailwindcss.com/docs/responsive-design#using-arbitrary-values) * [Container queries](https://tailwindcss.com/docs/responsive-design#container-queries) * [What are container queries?](https://tailwindcss.com/docs/responsive-design#what-are-container-queries) * [Basic example](https://tailwindcss.com/docs/responsive-design#basic-example) * [Max-width container queries](https://tailwindcss.com/docs/responsive-design#max-width-container-queries) * [Container query ranges](https://tailwindcss.com/docs/responsive-design#container-query-ranges) * [Named containers](https://tailwindcss.com/docs/responsive-design#named-containers) * [Using custom container sizes](https://tailwindcss.com/docs/responsive-design#using-custom-container-sizes) * [Using container query units](https://tailwindcss.com/docs/responsive-design#using-container-query-units) * [Container size reference](https://tailwindcss.com/docs/responsive-design#container-size-reference) Copyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https://tailwindcss.com/brand) --- # break-after - Layout - Tailwind CSS [](https://tailwindcss.com/) v4.2 ⌘KCtrl K[Docs](https://tailwindcss.com/docs) [Blog](https://tailwindcss.com/blog) [Showcase](https://tailwindcss.com/showcase) [Sponsor](https://tailwindcss.com/sponsor) [Plus](https://tailwindcss.com/plus?ref=top) [](https://github.com/tailwindlabs/tailwindcss) 1. Layout 2. break-after Layout break-after =========== Utilities for controlling how a column or page should break after an element. | Class | Styles | | --- | --- | | `break-after-auto` | `break-after: auto;` | | `break-after-avoid` | `break-after: avoid;` | | `break-after-all` | `break-after: all;` | | `break-after-avoid-page` | `break-after: avoid-page;` | | `break-after-page` | `break-after: page;` | | `break-after-left` | `break-after: left;` | | `break-after-right` | `break-after: right;` | | `break-after-column` | `break-after: column;` | [Examples](https://tailwindcss.com/docs/break-after#examples) -------------------------------------------------------------- ### [Basic example](https://tailwindcss.com/docs/break-after#basic-example) Use utilities like `break-after-column` and `break-after-page` to control how a column or page break should behave after an element:

Well, let me tell you something, ...

Sure, go ahead, laugh...

Maybe we can live without...

Look. If you think this is...

### [Responsive design](https://tailwindcss.com/docs/break-after#responsive-design) Prefix a `break-after` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

Learn more about using variants in the [variants documentation](https://tailwindcss.com/docs/hover-focus-and-other-states) . ### On this page * [Quick reference](https://tailwindcss.com/docs/break-after#quick-reference) * [Examples](https://tailwindcss.com/docs/break-after#examples) * [Basic example](https://tailwindcss.com/docs/break-after#basic-example) * [Responsive design](https://tailwindcss.com/docs/break-after#responsive-design) Copyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https://tailwindcss.com/brand) --- # Editor setup - Getting started - Tailwind CSS [](https://tailwindcss.com/) v4.2 ⌘KCtrl K[Docs](https://tailwindcss.com/docs) [Blog](https://tailwindcss.com/blog) [Showcase](https://tailwindcss.com/showcase) [Sponsor](https://tailwindcss.com/sponsor) [Plus](https://tailwindcss.com/plus?ref=top) [](https://github.com/tailwindlabs/tailwindcss) 1. Getting started 2. Editor setup Getting started Editor setup ============ Tooling to improve the developer experience when working with Tailwind CSS. [Syntax support](https://tailwindcss.com/docs/editor-setup#syntax-support) --------------------------------------------------------------------------- Tailwind CSS uses custom CSS syntax like `@theme`, `@variant`, and `@source`, and in some editors this can trigger warnings or errors where these rules aren't recognized. If you're using VS Code, our official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) plugin includes a dedicated Tailwind CSS language mode that has support for all of the custom at-rules and functions Tailwind uses. In some cases, you may need to disable native CSS linting/validations if your editor is very strict about the syntax it expects in your CSS files. [Cursor](https://tailwindcss.com/docs/editor-setup#cursor) ----------------------------------------------------------- [Cursor](https://cursor.com/?utm_source=tailwind) is an AI-native code editor with features like context-aware autocomplete and built-in coding agents. Since it supports VS Code extensions, all of the Tailwind CSS tooling you're already familiar with works out of the box – including our official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension and the [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) for class sorting. ![Tailwind CSS IntelliSense extension for Cursor](https://tailwindcss.com/_next/static/media/cursor-intellisense.dbd6aaee.png) Check out and download [Cursor](https://cursor.com/?utm_source=tailwind) . [Zed](https://tailwindcss.com/docs/editor-setup#zed) ----------------------------------------------------- [Zed](https://zed.dev/?utm_source=tailwind) is a fast, modern code editor, designed from the ground-up for cutting-edge development workflows, including agentic editing with AI. It has built-in support for Tailwind CSS autocompletions, linting, and hover previews, without the need to install and configure a separate extension. It also integrates tightly with Prettier, so our official [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) works seamlessly with Zed when installed. ![Built-in support for Tailwind CSS in Zed via Tailwind CSS IntelliSense](https://tailwindcss.com/_next/static/media/zed-intellisense.5d0c529d.png) Check out [Zed](https://zed.dev/?utm_source=tailwind) and learn more about [how it works with Tailwind CSS](https://zed.dev/docs/languages/tailwindcss?utm_source=tailwind) . [IntelliSense for VS Code](https://tailwindcss.com/docs/editor-setup#intellisense-for-vs-code) ----------------------------------------------------------------------------------------------- The official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for Visual Studio Code enhances the Tailwind development experience by providing users with advanced features such as autocomplete, syntax highlighting, and linting. ![Tailwind CSS IntelliSense extension for Visual Studio Code](https://tailwindcss.com/_next/static/media/intellisense.64b4d269.png) * **Autocomplete** — providing intelligent suggestions for utility classes, as well as [CSS functions and directives](https://tailwindcss.com/docs/functions-and-directives) . * **Linting** — highlighting errors and potential bugs in both your CSS and your markup. * **Hover previews** — revealing the complete CSS for utility classes when you hover over them. * **Syntax highlighting** — so that Tailwind features that use custom CSS syntax are highlighted correctly. Check out the project [on GitHub](https://github.com/tailwindcss/intellisense) to learn more, or [add it to Visual Studio Code](vscode:extension/bradlc.vscode-tailwindcss) to get started now. [Class sorting with Prettier](https://tailwindcss.com/docs/editor-setup#class-sorting-with-prettier) ----------------------------------------------------------------------------------------------------- We maintain an official [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) for Tailwind CSS that automatically sorts your classes following our [recommended class order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted) . ![](https://tailwindcss.com/_next/static/media/prettier-banner.1039345a.jpg) It works seamlessly with custom Tailwind configurations, and because it’s just a Prettier plugin, it works anywhere Prettier works — including every popular editor and IDE, and of course on the command line. HTML Check out the plugin [on GitHub](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) to learn more and get started. [JetBrains IDEs](https://tailwindcss.com/docs/editor-setup#jetbrains-ides) --------------------------------------------------------------------------- JetBrains IDEs like WebStorm, PhpStorm, and others include support for intelligent Tailwind CSS completions in your HTML. [Learn more about Tailwind CSS support in JetBrains IDEs →](https://www.jetbrains.com/help/webstorm/tailwind-css.html) ### On this page * [Syntax support](https://tailwindcss.com/docs/editor-setup#syntax-support) * [Cursor](https://tailwindcss.com/docs/editor-setup#cursor) * [Zed](https://tailwindcss.com/docs/editor-setup#zed) * [IntelliSense for VS Code](https://tailwindcss.com/docs/editor-setup#intellisense-for-vs-code) * [Class sorting with Prettier](https://tailwindcss.com/docs/editor-setup#class-sorting-with-prettier) * [JetBrains IDEs](https://tailwindcss.com/docs/editor-setup#jetbrains-ides) Copyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https://tailwindcss.com/brand) --- # Dark mode - Core concepts - Tailwind CSS [](https://tailwindcss.com/) v4.2 ⌘KCtrl K[Docs](https://tailwindcss.com/docs) [Blog](https://tailwindcss.com/blog) [Showcase](https://tailwindcss.com/showcase) [Sponsor](https://tailwindcss.com/sponsor) [Plus](https://tailwindcss.com/plus?ref=top) [](https://github.com/tailwindlabs/tailwindcss) 1. Core concepts 2. Dark mode Core concepts Dark mode ========= Using variants to style your site in dark mode. [Overview](https://tailwindcss.com/docs/dark-mode#overview) ------------------------------------------------------------ Now that dark mode is a first-class feature of many operating systems, it's becoming more and more common to design a dark version of your website to go along with the default design. To make this as easy as possible, Tailwind includes a `dark` variant that lets you style your site differently when dark mode is enabled: Light mode Writes upside-down The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. Dark mode Writes upside-down The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

Writes upside-down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

By default this uses the `prefers-color-scheme` CSS media feature, but you can also build sites that support [toggling dark mode manually](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) by overriding the dark variant. [Toggling dark mode manually](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) -------------------------------------------------------------------------------------------------- If you want your dark theme to be driven by a CSS selector instead of the `prefers-color-scheme` media query, override the `dark` variant to use your custom selector: app.css @import "tailwindcss";@custom-variant dark (&:where(.dark, .dark *)); Now instead of `dark:*` utilities being applied based on `prefers-color-scheme`, they will be applied whenever the `dark` class is present earlier in the HTML tree: HTML

How you add the `dark` class to the `html` element is up to you, but a common approach is to use a bit of JavaScript that updates the `class` attribute and syncs that preference to somewhere like `localStorage`. ### [Using a data attribute](https://tailwindcss.com/docs/dark-mode#using-a-data-attribute) To use a data attribute instead of a class to activate dark mode, just override the `dark` variant with an attribute selector instead: app.css @import "tailwindcss";@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); Now dark mode utilities will be applied whenever the `data-theme` attribute is set to `dark` somewhere up the tree: HTML

### [With system theme support](https://tailwindcss.com/docs/dark-mode#with-system-theme-support) To build three-way theme toggles that support light mode, dark mode, and your system theme, use a custom dark mode selector and the [`window.matchMedia()` API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to detect the system theme and update the `html` element when needed. Here's a simple example of how you can support light mode, dark mode, as well as respecting the operating system preference: spaghetti.js // On page load or when changing themes, best to add inline in `head` to avoid FOUCdocument.documentElement.classList.toggle( "dark", localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),);// Whenever the user explicitly chooses light modelocalStorage.theme = "light";// Whenever the user explicitly chooses dark modelocalStorage.theme = "dark";// Whenever the user explicitly chooses to respect the OS preferencelocalStorage.removeItem("theme"); Again you can manage this however you like, even storing the preference server-side in a database and rendering the class on the server — it's totally up to you. ### On this page * [Overview](https://tailwindcss.com/docs/dark-mode#overview) * [Toggling dark mode manually](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) * [Using a data attribute](https://tailwindcss.com/docs/dark-mode#using-a-data-attribute) * [With system theme support](https://tailwindcss.com/docs/dark-mode#with-system-theme-support) Copyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https://tailwindcss.com/brand) --- # Preflight - Base styles - Tailwind CSS [](https://tailwindcss.com/) v4.2 ⌘KCtrl K[Docs](https://tailwindcss.com/docs) [Blog](https://tailwindcss.com/blog) [Showcase](https://tailwindcss.com/showcase) [Sponsor](https://tailwindcss.com/sponsor) [Plus](https://tailwindcss.com/plus?ref=top) [](https://github.com/tailwindlabs/tailwindcss) 1. Base styles 2. Preflight Base styles Preflight ========= An opinionated set of base styles for Tailwind projects. [Overview](https://tailwindcss.com/docs/preflight#overview) ------------------------------------------------------------ Built on top of [modern-normalize](https://github.com/sindresorhus/modern-normalize) , Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system. When you import `tailwindcss` into your project, Preflight is automatically injected into the `base` layer: CSS @layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities); While most of the styles in Preflight are meant to go unnoticed—they simply make things behave more like you'd expect them to—some are more opinionated and can be surprising when you first encounter them. For a complete reference of all the styles applied by Preflight, [see the stylesheet](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css) . ### [Margins are removed](https://tailwindcss.com/docs/preflight#margins-are-removed) Preflight removes all of the default margins from all elements including headings, blockquotes, paragraphs, etc: CSS *,::after,::before,::backdrop,::file-selector-button { margin: 0; padding: 0;} This makes it harder to accidentally rely on margin values applied by the user-agent stylesheet that are not part of your spacing scale. ### [Border styles are reset](https://tailwindcss.com/docs/preflight#border-styles-are-reset) In order to make it easy to add a border by simply adding the `border` class, Tailwind overrides the default border styles for all elements with the following rules: CSS *,::after,::before,::backdrop,::file-selector-button { box-sizing: border-box; border: 0 solid;} Since the `border` class only sets the `border-width` property, this reset ensures that adding that class always adds a solid `1px` border that uses `currentColor`. This can cause some unexpected results when integrating certain third-party libraries, like [Google maps](https://github.com/tailwindlabs/tailwindcss/issues/484) for example. When you run into situations like this, you can work around them by overriding the Preflight styles with your own custom CSS: CSS @layer base { .google-map * { border-style: none; }} ### [Headings are unstyled](https://tailwindcss.com/docs/preflight#headings-are-unstyled) All heading elements are completely unstyled by default, and have the same font size and weight as normal text: CSS h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit;} The reason for this is two-fold: * **It helps you avoid accidentally deviating from your type scale**. By default, browsers assign sizes to headings that don't exist in Tailwind's default type scale, and aren't guaranteed to exist in your own type scale. * **In UI development, headings should often be visually de-emphasized**. Making headings unstyled by default means any styling you apply to headings happens consciously and deliberately. You can always add default header styles to your project by [adding your own base styles](https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles) . ### [Lists are unstyled](https://tailwindcss.com/docs/preflight#lists-are-unstyled) Ordered and unordered lists are unstyled by default, with no bullets or numbers: CSS ol,ul,menu { list-style: none;} If you'd like to style a list, you can do so using the [list-style-type](https://tailwindcss.com/docs/list-style-type) and [list-style-position](https://tailwindcss.com/docs/list-style-position) utilities: HTML

One
Two
Three

You can always add default list styles to your project by [adding your own base styles](https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles) . #### [Accessibility considerations](https://tailwindcss.com/docs/preflight#accessibility-considerations) Unstyled lists are [not announced as lists by VoiceOver](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/) . If your content is truly a list but you would like to keep it unstyled, [add a "list" role](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html) to the element: HTML

One
Two
Three

### [Images are block-level](https://tailwindcss.com/docs/preflight#images-are-block-level) Images and other replaced elements (like `svg`, `video`, `canvas`, and others) are `display: block` by default: CSS img,svg,video,canvas,audio,iframe,embed,object { display: block; vertical-align: middle;} This helps to avoid unexpected alignment issues that you often run into using the browser default of `display: inline`. If you ever need to make one of these elements `inline` instead of `block`, simply use the `inline` utility: HTML

### [Images are constrained](https://tailwindcss.com/docs/preflight#images-are-constrained) Images and videos are constrained to the parent width in a way that preserves their intrinsic aspect ratio: CSS img,video { max-width: 100%; height: auto;} This prevents them from overflowing their containers and makes them responsive by default. If you ever need to override this behavior, use the `max-w-none` utility: HTML

#### [Elements with a `hidden` attribute stay hidden](https://tailwindcss.com/docs/preflight#elements-with-a-hidden-attribute-stay-hidden) CSS [hidden]:where(:not([hidden="until-found"])) { display: none !important;} This enforces that elements with a `hidden` attribute stay invisible unless using `hidden="until-found"`. Remove the `hidden` attribute if you want an element to be visible to the user. [Extending Preflight](https://tailwindcss.com/docs/preflight#extending-preflight) ---------------------------------------------------------------------------------- If you'd like to add your own base styles on top of Preflight, add them to the `base` CSS layer in your CSS using `@layer base`: CSS @layer base { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } a { color: var(--color-blue-600); text-decoration-line: underline; }} Learn more in the [adding base styles documentation](https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles) . [Disabling Preflight](https://tailwindcss.com/docs/preflight#disabling-preflight) ---------------------------------------------------------------------------------- If you'd like to completely disable Preflight—perhaps because you're integrating Tailwind into an existing project or you'd prefer to define your own base styles—you can do so by importing only the parts of Tailwind that you need. By default, this is what `@import "tailwindcss";` injects: CSS @layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities); To disable Preflight, simply omit its import while keeping everything else: CSS @layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities); When importing Tailwind CSS' files individually, features like `source()`, `theme()`, and `prefix()` should go on their respective imports. For example, source detection affects generated utilities, so `source(…)` should be added to the `utilities.css` import: CSS @layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/utilities.css" layer(utilities) source(none); The same goes for `important`, which also affects utilities: CSS @layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/utilities.css" layer(utilities) important; Similarly, `theme(static)` and `theme(inline)` affect the generated theme variables and should be placed on the `theme.css` import: CSS @layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/theme.css" layer(theme) theme(static);@import "tailwindcss/utilities.css" layer(utilities); Finally, using a prefix with `prefix(tw)` affects the utilities and variables, so it should go on both imports: CSS @layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/utilities.css" layer(utilities);@import "tailwindcss/theme.css" layer(theme) prefix(tw);@import "tailwindcss/utilities.css" layer(utilities) prefix(tw); ### On this page * [Overview](https://tailwindcss.com/docs/preflight#overview) * [Margins are removed](https://tailwindcss.com/docs/preflight#margins-are-removed) * [Border styles are reset](https://tailwindcss.com/docs/preflight#border-styles-are-reset) * [Headings are unstyled](https://tailwindcss.com/docs/preflight#headings-are-unstyled) * [Lists are unstyled](https://tailwindcss.com/docs/preflight#lists-are-unstyled) * [Images are block-level](https://tailwindcss.com/docs/preflight#images-are-block-level) * [Images are constrained](https://tailwindcss.com/docs/preflight#images-are-constrained) * [Extending Preflight](https://tailwindcss.com/docs/preflight#extending-preflight) * [Disabling Preflight](https://tailwindcss.com/docs/preflight#disabling-preflight) Copyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https://tailwindcss.com/brand) --- # Colors - Core concepts - Tailwind CSS [](https://tailwindcss.com/) v4.2 ⌘KCtrl K[Docs](https://tailwindcss.com/docs) [Blog](https://tailwindcss.com/blog) [Showcase](https://tailwindcss.com/showcase) [Sponsor](https://tailwindcss.com/sponsor) [Plus](https://tailwindcss.com/plus?ref=top) [](https://github.com/tailwindlabs/tailwindcss) 1. Core concepts 2. Colors Core concepts Colors ====== Using and customizing the color palette in Tailwind CSS projects. Tailwind CSS includes a vast, beautiful color palette out of the box, carefully crafted by expert designers and suitable for a wide range of different design styles. 50 100 200 300 400 500 600 700 800 900 950 red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose slate gray zinc neutral stone taupe mauve mist olive Click to copy the OKLCH value or shift+click to copy the nearest hex value. Every color in the default palette includes 11 steps, with 50 being the lightest, and 950 being the darkest: 50 100 200 300 400 500 600 700 800 900 950

The entire color palette is available across all color related utilities, including things like [background color](https://tailwindcss.com/docs/background-color) , [border color](https://tailwindcss.com/docs/border-color) , [fill](https://tailwindcss.com/docs/fill) , [caret color](https://tailwindcss.com/docs/caret-color) , and many more. [Working with colors](https://tailwindcss.com/docs/colors#working-with-colors) ------------------------------------------------------------------------------- ### [Using color utilities](https://tailwindcss.com/docs/colors#using-color-utilities) Use color utilities like `bg-white`, `border-pink-300`, and `text-gray-950` to set the different color properties of elements in your design: Tom Watson mentioned you in Logo redesign 9:37am

Tom Watson mentioned you in Logo redesign

9:37am

Here's a full list of utilities that use your color palette: | Utility | Description | | --- | --- | | `bg-*` | Sets the [background color](https://tailwindcss.com/docs/background-color)
of an element | | `text-*` | Sets the [text color](https://tailwindcss.com/docs/text-color)
of an element | | `decoration-*` | Sets the [text decoration color](https://tailwindcss.com/docs/text-decoration-color)
of an element | | `border-*` | Sets the [border color](https://tailwindcss.com/docs/border-color)
of an element | | `outline-*` | Sets the [outline color](https://tailwindcss.com/docs/outline-color)
of an element | | `shadow-*` | Sets the color of [box shadows](https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color) | | `inset-shadow-*` | Sets the color of [inset box shadows](https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color) | | `ring-*` | Sets the color of [ring shadows](https://tailwindcss.com/docs/box-shadow#setting-the-ring-color) | | `inset-ring-*` | Sets the color of [inset ring shadows](https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color) | | `accent-*` | Sets the [accent color](https://tailwindcss.com/docs/accent-color)
of form controls | | `caret-*` | Sets the [caret color](https://tailwindcss.com/docs/caret-color)
in form controls | | `fill-*` | Sets the [fill color](https://tailwindcss.com/docs/fill)
of SVG elements | | `stroke-*` | Sets the [stroke color](https://tailwindcss.com/docs/stroke)
of SVG elements | ### [Adjusting opacity](https://tailwindcss.com/docs/colors#adjusting-opacity) You can adjust the opacity of a color using syntax like `bg-black/75`, where `75` sets the alpha channel of the color to 75%:

This syntax also supports arbitrary values and the CSS variable shorthand: HTML

### [Targeting dark mode](https://tailwindcss.com/docs/colors#targeting-dark-mode) Use the `dark` variant to write classes like `dark:bg-gray-800` that only apply a color when dark mode is active: Light mode Writes upside-down The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. Dark mode Writes upside-down The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

Writes upside-down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

Learn more about styling for dark mode in the [dark mode documentation](https://tailwindcss.com/docs/dark-mode) . ### [Referencing in CSS](https://tailwindcss.com/docs/colors#referencing-in-css) Colors are exposed as CSS variables in the `--color-*` namespace, so you can reference them in CSS with variables like `--color-blue-500` and `--color-pink-700`: CSS @import "tailwindcss";@layer components { .typography { color: var(--color-gray-950); a { color: var(--color-blue-500); &:hover { color: var(--color-blue-800); } } }} You can also use these as [arbitrary values](https://tailwindcss.com/docs/colors) in utility classes: HTML

To quickly adjust the opacity of a color when referencing it as a variable in CSS, Tailwind includes a special `--alpha()` function: CSS @import "tailwindcss";@layer components { .DocSearch-Hit--Result { background-color: --alpha(var(--color-gray-950) / 10%); }} [Customizing your colors](https://tailwindcss.com/docs/colors#customizing-your-colors) --------------------------------------------------------------------------------------- Use `@theme` to add custom colors to your project under the `--color-*` theme namespace: CSS @import "tailwindcss";@theme { --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca;} Now utilities like `bg-midnight`, `text-tahiti`, and `fill-bermuda` will be available in your project in addition to the default colors. Learn more about theme variables in the [theme variables documentation](https://tailwindcss.com/docs/theme) . ### [Overriding default colors](https://tailwindcss.com/docs/colors#overriding-default-colors) Override any of the default colors by defining new theme variables with the same name: CSS @import "tailwindcss";@theme { --color-gray-50: oklch(0.984 0.003 247.858); --color-gray-100: oklch(0.968 0.007 247.896); --color-gray-200: oklch(0.929 0.013 255.508); --color-gray-300: oklch(0.869 0.022 252.894); --color-gray-400: oklch(0.704 0.04 256.788); --color-gray-500: oklch(0.554 0.046 257.417); --color-gray-600: oklch(0.446 0.043 257.281); --color-gray-700: oklch(0.372 0.044 257.287); --color-gray-800: oklch(0.279 0.041 260.031); --color-gray-900: oklch(0.208 0.042 265.755); --color-gray-950: oklch(0.129 0.042 264.695);} ### [Disabling default colors](https://tailwindcss.com/docs/colors#disabling-default-colors) Disable any default color by setting the theme namespace for that color to `initial`: CSS @import "tailwindcss";@theme { --color-lime-*: initial; --color-fuchsia-*: initial;} This is especially useful for removing the corresponding CSS variables from your output for colors you don't intend to use. ### [Using a custom palette](https://tailwindcss.com/docs/colors#using-a-custom-palette) Use `--color-*: initial` to completely disable all of the default colors and define your own custom color palette: CSS @import "tailwindcss";@theme { --color-*: initial; --color-white: #fff; --color-purple: #3f3cbb; --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca;} ### [Referencing other variables](https://tailwindcss.com/docs/colors#referencing-other-variables) Use `@theme inline` when defining colors that reference other colors: CSS @import "tailwindcss";:root { --acme-canvas-color: oklch(0.967 0.003 264.542);}[data-theme="dark"] { --acme-canvas-color: oklch(0.21 0.034 264.665);}@theme inline { --color-canvas: var(--acme-canvas-color);} Learn more in the theme documentation on [referencing other variables](https://tailwindcss.com/docs/theme#referencing-other-variables) . [Default color palette reference](https://tailwindcss.com/docs/colors#default-color-palette-reference) ------------------------------------------------------------------------------------------------------- Here's a complete list of the default colors and their values for reference: CSS @theme { --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-red-950: oklch(25.8% 0.092 26.042); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.195 38.402); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); --color-orange-950: oklch(26.6% 0.079 36.259); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904); --color-amber-950: oklch(27.9% 0.077 45.635); --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-300: oklch(90.5% 0.182 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-700: oklch(55.4% 0.135 66.442); --color-yellow-800: oklch(47.6% 0.114 61.907); --color-yellow-900: oklch(42.1% 0.095 57.708); --color-yellow-950: oklch(28.6% 0.066 53.813); --color-lime-50: oklch(98.6% 0.031 120.757); --color-lime-100: oklch(96.7% 0.067 122.328); --color-lime-200: oklch(93.8% 0.127 124.321); --color-lime-300: oklch(89.7% 0.196 126.665); --color-lime-400: oklch(84.1% 0.238 128.85); --color-lime-500: oklch(76.8% 0.233 130.85); --color-lime-600: oklch(64.8% 0.2 131.684); --color-lime-700: oklch(53.2% 0.157 131.589); --color-lime-800: oklch(45.3% 0.124 130.933); --color-lime-900: oklch(40.5% 0.101 131.063); --color-lime-950: oklch(27.4% 0.072 132.109); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328); --color-green-900: oklch(39.3% 0.095 152.535); --color-green-950: oklch(26.6% 0.065 152.934); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-emerald-900: oklch(37.8% 0.077 168.94); --color-emerald-950: oklch(26.2% 0.051 172.552); --color-teal-50: oklch(98.4% 0.014 180.72); --color-teal-100: oklch(95.3% 0.051 180.801); --color-teal-200: oklch(91% 0.096 180.426); --color-teal-300: oklch(85.5% 0.138 181.071); --color-teal-400: oklch(77.7% 0.152 181.912); --color-teal-500: oklch(70.4% 0.14 182.503); --color-teal-600: oklch(60% 0.118 184.704); --color-teal-700: oklch(51.1% 0.096 186.391); --color-teal-800: oklch(43.7% 0.078 188.216); --color-teal-900: oklch(38.6% 0.063 188.416); --color-teal-950: oklch(27.7% 0.046 192.524); --color-cyan-50: oklch(98.4% 0.019 200.873); --color-cyan-100: oklch(95.6% 0.045 203.388); --color-cyan-200: oklch(91.7% 0.08 205.041); --color-cyan-300: oklch(86.5% 0.127 207.078); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-cyan-500: oklch(71.5% 0.143 215.221); --color-cyan-600: oklch(60.9% 0.126 221.723); --color-cyan-700: oklch(52% 0.105 223.128); --color-cyan-800: oklch(45% 0.085 224.283); --color-cyan-900: oklch(39.8% 0.07 227.392); --color-cyan-950: oklch(30.2% 0.056 229.695); --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-sky-700: oklch(50% 0.134 242.749); --color-sky-800: oklch(44.3% 0.11 240.79); --color-sky-900: oklch(39.1% 0.09 240.876); --color-sky-950: oklch(29.3% 0.066 243.157); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-200: oklch(87% 0.065 274.039); --color-indigo-300: oklch(78.5% 0.115 274.713); --color-indigo-400: oklch(67.3% 0.182 276.935); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-indigo-800: oklch(39.8% 0.195 277.366); --color-indigo-900: oklch(35.9% 0.144 278.697); --color-indigo-950: oklch(25.7% 0.09 281.288); --color-violet-50: oklch(96.9% 0.016 293.756); --color-violet-100: oklch(94.3% 0.029 294.588); --color-violet-200: oklch(89.4% 0.057 293.283); --color-violet-300: oklch(81.1% 0.111 293.571); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-violet-600: oklch(54.1% 0.281 293.009); --color-violet-700: oklch(49.1% 0.27 292.581); --color-violet-800: oklch(43.2% 0.232 292.759); --color-violet-900: oklch(38% 0.189 293.745); --color-violet-950: oklch(28.3% 0.141 291.089); --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.265 301.924); --color-purple-800: oklch(43.8% 0.218 303.724); --color-purple-900: oklch(38.1% 0.176 304.987); --color-purple-950: oklch(29.1% 0.149 302.717); --color-fuchsia-50: oklch(97.7% 0.017 320.058); --color-fuchsia-100: oklch(95.2% 0.037 318.852); --color-fuchsia-200: oklch(90.3% 0.076 319.62); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-400: oklch(74% 0.238 322.16); --color-fuchsia-500: oklch(66.7% 0.295 322.15); --color-fuchsia-600: oklch(59.1% 0.293 322.896); --color-fuchsia-700: oklch(51.8% 0.253 323.949); --color-fuchsia-800: oklch(45.2% 0.211 324.591); --color-fuchsia-900: oklch(40.1% 0.17 325.612); --color-fuchsia-950: oklch(29.3% 0.136 325.661); --color-pink-50: oklch(97.1% 0.014 343.198); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-200: oklch(89.9% 0.061 343.231); --color-pink-300: oklch(82.3% 0.12 346.018); --color-pink-400: oklch(71.8% 0.202 349.761); --color-pink-500: oklch(65.6% 0.241 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-pink-700: oklch(52.5% 0.223 3.958); --color-pink-800: oklch(45.9% 0.187 3.815); --color-pink-900: oklch(40.8% 0.153 2.432); --color-pink-950: oklch(28.4% 0.109 3.907); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-200: oklch(89.2% 0.058 10.001); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.222 16.935); --color-rose-800: oklch(45.5% 0.188 13.697); --color-rose-900: oklch(41% 0.159 10.272); --color-rose-950: oklch(27.1% 0.105 12.094); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-gray-950: oklch(13% 0.028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-200: oklch(92% 0.004 286.32); --color-zinc-300: oklch(87.1% 0.006 286.286); --color-zinc-400: oklch(70.5% 0.015 286.067); --color-zinc-500: oklch(55.2% 0.016 285.938); --color-zinc-600: oklch(44.2% 0.017 285.786); --color-zinc-700: oklch(37% 0.013 285.805); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% 0.001 106.423); --color-stone-100: oklch(97% 0.001 106.424); --color-stone-200: oklch(92.3% 0.003 48.717); --color-stone-300: oklch(86.9% 0.005 56.366); --color-stone-400: oklch(70.9% 0.01 56.259); --color-stone-500: oklch(55.3% 0.013 58.071); --color-stone-600: oklch(44.4% 0.011 73.639); --color-stone-700: oklch(37.4% 0.01 67.558); --color-stone-800: oklch(26.8% 0.007 34.298); --color-stone-900: oklch(21.6% 0.006 56.043); --color-stone-950: oklch(14.7% 0.004 49.25); --color-mauve-50: oklch(98.5% 0 0); --color-mauve-100: oklch(96% 0.003 325.6); --color-mauve-200: oklch(92.2% 0.005 325.62); --color-mauve-300: oklch(86.5% 0.012 325.68); --color-mauve-400: oklch(71.1% 0.019 323.02); --color-mauve-500: oklch(54.2% 0.034 322.5); --color-mauve-600: oklch(43.5% 0.029 321.78); --color-mauve-700: oklch(36.4% 0.029 323.89); --color-mauve-800: oklch(26.3% 0.024 320.12); --color-mauve-900: oklch(21.2% 0.019 322.12); --color-mauve-950: oklch(14.5% 0.008 326); --color-olive-50: oklch(98.8% 0.003 106.5); --color-olive-100: oklch(96.6% 0.005 106.5); --color-olive-200: oklch(93% 0.007 106.5); --color-olive-300: oklch(88% 0.011 106.6); --color-olive-400: oklch(73.7% 0.021 106.9); --color-olive-500: oklch(58% 0.031 107.3); --color-olive-600: oklch(46.6% 0.025 107.3); --color-olive-700: oklch(39.4% 0.023 107.4); --color-olive-800: oklch(28.6% 0.016 107.4); --color-olive-900: oklch(22.8% 0.013 107.4); --color-olive-950: oklch(15.3% 0.006 107.1); --color-mist-50: oklch(98.7% 0.002 197.1); --color-mist-100: oklch(96.3% 0.002 197.1); --color-mist-200: oklch(92.5% 0.005 214.3); --color-mist-300: oklch(87.2% 0.007 219.6); --color-mist-400: oklch(72.3% 0.014 214.4); --color-mist-500: oklch(56% 0.021 213.5); --color-mist-600: oklch(45% 0.017 213.2); --color-mist-700: oklch(37.8% 0.015 216); --color-mist-800: oklch(27.5% 0.011 216.9); --color-mist-900: oklch(21.8% 0.008 223.9); --color-mist-950: oklch(14.8% 0.004 228.8); --color-taupe-50: oklch(98.6% 0.002 67.8); --color-taupe-100: oklch(96% 0.002 17.2); --color-taupe-200: oklch(92.2% 0.005 34.3); --color-taupe-300: oklch(86.8% 0.007 39.5); --color-taupe-400: oklch(71.4% 0.014 41.2); --color-taupe-500: oklch(54.7% 0.021 43.1); --color-taupe-600: oklch(43.8% 0.017 39.3); --color-taupe-700: oklch(36.7% 0.016 35.7); --color-taupe-800: oklch(26.8% 0.011 36.5); --color-taupe-900: oklch(21.4% 0.009 43.1); --color-taupe-950: oklch(14.7% 0.004 49.3); --color-black: #000; --color-white: #fff;} This can be useful if you want to reuse any of these scales but under a different name, like redefining `--color-gray-*` to use the `--color-slate-*` scale. ### On this page * [Working with colors](https://tailwindcss.com/docs/colors#working-with-colors) * [Using color utilities](https://tailwindcss.com/docs/colors#using-color-utilities) * [Adjusting opacity](https://tailwindcss.com/docs/colors#adjusting-opacity) * [Targeting dark mode](https://tailwindcss.com/docs/colors#targeting-dark-mode) * [Referencing in CSS](https://tailwindcss.com/docs/colors#referencing-in-css) * [Customizing your colors](https://tailwindcss.com/docs/colors#customizing-your-colors) * [Overriding default colors](https://tailwindcss.com/docs/colors#overriding-default-colors) * [Disabling default colors](https://tailwindcss.com/docs/colors#disabling-default-colors) * [Using a custom palette](https://tailwindcss.com/docs/colors#using-a-custom-palette) * [Referencing other variables](https://tailwindcss.com/docs/colors#referencing-other-variables) * [Default color palette reference](https://tailwindcss.com/docs/colors#default-color-palette-reference) Copyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https://tailwindcss.com/brand) --- # Installing Tailwind CSS with Vite - Tailwind CSS [](https://tailwindcss.com/) v4.2 ⌘KCtrl K[Docs](https://tailwindcss.com/docs) [Blog](https://tailwindcss.com/blog) [Showcase](https://tailwindcss.com/showcase) [Sponsor](https://tailwindcss.com/sponsor) [Plus](https://tailwindcss.com/plus?ref=top) [](https://github.com/tailwindlabs/tailwindcss) 1. Getting Started 2. Using Vite Installation Get started with Tailwind CSS ============================= Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero-runtime. Installation ------------ * [Using Vite](https://tailwindcss.com/docs/installation/using-vite) ------------------------------------------------------------------- * [Using PostCSS](https://tailwindcss.com/docs/installation/using-postcss) ------------------------------------------------------------------------- * [Tailwind CLI](https://tailwindcss.com/docs/installation/tailwind-cli) ----------------------------------------------------------------------- * [Framework Guides](https://tailwindcss.com/docs/installation/framework-guides) ------------------------------------------------------------------------------- * [Play CDN](https://tailwindcss.com/docs/installation/play-cdn) --------------------------------------------------------------- ### Installing Tailwind CSS as a Vite plugin Installing Tailwind CSS as a Vite plugin is the most seamless way to integrate it with frameworks like Laravel, SvelteKit, React Router, Nuxt, and SolidJS. 01 #### Create your project Start by creating a new Vite project if you don’t have one set up already. The most common approach is to use [Create Vite](https://vite.dev/guide/#scaffolding-your-first-vite-project) . Terminal npm create vite@latest my-projectcd my-project 02 #### Install Tailwind CSS Install `tailwindcss` and `@tailwindcss/vite` via npm. Terminal npm install tailwindcss @tailwindcss/vite 03 #### Configure the Vite plugin Add the `@tailwindcss/vite` plugin to your Vite configuration. vite.config.ts import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],}) 04 #### Import Tailwind CSS Add an `@import` to your CSS file that imports Tailwind CSS. CSS @import "tailwindcss"; 05 #### Start your build process Run your build process with `npm run dev` or whatever command is configured in your `package.json` file. Terminal npm run dev 06 #### Start using Tailwind in your HTML Make sure your compiled CSS is included in the `` _(your framework might handle this for you)_, then start using Tailwind’s utility classes to style your content. HTML

Hello world!

**Are you stuck?** Setting up Tailwind with Vite can be a bit different across different build tools. Check our framework guides to see if we have more specific instructions for your particular setup. [Explore our framework guides](https://tailwindcss.com/docs/installation/framework-guides) Copyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https://tailwindcss.com/brand) --- # Styling with utility classes - Core concepts - Tailwind CSS [](https://tailwindcss.com/) v4.2 ⌘KCtrl K[Docs](https://tailwindcss.com/docs) [Blog](https://tailwindcss.com/blog) [Showcase](https://tailwindcss.com/showcase) [Sponsor](https://tailwindcss.com/sponsor) [Plus](https://tailwindcss.com/plus?ref=top) [](https://github.com/tailwindlabs/tailwindcss) 1. Core concepts 2. Styling with utility classes Core concepts Styling with utility classes ============================ Building complex components from a constrained set of primitive utilities. [Overview](https://tailwindcss.com/docs/styling-with-utility-classes#overview) ------------------------------------------------------------------------------- You style things with Tailwind by combining many single-purpose presentational classes _(utility classes)_ directly in your markup: ChitChat You have a new message!

ChitChat

You have a new message!

For example, in the UI above we've used: * The [display](https://tailwindcss.com/docs/display#flex) and [padding](https://tailwindcss.com/docs/padding) utilities (`flex`, `shrink-0`, and `p-6`) to control the overall layout * The [max-width](https://tailwindcss.com/docs/max-width) and [margin](https://tailwindcss.com/docs/margin) utilities (`max-w-sm` and `mx-auto`) to constrain the card width and center it horizontally * The [background-color](https://tailwindcss.com/docs/background-color) , [border-radius](https://tailwindcss.com/docs/border-radius) , and [box-shadow](https://tailwindcss.com/docs/box-shadow) utilities (`bg-white`, `rounded-xl`, and `shadow-lg`) to style the card's appearance * The [width](https://tailwindcss.com/docs/width) and [height](https://tailwindcss.com/docs/height) utilities (`size-12`) to set the width and height of the logo image * The [gap](https://tailwindcss.com/docs/gap) utilities (`gap-x-4`) to handle the spacing between the logo and the text * The [font-size](https://tailwindcss.com/docs/font-size) , [color](https://tailwindcss.com/docs/text-color) , and [font-weight](https://tailwindcss.com/docs/font-weight) utilities (`text-xl`, `text-black`, `font-medium`, etc.) to style the card text Styling things this way contradicts a lot of traditional best practices, but once you try it you'll quickly notice some really important benefits: * **You get things done faster** — you don't spend any time coming up with class names, making decisions about selectors, or switching between HTML and CSS files, so your designs come together very fast. * **Making changes feels safer** — adding or removing a utility class to an element only ever affects that element, so you never have to worry about accidentally breaking something another page that's using the same CSS. * **Maintaining old projects is easier** — changing something just means finding that element in your project and changing the classes, not trying to remember how all of that custom CSS works that you haven't touched in six months. * **Your code is more portable** — since both the structure and styling live in the same place, you can easily copy and paste entire chunks of UI around, even between different projects. * **Your CSS stops growing** — since utility classes are so reusable, your CSS doesn't continue to grow linearly with every new feature you add to a project. These benefits make a big difference on small projects, but they are even more valuable for teams working on long-running projects at scale. ### [Why not just use inline styles?](https://tailwindcss.com/docs/styling-with-utility-classes#why-not-just-use-inline-styles) A common reaction to this approach is wondering, “isn’t this just inline styles?” and in some ways it is — you’re applying styles directly to elements instead of assigning them a class name and then styling that class. But using utility classes has many important advantages over inline styles, for example: * **Designing with constraints** — using inline styles, every value is a magic number. With utilities, you’re choosing styles from a [predefined design system](https://tailwindcss.com/docs/theme) , which makes it much easier to build visually consistent UIs. * **Hover, focus, and other states** — inline styles can’t target states like hover or focus, but Tailwind’s [state variants](https://tailwindcss.com/docs/hover-focus-and-other-states) make it easy to style those states with utility classes. * **Media queries** — you can’t use media queries in inline styles, but you can use Tailwind’s [responsive variants](https://tailwindcss.com/docs/responsive-design) to build fully responsive interfaces easily. This component is fully responsive and includes a button with hover and active styles, and is built entirely with utility classes: ![Woman's Face](https://tailwindcss.com/_next/static/media/erin-lindford.fbd7bb53.jpg) Erin Lindford Product Engineer Message

Erin Lindford

Product Engineer

[Thinking in utility classes](https://tailwindcss.com/docs/styling-with-utility-classes#thinking-in-utility-classes) --------------------------------------------------------------------------------------------------------------------- ### [Styling hover and focus states](https://tailwindcss.com/docs/styling-with-utility-classes#styling-hover-and-focus-states) To style an element on states like hover or focus, prefix any utility with the state you want to target, for example `hover:bg-sky-700`: Hover over this button to see the background color change Save changes These prefixes are called [variants](https://tailwindcss.com/docs/hover-focus-and-other-states) in Tailwind, and they only apply the styles from a utility class when the condition for that variant matches. Here's what the generated CSS looks like for the `hover:bg-sky-700` class: Generated CSS .hover\:bg-sky-700 { &:hover { background-color: var(--color-sky-700); }} Notice how this class does nothing _unless_ the element is hovered? Its _only_ job is to provide hover styles — nothing else. This is different from how you'd write traditional CSS, where a single class would usually provide the styles for many states: HTML You can even stack variants in Tailwind to apply a utility when multiple conditions match, like combining `hover:` and `disabled:` Learn more in the documentation styling elements on [hover, focus, and other states](https://tailwindcss.com/docs/hover-focus-and-other-states) . ### [Media queries and breakpoints](https://tailwindcss.com/docs/styling-with-utility-classes#media-queries-and-breakpoints) Just like hover and focus states, you can style elements at different breakpoints by prefixing any utility with the breakpoint where you want that style to apply: Resize this example to see the layout change 01 02 03 04 05 06

In the example above, the `sm:` prefix makes sure that `grid-cols-3` only triggers at the `sm` breakpoint and above, which is 40rem out of the box: Generated CSS .sm\:grid-cols-3 { @media (width >= 40rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); }} Learn more in the [responsive design](https://tailwindcss.com/docs/responsive-design) documentation. ### [Targeting dark mode](https://tailwindcss.com/docs/styling-with-utility-classes#targeting-dark-mode) Styling an element in dark mode is just a matter of adding the `dark:` prefix to any utility you want to apply when dark mode is active: Light mode Writes upside-down The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. Dark mode Writes upside-down The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

Writes upside-down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

Just like with hover states or media queries, the important thing to understand is that a single utility class will never include _both_ the light and dark styles — you style things in dark mode by using multiple classes, one for the light mode styles and another for the dark mode styles. Generated CSS .dark\:bg-gray-800 { @media (prefers-color-scheme: dark) { background-color: var(--color-gray-800); }} Learn more in the [dark mode](https://tailwindcss.com/docs/dark-mode) documentation. ### [Using class composition](https://tailwindcss.com/docs/styling-with-utility-classes#using-class-composition) A lot of the time with Tailwind you'll even use multiple classes to build up the value for a single CSS property, for example adding multiple filters to an element: HTML

Both of these effects rely on the `filter` property in CSS, so Tailwind uses CSS variables to make it possible to compose these effects together: Generated CSS .blur-sm { --tw-blur: blur(var(--blur-sm)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,);}.grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,);} The generated CSS above is slightly simplified, but the trick here is that each utility sets a CSS variable just for the effect it's meant to apply. Then the `filter` property looks at all of these variables, falling back to nothing if the variable hasn't been set. Tailwind uses this same approach for [gradients](https://tailwindcss.com/docs/background-image#adding-a-linear-gradient) , [shadow colors](https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color) , [transforms](https://tailwindcss.com/docs/translate) , and more. ### [Using arbitrary values](https://tailwindcss.com/docs/styling-with-utility-classes#using-arbitrary-values) Many utilities in Tailwind are driven by [theme variables](https://tailwindcss.com/docs/theme) , like `bg-blue-500`, `text-xl`, and `shadow-md`, which map to your underlying color palette, type scale, and shadows. When you need to use a one-off value outside of your theme, use the special square bracket syntax for specifying arbitrary values: HTML This can be useful for one-off colors outside of your color palette _(like the Facebook blue above)_, but also when you need a complex custom value like a very specific grid: HTML

It's also useful when you need to use CSS features like `calc()`, even if you are using your theme values: HTML

There's even a syntax for generating completely arbitrary CSS including an arbitrary property name, which can be useful for setting CSS variables: HTML

Learn more in the documentation on [using arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) . #### [How does this even work?](https://tailwindcss.com/docs/styling-with-utility-classes#how-does-this-even-work) Tailwind CSS isn't one big static stylesheet like you might be used to with other CSS frameworks — it generates the CSS needed based on the classes you're actually using when you compile your CSS. It does this by scanning all of the files in your project looking for any symbol that looks like it could be a class name: Button.jsx export default function Button({ size, children }) { let sizeClasses = { md: "px-4 py-2 rounded-md text-base", lg: "px-5 py-3 rounded-lg text-lg", }[size]; return ( );} After it's found all of the potential classes, Tailwind generates the CSS for each one and compiles it all into one stylesheet of just the styles you actually need. Since the CSS is generated based on the class name, Tailwind can recognize classes using arbitrary values like `bg-[#316ff6]` and generate the necessary CSS, even when the value isn't part of your theme. Learn more about how this works in [detecting classes in source files](https://tailwindcss.com/docs/detecting-classes-in-source-files) . ### [Complex selectors](https://tailwindcss.com/docs/styling-with-utility-classes#complex-selectors) Sometimes you need to style an element under a combination of conditions, for example in dark mode, at a specific breakpoint, when hovered, and when the element has a specific data attribute. Here's an example of what that looks like with Tailwind: HTML Simplified CSS @media (prefers-color-scheme: dark) and (width >= 64rem) { button[data-current]:hover { background-color: var(--color-indigo-600); }} Tailwind also supports things like `group-hover`, which let you style an element when a specific parent is hovered: HTML Read more… Simplified CSS @media (hover: hover) { a:hover span { text-decoration-line: underline; }} This `group-*` syntax works with other variants too, like `group-focus`, `group-active`, and [many more](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state) . For really complex scenarios _(especially when styling HTML you don't control)_, Tailwind supports [arbitrary variants](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-variants) which let you write any selector you want, directly in a class name: HTML

This text will be blue

Simplified CSS div > [data-active] + span { color: var(--color-blue-600);} ### [When to use inline styles](https://tailwindcss.com/docs/styling-with-utility-classes#when-to-use-inline-styles) Inline styles are still very useful in Tailwind CSS projects, particularly when a value is coming from a dynamic source like a database or API: branded-button.jsx export function BrandedButton({ buttonColor, textColor, children }) { return ( );} You might also reach for an inline style for very complicated arbitrary values that are difficult to read when formatted as a class name: HTML

Another useful pattern is setting CSS variables based on dynamic sources using inline styles, then referencing those variables with utility classes: branded-button.jsx export function BrandedButton({ buttonColor, buttonColorHover, textColor, children }) { return ( );} [Managing duplication](https://tailwindcss.com/docs/styling-with-utility-classes#managing-duplication) ------------------------------------------------------------------------------------------------------- When you build entire projects with just utility classes, you'll inevitably find yourself repeating certain patterns to recreate the same design in different places. For example, here the utility classes for each avatar image are repeated five separate times: #### Contributors 204 ![](https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80)![](https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80)![](https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80)![](https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80)![](https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80) [* 198 others](https://tailwindcss.com/docs/styling-with-utility-classes#)

Contributors

204

+ 198 others

Don't panic! In practice this isn't the problem you might be worried it is, and the strategies for dealing with it are things you already do every day. ### [Using loops](https://tailwindcss.com/docs/styling-with-utility-classes#using-loops) A lot of the time a design element that shows up more than once in the rendered page is only actually authored once because the actual markup is rendered in a loop. For example, the duplicate avatars at the beginning of this guide would almost certainly be rendered in a loop in a real project: #### Contributors 204 ![](https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80)![](https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80)![](https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80)![](https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80)![](https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80) [* 198 others](https://tailwindcss.com/docs/styling-with-utility-classes#)

Contributors

204

{#each contributors as user} {user.handle}

{/each}

+ 198 others

When elements are rendered in a loop like this, the actual class list is only written once so there's no actual duplication problem to solve. ### [Using multi-cursor editing](https://tailwindcss.com/docs/styling-with-utility-classes#using-multi-cursor-editing) When duplication is localized to a group of elements in a single file, the easiest way to deal with it is to use [multi-cursor editing](https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor) to quickly select and edit the class list for each element at once: You'd be surprised at how often this ends up being the best solution. If you can quickly edit all of the duplicated class lists simultaneously, there's no benefit to introducing any additional abstraction. ### [Using components](https://tailwindcss.com/docs/styling-with-utility-classes#using-components) If you need to reuse some styles across multiple files, the best strategy is to create a _component_ if you're using a front-end framework like React, Svelte, or Vue, or a _template partial_ if you're using a templating language like Blade, ERB, Twig, or Nunjucks. ![Beach](https://images.unsplash.com/photo-1452784444945-3f422708fe5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=512&q=80) Private Villa [Relaxing All-Inclusive Resort in Cancun](https://tailwindcss.com/docs/styling-with-utility-classes#) $299 USD per night export function VacationCard({ img, imgAlt, eyebrow, title, pricing, url }) { return (

{eyebrow}

{title}

{pricing}

);} Now you can use this component in as many places as you like, while still having a single source of truth for the styles so they can easily be updated together in one place. ### [Using custom CSS](https://tailwindcss.com/docs/styling-with-utility-classes#using-custom-css) If you're using a templating language like ERB or Twig instead of something like React or Vue, creating a template partial for something as small as a button can feel like overkill compared to a simple CSS class like `btn`. While it's highly recommended that you create proper template partials for more complex components, writing some custom CSS is totally fine when a template partial feels heavy-handed. Here's what a `btn-primary` class might look like, using [theme variables](https://tailwindcss.com/docs/theme#with-custom-css) to keep the design consistent: Save changes HTML CSS @import "tailwindcss";@layer components { .btn-primary { border-radius: calc(infinity * 1px); background-color: var(--color-violet-500); padding-inline: --spacing(5); padding-block: --spacing(2); font-weight: var(--font-weight-semibold); color: var(--color-white); box-shadow: var(--shadow-md); &:hover { @media (hover: hover) { background-color: var(--color-violet-700); } } }} Again though, for anything that's more complicated than just a single HTML element, we highly recommend using template partials so the styles and structure can be encapsulated in one place. [Managing style conflicts](https://tailwindcss.com/docs/styling-with-utility-classes#managing-style-conflicts) --------------------------------------------------------------------------------------------------------------- ### [Conflicting utility classes](https://tailwindcss.com/docs/styling-with-utility-classes#conflicting-utility-classes) When you add two classes that target the same CSS property, the class that appears later in the stylesheet wins. So in this example, the element will receive `display: grid` even though `flex` comes last in the actual `class` attribute: HTML

CSS .flex { display: flex;}.grid { display: grid;} In general, you should just never add two conflicting classes to the same element — only ever add the one you actually want to take effect: example.jsx export function Example({ gridLayout }) { return

{/* ... */}

;} Using component-based libraries like React or Vue, this often means exposing specific props for styling customizations instead of letting consumers add extra classes from outside of a component, since those styles will often conflict. ### [Using the important modifier](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-modifier) When you really need to force a specific utility class to take effect and have no other means of managing the specificity, you can add `!` to the end of the class name to make all of the declarations `!important`: HTML

Generated CSS .bg-red-500\! { background-color: var(--color-red-500) !important;}.bg-teal-500 { background-color: var(--color-teal-500);} ### [Using the important flag](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-flag) If you're adding Tailwind to a project that has existing complex CSS with high specificity rules, you can use the `important` flag when importing Tailwind to mark _all_ utilities as `!important`: app.css @import "tailwindcss" important; Compiled CSS @layer utilities { .flex { display: flex !important; } .gap-4 { gap: 1rem !important; } .underline { text-decoration-line: underline !important; }} ### [Using the prefix option](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-prefix-option) If your project has class names that conflict with Tailwind CSS utilities, you can prefix all Tailwind-generated classes and CSS variables using the `prefix` option: app.css @import "tailwindcss" prefix(tw); Compiled CSS @layer theme { :root { --tw-color-red-500: oklch(0.637 0.237 25.331); }}@layer utilities { .tw\:text-red-500 { color: var(--tw-color-red-500); }} ### On this page * [Overview](https://tailwindcss.com/docs/styling-with-utility-classes#overview) * [Why not just use inline styles?](https://tailwindcss.com/docs/styling-with-utility-classes#why-not-just-use-inline-styles) * [Thinking in utility classes](https://tailwindcss.com/docs/styling-with-utility-classes#thinking-in-utility-classes) * [Styling hover and focus states](https://tailwindcss.com/docs/styling-with-utility-classes#styling-hover-and-focus-states) * [Media queries and breakpoints](https://tailwindcss.com/docs/styling-with-utility-classes#media-queries-and-breakpoints) * [Targeting dark mode](https://tailwindcss.com/docs/styling-with-utility-classes#targeting-dark-mode) * [Using class composition](https://tailwindcss.com/docs/styling-with-utility-classes#using-class-composition) * [Using arbitrary values](https://tailwindcss.com/docs/styling-with-utility-classes#using-arbitrary-values) * [Complex selectors](https://tailwindcss.com/docs/styling-with-utility-classes#complex-selectors) * [When to use inline styles](https://tailwindcss.com/docs/styling-with-utility-classes#when-to-use-inline-styles) * [Managing duplication](https://tailwindcss.com/docs/styling-with-utility-classes#managing-duplication) * [Using loops](https://tailwindcss.com/docs/styling-with-utility-classes#using-loops) * [Using multi-cursor editing](https://tailwindcss.com/docs/styling-with-utility-classes#using-multi-cursor-editing) * [Using components](https://tailwindcss.com/docs/styling-with-utility-classes#using-components) * [Using custom CSS](https://tailwindcss.com/docs/styling-with-utility-classes#using-custom-css) * [Managing style conflicts](https://tailwindcss.com/docs/styling-with-utility-classes#managing-style-conflicts) * [Conflicting utility classes](https://tailwindcss.com/docs/styling-with-utility-classes#conflicting-utility-classes) * [Using the important modifier](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-modifier) * [Using the important flag](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-flag) * [Using the prefix option](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-prefix-option) Copyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https://tailwindcss.com/brand) --- # break-before - Layout - Tailwind CSS [](https://tailwindcss.com/) v4.2 ⌘KCtrl K[Docs](https://tailwindcss.com/docs) [Blog](https://tailwindcss.com/blog) [Showcase](https://tailwindcss.com/showcase) [Sponsor](https://tailwindcss.com/sponsor) [Plus](https://tailwindcss.com/plus?ref=top) [](https://github.com/tailwindlabs/tailwindcss) 1. Layout 2. break-before Layout break-before ============ Utilities for controlling how a column or page should break before an element. | Class | Styles | | --- | --- | | `break-before-auto` | `break-before: auto;` | | `break-before-avoid` | `break-before: avoid;` | | `break-before-all` | `break-before: all;` | | `break-before-avoid-page` | `break-before: avoid-page;` | | `break-before-page` | `break-before: page;` | | `break-before-left` | `break-before: left;` | | `break-before-right` | `break-before: right;` | | `break-before-column` | `break-before: column;` | [Examples](https://tailwindcss.com/docs/break-before#examples) --------------------------------------------------------------- ### [Basic example](https://tailwindcss.com/docs/break-before#basic-example) Use utilities like `break-before-column` and `break-before-page` to control how a column or page break should behave before an element:

Well, let me tell you something, ...

Sure, go ahead, laugh...

Maybe we can live without...

Look. If you think this is...

### [Responsive design](https://tailwindcss.com/docs/break-before#responsive-design) Prefix a `break-before` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

{person.name}

{person.email}

You can also style an element when it's an odd or even child using the `odd` and `even` variants: | Name | Title | Email | | --- | --- | --- | | Jane Cooper | Regional Paradigm Technician | jane.cooper@example.com | | Cody Fisher | Product Directives Officer | cody.fisher@example.com | | Leonard Krasner | Senior Designer | leonard.krasner@example.com | | Emily Selman | VP, Hardware Engineering | emily.selman@example.com | | Anna Roberts | Chief Strategy Officer | anna.roberts@example.com | {#each people as person} {/each}

{person.name}

{person.title}

{person.email}

Use the `nth-*` and `nth-last-*` variants to style children based on their position in the list:

You can pass any number you want to these by default, and use arbitrary values for more complex expressions like `nth-[2n+1_of_li]`. Tailwind also includes variants for other structural pseudo-classes like `:only-child`, `:first-of-type`, `:empty`, and more. See the [pseudo-class reference](https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-class-reference) for a complete list of available pseudo-class variants. ### [:required and :disabled](https://tailwindcss.com/docs/hover-focus-and-other-states#required-and-disabled) Style form elements in different states using variants like `required`, `invalid`, and `disabled`: Try making the email address valid to see the styles change Username Email Password Save changes Using variants for this sort of thing can reduce the amount of conditional logic in your templates, letting you use the same set of classes regardless of what state an input is in and letting the browser apply the right styles for you. Tailwind also includes variants for other form states like `:read-only`, `:indeterminate`, `:checked`, and more. See the [pseudo-class reference](https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-class-reference) for a complete list of available pseudo-class variants. ### [:has()](https://tailwindcss.com/docs/hover-focus-and-other-states#has) Use the `has-*` variant to style an element based on the state or content of its descendants: Payment method Google PayApple PayCredit Card Google Pay You can use `has-*` with a pseudo-class, like `has-[:focus]`, to style an element based on the state of its descendants. You can also use element selectors, like `has-[img]` or `has-[a]`, to style an element based on the content of its descendants. #### [Styling based on the descendants of a group](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-the-descendants-of-a-group) If you need to style an element based on the descendants of a parent element, you can mark the parent with the `group` class and use the `group-has-*` variant to style the target element: ![](https://spotlight.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Favatar.51a13c67.jpg&w=128&q=80) Spencer Sharp Product Designer at [planeteria.tech](https://tailwindcss.com/docs/hover-focus-and-other-states#) ![](https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) Casey Jordan Just happy to be here. ![](https://images.unsplash.com/photo-1590895340509-793cb98788c9?q=80&w=256&h=256&&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) Alex Reed A multidisciplinary designer, working at the intersection of art and technology. [alex-reed.com](https://tailwindcss.com/docs/hover-focus-and-other-states#) ![](https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) Taylor Bailey Pushing pixels. Slinging divs.

Spencer Sharp

Product Designer at planeteria.tech

#### [Styling based on the descendants of a peer](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-the-descendants-of-a-peer) If you need to style an element based on the descendants of a sibling element, you can mark the sibling with the `peer` class and use the `peer-has-*` variant to style the target element: Today Create a to do list Check off first item Investigate race condition

Create a to do list

### [:not()](https://tailwindcss.com/docs/hover-focus-and-other-states#not) Use the `not-` variant to style an element when a condition is not true. It's particularly powerful when combined with other pseudo-class variants, for example combining `not-focus:` with `hover:` to only apply hover styles when an element is not focused: Try focusing on the button and then hovering over it Save changes You can also combine the `not-` variant with media query variants like `forced-colors` or `supports` to only style an element when something about the user's environment is not true:

### [Styling based on parent state](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state) When you need to style an element based on the state of some _parent_ element, mark the parent with the `group` class, and use `group-*` variants like `group-hover` to style the target element: Hover over the card to see both text elements change color [New project\ \ Create a new project from a variety of starting templates.](https://tailwindcss.com/docs/hover-focus-and-other-states#)

New project

Create a new project from a variety of starting templates.

This pattern works with every pseudo-class variant, for example `group-focus`, `group-active`, or even `group-odd`. #### [Differentiating nested groups](https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups) When nesting groups, you can style something based on the state of a _specific_ parent group by giving that parent a unique group name using a `group/{name}` class, and including that name in variants using classes like `group-hover/{name}`: * ![](https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80) [Leslie Abbott](https://tailwindcss.com/docs/hover-focus-and-other-states#) Co-Founder / CEO [Call](https://tailwindcss.com/docs/hover-focus-and-other-states#) * ![](https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80) [Hector Adams](https://tailwindcss.com/docs/hover-focus-and-other-states#) VP, Marketing [Call](https://tailwindcss.com/docs/hover-focus-and-other-states#) * ![](https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80) [Blake Alexander](https://tailwindcss.com/docs/hover-focus-and-other-states#) Account Coordinator [Call](https://tailwindcss.com/docs/hover-focus-and-other-states#)

Call

Groups can be named however you like and don’t need to be configured in any way — just name your groups directly in your markup and Tailwind will automatically generate the necessary CSS. #### [Arbitrary groups](https://tailwindcss.com/docs/hover-focus-and-other-states#arbitrary-groups) You can create one-off `group-*` variants on the fly by providing your own selector as an [arbitrary value](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) between square brackets: HTML Generated CSS

For more control, you can use the `&` character to mark where `.group` should end up in the final selector relative to the selector you are passing in: HTML Generated CSS

#### [Implicit groups](https://tailwindcss.com/docs/hover-focus-and-other-states#implicit-groups) The `in-*` variant works similarly to `group` except you don't need to add `group` to the parent element:

The `in-*` variant responds to state changes in any parent, so if you want more fine-grained control you'll need to use `group` instead. ### [Styling based on sibling state](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state) When you need to style an element based on the state of a _sibling_ element, mark the sibling with the `peer` class, and use `peer-*` variants like `peer-invalid` to style the target element: Try making the email address valid to see the warning disappear Email Please provide a valid email address. This makes it possible to do all sorts of neat tricks, like [floating labels](https://www.youtube.com/watch?v=nJzKi6oIvBA) for example without any JS. This pattern works with every pseudo-class variant, for example `peer-focus`, `peer-required`, and `peer-disabled`. It's important to note that the `peer` marker can only be used on _previous_ siblings because of how the [subsequent-sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator) works in CSS: Won't work, only previous siblings can be marked as peers Email #### [Differentiating peers](https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-peers) When using multiple peers, you can style something on the state of a _specific_ peer by giving that peer a unique name using a `peer/{name}` class, and including that name in variants using classes like `peer-checked/{name}`: Published status DraftPublished Drafts are only visible to administrators. Your post will be publicly visible on your site.

Published status Draft Published

Peers can be named however you like and don’t need to be configured in any way — just name your peers directly in your markup and Tailwind will automatically generate the necessary CSS. #### [Arbitrary peers](https://tailwindcss.com/docs/hover-focus-and-other-states#arbitrary-peers) You can create one-off `peer-*` variants on the fly by providing your own selector as an [arbitrary value](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) between square brackets: HTML Generated CSS For more control, you can use the `&` character to mark where `.peer` should end up in the final selector relative to the selector you are passing in: HTML Generated CSS

[Pseudo-elements](https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-elements) --------------------------------------------------------------------------------------------- ### [::before and ::after](https://tailwindcss.com/docs/hover-focus-and-other-states#before-and-after) Style the `::before` and `::after` pseudo-elements using the `before` and `after` variants: Email Email When using these variants, Tailwind will automatically add `content: ''` by default so you don't have to specify it unless you want a different value: > When you look annoyed all the time, people think that you're busy.

When you look annoyed all the time, people think that you're busy.

It's worth noting that you don't really need `::before` and `::after` pseudo-elements for most things in Tailwind projects — it's usually simpler to just use a real HTML element. For example, here's the same design from above but using a `` instead of the `::before` pseudo-element, which is a little easier to read and is actually less code:

When you look annoyed all the time, people think that you're busy.

Save `before` and `after` for situations where it's important that the content of the pseudo-element is not actually in the DOM and can't be selected by the user. ### [::placeholder](https://tailwindcss.com/docs/hover-focus-and-other-states#placeholder) Style the placeholder text of any input or textarea using the `placeholder` variant: Search ### [::file](https://tailwindcss.com/docs/hover-focus-and-other-states#file) Style the button in file inputs using the `file` variant: ![Current profile photo](https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80) Choose profile photo ### [::marker](https://tailwindcss.com/docs/hover-focus-and-other-states#marker) Style the counters or bullets in lists using the `marker` variant: Ingredients ----------- * 5 cups chopped Porcini mushrooms * 1/2 cup of olive oil * 3lb of celery

5 cups chopped Porcini mushrooms
1/2 cup of olive oil
3lb of celery

We've designed the `marker` variant to be inheritable, so although you can use it directly on an `

` element, you can also use it on a parent to avoid repeating yourself. ### [::selection](https://tailwindcss.com/docs/hover-focus-and-other-states#selection) Style the active text selection using the `selection` variant: Try selecting some of this text with your mouse So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I _was_ a marine biologist.

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

We've designed the `selection` variant to be inheritable, so you can add it anywhere in the tree and it will be applied to all descendant elements. This makes it easy to set the selection color to match your brand across your entire site: ### [::first-line and ::first-letter](https://tailwindcss.com/docs/hover-focus-and-other-states#first-line-and-first-letter) Style the first line in a block of content using the `first-line` variant, and the first letter using the `first-letter` variant: Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot. Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.

Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"?

Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.

### [::backdrop](https://tailwindcss.com/docs/hover-focus-and-other-states#backdrop) Style the backdrop of a [native `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) using the `backdrop` variant: If you're using native `` elements in your project, you may also want to read about [styling open/closed states](https://tailwindcss.com/docs/hover-focus-and-other-states#openclosed-state) using the `open` variant. [Media and feature queries](https://tailwindcss.com/docs/hover-focus-and-other-states#media-and-feature-queries) ----------------------------------------------------------------------------------------------------------------- ### [Responsive breakpoints](https://tailwindcss.com/docs/hover-focus-and-other-states#responsive-breakpoints) To style an element at a specific breakpoint, use responsive variants like `md` and `lg`. For example, this will render a 3-column grid on mobile, a 4-column grid on medium-width screens, and a 6-column grid on large-width screens:

To style an element based on the width of a parent element instead of the viewport, use variants like `@md` and `@lg`:

Check out the [Responsive design](https://tailwindcss.com/docs/responsive-design) documentation for an in-depth look at how these features work. ### [prefers-color-scheme](https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-color-scheme) The `prefers-color-scheme` media query tells you whether the user prefers a light theme or dark theme, and is usually configured at the operating system level. Use utilities with no variant to target light mode, and use the `dark` variant to provide overrides for dark mode: Light mode Writes upside-down The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. Dark mode Writes upside-down The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

Writes upside-down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

Check out the [Dark Mode](https://tailwindcss.com/docs/dark-mode) documentation for an in-depth look at how this feature works. ### [prefers-reduced-motion](https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion) The `prefers-reduced-motion` media query tells you if the user has requested that you minimize non-essential motion. Use the `motion-reduce` variant to conditionally add styles when the user has requested reduced motion: Try emulating \`prefers-reduced-motion: reduce\` in your developer tools to hide the spinner Processing... Tailwind also includes a `motion-safe` variant that only adds styles when the user has _not_ requested reduced motion. This can be useful when using the `motion-reduce` helper would mean having to "undo" a lot of styles: ### [prefers-contrast](https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-contrast) The `prefers-contrast` media query tells you if the user has requested more or less contrast. Use the `contrast-more` variant to conditionally add styles when the user has requested more contrast: Try emulating \`prefers-contrast: more\` in your developer tools to see the changes Social Security Number We need this to steal your identity. Social Security Number

We need this to steal your identity.

Tailwind also includes a `contrast-less` variant you can use to conditionally add styles when the user has requested less contrast. ### [forced-colors](https://tailwindcss.com/docs/hover-focus-and-other-states#forced-colors) The `forced-colors` media query indicates if the user is using a forced colors mode. These modes override your site's colors with a user defined palette for text, backgrounds, links and buttons. Use the `forced-colors` variant to conditionally add styles when the user has enabled a forced color mode: Try emulating \`forced-colors: active\` in your developer tools to see the changes Choose a theme: Cyan Blue Indigo Purple

Use the `not-forced-colors` variant to apply styles based when the user is _not_ using a forced colors mode:

Tailwind also includes a [forced color adjust](https://tailwindcss.com/docs/forced-color-adjust) utilities to opt in and out of forced colors. ### [inverted-colors](https://tailwindcss.com/docs/hover-focus-and-other-states#inverted-colors) Use the `inverted-colors` variant to conditionally add styles when the user has enabled an inverted color scheme:

### [pointer and any-pointer](https://tailwindcss.com/docs/hover-focus-and-other-states#pointer-and-any-pointer) The `pointer` media query tells you whether the user has a primary pointing device, like a mouse, and the accuracy of that pointing device. Use the `pointer-fine` variant to target an accurate pointing device, like a mouse or trackpad, or the `pointer-coarse` variant to target a less accurate pointing device, like a touchscreen, which can be useful for providing larger click targets on touch devices: Try emulating a touch device in your developer tools to see the changes RAM [See performance specs](https://tailwindcss.com/docs/hover-focus-and-other-states#) 4 GB8 GB16 GB32 GB64 GB128 GB

RAM

See performance specs

4 GB

While `pointer`only targets the primary pointing device, `any-pointer` is used to target any of the pointing devices that might be available. Use the `any-pointer-fine` and `any-pointer-coarse` variants to provide different styles if at least one connected pointing device meets the criteria. You can use `pointer-none` and `any-pointer-none` to target the absence of a pointing device. ### [orientation](https://tailwindcss.com/docs/hover-focus-and-other-states#orientation) Use the `portrait` and `landscape` variants to conditionally add styles when the viewport is in a specific orientation:

This experience is designed to be viewed in landscape. Please rotate your device to view the site.

### [scripting](https://tailwindcss.com/docs/hover-focus-and-other-states#scripting) Use the `noscript` variant to conditionally add styles based on whether the user has scripting, such as JavaScript, enabled: ### [print](https://tailwindcss.com/docs/hover-focus-and-other-states#print) Use the `print` variant to conditionally add styles that only apply when the document is being printed:

My Secret Pizza Recipe

This recipe is a secret, and must not be shared with anyone

### [@supports](https://tailwindcss.com/docs/hover-focus-and-other-states#supports) Use the `supports-[...]` variant to style things based on whether a certain feature is supported in the user's browser:

Under the hood the `supports-[...]` variant generates [`@supports rules`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) and takes anything you’d use with `@supports (...)` between the square brackets, like a property/value pair, and even expressions using `and` and `or`. For terseness, if you only need to check if a property is supported (and not a specific value), you can just specify the property name:

Use the `not-supports-[...]` variant to style things based on whether a certain feature is not supported in the user's browser:

You can configure shortcuts for common `@supports` rules you're using in your project by creating a new variant in the `supports-*` namespace: @custom-variant supports-grid { @supports (display: grid) { @slot; }} You can then use these custom `supports-*` variants in your project:

### [@starting-style](https://tailwindcss.com/docs/hover-focus-and-other-states#starting-style) Use the `starting` variant to set the appearance of an element when it is first rendered in the DOM, or transitions from `display: none` to visible:

[Attribute selectors](https://tailwindcss.com/docs/hover-focus-and-other-states#attribute-selectors) ----------------------------------------------------------------------------------------------------- ### [ARIA states](https://tailwindcss.com/docs/hover-focus-and-other-states#aria-states) Use the `aria-*` variant to conditionally style things based on [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) . For example, to apply the `bg-sky-700` class when the `aria-checked` attribute is set to `true`, use the `aria-checked:bg-sky-700` class:

By default we've included variants for the most common boolean ARIA attributes: | Variant | CSS | | --- | --- | | `aria-busy` | `&[aria-busy="true"]` | | `aria-checked` | `&[aria-checked="true"]` | | `aria-disabled` | `&[aria-disabled="true"]` | | `aria-expanded` | `&[aria-expanded="true"]` | | `aria-hidden` | `&[aria-hidden="true"]` | | `aria-pressed` | `&[aria-pressed="true"]` | | `aria-readonly` | `&[aria-readonly="true"]` | | `aria-required` | `&[aria-required="true"]` | | `aria-selected` | `&[aria-selected="true"]` | You can customize which `aria-*` variants are available by creating a new variant: @custom-variant aria-asc (&[aria-sort="ascending"]);@custom-variant aria-desc (&[aria-sort="descending"]); If you need to use a one-off `aria` variant that doesn’t make sense to include in your project, or for more complex ARIA attributes that take specific values, use square brackets to generate a property on the fly using any arbitrary value: | Invoice # | Client | Amount | | --- | --- | --- | | #100 | Pendant Publishing | $2,000.00 | | #101 | Kruger Industrial Smoothing | $545.00 | | #102 | J. Peterman | $10,000.25 | HTML Generated CSS

Invoice #

ARIA state variants can also target parent and sibling elements using the `group-aria-*` and `peer-aria-*` variants: HTML Generated CSS

Invoice #

### [Data attributes](https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes) Use the `data-*` variant to conditionally apply styles based on [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) . To check if a data attribute exists (and not a specific value), you can just specify the attribute name:

If you need to check for a specific value you may use an arbitrary value:

Alternatively, you can configure shortcuts for common data attributes you're using in your project by creating a new variant in the `data-*` namespace: app.css @import "tailwindcss";@custom-variant data-checked (&[data-ui~="checked"]); You can then use these custom `data-*` variants in your project:

### [RTL support](https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support) Use the `rtl` and `ltr` variants to conditionally add styles in right-to-left and left-to-right modes respectively when building multi-directional layouts: Left-to-right ![](https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80) Tom Cook Director of Operations Right-to-left ![](https://images.unsplash.com/photo-1563833717765-00462801314e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80) تامر كرم الرئيس التنفيذي

...

Remember, these variants are only useful if you are building a site that needs to support _both_ left-to-right and right-to-left layouts. If you're building a site that only needs to support a single direction, you don't need these variants — just apply the styles that make sense for your content. ### [Open/closed state](https://tailwindcss.com/docs/hover-focus-and-other-states#openclosed-state) Use the `open` variant to conditionally add styles when a `

` or `

This headline will use Poppins.

Hello world!

Hello world!

Hello world!

Writes upside-down

Writes upside-down

Hello world!

Writes upside-down

Contributors

Contributors

Spencer Sharp

New project

Writes upside-down

My Secret Pizza Recipe

Categories

Sales

Marketing

SEO