tailwindcss.com/docs/

Public Link
Created by:
****ad@vlad.studio
Starting URLs:
https://tailwindcss.com/docs/installation/using-vite
Crawl Prefixes:
https://tailwindcss.com/docs/
Exclude Patterns:
https://tailwindcss.com/docs/editor-setup
https://tailwindcss.com/docs/compatibility
https://tailwindcss.com/docs/upgrade-guide
## Page: https://tailwindcss.com/docs/installation/using-vite

### 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

#### Install Tailwind CSS

Install `tailwindcss` and `@tailwindcss/vite` via npm.

Terminal

    npm install tailwindcss @tailwindcss/vite

02

#### 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(), ],})

03

#### Import Tailwind CSS

Add an `@import` to your CSS file that imports Tailwind CSS.

CSS

    @import "tailwindcss";

04

#### 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

05

#### Start using Tailwind in your HTML

Make sure your compiled CSS is included in the `<head>` _(your framework might handle this for you)_, then start using Tailwind’s utility classes to style your content.

HTML

    <!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/src/styles.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>

---

## Page: https://tailwindcss.com/docs/installation

### 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

#### Install Tailwind CSS

Install `tailwindcss` and `@tailwindcss/vite` via npm.

Terminal

    npm install tailwindcss @tailwindcss/vite

02

#### 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(), ],})

03

#### Import Tailwind CSS

Add an `@import` to your CSS file that imports Tailwind CSS.

CSS

    @import "tailwindcss";

04

#### 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

05

#### Start using Tailwind in your HTML

Make sure your compiled CSS is included in the `<head>` _(your framework might handle this for you)_, then start using Tailwind’s utility classes to style your content.

HTML

    <!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/src/styles.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>

---

## Page: https://tailwindcss.com/docs/hover-focus-and-other-states

Using utilities to style elements on hover, focus, and more.

Every utility class in Tailwind can be applied _conditionally_ by adding a variant to the beginning of the class name that describes the condition you want to target.

For example, to apply the `bg-sky-700` class on hover, use the `hover:bg-sky-700` class:

Hover over this button to see the background color change

    <button class="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>

How does this compare to traditional CSS?

When writing CSS the traditional way, a single class name would do different things based on the current state:

Traditionally the same class name applies different styles on hover

    .btn-primary { background-color: #0ea5e9;}.btn-primary:hover { background-color: #0369a1;}

In Tailwind, rather than adding the styles for a hover state to an existing class, you add another class to the element that _only_ does something on hover:

In Tailwind, separate classes are used for the default state and the hover state

    .bg-sky-500 { background-color: #0ea5e9;}.hover\:bg-sky-700:hover { background-color: #0369a1;}

Notice how `hover:bg-sky-700` _only_ defines styles for the `:hover` state? It does nothing by default, but as soon as you hover over an element with that class, the background color will change to `sky-700`.

This is what we mean when we say a utility class can be applied _conditionally_ — by using variants you can control exactly how your design behaves in different states, without ever leaving your HTML.

Tailwind includes variants for just about everything you'll ever need, including:

*   Pseudo-classes, like `:hover`, `:focus`, `:first-child`, and `:required`
*   Pseudo-elements, like `::before`, `::after`, `::placeholder`, and `::selection`
*   Media and feature queries, like responsive breakpoints, dark mode, and `prefers-reduced-motion`
*   Attribute selectors, like `[dir="rtl"]` and `[open]`
*   Child selectors, like `& > *` and `& *`

These variants can even be stacked to target more specific situations, for example changing the background color in dark mode, at the medium breakpoint, on hover:

    <button class="dark:md:hover:bg-fuchsia-600 ...">Save changes</button>

In this guide you'll learn about every variant available in the framework, how to use them with your own custom classes, and even how to create your own.

## Pseudo-classes

### :hover, :focus, and :active

Style elements on hover, focus, and active using the `hover`, `focus`, and `active` variants:

Try interacting with this button to see the hover, focus, and active states

    <button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700 ..."> Save changes</button>

Tailwind also includes variants for other interactive states like `:visited`, `:focus-within`, `:focus-visible`, and more.

See the pseudo-class reference for a complete list of available pseudo-class variants.

### :first, :last, :odd, and :even

Style an element when it is the first-child or last-child using the `first` and `last` variants:

*   Kristen Ramos
    
    kristen.ramos@example.com
    
*   Floyd Miles
    
    floyd.miles@example.com
    
*   Courtney Henry
    
    courtney.henry@example.com
    
*   Ted Fox
    
    ted.fox@example.com
    

    <ul role="list"> {#each people as person} <!-- Remove top/bottom padding when first/last child --> <li class="flex py-4 first:pt-0 last:pb-0"> <img class="h-10 w-10 rounded-full" src={person.imageUrl} alt="" /> <div class="ml-3 overflow-hidden"> <p class="text-sm font-medium text-gray-900 dark:text-white">{person.name}</p> <p class="truncate text-sm text-gray-500 dark:text-gray-400">{person.email}</p> </div> </li> {/each}</ul>

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 |

    <table> <!-- ... --> <tbody> {#each people as person} <!-- Use different background colors for odd and even rows --> <tr class="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"> <td>{person.name}</td> <td>{person.title}</td> <td>{person.email}</td> </tr> {/each} </tbody></table>

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

    <div class="nth-3:underline"> <!-- ... --></div><div class="nth-last-5:underline"> <!-- ... --></div><div class="nth-of-type-4:underline"> <!-- ... --></div><div class="nth-last-of-type-6:underline"> <!-- ... --></div>

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 for a complete list of available pseudo-class variants.

### :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

    <input type="text" value="tbone" disabled class="invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20 ..."/>

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 for a complete list of available pseudo-class variants.

### :has()

Use the `has-*` variant to style an element based on the state or content of its descendants:

    <label class="has-checked:bg-indigo-50 has-checked:text-indigo-900 has-checked:ring-indigo-200 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900 ..."> <svg fill="currentColor"> <!-- ... --> </svg> Google Pay <input type="radio" class="checked:border-indigo-500 ..." /></label>

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

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:

Casey Jordan

Just happy to be here.

Alex Reed

A multidisciplinary designer, working at the intersection of art and technology.

alex-reed.com

Taylor Bailey

Pushing pixels. Slinging divs.

    <div class="group ..."> <img src="..." /> <h4>Spencer Sharp</h4> <svg class="hidden group-has-[a]:block ..."><!-- ... --></svg> <p>Product Designer at <a href="...">planeteria.tech</a></p></div>

#### 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:

    <div> <label class="peer ..."> <input type="checkbox" name="todo[1]" checked /> Create a to do list </label> <svg class="peer-has-checked:hidden ..."><!-- ... --></svg></div>

### :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

    <button class="bg-indigo-600 hover:not-focus:bg-indigo-700"> <!-- ... --></button>

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:

    <div class="not-supports-[display:grid]:flex"> <!-- ... --></div>

### 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

    <a href="#" class="group ..."> <div> <svg class="stroke-sky-500 group-hover:stroke-white ..." fill="none" viewBox="0 0 24 24"> <!-- ... --> </svg> <h3 class="text-gray-900 group-hover:text-white ...">New project</h3> </div> <p class="text-gray-500 group-hover:text-white ...">Create a new project from a variety of starting templates.</p></a>

This pattern works with every pseudo-class variant, for example `group-focus`, `group-active`, or even `group-odd`.

#### 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}`:

*   Call
*   Call
*   Call

    <ul role="list"> {#each people as person} <li class="group/item ..."> <!-- ... --> <a class="group/edit invisible group-hover/item:visible ..." href="tel:{person.phone}"> <span class="group-hover/edit:text-gray-700 ...">Call</span> <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500 ..."><!-- ... --></svg> </a> </li> {/each}</ul>

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

You can create one-off `group-*` variants on the fly by providing your own selector as an arbitrary value between square brackets:

    <div class="group is-published"> <div class="hidden group-[.is-published]:block"> Published </div></div>

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:

    <div class="group"> <div class="group-[:nth-of-type(3)_&]:block"> <!-- ... --> </div></div>

#### Implicit groups

The `in-*` variant works similarly to `group` except you don't need to add `group` to the parent element:

    <div tabindex="0" class="group"> <div class="opacity-50 group-focus:opacity-100"><div tabindex="0"> <div class="opacity-50 in-focus:opacity-100"> <!-- ... --> </div></div>

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

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.

    <form> <label class="block"> <span class="...">Email</span> <input type="email" class="peer ..." /> <p class="invisible peer-invalid:visible ...">Please provide a valid email address.</p> </label></form>

This makes it possible to do all sorts of neat tricks, like floating labels 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 works in CSS:

Won't work, only previous siblings can be marked as peers

    <label> <span class="peer-invalid:text-red-500 ...">Email</span> <input type="email" class="peer ..." /></label>

#### 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}`:

    <fieldset> <legend>Published status</legend> <input id="draft" class="peer/draft" type="radio" name="status" checked /> <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label> <input id="published" class="peer/published" type="radio" name="status" /> <label for="published" class="peer-checked/published:text-sky-500">Published</label> <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div> <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div></fieldset>

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

You can create one-off `peer-*` variants on the fly by providing your own selector as an arbitrary value between square brackets:

    <form> <label for="email">Email:</label> <input id="email" name="email" type="email" class="is-dirty peer" required /> <div class="peer-[.is-dirty]:peer-required:block hidden">This field is required.</div> <!-- ... --></form>

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:

    <div> <input type="text" class="peer" /> <div class="hidden peer-[:nth-of-type(3)_&]:block"> <!-- ... --> </div></div>

## Pseudo-elements

### ::before and ::after

Style the `::before` and `::after` pseudo-elements using the `before` and `after` variants:

    <label> <span class="text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] ...">Email</span> <input type="email" name="email" class="..." placeholder="you@example.com" /></label>

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.

    <blockquote class="text-center text-2xl font-semibold text-gray-900 italic dark:text-white"> When you look <span class="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500"> <span class="relative text-white dark:text-gray-950">annoyed</span> </span> all the time, people think that you're busy.</blockquote>

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 `<span>` instead of the `::before` pseudo-element, which is a little easier to read and is actually less code:

    <blockquote class="text-center text-2xl font-semibold text-gray-900 italic"> When you look <span class="relative"> <span class="absolute -inset-1 block -skew-y-3 bg-pink-500" aria-hidden="true"></span> <span class="relative text-white">annoyed</span> </span> all the time, people think that you're busy.</blockquote>

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

Style the placeholder text of any input or textarea using the `placeholder` variant:

    <input class="placeholder:text-gray-500 placeholder:italic ..." placeholder="Search for anything..." type="text" name="search"/>

### ::file

Style the button in file inputs using the `file` variant:

    <input type="file" class="file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100 dark:file:bg-violet-600 dark:file:text-violet-100 dark:hover:file:bg-violet-500 ..."/>

### ::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

    <ul role="list" class="list-disc marker:text-sky-400 ..."> <li>5 cups chopped Porcini mushrooms</li> <li>1/2 cup of olive oil</li> <li>3lb of celery</li></ul>

We've designed the `marker` variant to be inheritable, so although you can use it directly on an `<li>` element, you can also use it on a parent to avoid repeating yourself.

### ::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.

    <div class="selection:bg-fuchsia-300 selection:text-fuchsia-900"> <p> 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 <em>was</em> a marine biologist. </p></div>

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:

    <html> <head> <!-- ... --> </head> <body class="selection:bg-pink-300"> <!-- ... --> </body></html>

### ::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.

    <div class="text-gray-700"> <p class="first-letter:float-left first-letter:mr-3 first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 first-line:tracking-widest first-line:uppercase" > Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? </p> <p class="mt-6">Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p></div>

### ::backdrop

Style the backdrop of a native `<dialog>` element using the `backdrop` variant:

    <dialog class="backdrop:bg-gray-50"> <form method="dialog"> <!-- ... --> </form></dialog>

If you're using native `<dialog>` elements in your project, you may also want to read about styling open/closed states using the `open` variant.

### 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:

    <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6"> <!-- ... --></div>

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

    <div class="@container"> <div class="flex flex-col @md:flex-row"> <!-- ... --> </div></div>

Check out the Responsive design documentation for an in-depth look at how these features work.

### 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.

    <div class="bg-white dark:bg-gray-900 ..."> <!-- ... --> <h3 class="text-gray-900 dark:text-white ...">Writes upside-down</h3> <p class="text-gray-500 dark:text-gray-400 ..."> The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. </p></div>

Check out the Dark Mode documentation for an in-depth look at how this feature works.

### 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

    <button type="button" class="bg-indigo-500 ..." disabled> <svg class="animate-spin motion-reduce:hidden ..." viewBox="0 0 24 24"><!-- ... --></svg> Processing...</button>

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:

    <!-- Using `motion-reduce` can mean lots of "undoing" styles --><button class="transition hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0 ..."> Save changes</button><!-- Using `motion-safe` is less code in these situations --><button class="motion-safe:transition motion-safe:hover:-translate-x-0.5 ...">Save changes</button>

### 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.

    <label class="block"> <span class="block text-sm font-medium text-gray-700">Social Security Number</span> <input class="border-gray-200 placeholder-gray-400 contrast-more:border-gray-400 contrast-more:placeholder-gray-500 ..." /> <p class="text-gray-600 opacity-10 contrast-more:opacity-100 ...">We need this to steal your identity.</p></label>

Tailwind also includes a `contrast-less` variant you can use to conditionally add styles when the user has requested less contrast.

### 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

    <label> <input type="radio" class="appearance-none forced-colors:appearance-auto" /> <p class="hidden forced-colors:block">Cyan</p> <div class="bg-cyan-200 forced-colors:hidden ..."></div> <div class="bg-cyan-500 forced-colors:hidden ..."></div></label>

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

    <div class="not-forced-colors:appearance-none ..."> <!-- ... --></div>

Tailwind also includes a forced color adjust utilities to opt in and out of forced colors.

### inverted-colors

Use the `inverted-colors` variant to conditionally add styles when the user has enabled an inverted color scheme:

    <div class="shadow-xl inverted-colors:shadow-none ..."> <!-- ... --></div>

### 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

    <fieldset aria-label="Choose a memory option"> <div class="flex items-center justify-between"> <div>RAM</div> <a href="#"> See performance specs </a> </div> <div class="mt-4 grid grid-cols-6 gap-2 pointer-coarse:mt-6 pointer-coarse:grid-cols-3 pointer-coarse:gap-4"> <label class="p-2 pointer-coarse:p-4 ..."> <input type="radio" name="memory-option" value="4 GB" className="sr-only" /> <span>4 GB</span> </label> <!-- ... --> </div></fieldset>

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

Use the `portrait` and `landscape` variants to conditionally add styles when the viewport is in a specific orientation:

    <div> <div class="portrait:hidden"> <!-- ... --> </div> <div class="landscape:hidden"> <p>This experience is designed to be viewed in landscape. Please rotate your device to view the site.</p> </div></div>

### scripting

Use the `noscript` variant to conditionally add styles based on whether the user has scripting, such as JavaScript, enabled:

    <div class="hidden noscript:block"> <p>This experience requires JavaScript to function. Please enable JavaScript in your browser settings.</p></div>

### print

Use the `print` variant to conditionally add styles that only apply when the document is being printed:

    <div> <article class="print:hidden"> <h1>My Secret Pizza Recipe</h1> <p>This recipe is a secret, and must not be shared with anyone</p> <!-- ... --> </article> <div class="hidden print:block">Are you seriously trying to print this? It's secret!</div></div>

### @supports

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

    <div class="flex supports-[display:grid]:grid ..."> <!-- ... --></div>

Under the hood the `supports-[...]` variant generates `@supports rules` 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:

    <div class="bg-black/75 supports-backdrop-filter:bg-black/25 supports-backdrop-filter:backdrop-blur ..."> <!-- ... --></div>

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

    <div class="not-supports-[display:grid]:flex"> <!-- ... --></div>

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:

    <div class="supports-grid:grid"> <!-- ... --></div>

### @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:

    <div> <button popovertarget="my-popover">Check for updates</button> <div popover id="my-popover" class="opacity-0 starting:open:opacity-0 ..."> <!-- ... --> </div></div>

## Attribute selectors

### ARIA states

Use the `aria-*` variant to conditionally style things based on 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:

    <div aria-checked="true" class="bg-gray-600 aria-checked:bg-sky-700"> <!-- ... --></div>

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 |

    <table> <thead> <tr> <th aria-sort="ascending" class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]" > Invoice # </th> <!-- ... --> </tr> </thead> <!-- ... --></table>

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

    <table> <thead> <tr> <th aria-sort="ascending" class="group"> Invoice # <svg class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"><!-- ... --></svg> </th> <!-- ... --> </tr> </thead> <!-- ... --></table>

### Data attributes

Use the `data-*` variant to conditionally apply styles based on data attributes.

To check if a data attribute exists (and not a specific value), you can just specify the attribute name:

    <!-- Will apply --><div data-active class="border border-gray-300 data-active:border-purple-500"> <!-- ... --></div><!-- Will not apply --><div class="border border-gray-300 data-active:border-purple-500"> <!-- ... --></div>

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

    <!-- Will apply --><div data-size="large" class="data-[size=large]:p-8"> <!-- ... --></div><!-- Will not apply --><div data-size="medium" class="data-[size=large]:p-8"> <!-- ... --></div>

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:

    <div data-ui="checked active" class="data-checked:underline"> <!-- ... --></div>

### 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

Tom Cook

Director of Operations

Right-to-left

تامر كرم

الرئيس التنفيذي

    <div class="group flex items-center"> <img class="h-12 w-12 shrink-0 rounded-full" src="..." alt="" /> <div class="ltr:ml-3 rtl:mr-3"> <p class="text-gray-700 group-hover:text-gray-900 ...">...</p> <p class="text-gray-500 group-hover:text-gray-700 ...">...</p> </div></div>

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

Use the `open` variant to conditionally add styles when a `<details>` or `<dialog>` element is in an open state:

Try toggling the disclosure to see the styles change

Why do they call it Ovaltine?

The mug is round. The jar is round. They should call it Roundtine.

    <details class="border border-transparent open:border-black/10 open:bg-gray-100 ..." open> <summary class="text-sm leading-6 font-semibold text-gray-900 select-none">Why do they call it Ovaltine?</summary> <div class="mt-3 text-sm leading-6 text-gray-600"> <p>The mug is round. The jar is round. They should call it Roundtine.</p> </div></details>

This variant also targets the `:popover-open` pseudo-class for popovers:

    <div> <button popovertarget="my-popover">Open Popover</button> <div popover id="my-popover" class="opacity-0 open:opacity-100 ..."> <!-- ... --> </div></div>

### Styling inert elements

The `inert` variant lets you style elements marked with the `inert` attribute:

Notification preferences

Custom

Comments

Mentions

Everything

    <form> <legend>Notification preferences</legend> <fieldset> <input type="radio" /> <label> Custom </label> <fieldset inert class="inert:opacity-50"> <!-- ... --> </fieldset> <input type="radio" /> <label> Everything </label> </fieldset></form>

This is useful for adding visual cues that make it clear that sections of content aren't interactive.

## Child selectors

### Styling direct children

While it's generally preferable to put utility classes directly on child elements, you can use the `*` variant in situations where you need to style direct children that you don’t have control over:

## Categories

Sales

Marketing

SEO

Analytics

Design

Strategy

Security

Growth

Mobile

UX/UI

    <div> <h2>Categories<h2> <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ..."> <li>Sales</li> <li>Marketing</li> <li>SEO</li> <!-- ... --> </ul></div>

It's important to note that overriding a style with a utility directly on the child itself won't work since children rules are generated after the regular ones and they have the same specificity:

Won't work, children can't override styles given to them by the parent.

    <ul class="*:bg-sky-50 ..."> <li class="bg-red-50 ...">Sales</li> <li>Marketing</li> <li>SEO</li> <!-- ... --></ul>

### Styling all descendants

Like `*`, the `**` variant can be used to style children of an element. The main difference is that `**` will apply styles to _all_ descendants, not just the direct children. This is especially useful when you combine it with another variant for narrowing the thing you're selecting:

*   
*   
*   

    <ul class="**:data-avatar:size-12 **:data-avatar:rounded-full ..."> {#each items as item} <li> <img src={item.src} data-avatar /> <p>{item.name}</p> </li> {/each}</ul>

## Custom variants

### Using arbitrary variants

Just like arbitrary values let you use custom values with your utility classes, arbitrary variants let you write custom selector variants directly in your HTML.

Arbitrary variants are just format strings that represent the selector, wrapped in square brackets. For example, this arbitrary variant changes the cursor to `grabbing` when the element has the `is-dragging` class:

    <ul role="list"> {#each items as item} <li class="[&.is-dragging]:cursor-grabbing">{item}</li> {/each}</ul>

Arbitrary variants can be stacked with built-in variants or with each other, just like the rest of the variants in Tailwind:

    <ul role="list"> {#each items as item} <li class="[&.is-dragging]:active:cursor-grabbing">{item}</li> {/each}</ul>

If you need spaces in your selector, you can use an underscore. For example, this arbitrary variant selects all `p` elements within the element where you've added the class:

    <div class="[&_p]:mt-4"> <p>Lorem ipsum...</p> <ul> <li> <p>Lorem ipsum...</p> </li> <!-- ... --> </ul></div>

You can also use at-rules like `@media` or `@supports` in arbitrary variants:

    <div class="flex [@supports(display:grid)]:grid"> <!-- ... --></div>

With at-rule custom variants the `&` placeholder isn't necessary, just like when nesting with a preprocessor.

### Registering a custom variant

If you find yourself using the same arbitrary variant multiple times in your project, it might be worth creating a custom variant using the `@custom-variant` directive:

    @custom-variant theme-midnight (&:where([data-theme="midnight"] *));

Now you can use the `theme-midnight:<utility>` variant in your HTML:

    <html data-theme="midnight"> <button class="theme-midnight:bg-black ..."></button></html>

Learn more about adding custom variants in the adding custom variants documentation.

## Appendix

### Quick reference

A quick reference table of every single variant included in Tailwind by default.

| Variant | CSS |
| --- | --- |
| hover | `@media (hover: hover) { &:hover }` |
| focus | `&:focus` |
| focus-within | `&:focus-within` |
| focus-visible | `&:focus-visible` |
| active | `&:active` |
| visited | `&:visited` |
| target | `&:target` |
| \* | `:is(& > *)` |
| \*\* | `:is(& *)` |
| has-\[...\] | `&:has(...)` |
| group-\[...\] | `&:is(:where(.group)... *)` |
| peer-\[...\] | `&:is(:where(.peer)... ~ *)` |
| in-\[...\] | `:where(...) &` |
| not-\[...\] | `&:not(...)` |
| inert | `&:is([inert], [inert] *)` |
| first | `&:first-child` |
| last | `&:last-child` |
| only | `&:only-child` |
| odd | `&:nth-child(odd)` |
| even | `&:nth-child(even)` |
| first-of-type | `&:first-of-type` |
| last-of-type | `&:last-of-type` |
| only-of-type | `&:only-of-type` |
| nth-\[...\] | `&:nth-child(...)` |
| nth-last-\[...\] | `&:nth-last-child(...)` |
| nth-of-type-\[...\] | `&:nth-of-type(...)` |
| nth-last-of-type-\[...\] | `&:nth-last-of-type(...)` |
| empty | `&:empty` |
| disabled | `&:disabled` |
| enabled | `&:enabled` |
| checked | `&:checked` |
| indeterminate | `&:indeterminate` |
| default | `&:default` |
| optional | `&:optional` |
| required | `&:required` |
| valid | `&:valid` |
| invalid | `&:invalid` |
| user-valid | `&:user-valid` |
| user-invalid | `&:user-invalid` |
| in-range | `&:in-range` |
| out-of-range | `&:out-of-range` |
| placeholder-shown | `&:placeholder-shown` |
| details-content | `&:details-content` |
| autofill | `&:autofill` |
| read-only | `&:read-only` |
| before | `&::before` |
| after | `&::after` |
| first-letter | `&::first-letter` |
| first-line | `&::first-line` |
| marker | `&::marker, & *::marker` |
| selection | `&::selection` |
| file | `&::file-selector-button` |
| backdrop | `&::backdrop` |
| placeholder | `&::placeholder` |
| sm | `@media (width >= 40rem)` |
| md | `@media (width >= 48rem)` |
| lg | `@media (width >= 64rem)` |
| xl | `@media (width >= 80rem)` |
| 2xl | `@media (width >= 96rem)` |
| min-\[...\] | `@media (width >= ...)` |
| 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)` |
| max-\[...\] | `@media (width < ...)` |
| @3xs | `@container (width >= 16rem)` |
| @2xs | `@container (width >= 18rem)` |
| @xs | `@container (width >= 20rem)` |
| @sm | `@container (width >= 24rem)` |
| @md | `@container (width >= 28rem)` |
| @lg | `@container (width >= 32rem)` |
| @xl | `@container (width >= 36rem)` |
| @2xl | `@container (width >= 42rem)` |
| @3xl | `@container (width >= 48rem)` |
| @4xl | `@container (width >= 56rem)` |
| @5xl | `@container (width >= 64rem)` |
| @6xl | `@container (width >= 72rem)` |
| @7xl | `@container (width >= 80rem)` |
| @min-\[...\] | `@container (width >= ...)` |
| @max-3xs | `@container (width < 16rem)` |
| @max-2xs | `@container (width < 18rem)` |
| @max-xs | `@container (width < 20rem)` |
| @max-sm | `@container (width < 24rem)` |
| @max-md | `@container (width < 28rem)` |
| @max-lg | `@container (width < 32rem)` |
| @max-xl | `@container (width < 36rem)` |
| @max-2xl | `@container (width < 42rem)` |
| @max-3xl | `@container (width < 48rem)` |
| @max-4xl | `@container (width < 56rem)` |
| @max-5xl | `@container (width < 64rem)` |
| @max-6xl | `@container (width < 72rem)` |
| @max-7xl | `@container (width < 80rem)` |
| @max-\[...\] | `@container (width < ...)` |
| dark | `@media (prefers-color-scheme: dark)` |
| motion-safe | `@media (prefers-reduced-motion: no-preference)` |
| motion-reduce | `@media (prefers-reduced-motion: reduce)` |
| contrast-more | `@media (prefers-contrast: more)` |
| contrast-less | `@media (prefers-contrast: less)` |
| forced-colors | `@media (forced-colors: active)` |
| inverted-colors | `@media (inverted-colors: inverted)` |
| pointer-fine | `@media (pointer: fine)` |
| pointer-coarse | `@media (pointer: coarse)` |
| pointer-none | `@media (pointer: none)` |
| any-pointer-fine | `@media (any-pointer: fine)` |
| any-pointer-coarse | `@media (any-pointer: coarse)` |
| any-pointer-none | `@media (any-pointer: none)` |
| portrait | `@media (orientation: portrait)` |
| landscape | `@media (orientation: landscape)` |
| noscript | `@media (scripting: none)` |
| print | `@media print` |
| supports-\[…\] | `@supports (…)` |
| 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"]` |
| aria-\[…\] | `&[aria-…]` |
| data-\[…\] | `&[data-…]` |
| rtl | `&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)` |
| ltr | `&:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)` |
| open | `&:is([open], :popover-open, :open)` |
| starting | `@starting-style` |

### Pseudo-class reference

This is a comprehensive list of examples for all the pseudo-class variants included in Tailwind to complement the pseudo-classes documentation at the beginning of this guide.

#### :hover

Style an element when the user hovers over it with the mouse cursor using the `hover` variant:

    <div class="bg-black hover:bg-white ..."> <!-- ... --></div>

#### :focus

Style an element when it has focus using the `focus` variant:

    <input class="border-gray-300 focus:border-blue-400 ..." />

#### :focus-within

Style an element when it or one of its descendants has focus using the `focus-within` variant:

    <div class="focus-within:shadow-lg ..."> <input type="text" /></div>

#### :focus-visible

Style an element when it has been focused using the keyboard using the `focus-visible` variant:

    <button class="focus-visible:outline-2 ...">Submit</button>

#### :active

Style an element when it is being pressed using the `active` variant:

    <button class="bg-blue-500 active:bg-blue-600 ...">Submit</button>

#### :visited

Style a link when it has already been visited using the `visited` variant:

    <a href="https://seinfeldquotes.com" class="text-blue-600 visited:text-purple-600 ..."> Inspiration </a>

#### :target

Style an element if its ID matches the current URL fragment using the `target` variant:

    <div id="about" class="target:shadow-lg ..."> <!-- ... --></div>

#### :first-child

Style an element if it's the first child using the `first` variant:

    <ul> {#each people as person} <li class="py-4 first:pt-0 ..."> <!-- ... --> </li> {/each}</ul>

#### :last-child

Style an element if it's the last child using the `last` variant:

    <ul> {#each people as person} <li class="py-4 last:pb-0 ..."> <!-- ... --> </li> {/each}</ul>

#### :only-child

Style an element if it's the only child using the `only` variant:

    <ul> {#each people as person} <li class="py-4 only:py-0 ..."> <!-- ... --> </li> {/each}</ul>

#### :nth-child(odd)

Style an element if it's an oddly numbered child using the `odd` variant:

    <table> {#each people as person} <tr class="bg-white odd:bg-gray-100 ..."> <!-- ... --> </tr> {/each}</table>

#### :nth-child(even)

Style an element if it's an evenly numbered child using the `even` variant:

    <table> {#each people as person} <tr class="bg-white even:bg-gray-100 ..."> <!-- ... --> </tr> {/each}</table>

#### :first-of-type

Style an element if it's the first child of its type using the `first-of-type` variant:

    <nav> <img src="/logo.svg" alt="Vandelay Industries" /> {#each links as link} <a href="#" class="ml-2 first-of-type:ml-6 ..."> <!-- ... --> </a> {/each}</nav>

#### :last-of-type

Style an element if it's the last child of its type using the `last-of-type` variant:

    <nav> <img src="/logo.svg" alt="Vandelay Industries" /> {#each links as link} <a href="#" class="mr-2 last-of-type:mr-6 ..."> <!-- ... --> </a> {/each} <button>More</button></nav>

#### :only-of-type

Style an element if it's the only child of its type using the `only-of-type` variant:

    <nav> <img src="/logo.svg" alt="Vandelay Industries" /> {#each links as link} <a href="#" class="mx-2 only-of-type:mx-6 ..."> <!-- ... --> </a> {/each} <button>More</button></nav>

#### :nth-child()

Style an element at a specific position using the `nth` variant:

    <nav> <img src="/logo.svg" alt="Vandelay Industries" /> {#each links as link} <a href="#" class="mx-2 nth-3:mx-6 nth-[3n+1]:mx-7 ..."> <!-- ... --> </a> {/each} <button>More</button></nav>

#### :nth-last-child()

Style an element at a specific position from the end using the `nth-last` variant:

    <nav> <img src="/logo.svg" alt="Vandelay Industries" /> {#each links as link} <a href="#" class="mx-2 nth-last-3:mx-6 nth-last-[3n+1]:mx-7 ..."> <!-- ... --> </a> {/each} <button>More</button></nav>

#### :nth-of-type()

Style an element at a specific position, of the same type using the `nth-of-type` variant:

    <nav> <img src="/logo.svg" alt="Vandelay Industries" /> {#each links as link} <a href="#" class="mx-2 nth-of-type-3:mx-6 nth-of-type-[3n+1]:mx-7 ..."> <!-- ... --> </a> {/each} <button>More</button></nav>

#### :nth-last-of-type()

Style an element at a specific position from the end, of the same type using the `nth-last-of-type` variant:

    <nav> <img src="/logo.svg" alt="Vandelay Industries" /> {#each links as link} <a href="#" class="mx-2 nth-last-of-type-3:mx-6 nth-last-of-type-[3n+1]:mx-7 ..."> <!-- ... --> </a> {/each} <button>More</button></nav>

#### :empty

Style an element if it has no content using the `empty` variant:

    <ul> {#each people as person} <li class="empty:hidden ...">{person.hobby}</li> {/each}</ul>

#### :disabled

Style an input when it's disabled using the `disabled` variant:

    <input class="disabled:opacity-75 ..." />

#### :enabled

Style an input when it's enabled using the `enabled` variant, most helpful when you only want to apply another style when an element is not disabled:

    <input class="enabled:hover:border-gray-400 disabled:opacity-75 ..." />

#### :checked

Style a checkbox or radio button when it's checked using the `checked` variant:

    <input type="checkbox" class="appearance-none checked:bg-blue-500 ..." />

#### :indeterminate

Style a checkbox or radio button in an indeterminate state using the `indeterminate` variant:

    <input type="checkbox" class="appearance-none indeterminate:bg-gray-300 ..." />

#### :default

Style an option, checkbox or radio button that was the default value when the page initially loaded using the `default` variant:

    <input type="checkbox" class="default:outline-2 ..." />

#### :optional

Style an input when it's optional using the `optional` variant:

    <input class="border optional:border-red-500 ..." />

#### :required

Style an input when it's required using the `required` variant:

    <input required class="border required:border-red-500 ..." />

#### :valid

Style an input when it's valid using the `valid` variant:

    <input required class="border valid:border-green-500 ..." />

#### :invalid

Style an input when it's invalid using the `invalid` variant:

    <input required class="border invalid:border-red-500 ..." />

#### :user-valid

Style an input when it's valid and the user has interacted with it, using the `user-valid` variant:

    <input required class="border user-valid:border-green-500" />

#### :user-invalid

Style an input when it's invalid and the user has interacted with it, using the `user-invalid` variant:

    <input required class="border user-invalid:border-red-500" />

#### :in-range

Style an input when its value is within a specified range limit using the `in-range` variant:

    <input min="1" max="5" class="in-range:border-green-500 ..." />

#### :out-of-range

Style an input when its value is outside of a specified range limit using the `out-of-range` variant:

    <input min="1" max="5" class="out-of-range:border-red-500 ..." />

#### :placeholder-shown

Style an input when the placeholder is shown using the `placeholder-shown` variant:

    <input class="placeholder-shown:border-gray-500 ..." placeholder="you@example.com" />

#### :details-content

Style the content of a `<details>` element using the `details-content` variant:

    <details class="details-content:bg-gray-100 ..."> <summary>Details</summary> This is a secret.</details>

#### :autofill

Style an input when it has been autofilled by the browser using the `autofill` variant:

    <input class="autofill:bg-yellow-200 ..." />

#### :read-only

Style an input when it is read-only using the `read-only` variant:

    <input class="read-only:bg-gray-100 ..." />

---

## Page: https://tailwindcss.com/docs/responsive-design

Using responsive utility variants to build adaptive user interfaces.

## 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 to the `<head>` of your document:

index.html

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

    <!-- Width of 16 by default, 32 on medium screens, and 48 on large screens --><img class="w-16 md:w-32 lg:w-48" src="..." />

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:

    <div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl"> <div class="md:flex"> <div class="md:shrink-0"> <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/building.jpg" alt="Modern building architecture" /> </div> <div class="p-8"> <div class="text-sm font-semibold tracking-wide text-indigo-500 uppercase">Company retreats</div> <a href="#" class="mt-1 block text-lg leading-tight font-medium text-black hover:underline"> Incredible accommodation for your team </a> <p class="mt-2 text-gray-500"> 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. </p> </div> </div></div>

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

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

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

    <!-- This will only center text on screens 640px and wider, not on small screens --><div class="sm:text-center"></div>

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

HTML

    <!-- This will center text on mobile, and left align it on screens 640px and wider --><div class="text-center sm:text-left"></div>

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

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

    <div class="md:max-xl:flex"> <!-- ... --></div>

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

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

    <div class="md:max-lg:flex"> <!-- ... --></div>

Read about targeting breakpoint ranges to learn more.

## Using custom breakpoints

### 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

    <div class="grid xs:grid-cols-2 3xl:grid-cols-6"> <!-- ... --></div>

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.

### 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.

### 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.

    <div class="max-[600px]:bg-sky-300 min-[320px]:text-center"> <!-- ... --></div>

Learn more about arbitrary value support in the arbitrary values documentation.

## Container queries

### What are container queries?

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

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

    <div class="@container"> <div class="flex flex-col @md:flex-row"> <!-- ... --> </div></div>

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

Use variants like `@max-sm` and `@max-md` to apply a style below a specific container size:

HTML

    <div class="@container"> <div class="flex flex-row @max-md:flex-col"> <!-- ... --> </div></div>

### Container query ranges

Stack a regular container query variant with a max-width container query variant to target a specific range:

HTML

    <div class="@container"> <div class="flex flex-row @sm:@max-md:flex-col"> <!-- ... --> </div></div>

### 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

    <div class="@container/main"> <!-- ... --> <div class="flex flex-row @sm/main:flex-col"> <!-- ... --> </div></div>

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

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

    <div class="@container"> <div class="flex flex-col @8xl:flex-row"> <!-- ... --> </div></div>

Learn more about customizing your theme in the theme documentation.

### Using arbitrary 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

    <div class="@container"> <div class="flex flex-col @min-[475px]:flex-row"> <!-- ... --> </div></div>

### Using container query units

Use container query length units like `cqw` as arbitrary values in other utility classes to reference the container size:

HTML

    <div class="@container"> <div class="w-[50cqw]"> <!-- ... --> </div></div>

### 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) { … }` |

---

## Page: https://tailwindcss.com/docs/dark-mode

Using variants to style your site in 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.

    <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5"> <div> <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"> <svg class="h-6 w-6 stroke-white" ...> <!-- ... --> </svg> </span> </div> <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3> <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm "> The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. </p></div>

By default this uses the `prefers-color-scheme` CSS media feature, but you can also build sites that support toggling dark mode manually by overriding the dark variant.

## 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

    <html class="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></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

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

    <html data-theme="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></html>

### 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 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.

---

## Page: https://tailwindcss.com/docs/theme

Using utility classes as an API for your design tokens.

## Overview

Tailwind is a framework for building custom designs, and different designs need different typography, colors, shadows, breakpoints, and more.

These low-level design decisions are often called _design tokens_, and in Tailwind projects you store those values in _theme variables_.

### What are theme variables?

Theme variables are special CSS variables defined using the `@theme` directive that influence which utility classes exist in your project.

For example, you can add a new color to your project by defining a theme variable like `--color-mint-500`:

app.css

    @import "tailwindcss";@theme { --color-mint-500: oklch(0.72 0.11 178);}

Now you can use utility classes like `bg-mint-500`, `text-mint-500`, or `fill-mint-500` in your HTML:

HTML

    <div class="bg-mint-500"> <!-- ... --></div>

Tailwind also generates regular CSS variables for your theme variables so you can reference your design tokens in arbitrary values or inline styles:

HTML

    <div style="background-color: var(--color-mint-500)"> <!-- ... --></div>

Learn more about how theme variables map to different utility classes in the theme variable namespaces documentation.

#### Why `@theme` instead of `:root`?

Theme variables aren't _just_ CSS variables — they also instruct Tailwind to create new utility classes that you can use in your HTML.

Since they do more than regular CSS variables, Tailwind uses special syntax so that defining theme variables is always explicit. Theme variables are also required to be defined top-level and not nested under other selectors or media queries, and using a special syntax makes it possible to enforce that.

Defining regular CSS variables with `:root` can still be useful in Tailwind projects when you want to define a variable that isn't meant to be connected to a utility class. Use `@theme` when you want a design token to map directly to a utility class, and use `:root` for defining regular CSS variables that shouldn't have corresponding utility classes.

### Relationship to utility classes

Some utility classes in Tailwind like `flex` and `object-cover` are static, and are always the same from project to project. But many others are driven by theme variables, and only exist because of the theme variables you've defined.

For example, theme variables defined in the `--font-*` namespace determine all of the `font-family` utilities that exist in a project:

./node\_modules/tailwindcss/theme.css

    @theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* ... */}

The `font-sans`, `font-serif`, and `font-mono` utilities only exist by default because Tailwind's default theme defines the `--font-sans`, `--font-serif`, and `--font-mono` theme variables.

If another theme variable like `--font-poppins` were defined, a `font-poppins` utility class would become available to go with it:

app.css

    @import "tailwindcss";@theme { --font-poppins: Poppins, sans-serif;}

HTML

    <h1 class="font-poppins">This headline will use Poppins.</h1>

You can name your theme variables whatever you want within these namespaces, and a corresponding utility with the same name will become available to use in your HTML.

#### Relationship to variants

Some theme variables are used to define variants rather than utilities. For example theme variables in the `--breakpoint-*` namespace determine which responsive breakpoint variants exist in your project:

app.css

    @import "tailwindcss";@theme { --breakpoint-3xl: 120rem;}

Now you can use the `3xl:*` variant to only trigger a utility when the viewport is 120rem or wider:

HTML

    <div class="3xl:grid-cols-6 grid grid-cols-2 md:grid-cols-4"> <!-- ... --></div>

Learn more about how theme variables map to different utility classes and variants in the theme variable namespaces documentation.

### Theme variable namespaces

Theme variables are defined in _namespaces_ and each namespace corresponds to one or more utility class or variant APIs.

Defining new theme variables in these namespaces will make new corresponding utilities and variants available in your project:

| Namespace | Utility classes |
| --- | --- |
| `--color-*` | Color utilities like `bg-red-500`, `text-sky-300`, and many more |
| `--font-*` | Font family utilities like `font-sans` |
| `--text-*` | Font size utilities like `text-xl` |
| `--font-weight-*` | Font weight utilities like `font-bold` |
| `--tracking-*` | Letter spacing utilities like `tracking-wide` |
| `--leading-*` | Line height utilities like `leading-tight` |
| `--breakpoint-*` | Responsive breakpoint variants like `sm:*` |
| `--container-*` | Container query variants like `@sm:*` and size utilities like `max-w-md` |
| `--spacing-*` | Spacing and sizing utilities like `px-4`, `max-h-16`, and many more |
| `--radius-*` | Border radius utilities like `rounded-sm` |
| `--shadow-*` | Box shadow utilities like `shadow-md` |
| `--inset-shadow-*` | Inset box shadow utilities like `inset-shadow-xs` |
| `--drop-shadow-*` | Drop shadow filter utilities like `drop-shadow-md` |
| `--blur-*` | Blur filter utilities like `blur-md` |
| `--perspective-*` | Perspective utilities like `perspective-near` |
| `--aspect-*` | Aspect ratio utilities like `aspect-video` |
| `--ease-*` | Transition timing function utilities like `ease-out` |
| `--animate-*` | Animation utilities like `animate-spin` |

For a list of all of the default theme variables, see the default theme variable reference.

### Default theme variables

When you import `tailwindcss` at the top of your CSS file, it includes a set of default theme variables to get you started.

Here's what you're actually importing when you import `tailwindcss`:

node\_modules/tailwindcss/index.css

    @layer theme, base, components, utilities;@import "./theme.css" layer(theme);@import "./preflight.css" layer(base);@import "./utilities.css" layer(utilities);

That `theme.css` file includes the default color palette, type scale, shadows, fonts, and more:

node\_modules/tailwindcss/theme.css

    @theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); /* ... */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* ... */}

This is why utilities like `bg-red-200`, `font-serif`, and `shadow-sm` exist out of the box — they're driven by the default theme, not hardcoded into the framework like `flex-col` or `pointer-events-none`.

For a list of all of the default theme variables, see the default theme variable reference.

## Customizing your theme

The default theme variables are very general purpose and suitable for building dramatically different designs, but they are still just a starting point. It's very common to customize things like the color palette, fonts, and shadows to build exactly the design you have in mind.

### Extending the default theme

Use `@theme` to define new theme variables and extend the default theme:

app.css

    @import "tailwindcss";@theme { --font-script: Great Vibes, cursive;}

This makes a new `font-script` utility class available that you can use in your HTML, just like the default `font-sans` or `font-mono` utilities:

HTML

    <p class="font-script">This will use the Great Vibes font family.</p>

Learn more about how theme variables map to different utility classes and variants in the theme variable namespaces documentation.

### Overriding the default theme

Override a default theme variable value by redefining it within `@theme`:

app.css

    @import "tailwindcss";@theme { --breakpoint-sm: 30rem;}

Now the `sm:*` variant will trigger at 30rem instead of the default 40rem viewport size:

HTML

    <div class="grid grid-cols-1 sm:grid-cols-3"> <!-- ... --></div>

To completely override an entire namespace in the default theme, set the entire namespace to `initial` using the special asterisk syntax:

app.css

    @import "tailwindcss";@theme { --color-*: initial; --color-white: #fff; --color-purple: #3f3cbb; --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca;}

When you do this, all of the default utilities that use that namespace _(like `bg-red-500`)_ will be removed, and only your custom values _(like `bg-midnight`)_ will be available.

Learn more about how theme variables map to different utility classes and variants in the theme variable namespaces documentation.

### Using a custom theme

To completely disable the default theme and use only custom values, set the global theme variable namespace to `initial`:

app.css

    @import "tailwindcss";@theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);}

Now none of the default utility classes that are driven by theme variables will be available, and you'll only be able to use utility classes matching your custom theme variables like `font-body` and `text-dusk`.

### Defining animation keyframes

Define the `@keyframes` rules for your `--animate-*` theme variables within `@theme` to include them in your generated CSS:

app.css

    @import "tailwindcss";@theme { --animate-fade-in-scale: fade-in-scale 0.3s ease-out; @keyframes fade-in-scale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }}

If you want your custom `@keyframes` rules to always be included even when not adding an `--animate-*` theme variable, define them outside of `@theme` instead.

### Referencing other variables

When defining theme variables that reference other variables, use the `inline` option:

app.css

    @import "tailwindcss";@theme inline { --font-sans: var(--font-inter);}

Using the `inline` option, the utility class will use the theme variable _value_ instead of referencing the actual theme variable:

dist.css

    .font-sans { font-family: var(--font-inter);}

Without using `inline`, your utility classes might resolve to unexpected values because of how variables are resolved in CSS.

For example, this text will fall back to `sans-serif` instead of using `Inter` like you might expect:

HTML

    <div id="parent" style="--font-sans: var(--font-inter, sans-serif);"> <div id="child" style="--font-inter: Inter; font-family: var(--font-sans);"> This text will use the sans-serif font, not Inter. </div></div>

This happens because `var(--font-sans)` is resolved where `--font-sans` is defined _(on `#parent`)_, and `--font-inter` has no value there since it's not defined until deeper in the tree _(on `#child`)_.

### Generating all CSS variables

By default only used CSS variables will be generated in the final CSS output. If you want to always generate all CSS variables, you can use the `static` theme option:

app.css

    @import "tailwindcss";@theme static { --color-primary: var(--color-red-500); --color-secondary: var(--color-blue-500);}

### Sharing across projects

Since theme variables are defined in CSS, sharing them across projects is just a matter of throwing them into their own CSS file that you can import in each project:

./packages/brand/theme.css

    @theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);}

Then you can use `@import` to include your theme variables in other projects:

./packages/admin/app.css

    @import "tailwindcss";@import "../brand/theme.css";

You can put shared theme variables like this in their own package in monorepo setups or even publish them to NPM and import them just like any other third-party CSS files.

## Using your theme variables

All of your theme variables are turned into regular CSS variables when you compile your CSS:

dist.css

    :root { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); /* ... */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* ... */}

This makes it easy to reference all of your design tokens in any of your custom CSS or inline styles.

### With custom CSS

Use your theme variables to get access to your design tokens when you're writing custom CSS that needs to use the same values:

app.css

    @import "tailwindcss";@layer components { .typography { p { font-size: var(--text-base); color: var(--color-gray-700); } h1 { font-size: var(--text-2xl--line-height); font-weight: var(--font-weight-semibold); color: var(--color-gray-950); } h2 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--color-gray-950); } }}

This is often useful when styling HTML you don't control, like Markdown content coming from a database or API and rendered to HTML.

### With arbitrary values

Using theme variables in arbitrary values can be useful, especially in combination with the `calc()` function.

HTML

    <div class="relative rounded-xl"> <div class="absolute inset-px rounded-[calc(var(--radius-xl)-1px)]"> <!-- ... --> </div> <!-- ... --></div>

In the above example, we're subtracting 1px from the `--radius-xl` value on a nested inset element to make sure it has a concentric border radius.

### Referencing in JavaScript

Most of the time when you need to reference your theme variables in JS you can just use the CSS variables directly, just like any other CSS value.

For example, the popular Motion library for React lets you animate to and from CSS variable values:

JSX

    <motion.div animate={{ backgroundColor: "var(--color-blue-500)" }} />

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");

## Default theme variable reference

For reference, here's a complete list of the theme variables included by default when you import Tailwind CSS into your project:

tailwindcss/theme.css

    @theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); --color-red-300: oklch(0.808 0.114 19.571); --color-red-400: oklch(0.704 0.191 22.216); --color-red-500: oklch(0.637 0.237 25.331); --color-red-600: oklch(0.577 0.245 27.325); --color-red-700: oklch(0.505 0.213 27.518); --color-red-800: oklch(0.444 0.177 26.899); --color-red-900: oklch(0.396 0.141 25.723); --color-red-950: oklch(0.258 0.092 26.042); --color-orange-50: oklch(0.98 0.016 73.684); --color-orange-100: oklch(0.954 0.038 75.164); --color-orange-200: oklch(0.901 0.076 70.697); --color-orange-300: oklch(0.837 0.128 66.29); --color-orange-400: oklch(0.75 0.183 55.934); --color-orange-500: oklch(0.705 0.213 47.604); --color-orange-600: oklch(0.646 0.222 41.116); --color-orange-700: oklch(0.553 0.195 38.402); --color-orange-800: oklch(0.47 0.157 37.304); --color-orange-900: oklch(0.408 0.123 38.172); --color-orange-950: oklch(0.266 0.079 36.259); --color-amber-50: oklch(0.987 0.022 95.277); --color-amber-100: oklch(0.962 0.059 95.617); --color-amber-200: oklch(0.924 0.12 95.746); --color-amber-300: oklch(0.879 0.169 91.605); --color-amber-400: oklch(0.828 0.189 84.429); --color-amber-500: oklch(0.769 0.188 70.08); --color-amber-600: oklch(0.666 0.179 58.318); --color-amber-700: oklch(0.555 0.163 48.998); --color-amber-800: oklch(0.473 0.137 46.201); --color-amber-900: oklch(0.414 0.112 45.904); --color-amber-950: oklch(0.279 0.077 45.635); --color-yellow-50: oklch(0.987 0.026 102.212); --color-yellow-100: oklch(0.973 0.071 103.193); --color-yellow-200: oklch(0.945 0.129 101.54); --color-yellow-300: oklch(0.905 0.182 98.111); --color-yellow-400: oklch(0.852 0.199 91.936); --color-yellow-500: oklch(0.795 0.184 86.047); --color-yellow-600: oklch(0.681 0.162 75.834); --color-yellow-700: oklch(0.554 0.135 66.442); --color-yellow-800: oklch(0.476 0.114 61.907); --color-yellow-900: oklch(0.421 0.095 57.708); --color-yellow-950: oklch(0.286 0.066 53.813); --color-lime-50: oklch(0.986 0.031 120.757); --color-lime-100: oklch(0.967 0.067 122.328); --color-lime-200: oklch(0.938 0.127 124.321); --color-lime-300: oklch(0.897 0.196 126.665); --color-lime-400: oklch(0.841 0.238 128.85); --color-lime-500: oklch(0.768 0.233 130.85); --color-lime-600: oklch(0.648 0.2 131.684); --color-lime-700: oklch(0.532 0.157 131.589); --color-lime-800: oklch(0.453 0.124 130.933); --color-lime-900: oklch(0.405 0.101 131.063); --color-lime-950: oklch(0.274 0.072 132.109); --color-green-50: oklch(0.982 0.018 155.826); --color-green-100: oklch(0.962 0.044 156.743); --color-green-200: oklch(0.925 0.084 155.995); --color-green-300: oklch(0.871 0.15 154.449); --color-green-400: oklch(0.792 0.209 151.711); --color-green-500: oklch(0.723 0.219 149.579); --color-green-600: oklch(0.627 0.194 149.214); --color-green-700: oklch(0.527 0.154 150.069); --color-green-800: oklch(0.448 0.119 151.328); --color-green-900: oklch(0.393 0.095 152.535); --color-green-950: oklch(0.266 0.065 152.934); --color-emerald-50: oklch(0.979 0.021 166.113); --color-emerald-100: oklch(0.95 0.052 163.051); --color-emerald-200: oklch(0.905 0.093 164.15); --color-emerald-300: oklch(0.845 0.143 164.978); --color-emerald-400: oklch(0.765 0.177 163.223); --color-emerald-500: oklch(0.696 0.17 162.48); --color-emerald-600: oklch(0.596 0.145 163.225); --color-emerald-700: oklch(0.508 0.118 165.612); --color-emerald-800: oklch(0.432 0.095 166.913); --color-emerald-900: oklch(0.378 0.077 168.94); --color-emerald-950: oklch(0.262 0.051 172.552); --color-teal-50: oklch(0.984 0.014 180.72); --color-teal-100: oklch(0.953 0.051 180.801); --color-teal-200: oklch(0.91 0.096 180.426); --color-teal-300: oklch(0.855 0.138 181.071); --color-teal-400: oklch(0.777 0.152 181.912); --color-teal-500: oklch(0.704 0.14 182.503); --color-teal-600: oklch(0.6 0.118 184.704); --color-teal-700: oklch(0.511 0.096 186.391); --color-teal-800: oklch(0.437 0.078 188.216); --color-teal-900: oklch(0.386 0.063 188.416); --color-teal-950: oklch(0.277 0.046 192.524); --color-cyan-50: oklch(0.984 0.019 200.873); --color-cyan-100: oklch(0.956 0.045 203.388); --color-cyan-200: oklch(0.917 0.08 205.041); --color-cyan-300: oklch(0.865 0.127 207.078); --color-cyan-400: oklch(0.789 0.154 211.53); --color-cyan-500: oklch(0.715 0.143 215.221); --color-cyan-600: oklch(0.609 0.126 221.723); --color-cyan-700: oklch(0.52 0.105 223.128); --color-cyan-800: oklch(0.45 0.085 224.283); --color-cyan-900: oklch(0.398 0.07 227.392); --color-cyan-950: oklch(0.302 0.056 229.695); --color-sky-50: oklch(0.977 0.013 236.62); --color-sky-100: oklch(0.951 0.026 236.824); --color-sky-200: oklch(0.901 0.058 230.902); --color-sky-300: oklch(0.828 0.111 230.318); --color-sky-400: oklch(0.746 0.16 232.661); --color-sky-500: oklch(0.685 0.169 237.323); --color-sky-600: oklch(0.588 0.158 241.966); --color-sky-700: oklch(0.5 0.134 242.749); --color-sky-800: oklch(0.443 0.11 240.79); --color-sky-900: oklch(0.391 0.09 240.876); --color-sky-950: oklch(0.293 0.066 243.157); --color-blue-50: oklch(0.97 0.014 254.604); --color-blue-100: oklch(0.932 0.032 255.585); --color-blue-200: oklch(0.882 0.059 254.128); --color-blue-300: oklch(0.809 0.105 251.813); --color-blue-400: oklch(0.707 0.165 254.624); --color-blue-500: oklch(0.623 0.214 259.815); --color-blue-600: oklch(0.546 0.245 262.881); --color-blue-700: oklch(0.488 0.243 264.376); --color-blue-800: oklch(0.424 0.199 265.638); --color-blue-900: oklch(0.379 0.146 265.522); --color-blue-950: oklch(0.282 0.091 267.935); --color-indigo-50: oklch(0.962 0.018 272.314); --color-indigo-100: oklch(0.93 0.034 272.788); --color-indigo-200: oklch(0.87 0.065 274.039); --color-indigo-300: oklch(0.785 0.115 274.713); --color-indigo-400: oklch(0.673 0.182 276.935); --color-indigo-500: oklch(0.585 0.233 277.117); --color-indigo-600: oklch(0.511 0.262 276.966); --color-indigo-700: oklch(0.457 0.24 277.023); --color-indigo-800: oklch(0.398 0.195 277.366); --color-indigo-900: oklch(0.359 0.144 278.697); --color-indigo-950: oklch(0.257 0.09 281.288); --color-violet-50: oklch(0.969 0.016 293.756); --color-violet-100: oklch(0.943 0.029 294.588); --color-violet-200: oklch(0.894 0.057 293.283); --color-violet-300: oklch(0.811 0.111 293.571); --color-violet-400: oklch(0.702 0.183 293.541); --color-violet-500: oklch(0.606 0.25 292.717); --color-violet-600: oklch(0.541 0.281 293.009); --color-violet-700: oklch(0.491 0.27 292.581); --color-violet-800: oklch(0.432 0.232 292.759); --color-violet-900: oklch(0.38 0.189 293.745); --color-violet-950: oklch(0.283 0.141 291.089); --color-purple-50: oklch(0.977 0.014 308.299); --color-purple-100: oklch(0.946 0.033 307.174); --color-purple-200: oklch(0.902 0.063 306.703); --color-purple-300: oklch(0.827 0.119 306.383); --color-purple-400: oklch(0.714 0.203 305.504); --color-purple-500: oklch(0.627 0.265 303.9); --color-purple-600: oklch(0.558 0.288 302.321); --color-purple-700: oklch(0.496 0.265 301.924); --color-purple-800: oklch(0.438 0.218 303.724); --color-purple-900: oklch(0.381 0.176 304.987); --color-purple-950: oklch(0.291 0.149 302.717); --color-fuchsia-50: oklch(0.977 0.017 320.058); --color-fuchsia-100: oklch(0.952 0.037 318.852); --color-fuchsia-200: oklch(0.903 0.076 319.62); --color-fuchsia-300: oklch(0.833 0.145 321.434); --color-fuchsia-400: oklch(0.74 0.238 322.16); --color-fuchsia-500: oklch(0.667 0.295 322.15); --color-fuchsia-600: oklch(0.591 0.293 322.896); --color-fuchsia-700: oklch(0.518 0.253 323.949); --color-fuchsia-800: oklch(0.452 0.211 324.591); --color-fuchsia-900: oklch(0.401 0.17 325.612); --color-fuchsia-950: oklch(0.293 0.136 325.661); --color-pink-50: oklch(0.971 0.014 343.198); --color-pink-100: oklch(0.948 0.028 342.258); --color-pink-200: oklch(0.899 0.061 343.231); --color-pink-300: oklch(0.823 0.12 346.018); --color-pink-400: oklch(0.718 0.202 349.761); --color-pink-500: oklch(0.656 0.241 354.308); --color-pink-600: oklch(0.592 0.249 0.584); --color-pink-700: oklch(0.525 0.223 3.958); --color-pink-800: oklch(0.459 0.187 3.815); --color-pink-900: oklch(0.408 0.153 2.432); --color-pink-950: oklch(0.284 0.109 3.907); --color-rose-50: oklch(0.969 0.015 12.422); --color-rose-100: oklch(0.941 0.03 12.58); --color-rose-200: oklch(0.892 0.058 10.001); --color-rose-300: oklch(0.81 0.117 11.638); --color-rose-400: oklch(0.712 0.194 13.428); --color-rose-500: oklch(0.645 0.246 16.439); --color-rose-600: oklch(0.586 0.253 17.585); --color-rose-700: oklch(0.514 0.222 16.935); --color-rose-800: oklch(0.455 0.188 13.697); --color-rose-900: oklch(0.41 0.159 10.272); --color-rose-950: oklch(0.271 0.105 12.094); --color-slate-50: oklch(0.984 0.003 247.858); --color-slate-100: oklch(0.968 0.007 247.896); --color-slate-200: oklch(0.929 0.013 255.508); --color-slate-300: oklch(0.869 0.022 252.894); --color-slate-400: oklch(0.704 0.04 256.788); --color-slate-500: oklch(0.554 0.046 257.417); --color-slate-600: oklch(0.446 0.043 257.281); --color-slate-700: oklch(0.372 0.044 257.287); --color-slate-800: oklch(0.279 0.041 260.031); --color-slate-900: oklch(0.208 0.042 265.755); --color-slate-950: oklch(0.129 0.042 264.695); --color-gray-50: oklch(0.985 0.002 247.839); --color-gray-100: oklch(0.967 0.003 264.542); --color-gray-200: oklch(0.928 0.006 264.531); --color-gray-300: oklch(0.872 0.01 258.338); --color-gray-400: oklch(0.707 0.022 261.325); --color-gray-500: oklch(0.551 0.027 264.364); --color-gray-600: oklch(0.446 0.03 256.802); --color-gray-700: oklch(0.373 0.034 259.733); --color-gray-800: oklch(0.278 0.033 256.848); --color-gray-900: oklch(0.21 0.034 264.665); --color-gray-950: oklch(0.13 0.028 261.692); --color-zinc-50: oklch(0.985 0 0); --color-zinc-100: oklch(0.967 0.001 286.375); --color-zinc-200: oklch(0.92 0.004 286.32); --color-zinc-300: oklch(0.871 0.006 286.286); --color-zinc-400: oklch(0.705 0.015 286.067); --color-zinc-500: oklch(0.552 0.016 285.938); --color-zinc-600: oklch(0.442 0.017 285.786); --color-zinc-700: oklch(0.37 0.013 285.805); --color-zinc-800: oklch(0.274 0.006 286.033); --color-zinc-900: oklch(0.21 0.006 285.885); --color-zinc-950: oklch(0.141 0.005 285.823); --color-neutral-50: oklch(0.985 0 0); --color-neutral-100: oklch(0.97 0 0); --color-neutral-200: oklch(0.922 0 0); --color-neutral-300: oklch(0.87 0 0); --color-neutral-400: oklch(0.708 0 0); --color-neutral-500: oklch(0.556 0 0); --color-neutral-600: oklch(0.439 0 0); --color-neutral-700: oklch(0.371 0 0); --color-neutral-800: oklch(0.269 0 0); --color-neutral-900: oklch(0.205 0 0); --color-neutral-950: oklch(0.145 0 0); --color-stone-50: oklch(0.985 0.001 106.423); --color-stone-100: oklch(0.97 0.001 106.424); --color-stone-200: oklch(0.923 0.003 48.717); --color-stone-300: oklch(0.869 0.005 56.366); --color-stone-400: oklch(0.709 0.01 56.259); --color-stone-500: oklch(0.553 0.013 58.071); --color-stone-600: oklch(0.444 0.011 73.639); --color-stone-700: oklch(0.374 0.01 67.558); --color-stone-800: oklch(0.268 0.007 34.298); --color-stone-900: oklch(0.216 0.006 56.043); --color-stone-950: oklch(0.147 0.004 49.25); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }}

---

## Page: https://tailwindcss.com/docs/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

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

    <div> <div class="bg-sky-50"></div> <div class="bg-sky-100"></div> <div class="bg-sky-200"></div> <div class="bg-sky-300"></div> <div class="bg-sky-400"></div> <div class="bg-sky-500"></div> <div class="bg-sky-600"></div> <div class="bg-sky-700"></div> <div class="bg-sky-800"></div> <div class="bg-sky-900"></div> <div class="bg-sky-950"></div></div>

The entire color palette is available across all color related utilities, including things like background color, border color, fill, caret color, and many more.

## Working with 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

    <div class="flex items-center gap-4 rounded-lg bg-white p-6 shadow-md outline outline-black/5 dark:bg-gray-800"> <span class="inline-flex shrink-0 rounded-full border border-pink-300 bg-pink-100 p-2 dark:border-pink-300/10 dark:bg-pink-400/10"> <svg class="size-6 stroke-pink-700 dark:stroke-pink-500"><!-- ... --></svg> </span> <div> <p class="text-gray-700 dark:text-gray-400"> <span class="font-medium text-gray-950 dark:text-white">Tom Watson</span> mentioned you in <span class="font-medium text-gray-950 dark:text-white">Logo redesign</span> </p> <time class="mt-1 block text-gray-500" datetime="9:37">9:37am</time> </div></div>

Here's a full list of utilities that use your color palette:

| Utility | Description |
| --- | --- |
| `bg-*` | Sets the background color of an element |
| `text-*` | Sets the text color of an element |
| `decoration-*` | Sets the text decoration color of an element |
| `border-*` | Sets the border color of an element |
| `outline-*` | Sets the outline color of an element |
| `shadow-*` | Sets the color of box shadows |
| `inset-shadow-*` | Sets the color of inset box shadows |
| `ring-*` | Sets the color of ring shadows |
| `inset-ring-*` | Sets the color of inset ring shadows |
| `accent-*` | Sets the accent color of form controls |
| `caret-*` | Sets the caret color in form controls |
| `fill-*` | Sets the fill color of SVG elements |
| `stroke-*` | Sets the stroke color of SVG elements |

### 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%:

    <div> <div class="bg-sky-500/10"></div> <div class="bg-sky-500/20"></div> <div class="bg-sky-500/30"></div> <div class="bg-sky-500/40"></div> <div class="bg-sky-500/50"></div> <div class="bg-sky-500/60"></div> <div class="bg-sky-500/70"></div> <div class="bg-sky-500/80"></div> <div class="bg-sky-500/90"></div> <div class="bg-sky-500/100"></div></div>

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

HTML

    <div class="bg-pink-500/[71.37%]"><!-- ... --></div><div class="bg-cyan-400/(--my-alpha-value)"><!-- ... --></div>

### 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.

    <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5"> <div> <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"> <svg class="h-6 w-6 stroke-white" ...> <!-- ... --> </svg> </span> </div> <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3> <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm "> The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. </p></div>

Learn more about styling for dark mode in the dark mode documentation.

### 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 in utility classes:

HTML

    <div class="bg-[light-dark(var(--color-white),var(--color-gray-950))]"> <!-- ... --></div>

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

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.

### 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

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

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

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.

## Default color palette reference

Here's a complete list of the default colors and their values for reference:

CSS

    @theme { --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); --color-red-300: oklch(0.808 0.114 19.571); --color-red-400: oklch(0.704 0.191 22.216); --color-red-500: oklch(0.637 0.237 25.331); --color-red-600: oklch(0.577 0.245 27.325); --color-red-700: oklch(0.505 0.213 27.518); --color-red-800: oklch(0.444 0.177 26.899); --color-red-900: oklch(0.396 0.141 25.723); --color-red-950: oklch(0.258 0.092 26.042); --color-orange-50: oklch(0.98 0.016 73.684); --color-orange-100: oklch(0.954 0.038 75.164); --color-orange-200: oklch(0.901 0.076 70.697); --color-orange-300: oklch(0.837 0.128 66.29); --color-orange-400: oklch(0.75 0.183 55.934); --color-orange-500: oklch(0.705 0.213 47.604); --color-orange-600: oklch(0.646 0.222 41.116); --color-orange-700: oklch(0.553 0.195 38.402); --color-orange-800: oklch(0.47 0.157 37.304); --color-orange-900: oklch(0.408 0.123 38.172); --color-orange-950: oklch(0.266 0.079 36.259); --color-amber-50: oklch(0.987 0.022 95.277); --color-amber-100: oklch(0.962 0.059 95.617); --color-amber-200: oklch(0.924 0.12 95.746); --color-amber-300: oklch(0.879 0.169 91.605); --color-amber-400: oklch(0.828 0.189 84.429); --color-amber-500: oklch(0.769 0.188 70.08); --color-amber-600: oklch(0.666 0.179 58.318); --color-amber-700: oklch(0.555 0.163 48.998); --color-amber-800: oklch(0.473 0.137 46.201); --color-amber-900: oklch(0.414 0.112 45.904); --color-amber-950: oklch(0.279 0.077 45.635); --color-yellow-50: oklch(0.987 0.026 102.212); --color-yellow-100: oklch(0.973 0.071 103.193); --color-yellow-200: oklch(0.945 0.129 101.54); --color-yellow-300: oklch(0.905 0.182 98.111); --color-yellow-400: oklch(0.852 0.199 91.936); --color-yellow-500: oklch(0.795 0.184 86.047); --color-yellow-600: oklch(0.681 0.162 75.834); --color-yellow-700: oklch(0.554 0.135 66.442); --color-yellow-800: oklch(0.476 0.114 61.907); --color-yellow-900: oklch(0.421 0.095 57.708); --color-yellow-950: oklch(0.286 0.066 53.813); --color-lime-50: oklch(0.986 0.031 120.757); --color-lime-100: oklch(0.967 0.067 122.328); --color-lime-200: oklch(0.938 0.127 124.321); --color-lime-300: oklch(0.897 0.196 126.665); --color-lime-400: oklch(0.841 0.238 128.85); --color-lime-500: oklch(0.768 0.233 130.85); --color-lime-600: oklch(0.648 0.2 131.684); --color-lime-700: oklch(0.532 0.157 131.589); --color-lime-800: oklch(0.453 0.124 130.933); --color-lime-900: oklch(0.405 0.101 131.063); --color-lime-950: oklch(0.274 0.072 132.109); --color-green-50: oklch(0.982 0.018 155.826); --color-green-100: oklch(0.962 0.044 156.743); --color-green-200: oklch(0.925 0.084 155.995); --color-green-300: oklch(0.871 0.15 154.449); --color-green-400: oklch(0.792 0.209 151.711); --color-green-500: oklch(0.723 0.219 149.579); --color-green-600: oklch(0.627 0.194 149.214); --color-green-700: oklch(0.527 0.154 150.069); --color-green-800: oklch(0.448 0.119 151.328); --color-green-900: oklch(0.393 0.095 152.535); --color-green-950: oklch(0.266 0.065 152.934); --color-emerald-50: oklch(0.979 0.021 166.113); --color-emerald-100: oklch(0.95 0.052 163.051); --color-emerald-200: oklch(0.905 0.093 164.15); --color-emerald-300: oklch(0.845 0.143 164.978); --color-emerald-400: oklch(0.765 0.177 163.223); --color-emerald-500: oklch(0.696 0.17 162.48); --color-emerald-600: oklch(0.596 0.145 163.225); --color-emerald-700: oklch(0.508 0.118 165.612); --color-emerald-800: oklch(0.432 0.095 166.913); --color-emerald-900: oklch(0.378 0.077 168.94); --color-emerald-950: oklch(0.262 0.051 172.552); --color-teal-50: oklch(0.984 0.014 180.72); --color-teal-100: oklch(0.953 0.051 180.801); --color-teal-200: oklch(0.91 0.096 180.426); --color-teal-300: oklch(0.855 0.138 181.071); --color-teal-400: oklch(0.777 0.152 181.912); --color-teal-500: oklch(0.704 0.14 182.503); --color-teal-600: oklch(0.6 0.118 184.704); --color-teal-700: oklch(0.511 0.096 186.391); --color-teal-800: oklch(0.437 0.078 188.216); --color-teal-900: oklch(0.386 0.063 188.416); --color-teal-950: oklch(0.277 0.046 192.524); --color-cyan-50: oklch(0.984 0.019 200.873); --color-cyan-100: oklch(0.956 0.045 203.388); --color-cyan-200: oklch(0.917 0.08 205.041); --color-cyan-300: oklch(0.865 0.127 207.078); --color-cyan-400: oklch(0.789 0.154 211.53); --color-cyan-500: oklch(0.715 0.143 215.221); --color-cyan-600: oklch(0.609 0.126 221.723); --color-cyan-700: oklch(0.52 0.105 223.128); --color-cyan-800: oklch(0.45 0.085 224.283); --color-cyan-900: oklch(0.398 0.07 227.392); --color-cyan-950: oklch(0.302 0.056 229.695); --color-sky-50: oklch(0.977 0.013 236.62); --color-sky-100: oklch(0.951 0.026 236.824); --color-sky-200: oklch(0.901 0.058 230.902); --color-sky-300: oklch(0.828 0.111 230.318); --color-sky-400: oklch(0.746 0.16 232.661); --color-sky-500: oklch(0.685 0.169 237.323); --color-sky-600: oklch(0.588 0.158 241.966); --color-sky-700: oklch(0.5 0.134 242.749); --color-sky-800: oklch(0.443 0.11 240.79); --color-sky-900: oklch(0.391 0.09 240.876); --color-sky-950: oklch(0.293 0.066 243.157); --color-blue-50: oklch(0.97 0.014 254.604); --color-blue-100: oklch(0.932 0.032 255.585); --color-blue-200: oklch(0.882 0.059 254.128); --color-blue-300: oklch(0.809 0.105 251.813); --color-blue-400: oklch(0.707 0.165 254.624); --color-blue-500: oklch(0.623 0.214 259.815); --color-blue-600: oklch(0.546 0.245 262.881); --color-blue-700: oklch(0.488 0.243 264.376); --color-blue-800: oklch(0.424 0.199 265.638); --color-blue-900: oklch(0.379 0.146 265.522); --color-blue-950: oklch(0.282 0.091 267.935); --color-indigo-50: oklch(0.962 0.018 272.314); --color-indigo-100: oklch(0.93 0.034 272.788); --color-indigo-200: oklch(0.87 0.065 274.039); --color-indigo-300: oklch(0.785 0.115 274.713); --color-indigo-400: oklch(0.673 0.182 276.935); --color-indigo-500: oklch(0.585 0.233 277.117); --color-indigo-600: oklch(0.511 0.262 276.966); --color-indigo-700: oklch(0.457 0.24 277.023); --color-indigo-800: oklch(0.398 0.195 277.366); --color-indigo-900: oklch(0.359 0.144 278.697); --color-indigo-950: oklch(0.257 0.09 281.288); --color-violet-50: oklch(0.969 0.016 293.756); --color-violet-100: oklch(0.943 0.029 294.588); --color-violet-200: oklch(0.894 0.057 293.283); --color-violet-300: oklch(0.811 0.111 293.571); --color-violet-400: oklch(0.702 0.183 293.541); --color-violet-500: oklch(0.606 0.25 292.717); --color-violet-600: oklch(0.541 0.281 293.009); --color-violet-700: oklch(0.491 0.27 292.581); --color-violet-800: oklch(0.432 0.232 292.759); --color-violet-900: oklch(0.38 0.189 293.745); --color-violet-950: oklch(0.283 0.141 291.089); --color-purple-50: oklch(0.977 0.014 308.299); --color-purple-100: oklch(0.946 0.033 307.174); --color-purple-200: oklch(0.902 0.063 306.703); --color-purple-300: oklch(0.827 0.119 306.383); --color-purple-400: oklch(0.714 0.203 305.504); --color-purple-500: oklch(0.627 0.265 303.9); --color-purple-600: oklch(0.558 0.288 302.321); --color-purple-700: oklch(0.496 0.265 301.924); --color-purple-800: oklch(0.438 0.218 303.724); --color-purple-900: oklch(0.381 0.176 304.987); --color-purple-950: oklch(0.291 0.149 302.717); --color-fuchsia-50: oklch(0.977 0.017 320.058); --color-fuchsia-100: oklch(0.952 0.037 318.852); --color-fuchsia-200: oklch(0.903 0.076 319.62); --color-fuchsia-300: oklch(0.833 0.145 321.434); --color-fuchsia-400: oklch(0.74 0.238 322.16); --color-fuchsia-500: oklch(0.667 0.295 322.15); --color-fuchsia-600: oklch(0.591 0.293 322.896); --color-fuchsia-700: oklch(0.518 0.253 323.949); --color-fuchsia-800: oklch(0.452 0.211 324.591); --color-fuchsia-900: oklch(0.401 0.17 325.612); --color-fuchsia-950: oklch(0.293 0.136 325.661); --color-pink-50: oklch(0.971 0.014 343.198); --color-pink-100: oklch(0.948 0.028 342.258); --color-pink-200: oklch(0.899 0.061 343.231); --color-pink-300: oklch(0.823 0.12 346.018); --color-pink-400: oklch(0.718 0.202 349.761); --color-pink-500: oklch(0.656 0.241 354.308); --color-pink-600: oklch(0.592 0.249 0.584); --color-pink-700: oklch(0.525 0.223 3.958); --color-pink-800: oklch(0.459 0.187 3.815); --color-pink-900: oklch(0.408 0.153 2.432); --color-pink-950: oklch(0.284 0.109 3.907); --color-rose-50: oklch(0.969 0.015 12.422); --color-rose-100: oklch(0.941 0.03 12.58); --color-rose-200: oklch(0.892 0.058 10.001); --color-rose-300: oklch(0.81 0.117 11.638); --color-rose-400: oklch(0.712 0.194 13.428); --color-rose-500: oklch(0.645 0.246 16.439); --color-rose-600: oklch(0.586 0.253 17.585); --color-rose-700: oklch(0.514 0.222 16.935); --color-rose-800: oklch(0.455 0.188 13.697); --color-rose-900: oklch(0.41 0.159 10.272); --color-rose-950: oklch(0.271 0.105 12.094); --color-slate-50: oklch(0.984 0.003 247.858); --color-slate-100: oklch(0.968 0.007 247.896); --color-slate-200: oklch(0.929 0.013 255.508); --color-slate-300: oklch(0.869 0.022 252.894); --color-slate-400: oklch(0.704 0.04 256.788); --color-slate-500: oklch(0.554 0.046 257.417); --color-slate-600: oklch(0.446 0.043 257.281); --color-slate-700: oklch(0.372 0.044 257.287); --color-slate-800: oklch(0.279 0.041 260.031); --color-slate-900: oklch(0.208 0.042 265.755); --color-slate-950: oklch(0.129 0.042 264.695); --color-gray-50: oklch(0.985 0.002 247.839); --color-gray-100: oklch(0.967 0.003 264.542); --color-gray-200: oklch(0.928 0.006 264.531); --color-gray-300: oklch(0.872 0.01 258.338); --color-gray-400: oklch(0.707 0.022 261.325); --color-gray-500: oklch(0.551 0.027 264.364); --color-gray-600: oklch(0.446 0.03 256.802); --color-gray-700: oklch(0.373 0.034 259.733); --color-gray-800: oklch(0.278 0.033 256.848); --color-gray-900: oklch(0.21 0.034 264.665); --color-gray-950: oklch(0.13 0.028 261.692); --color-zinc-50: oklch(0.985 0 0); --color-zinc-100: oklch(0.967 0.001 286.375); --color-zinc-200: oklch(0.92 0.004 286.32); --color-zinc-300: oklch(0.871 0.006 286.286); --color-zinc-400: oklch(0.705 0.015 286.067); --color-zinc-500: oklch(0.552 0.016 285.938); --color-zinc-600: oklch(0.442 0.017 285.786); --color-zinc-700: oklch(0.37 0.013 285.805); --color-zinc-800: oklch(0.274 0.006 286.033); --color-zinc-900: oklch(0.21 0.006 285.885); --color-zinc-950: oklch(0.141 0.005 285.823); --color-neutral-50: oklch(0.985 0 0); --color-neutral-100: oklch(0.97 0 0); --color-neutral-200: oklch(0.922 0 0); --color-neutral-300: oklch(0.87 0 0); --color-neutral-400: oklch(0.708 0 0); --color-neutral-500: oklch(0.556 0 0); --color-neutral-600: oklch(0.439 0 0); --color-neutral-700: oklch(0.371 0 0); --color-neutral-800: oklch(0.269 0 0); --color-neutral-900: oklch(0.205 0 0); --color-neutral-950: oklch(0.145 0 0); --color-stone-50: oklch(0.985 0.001 106.423); --color-stone-100: oklch(0.97 0.001 106.424); --color-stone-200: oklch(0.923 0.003 48.717); --color-stone-300: oklch(0.869 0.005 56.366); --color-stone-400: oklch(0.709 0.01 56.259); --color-stone-500: oklch(0.553 0.013 58.071); --color-stone-600: oklch(0.444 0.011 73.639); --color-stone-700: oklch(0.374 0.01 67.558); --color-stone-800: oklch(0.268 0.007 34.298); --color-stone-900: oklch(0.216 0.006 56.043); --color-stone-950: oklch(0.147 0.004 49.25); --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.

---

## Page: https://tailwindcss.com/docs/adding-custom-styles

Best practices for adding your own custom styles in Tailwind projects.

Often the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you.

Tailwind has been designed from the ground up to be extensible and customizable, so that no matter what you’re building you never feel like you’re fighting the framework.

This guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, and extending the framework with plugins.

## Customizing your theme

If you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations using the `@theme` directive in your CSS:

CSS

    @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); --color-avocado-400: oklch(0.92 0.19 114.08); --color-avocado-500: oklch(0.84 0.18 117.33); --color-avocado-600: oklch(0.53 0.12 118.34); --ease-fluid: cubic-bezier(0.3, 0, 0, 1); --ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* ... */}

Learn more about customizing your theme in the theme variables documentation.

## Using arbitrary values

While you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while you need to break out of those constraints to get things pixel-perfect.

When you find yourself really needing something like `top: 117px` to get a background image in just the right spot, use Tailwind's square bracket notation to generate a class on the fly with any arbitrary value:

HTML

    <div class="top-[117px]"> <!-- ... --></div>

This is basically like inline styles, with the major benefit that you can combine it with interactive modifiers like `hover` and responsive modifiers like `lg`:

HTML

    <div class="top-[117px] lg:top-[344px]"> <!-- ... --></div>

This works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more:

HTML

    <div class="bg-[#bada55] text-[22px] before:content-['Festivus']"> <!-- ... --></div>

If you're referencing a CSS variable as an arbitrary value, you can use the custom property syntax:

HTML

    <div class="fill-(--my-brand-color) ..."> <!-- ... --></div>

This is just a shorthand for `fill-[var(--my-brand-color)]` that adds the `var()` function for you automatically.

### Arbitrary properties

If you ever need to use a CSS property that Tailwind doesn't include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS:

HTML

    <div class="[mask-type:luminance]"> <!-- ... --></div>

This is _really_ like inline styles, but again with the benefit that you can use modifiers:

HTML

    <div class="[mask-type:luminance] hover:[mask-type:alpha]"> <!-- ... --></div>

This can be useful for things like CSS variables as well, especially when they need to change under different conditions:

HTML

    <div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]"> <!-- ... --></div>

### Arbitrary variants

Arbitrary _variants_ are like arbitrary values but for doing on-the-fly selector modification, like you can with built-in pseudo-class variants like `hover:{utility}` or responsive variants like `md:{utility}` but using square bracket notation directly in your HTML.

HTML

    <ul role="list"> {#each items as item} <li class="lg:[&:nth-child(-n+3)]:hover:underline">{item}</li> {/each}</ul>

Learn more in the arbitrary variants documentation.

### Handling whitespace

When an arbitrary value needs to contain a space, use an underscore (`_`) instead and Tailwind will automatically convert it to a space at build-time:

HTML

    <div class="grid grid-cols-[1fr_500px_2fr]"> <!-- ... --></div>

In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs:

HTML

    <div class="bg-[url('/what_a_rush.png')]"> <!-- ... --></div>

In the rare case that you actually need to use an underscore but it's ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won't convert it to a space:

HTML

    <div class="before:content-['hello\_world']"> <!-- ... --></div>

If you're using something like JSX where the backslash is stripped from the rendered HTML, use String.raw() so the backslash isn't treated as a JavaScript escape character:

    <div className={String.raw`before:content-['hello\_world']`}> <!-- ... --></div>

### Resolving ambiguities

Many utilities in Tailwind share a common namespace but map to different CSS properties. For example `text-lg` and `text-black` both share the `text-` namespace, but one is for `font-size` and the other is for `color`.

When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in:

HTML

    <!-- Will generate a font-size utility --><div class="text-[22px]">...</div><!-- Will generate a color utility --><div class="text-[#bada55]">...</div>

Sometimes it really is ambiguous though, for example when using CSS variables:

HTML

    <div class="text-(--my-var)">...</div>

In these situations, you can "hint" the underlying type to Tailwind by adding a CSS data type before the value:

HTML

    <!-- Will generate a font-size utility --><div class="text-(length:--my-var)">...</div><!-- Will generate a color utility --><div class="text-(color:--my-var)">...</div>

## Using custom CSS

While Tailwind is designed to handle the bulk of your styling needs, there is nothing stopping you from just writing plain CSS when you need to:

CSS

    @import "tailwindcss";.my-custom-style { /* ... */}

### Adding base styles

If you just want to set some defaults for the page (like the text color, background color, or font family), the easiest option is just adding some classes to the `html` or `body` elements:

HTML

    <!doctype html><html lang="en" class="bg-gray-100 font-serif text-gray-900"> <!-- ... --></html>

This keeps your base styling decisions in your markup alongside all of your other styles, instead of hiding them in a separate file.

If you want to add your own default base styles for specific HTML elements, use the `@layer` directive to add those styles to Tailwind's `base` layer:

CSS

    @layer base { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); }}

### Adding component classes

Use the `components` layer for any more complicated classes you want to add to your project that you'd still like to be able to override with utility classes.

Traditionally these would be classes like `card`, `btn`, `badge` — that kind of thing.

CSS

    @layer components { .card { background-color: var(--color-white); border-radius: var(--rounded-lg); padding: var(--spacing-6); box-shadow: var(--shadow-xl); }}

By defining component classes in the `components` layer, you can still use utility classes to override them when necessary:

HTML

    <!-- Will look like a card, but with square corners --><div class="card rounded-none"> <!-- ... --></div>

Using Tailwind you probably don't need these types of classes as often as you think. Read our guide on managing duplication for our recommendations.

The `components` layer is also a good place to put custom styles for any third-party components you're using:

CSS

    @layer components { .select2-dropdown { /* ... */ }}

### Using variants

Use the `@variant` directive to apply a Tailwind variant within custom CSS:

app.css

    .my-element { background: white; @variant dark { background: black; }}

Compiled CSS

    .my-element { background: white; @media (prefers-color-scheme: dark) { background: black; }}

If you need to apply multiple variants at the same time, use nesting:

app.css

    .my-element { background: white; @variant dark { @variant hover { background: black; } }}

Compiled CSS

    .my-element { background: white; @media (prefers-color-scheme: dark) { &:hover { @media (hover: hover) { background: black; } } }}

## Adding custom utilities

### Simple utilities

In addition to using the utilities that ship with Tailwind, you can also add your own custom utilities. This can be useful when there's a CSS feature you'd like to use in your project that Tailwind doesn't include utilities for out of the box.

Use the `@utility` directive to add a custom utility to your project:

CSS

    @utility content-auto { content-visibility: auto;}

You can now use this utility in your HTML:

HTML

    <div class="content-auto"> <!-- ... --></div>

It will also work with variants like `hover`, `focus` and `lg`:

HTML

    <div class="hover:content-auto"> <!-- ... --></div>

Custom utilities are automatically inserted into the `utilities` layer along with all of the built-in utilities in the framework.

### Complex utilities

If your custom utility is more complex than a single class name, use nesting to define the utility:

CSS

    @utility scrollbar-hidden { &::-webkit-scrollbar { display: none; }}

### Functional utilities

In addition to registering simple utilities with the `@utility` directive, you can also register functional utilities that accept an argument:

CSS

    @utility tab-* { tab-size: --value(--tab-size-*);}

The special `--value()` function is used to resolve the utility value.

#### Matching theme values

Use the `--value(--theme-key-*)` syntax to resolve the utility value against a set of theme keys:

CSS

    @theme { --tab-size-2: 2; --tab-size-4: 4; --tab-size-github: 8;}@utility tab-* { tab-size: --value(--tab-size-*);}

This will match utilities like `tab-2`, `tab-4`, and `tab-github`.

#### Bare values

To resolve the value as a bare value, use the `--value({type})` syntax, where `{type}` is the data type you want to validate the bare value as:

CSS

    @utility tab-* { tab-size: --value(integer);}

This will match utilities like `tab-1` and `tab-76`.

#### Literal values

To support literal values, use the `--value('literal')` syntax (notice the quotes):

CSS

    @utility tab-* { tab-size: --value('inherit', 'initial', 'unset');}

This will match utilities like `tab-inherit`, `tab-initial`, and `tab-unset`.

#### Arbitrary values

To support arbitrary values, use the `--value([{type}])` syntax (notice the square brackets) to tell Tailwind which types are supported as an arbitrary value:

CSS

    @utility tab-* { tab-size: --value([integer]);}

This will match utilities like `tab-[1]` and `tab-[76]`. If you want to support any data type, you can use `--value([*])`.

#### Supporting theme, bare, and arbitrary values together

All three forms of the `--value()` function can be used within a rule as multiple declarations, and any declarations that fail to resolve will be omitted in the output:

CSS

    @theme { --tab-size-github: 8;}@utility tab-* { tab-size: --value([integer]); tab-size: --value(integer); tab-size: --value(--tab-size-*);}

This makes it possible to treat the value differently in each case if necessary, for example translating a bare integer to a percentage:

CSS

    @utility opacity-* { opacity: --value([percentage]); opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-*);}

The `--value()` function can also take multiple arguments and resolve them left to right if you don't need to treat the return value differently in different cases:

CSS

    @theme { --tab-size-github: 8;}@utility tab-* { tab-size: --value(--tab-size-*, integer, [integer]);}@utility opacity-* { opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-*, [percentage]);}

#### Negative values

To support negative values, register separate positive and negative utilities into separate declarations:

CSS

    @utility inset-* { inset: --spacing(--value(integer)); inset: --value([percentage], [length]);}@utility -inset-* { inset: --spacing(--value(integer) * -1); inset: calc(--value([percentage], [length]) * -1);}

#### Modifiers

Modifiers are handled using the `--modifier()` function which works exactly like the `--value()` function but operates on a modifier if present:

CSS

    @utility text-* { font-size: --value(--text-*, [length]); line-height: --modifier(--leading-*, [length], [*]);}

If a modifier isn't present, any declaration depending on a modifier is just not included in the output.

#### Fractions

To handle fractions, we rely on the CSS `ratio` data type. If this is used with `--value()`, it's a signal to Tailwind to treat the value and modifier as a single value:

CSS

    @utility aspect-* { aspect-ratio: --value(--aspect-ratio-*, ratio, [ratio]);}

This will match utilities like `aspect-square`, `aspect-3/4`, and `aspect-[7/9]`.

## Adding custom variants

In addition to using the variants that ship with Tailwind, you can also add your own custom variants using the `@custom-variant` directive:

    @custom-variant theme-midnight { &:where([data-theme="midnight"] *) { @slot; }}

Now you can use the `theme-midnight:<utility>` variant in your HTML:

    <html data-theme="midnight"> <button class="theme-midnight:bg-black ..."></button></html>

You can create variants using the shorthand syntax when nesting isn't required:

    @custom-variant theme-midnight (&:where([data-theme="midnight"] *));

When a custom variant has multiple rules, they can be nested within each other:

    @custom-variant any-hover { @media (any-hover: hover) { &:hover { @slot; } }}

---

## Page: https://tailwindcss.com/docs/detecting-classes-in-source-files

Understanding and customizing how Tailwind scans your source files.

## Overview

Tailwind works by scanning your project for utility classes, then generating all of the necessary CSS based on the classes you've actually used.

This makes sure your CSS is as small as possible, and is also what makes features like arbitrary values possible.

### How classes are detected

Tailwind treats all of your source files as plain text, and doesn't attempt to actually parse your files as code in any way.

Instead it just looks for any tokens in your file that could be classes based on which characters Tailwind is expecting in class names:

JSX

    export function Button({ color, children }) { const colors = { black: "bg-black text-white", blue: "bg-blue-500 text-white", white: "bg-white text-black", }; return ( <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}> {children} </button> );}

Then it tries to generate the CSS for all of these tokens, throwing away any tokens that don't map to a utility class the framework knows about.

### Dynamic class names

Since Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using.

Don't construct class names dynamically

HTML

    <div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings `text-red-600` and `text-green-600` do not exist, so Tailwind will not generate those classes.

Instead, make sure any class names you’re using exist in full:

Always use complete class names

HTML

    <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

If you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes:

Don't use props to build class names dynamically

JSX

    function Button({ color, children }) { return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;}

Instead, map props to complete class names that are statically detectable at build-time:

Always map props to static class names

JSX

    function Button({ color, children }) { const colorVariants = { blue: "bg-blue-600 hover:bg-blue-500", red: "bg-red-600 hover:bg-red-500", }; return <button className={`${colorVariants[color]} ...`}>{children}</button>;}

This has the added benefit of letting you map different prop values to different color shades for example:

JSX

    function Button({ color, children }) { const colorVariants = { blue: "bg-blue-600 hover:bg-blue-500 text-white", red: "bg-red-500 hover:bg-red-400 text-white", yellow: "bg-yellow-300 hover:bg-yellow-400 text-black", }; return <button className={`${colorVariants[color]} ...`}>{children}</button>;}

As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time.

### Which files are scanned

Tailwind will scan every file in your project for class names, except in the following cases:

*   Files that are in your `.gitignore` file
*   Binary files like images, videos, or zip files
*   CSS files
*   Common package manager lock files

If you need to scan any files that Tailwind is ignoring by default, you can explicitly register those sources.

## Explicitly registering sources

Use `@source` to explicitly register source paths relative to the stylesheet:

CSS

    @import "tailwindcss";@source "../node_modules/@acmecorp/ui-lib";

This is especially useful when you need to scan an external library that is built with Tailwind, since dependencies are usually listed in your `.gitignore` file and ignored by Tailwind by default.

### Setting your base path

Tailwind uses the current working directory as its starting point when scanning for class names by default.

To set the base path for source detection explicitly, use the `source()` function when importing Tailwind in your CSS:

CSS

    @import "tailwindcss" source("../src");

This can be useful when working with monorepos where your build commands run from the root of the monorepo instead of the root of each project.

### Ignoring specific paths

Use `@source not` to ignore specific paths, relative to the stylesheet, when scanning for class names:

CSS

    @import "tailwindcss";@source not "../src/components/legacy";

This is useful when you have large directories in your project that you know don't use Tailwind classes, like legacy components or third-party libraries.

### Disabling automatic detection

Use `source(none)` to completely disable automatic source detection if you want to register all of your sources explicitly:

CSS

    @import "tailwindcss" source(none);@source "../admin";@source "../shared";

This can be useful in projects that have multiple Tailwind stylesheets where you want to make sure each one only includes the classes each stylesheet needs.

## Safelisting specific utilities

If you need to make sure Tailwind generates certain class names that don’t exist in your content files, use `@source inline()` to force them to be generated:

CSS

    @import "tailwindcss";@source inline("underline");

Generated CSS

    .underline { text-decoration: underline;}

### Safelisting variants

You can also use `@source inline()` to generate classes with variants. For example, to generate the `underline` class with hover and focus variants, add `{hover:,focus:,}` to the source input:

CSS

    @import "tailwindcss";@source inline("{hover:,focus:,}underline");

Generated CSS

    .underline { text-decoration: underline;}@media (hover: hover) { .hover\:underline:hover { text-decoration: underline; }}@media (focus: focus) { .focus\:underline:focus { text-decoration: underline; }}

### Safelisting with ranges

The source input is brace expanded, so you can generate multiple classes at once. For example, to generate all the red background colors with hover variants, use a range:

CSS

    @import "tailwindcss";@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

Generated CSS

    .bg-red-50 { background-color: var(--color-red-50);}.bg-red-100 { background-color: var(--color-red-100);}.bg-red-200 { background-color: var(--color-red-200);}/* ... */.bg-red-800 { background-color: var(--color-red-800);}.bg-red-900 { background-color: var(--color-red-900);}.bg-red-950 { background-color: var(--color-red-950);}@media (hover: hover) { .hover\:bg-red-50:hover { background-color: var(--color-red-50); } /* ... */ .hover\:bg-red-950:hover { background-color: var(--color-red-950); }}

This generates red background colors from 100 to 900 in increments of 100, along with the first and last shades of 50 and 950. It also adds the `hover:` variant for each of those classes.

### Explicitly excluding classes

Use `@source not inline()` to prevent specific classes from being generated, even if they are detected in your source files:

CSS

    @import "tailwindcss";@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");

This will explicitly exclude the red background utilities, along with their hover and focus variants, from being generated.

---

## Page: https://tailwindcss.com/docs/functions-and-directives

A reference for the custom functions and directives Tailwind exposes to your CSS.

## Directives

Directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects.

### @import

Use the `@import` directive to inline import CSS files, including Tailwind itself:

CSS

    @import "tailwindcss";

### @theme

Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints:

CSS

    @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); --color-avocado-400: oklch(0.92 0.19 114.08); --color-avocado-500: oklch(0.84 0.18 117.33); --color-avocado-600: oklch(0.53 0.12 118.34); --ease-fluid: cubic-bezier(0.3, 0, 0, 1); --ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* ... */}

Learn more about customizing your theme in the theme variables documentation.

### @source

Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection:

CSS

    @source "../node_modules/@my-company/ui-lib";

Learn more about automatic content detection in the detecting classes in source files documentation.

### @utility

Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`:

CSS

    @utility tab-4 { tab-size: 4;}

Learn more about registering custom utilities in the adding custom utilities documentation.

### @variant

Use the `@variant` directive to apply a Tailwind variant to styles in your CSS:

CSS

    .my-element { background: white; @variant dark { background: black; }}

Learn more using variants in the using variants documentation.

### @custom-variant

Use the `@custom-variant` directive to add a custom variant in your project:

CSS

    @custom-variant theme-midnight (&:where([data-theme="midnight"] *));

This lets you write utilities `theme-midnight:bg-black` and `theme-midnight:text-white`.

Learn more about adding custom variants in the adding custom variants documentation.

### @apply

Use the `@apply` directive to inline any existing utility classes into your own custom CSS:

CSS

    .select2-dropdown { @apply rounded-b-lg shadow-md;}.select2-search { @apply rounded border border-gray-300;}.select2-results__group { @apply text-lg font-bold text-gray-900;}

This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you’re used to using in your HTML.

### @reference

If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context.

To do this without duplicating any CSS in your output, use the `@reference` directive to import your main stylesheet for reference without actually including the styles:

Vue

    <template> <h1>Hello world!</h1></template><style> @reference "../../app.css"; h1 { @apply text-2xl font-bold text-red-500; }</style>

If you’re just using the default theme with no customizations, you can import `tailwindcss` directly:

Vue

    <template> <h1>Hello world!</h1></template><style> @reference "tailwindcss"; h1 { @apply text-2xl font-bold text-red-500; }</style>

## Functions

Tailwind provides the following build-time functions to make working with colors and the spacing scale easier.

### \--alpha()

Use the `--alpha()` function to adjust the opacity of a color:

Input CSS

    .my-element { color: --alpha(var(--color-lime-300) / 50%);}

Compiled CSS

    .my-element { color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);}

### \--spacing()

Use the `--spacing()` function to generate a spacing value based on your theme:

Input CSS

    .my-element { margin: --spacing(4);}

Compiled CSS

    .my-element { margin: calc(var(--spacing) * 4);}

This can also be useful in arbitrary values, especially in combination with `calc()`:

HTML

    <div class="py-[calc(--spacing(4)-1px)]"> <!-- ... --></div>

## Compatibility

The following directives and functions exist solely for compatibility with Tailwind CSS v3.x.

### @config

Use the `@config` directive to load a legacy JavaScript-based configuration file:

CSS

    @config "../../tailwind.config.js";

The `corePlugins`, `safelist`, and `separator` options from the JavaScript-based config are not supported in v4.0.

### @plugin

Use the `@plugin` directive to load a legacy JavaScript-based plugin:

CSS

    @plugin "@tailwindcss/typography";

The `@plugin` directive accepts either a package name or a local path.

### theme()

Use the `theme()` function to access your Tailwind theme values using dot notation:

CSS

    .my-element { margin: theme(spacing.12);}

This function is deprecated, and we recommend using CSS theme variables instead.

---

## Page: https://tailwindcss.com/docs/preflight

An opinionated set of base styles for Tailwind projects.

## Overview

Built on top of 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.

### 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

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 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

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.

### 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 and list-style-position utilities:

HTML

    <ul class="list-inside list-disc"> <li>One</li> <li>Two</li> <li>Three</li></ul>

You can always add default list styles to your project by adding your own base styles.

#### Accessibility considerations

Unstyled lists are not announced as lists by VoiceOver. If your content is truly a list but you would like to keep it unstyled, add a "list" role to the element:

HTML

    <ul role="list"> <li>One</li> <li>Two</li> <li>Three</li></ul>

### 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

    <img class="inline" src="..." alt="..." />

### 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

    <img class="max-w-none" src="..." alt="..." />

## 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.

## 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);

---

## Page: https://tailwindcss.com/docs/aspect-ratio

Utilities for controlling the aspect ratio of an element.

| Class | Styles |
| --- | --- |
| `aspect-<ratio>` | 
`aspect-ratio: <ratio>;`

 |
| `aspect-square` | 

`aspect-ratio: 1 / 1;`

 |
| `aspect-video` | 

`aspect-ratio: var(--aspect-ratio-video); /* 16 / 9 */`

 |
| `aspect-auto` | 

`aspect-ratio: auto;`

 |
| `aspect-(<custom-property>)` | 

`aspect-ratio: var(<custom-property>);`

 |
| `aspect-[<value>]` | 

`aspect-ratio: <value>;`

 |

## Examples

### Basic example

Use `aspect-<ratio>` utilities like `aspect-3/2` to give an element a specific aspect ratio:

Resize the example to see the expected behavior

    <img class="aspect-3/2 object-cover ..." src="/img/villas.jpg" />

### Using a video aspect ratio

Use the `aspect-video` utility to give a video element a 16 / 9 aspect ratio:

Resize the example to see the expected behavior

    <iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

### Using a custom value

Use the `aspect-[<value>]` syntax to set the aspect ratio based on a completely custom value:

    <img class="aspect-[calc(4*3+1)/3] ..." src="/img/villas.jpg" />

For CSS variables, you can also use the `aspect-(<custom-property>)` syntax:

    <img class="aspect-(--my-aspect-ratio) ..." src="/img/villas.jpg" />

This is just a shorthand for `aspect-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix an `aspect-ratio` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <iframe class="aspect-video md:aspect-square ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--aspect-*` theme variables to customize the aspect ratio utilities in your project:

    @theme { --aspect-retro: 4 / 3; }

Now the `aspect-retro` utility can be used in your markup:

    <iframe class="aspect-retro" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/columns

Utilities for controlling the number of columns within an element.

| Class | Styles |
| --- | --- |
| `columns-<number>` | 
`columns: <number>;`

 |
| `columns-3xs` | 

`columns: var(--container-3xs); /* 16rem (256px) */`

 |
| `columns-2xs` | 

`columns: var(--container-2xs); /* 18rem (288px) */`

 |
| `columns-xs` | 

`columns: var(--container-xs); /* 20rem (320px) */`

 |
| `columns-sm` | 

`columns: var(--container-sm); /* 24rem (384px) */`

 |
| `columns-md` | 

`columns: var(--container-md); /* 28rem (448px) */`

 |
| `columns-lg` | 

`columns: var(--container-lg); /* 32rem (512px) */`

 |
| `columns-xl` | 

`columns: var(--container-xl); /* 36rem (576px) */`

 |
| `columns-2xl` | 

`columns: var(--container-2xl); /* 42rem (672px) */`

 |
| `columns-3xl` | 

`columns: var(--container-3xl); /* 48rem (768px) */`

 |

## Examples

### Setting by number

Use `columns-<number>` utilities like `columns-3` to set the number of columns that should be created for the content within an element:

The column width will automatically adjust to accommodate the specified number of columns.

### Setting by width

Use utilities like `columns-xs` and `columns-sm` to set the ideal column width for the content within an element:

Resize the example to see the expected behavior

    <div class="columns-3xs ..."> <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" /> <img class="aspect-square ..." src="/img/mountains-2.jpg" /> <img class="aspect-square ..." src="/img/mountains-3.jpg" /> <!-- ... --></div>

When setting the column width, the number of columns automatically adjusts to ensure they don't get too narrow.

### Setting the column gap

Use the `gap-<width>` utilities to specify the width between columns:

Learn more about the gap utilities in the gap documentation.

### Using a custom value

Use the `columns-[<value>]` syntax to set the columns based on a completely custom value:

    <div class="columns-[30vw] ..."> <!-- ... --></div>

For CSS variables, you can also use the `columns-(<custom-property>)` syntax:

    <div class="columns-(--my-columns) ..."> <!-- ... --></div>

This is just a shorthand for `columns-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `columns` utility with a breakpoint variant like `sm:` to only apply the utility at small screen sizes and above:

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--container-*` theme variables to customize the fixed-width column utilities in your project:

    @theme { --container-4xs: 14rem; }

Now the `columns-4xs` utility can be used in your markup:

    <div class="columns-4xs"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/break-after

Layout

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

### 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:

    <div class="columns-2"> <p>Well, let me tell you something, ...</p> <p class="break-after-column">Sure, go ahead, laugh...</p> <p>Maybe we can live without...</p> <p>Look. If you think this is...</p></div>

### Responsive design

Prefix a `break-after` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="break-after-column md:break-after-auto ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

### On this page

*   Quick reference
*   Examples
    *   Basic example
    *   Responsive design

5-day mini-course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course →

---

## Page: https://tailwindcss.com/docs/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

### 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:

    <div class="columns-2"> <p>Well, let me tell you something, ...</p> <p class="break-before-column">Sure, go ahead, laugh...</p> <p>Maybe we can live without...</p> <p>Look. If you think this is...</p></div>

### Responsive design

Prefix a `break-before` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="break-before-column md:break-before-auto ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/break-inside

Layout

Utilities for controlling how a column or page should break within an element.

| Class | Styles |
| --- | --- |
| `break-inside-auto` | 
`break-inside: auto;`

 |
| `break-inside-avoid` | 

`break-inside: avoid;`

 |
| `break-inside-avoid-page` | 

`break-inside: avoid-page;`

 |
| `break-inside-avoid-column` | 

`break-inside: avoid-column;`

 |

## Examples

### Basic example

Use utilities like `break-inside-column` and `break-inside-avoid-page` to control how a column or page break should behave within an element:

    <div class="columns-2"> <p>Well, let me tell you something, ...</p> <p class="break-inside-avoid-column">Sure, go ahead, laugh...</p> <p>Maybe we can live without...</p> <p>Look. If you think this is...</p></div>

### Responsive design

Prefix a `break-inside` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="break-inside-avoid-column md:break-inside-auto ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

### On this page

*   Quick reference
*   Examples
    *   Basic example
    *   Responsive design

5-day mini-course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course →

---

## Page: https://tailwindcss.com/docs/box-decoration-break

Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.

| Class | Styles |
| --- | --- |
| `box-decoration-clone` | 
`box-decoration-break: clone`

 |
| `box-decoration-slice` | 

`box-decoration-break: slice`

 |

## Examples

### Basic example

Use the `box-decoration-slice` and `box-decoration-clone` utilities to control whether properties like background, border, border-image, box-shadow, clip-path, margin, and padding should be rendered as if the element were one continuous fragment, or distinct blocks:

box-decoration-slice

Hello  
World

box-decoration-clone

Hello  
World

    <span class="box-decoration-slice bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ..."> Hello<br />World</span><span class="box-decoration-clone bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ..."> Hello<br />World</span>

### Responsive design

Prefix a `box-decoration-break` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="box-decoration-clone md:box-decoration-slice ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/box-sizing

Utilities for controlling how the browser should calculate an element's total size.

| Class | Styles |
| --- | --- |
| `box-border` | 
`box-sizing: border-box`

 |
| `box-content` | 

`box-sizing: content-box`

 |

## Examples

### Including borders and padding

Use the `box-border` utility to set an element's `box-sizing` to `border-box`, telling the browser to include the element's borders and padding when you give it a height or width.

This means a 100px × 100px element with a 2px border and 4px of padding on all sides will be rendered as 100px × 100px, with an internal content area of 88px × 88px:

128px

128px

    <div class="box-border size-32 border-4 p-4 ..."> <!-- ... --></div>

Tailwind makes this the default for all elements in our preflight base styles.

### Excluding borders and padding

Use the `box-content` utility to set an element's `box-sizing` to `content-box`, telling the browser to add borders and padding on top of the element's specified width or height.

This means a 100px × 100px element with a 2px border and 4px of padding on all sides will actually be rendered as 112px × 112px, with an internal content area of 100px × 100px:

128px

128px

    <div class="box-content size-32 border-4 p-4 ..."> <!-- ... --></div>

### Responsive design

Prefix a `box-sizing` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="box-content md:box-border ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/display

Utilities for controlling the display box type of an element.

| Class | Styles |
| --- | --- |
| `inline` | 
`display: inline;`

 |
| `block` | 

`display: block;`

 |
| `inline-block` | 

`display: inline-block;`

 |
| `flow-root` | 

`display: flow-root;`

 |
| `flex` | 

`display: flex;`

 |
| `inline-flex` | 

`display: inline-flex;`

 |
| `grid` | 

`display: grid;`

 |
| `inline-grid` | 

`display: inline-grid;`

 |
| `contents` | 

`display: contents;`

 |
| `table` | 

`display: table;`

 |

## Examples

### Block and Inline

Use the `inline`, `inline-block`, and `block` utilities to control the flow of text and elements:

When controlling the flow of text, using the CSS property display: inline will cause the text inside the element to wrap normally.

While using the property display: inline-block will wrap the element to prevent the text inside from extending beyond its parent.

Lastly, using the property display: block will put the element on its own line and fill its parent.

    <p> When controlling the flow of text, using the CSS property <span class="inline">display: inline</span> will cause the text inside the element to wrap normally.</p><p> While using the property <span class="inline-block">display: inline-block</span> will wrap the element to prevent the text inside from extending beyond its parent.</p><p> Lastly, using the property <span class="block">display: block</span> will put the element on its own line and fill its parent.</p>

### Flow Root

Use the `flow-root` utility to create a block-level element with its own block formatting context:

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.

    <div class="p-4"> <div class="flow-root ..."> <div class="my-4 ...">Well, let me tell you something, ...</div> </div> <div class="flow-root ..."> <div class="my-4 ...">Sure, go ahead, laugh if you want...</div> </div></div>

### Flex

Use the `flex` utility to create a block-level flex container:

**Andrew Alfred**Technical advisor

    <div class="flex items-center"> <img src="path/to/image.jpg" /> <div> <strong>Andrew Alfred</strong> <span>Technical advisor</span> </div></div>

### Inline Flex

Use the `inline-flex` utility to create an inline flex container that flows with text:

Today I spent most of the day researching ways to take advantage of the fact that bottles can be returned for 10 cents in Michigan, but only 5 cents here. Kramer keeps telling me there is no way to make it work, that he has run the numbers on every possible approach, but I just have to believe there's a way to make it work, there's simply too much opportunity here.

    <p> Today I spent most of the day researching ways to ... <span class="inline-flex items-baseline"> <img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" /> <span>Kramer</span> </span> keeps telling me there is no way to make it work, that ...</p>

### Grid

Use the `grid` utility to create a grid container:

01

02

03

04

05

06

07

08

09

    <div class="grid grid-cols-3 grid-rows-3 gap-4"> <!-- ... --></div>

### Inline Grid

Use the `inline-grid` utility to create an inline grid container:

01

02

03

04

05

06

01

02

03

04

05

06

    <span class="inline-grid grid-cols-3 gap-4"> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span></span><span class="inline-grid grid-cols-3 gap-4"> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span></span>

### Contents

Use the `contents` utility to create a "phantom" container whose children act like direct children of the parent:

01

02

03

04

    <div class="flex ..."> <div class="flex-1 ...">01</div> <div class="contents"> <div class="flex-1 ...">02</div> <div class="flex-1 ...">03</div> </div> <div class="flex-1 ...">04</div></div>

### Table

Use the `table`, `table-row`, `table-cell`, `table-caption`, `table-column`, `table-column-group`, `table-header-group`, `table-row-group`, and `table-footer-group` utilities to create elements that behave like their respective table elements:

Song

Artist

Year

The Sliding Mr. Bones (Next Stop, Pottersville)

Malcolm Lockyer

1961

Witchy Woman

The Eagles

1972

Shining Star

Earth, Wind, and Fire

1975

    <div class="table w-full ..."> <div class="table-header-group ..."> <div class="table-row"> <div class="table-cell text-left ...">Song</div> <div class="table-cell text-left ...">Artist</div> <div class="table-cell text-left ...">Year</div> </div> </div> <div class="table-row-group"> <div class="table-row"> <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div> <div class="table-cell ...">Malcolm Lockyer</div> <div class="table-cell ...">1961</div> </div> <div class="table-row"> <div class="table-cell ...">Witchy Woman</div> <div class="table-cell ...">The Eagles</div> <div class="table-cell ...">1972</div> </div> <div class="table-row"> <div class="table-cell ...">Shining Star</div> <div class="table-cell ...">Earth, Wind, and Fire</div> <div class="table-cell ...">1975</div> </div> </div></div>

### Hidden

Use the `hidden` utility to remove an element from the document:

01

02

03

    <div class="flex ..."> <div class="hidden ...">01</div> <div>02</div> <div>03</div></div>

To visually hide an element but keep it in the document, use the visibility property instead.

### Screen-reader only

Use `sr-only` to hide an element visually without hiding it from screen readers:

    <a href="#"> <svg><!-- ... --></svg> <span class="sr-only">Settings</span></a>

Use `not-sr-only` to undo `sr-only`, making an element visible to sighted users as well as screen readers:

    <a href="#"> <svg><!-- ... --></svg> <span class="sr-only sm:not-sr-only">Settings</span></a>

This can be useful when you want to visually hide something on small screens but show it on larger screens for example.

### Responsive design

Prefix a `display` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="flex md:inline-flex ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/float

Layout

Utilities for controlling the wrapping of content around an element.

| Class | Styles |
| --- | --- |
| `float-right` | 
`float: right;`

 |
| `float-left` | 

`float: left;`

 |
| `float-start` | 

`float: inline-start;`

 |
| `float-end` | 

`float: inline-end;`

 |
| `float-none` | 

`float: none;`

 |

## Examples

### Floating elements to the right

Use the `float-right` utility to float an element to the right of its container:

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    <article> <img class="float-right ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>

### Floating elements to the left

Use the `float-left` utility to float an element to the left of its container:

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    <article> <img class="float-left ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>

### Using logical properties

Use the `float-start` and `float-end` utilities, which use logical properties to map to either the left or right side based on the text direction:

left-to-right

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

right-to-left

ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.

    <article> <img class="float-start ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article><article dir="rtl"> <img class="float-start ..." src="/img/mountains.jpg" /> <p>... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد</p></article>

### Disabling a float

Use the `float-none` utility to reset any floats that are applied to an element:

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    <article> <img class="float-none ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>

### Responsive design

Prefix a `float` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="float-right md:float-left" src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/clear

Layout

Utilities for controlling the wrapping of content around an element.

| Class | Styles |
| --- | --- |
| `clear-left` | 
`clear: left;`

 |
| `clear-right` | 

`clear: right;`

 |
| `clear-both` | 

`clear: both;`

 |
| `clear-start` | 

`clear: inline-start;`

 |
| `clear-end` | 

`clear: inline-end;`

 |
| `clear-none` | 

`clear: none;`

 |

## Examples

### Clearing left

Use the `clear-left` utility to position an element below any preceding left-floated elements:

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    <article> <img class="float-left ..." src="/img/snow-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-left ...">Maybe we can live without libraries...</p></article>

### Clearing right

Use the `clear-right` utility to position an element below any preceding right-floated elements:

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    <article> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/snow-mountains.jpg" /> <p class="clear-right ...">Maybe we can live without libraries...</p></article>

### Clearing all

Use the `clear-both` utility to position an element below all preceding floated elements:

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    <article> <img class="float-left ..." src="/img/snow-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-both ...">Maybe we can live without libraries...</p></article>

### Using logical properties

Use the `clear-start` and `clear-end` utilities, which use logical properties to map to either the left or right side based on the text direction:

ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.

    <article dir="rtl"> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-end ...">...ربما يمكننا العيش بدون مكتبات،</p></article>

### Disabling clears

Use the `clear-none` utility to reset any clears that are applied to an element:

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    <article> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/snow-mountains.jpg" /> <p class="clear-none ...">Maybe we can live without libraries...</p></article>

### Responsive design

Prefix a `clear` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="clear-left md:clear-none ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/isolation

Utilities for controlling whether an element should explicitly create a new stacking context.

| Class | Styles |
| --- | --- |
| `isolate` | 
`isolation: isolate;`

 |
| `isolation-auto` | 

`isolation: auto;`

 |

## Examples

### Basic example

Use the `isolate` and `isolation-auto` utilities to control whether an element should explicitly create a new stacking context:

    <div class="isolate ..."> <!-- ... --></div>

### Responsive design

Prefix an `isolation` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="isolate md:isolation-auto ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/object-fit

Utilities for controlling how a replaced element's content should be resized.

| Class | Styles |
| --- | --- |
| `object-contain` | 
`object-fit: contain;`

 |
| `object-cover` | 

`object-fit: cover;`

 |
| `object-fill` | 

`object-fit: fill;`

 |
| `object-none` | 

`object-fit: none;`

 |
| `object-scale-down` | 

`object-fit: scale-down;`

 |

## Examples

### Resizing to cover

Use the `object-cover` utility to resize an element's content to cover its container:

    <img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />

### Containing within

Use the `object-contain` utility to resize an element's content to stay contained within its container:

    <img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />

### Stretching to fit

Use the `object-fill` utility to stretch an element's content to fit its container:

    <img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />

### Scaling down

Use the `object-scale-down` utility to display an element's content at its original size but scale it down to fit its container if necessary:

    <img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />

### Using the original size

Use the `object-none` utility to display an element's content at its original size ignoring the container size:

    <img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />

### Responsive design

Prefix an `object-fit` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="object-contain md:object-cover" src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/object-position

Utilities for controlling how a replaced element's content should be positioned within its container.

| Class | Styles |
| --- | --- |
| `object-top-left` | 
`object-position: top left;`

 |
| `object-top` | 

`object-position: top;`

 |
| `object-top-right` | 

`object-position: top right;`

 |
| `object-left` | 

`object-position: left;`

 |
| `object-center` | 

`object-position: center;`

 |
| `object-right` | 

`object-position: right;`

 |
| `object-bottom-left` | 

`object-position: bottom left;`

 |
| `object-bottom` | 

`object-position: bottom;`

 |
| `object-bottom-right` | 

`object-position: bottom right;`

 |
| `object-(<custom-property>)` | 

`object-position: var(<custom-property>);`

 |
| `object-[<value>]` | 

`object-position: <value>;`

 |

## Examples

### Basic example

Use utilities like `object-left` and `object-bottom-right` to specify how a replaced element's content should be positioned within its container:

Hover over examples to see the full image

object-top-left

object-top

object-top-right

object-left

object-center

object-right

object-bottom-left

object-bottom

object-bottom-right

    <img class="size-24 object-top-left ..." src="/img/mountains.jpg" /><img class="size-24 object-top ..." src="/img/mountains.jpg" /><img class="size-24 object-top-right ..." src="/img/mountains.jpg" /><img class="size-24 object-left ..." src="/img/mountains.jpg" /><img class="size-24 object-center ..." src="/img/mountains.jpg" /><img class="size-24 object-right ..." src="/img/mountains.jpg" /><img class="size-24 object-bottom-left ..." src="/img/mountains.jpg" /><img class="size-24 object-bottom ..." src="/img/mountains.jpg" /><img class="size-24 object-bottom-right ..." src="/img/mountains.jpg" />

### Using a custom value

Use the `object-[<value>]` syntax to set the object position based on a completely custom value:

    <img class="object-[25%_75%] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `object-(<custom-property>)` syntax:

    <img class="object-(--my-object) ..." src="/img/mountains.jpg" />

This is just a shorthand for `object-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix an `object-position` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="object-center md:object-top ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/overflow

Utilities for controlling how an element handles content that is too large for the container.

| Class | Styles |
| --- | --- |
| `overflow-auto` | 
`overflow: auto;`

 |
| `overflow-hidden` | 

`overflow: hidden;`

 |
| `overflow-clip` | 

`overflow: clip;`

 |
| `overflow-visible` | 

`overflow: visible;`

 |
| `overflow-scroll` | 

`overflow: scroll;`

 |
| `overflow-x-auto` | 

`overflow-x: auto;`

 |
| `overflow-y-auto` | 

`overflow-y: auto;`

 |
| `overflow-x-hidden` | 

`overflow-x: hidden;`

 |
| `overflow-y-hidden` | 

`overflow-y: hidden;`

 |
| `overflow-x-clip` | 

`overflow-x: clip;`

 |
| `overflow-y-clip` | 

`overflow-y: clip;`

 |
| `overflow-x-visible` | 

`overflow-x: visible;`

 |
| `overflow-y-visible` | 

`overflow-y: visible;`

 |
| `overflow-x-scroll` | 

`overflow-x: scroll;`

 |
| `overflow-y-scroll` | 

`overflow-y: scroll;`

 |

## Examples

### Showing content that overflows

Use the `overflow-visible` utility to prevent content within an element from being clipped:

**Andrew Alfred**Technical advisor

    <div class="overflow-visible ..."> <!-- ... --></div>

Note that any content that overflows the bounds of the element will then be visible.

### Hiding content that overflows

Use the `overflow-hidden` utility to clip any content within an element that overflows the bounds of that element:

**Andrew Alfred**Technical advisor

    <div class="overflow-hidden ..."> <!-- ... --></div>

### Scrolling if needed

Use the `overflow-auto` utility to add scrollbars to an element in the event that its content overflows the bounds of that element:

Scroll vertically

**Andrew Alfred**Technical advisor

**Debra Houston**Analyst

**Jane White**Director, Marketing

**Ray Flint**Technical Advisor

    <div class="overflow-auto ..."> <!-- ... --></div>

Unlike `overflow-scroll`, which always shows scrollbars, this utility will only show them if scrolling is necessary.

### Scrolling horizontally if needed

Use the `overflow-x-auto` utility to allow horizontal scrolling if needed:

Scroll horizontally

**Andrew**

**Emily**

**Whitney**

**David**

**Kristin**

**Sarah**

    <div class="overflow-x-auto ..."> <!-- ... --></div>

### Scrolling vertically if needed

Use the `overflow-y-auto` utility to allow vertical scrolling if needed:

Scroll vertically

**Andrew Alfred**Technical advisor

**Debra Houston**Analyst

**Jane White**Director, Marketing

**Ray Flint**Technical Advisor

    <div class="h-32 overflow-y-auto ..."> <!-- ... --></div>

### Scrolling horizontally always

Use the `overflow-x-scroll` utility to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system:

Scroll horizontally

**Andrew**

**Emily**

**Whitney**

**David**

**Kristin**

**Sarah**

    <div class="overflow-x-scroll ..."> <!-- ... --></div>

### Scrolling vertically always

Use the `overflow-y-scroll` utility to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system:

Scroll vertically

**Andrew Alfred**Technical advisor

**Debra Houston**Analyst

**Jane White**Director, Marketing

**Ray Flint**Technical Advisor

    <div class="overflow-y-scroll ..."> <!-- ... --></div>

### Scrolling in all directions

Use the `overflow-scroll` utility to add scrollbars to an element:

Scroll vertically and horizontally

Sun

Mon

Tue

Wed

Thu

Fri

Sat

5 AM

6 AM

7 AM

8 AM

9 AM

10 AM

11 AM

12 PM

1 PM

2 PM

3 PM

4 PM

5 PM

6 PM

7 PM

8 PM

5 AMFlight to VancouverToronto YYZ

6 AMBreakfastMel's Diner

5 PM🎉 Party party 🎉We like to party!

    <div class="overflow-scroll ..."> <!-- ... --></div>

Unlike `overflow-auto`, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting.

### Responsive design

Prefix an `overflow` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="overflow-auto md:overflow-scroll ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/overscroll-behavior

Layout

Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.

| Class | Styles |
| --- | --- |
| `overscroll-auto` | 
`overscroll-behavior: auto;`

 |
| `overscroll-contain` | 

`overscroll-behavior: contain;`

 |
| `overscroll-none` | 

`overscroll-behavior: none;`

 |
| `overscroll-x-auto` | 

`overscroll-behavior-x: auto;`

 |
| `overscroll-x-contain` | 

`overscroll-behavior-x: contain;`

 |
| `overscroll-x-none` | 

`overscroll-behavior-x: none;`

 |
| `overscroll-y-auto` | 

`overscroll-behavior-y: auto;`

 |
| `overscroll-y-contain` | 

`overscroll-behavior-y: contain;`

 |
| `overscroll-y-none` | 

`overscroll-behavior-y: none;`

 |

## Examples

### Preventing parent overscrolling

Use the `overscroll-contain` utility to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve "bounce" effects when scrolling past the end of the container in operating systems that support it:

Scroll to see behavior

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.

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

    <div class="overscroll-contain ...">Well, let me tell you something, ...</div>

### Preventing overscroll bouncing

Use the `overscroll-none` utility to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent "bounce" effects when scrolling past the end of the container:

Scroll to see behavior

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.

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

    <div class="overscroll-none ...">Well, let me tell you something, ...</div>

### Using the default overscroll behavior

Use the `overscroll-auto` utility to make it possible for the user to continue scrolling a parent scroll area when they reach the boundary of the primary scroll area:

Scroll to see behavior

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.

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

    <div class="overscroll-auto ...">Well, let me tell you something, ...</div>

### Responsive design

Prefix an `overscroll-behavior` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="overscroll-auto md:overscroll-contain ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/position

Utilities for controlling how an element is positioned in the document.

| Class | Styles |
| --- | --- |
| `static` | 
`position: static;`

 |
| `fixed` | 

`position: fixed;`

 |
| `absolute` | 

`position: absolute;`

 |
| `relative` | 

`position: relative;`

 |
| `sticky` | 

`position: sticky;`

 |

## Examples

### Statically positioning elements

Use the `static` utility to position an element according to the normal flow of the document:

Static parent

Absolute child

    <div class="static ..."> <p>Static parent</p> <div class="absolute bottom-0 left-0 ..."> <p>Absolute child</p> </div></div>

With statically positioned elements, any offsets will be ignored and the element will not act as a position reference for absolutely positioned children.

### Relatively positioning elements

Use the `relative` utility to position an element according to the normal flow of the document:

Relative parent

Absolute child

    <div class="relative ..."> <p>Relative parent</p> <div class="absolute bottom-0 left-0 ..."> <p>Absolute child</p> </div></div>

With relatively position elements, any offsets are calculated relative to the element's normal position and the element will act as a position reference for absolutely positioned children.

### Absolutely positioning elements

Use the `absolute` utility to position an element _outside_ of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist:

With static positioning

Relative parent

Static parent

Static child?

Static sibling

With absolute positioning

Relative parent

Static parent

Absolute child

Static sibling

    <div class="static ..."> <!-- Static parent --> <div class="static ..."><p>Static child</p></div> <div class="inline-block ..."><p>Static sibling</p></div> <!-- Static parent --> <div class="absolute ..."><p>Absolute child</p></div> <div class="inline-block ..."><p>Static sibling</p></div></div>

With absolutely positioned elements, any offsets are calculated relative to the nearest parent that has a position other than `static`, and the element will act as a position reference for other absolutely positioned children.

### Fixed positioning elements

Use the `fixed` utility to position an element relative to the browser window:

Scroll this element to see the fixed positioning in action

Contacts

**Andrew Alfred**

**Debra Houston**

**Jane White**

**Ray Flint**

**Mindy Albrect**

**David Arnold**

    <div class="relative"> <div class="fixed top-0 right-0 left-0">Contacts</div> <div> <div> <img src="/img/andrew.jpg" /> <strong>Andrew Alfred</strong> </div> <div> <img src="/img/debra.jpg" /> <strong>Debra Houston</strong> </div> <!-- ... --> </div></div>

With fixed positioned elements, any offsets are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children:

### Sticky positioning elements

Use the `sticky` utility to position an element as `relative` until it crosses a specified threshold, then treat it as `fixed` until its parent is off screen:

Scroll this element to see the sticky positioning in action

A

**Andrew Alfred**

**Aisha Houston**

**Anna White**

**Andy Flint**

B

**Bob Alfred**

**Bianca Houston**

**Brianna White**

**Bert Flint**

C

**Colton Alfred**

**Cynthia Houston**

**Cheyenne White**

**Charlie Flint**

    <div> <div> <div class="sticky top-0 ...">A</div> <div> <div> <img src="/img/andrew.jpg" /> <strong>Andrew Alfred</strong> </div> <div> <img src="/img/aisha.jpg" /> <strong>Aisha Houston</strong> </div> <!-- ... --> </div> </div> <div> <div class="sticky top-0">B</div> <div> <div> <img src="/img/bob.jpg" /> <strong>Bob Alfred</strong> </div> <!-- ... --> </div> </div> <!-- ... --></div>

With sticky positioned elements, any offsets are calculated relative to the element's normal position and the element will act as a position reference for absolutely positioned children.

### Responsive design

Prefix a `position` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="relative md:absolute ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/top-right-bottom-left

Utilities for controlling the placement of positioned elements.

| Class | Styles |
| --- | --- |
| `inset-<number>` | 
`inset: calc(var(--spacing) * <number>);`

 |
| `-inset-<number>` | 

`inset: calc(var(--spacing) * -<number>);`

 |
| `inset-<fraction>` | 

`inset: calc(<fraction> * 100%);`

 |
| `-inset-<fraction>` | 

`inset: calc(<fraction> * -100%);`

 |
| `inset-px` | 

`inset: 1px;`

 |
| `-inset-px` | 

`inset: -1px;`

 |
| `inset-full` | 

`inset: 100%;`

 |
| `-inset-full` | 

`inset: -100%;`

 |
| `inset-auto` | 

`inset: auto;`

 |
| `inset-(<custom-property>)` | 

`inset: var(<custom-property>);`

 |

## Examples

### Basic example

Use `top-<number>`, `right-<number>`, `bottom-<number>`, `left-<number>`, and `inset-<number>` utilities like `top-0` and `bottom-4` to set the horizontal or vertical position of a positioned element:

01

02

03

04

05

06

07

08

09

    <!-- Pin to top left corner --><div class="relative size-32 ..."> <div class="absolute top-0 left-0 size-16 ...">01</div></div><!-- Span top edge --><div class="relative size-32 ..."> <div class="absolute inset-x-0 top-0 h-16 ...">02</div></div><!-- Pin to top right corner --><div class="relative size-32 ..."> <div class="absolute top-0 right-0 size-16 ...">03</div></div><!-- Span left edge --><div class="relative size-32 ..."> <div class="absolute inset-y-0 left-0 w-16 ...">04</div></div><!-- Fill entire parent --><div class="relative size-32 ..."> <div class="absolute inset-0 ...">05</div></div><!-- Span right edge --><div class="relative size-32 ..."> <div class="absolute inset-y-0 right-0 w-16 ...">06</div></div><!-- Pin to bottom left corner --><div class="relative size-32 ..."> <div class="absolute bottom-0 left-0 size-16 ...">07</div></div><!-- Span bottom edge --><div class="relative size-32 ..."> <div class="absolute inset-x-0 bottom-0 h-16 ...">08</div></div><!-- Pin to bottom right corner --><div class="relative size-32 ..."> <div class="absolute right-0 bottom-0 size-16 ...">09</div></div>

### Using negative values

To use a negative top/right/bottom/left value, prefix the class name with a dash to convert it to a negative value:

    <div class="relative size-32 ..."> <div class="absolute -top-4 -left-4 size-14 ..."></div></div>

### Using logical properties

Use `start-<number>` or `end-<number>` utilities like `start-0` and `end-4` to set the `inset-inline-start` and `inset-inline-end` logical properties, which map to either the left or right side based on the text direction:

Left-to-right

Right-to-left

    <div dir="ltr"> <div class="relative size-32 ..."> <div class="absolute start-0 top-0 size-14 ..."></div> </div> <div> <div dir="rtl"> <div class="relative size-32 ..."> <div class="absolute start-0 top-0 size-14 ..."></div> </div> <div></div> </div> </div></div>

For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

### Using a custom value

Use utilities like `inset-[<value>]` and `top-[<value>]` to set the position based on a completely custom value:

    <div class="inset-[3px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `inset-(<custom-property>)` syntax:

    <div class="inset-(--my-position) ..."> <!-- ... --></div>

This is just a shorthand for `inset-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix `inset`,`inset-x`,`inset-y`,`start`,`end`,`top`,`left`,`bottom`, and `right` utilities with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="top-4 md:top-6 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

The `inset-<number>`,`inset-x-<number>`,`inset-y-<number>`,`start-<number>`,`end-<number>`,`top-<number>`,`left-<number>`,`bottom-<number>`, and `right-<number>` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme:

    @theme { --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.

---

## Page: https://tailwindcss.com/docs/visibility

Utilities for controlling the visibility of an element.

| Class | Styles |
| --- | --- |
| `visible` | 
`visibility: visible;`

 |
| `invisible` | 

`visibility: hidden;`

 |
| `collapse` | 

`visibility: collapse;`

 |

## Examples

### Making elements invisible

Use the `invisible` utility to hide an element, but still maintain its place in the document, affecting the layout of other elements:

01

02

03

    <div class="grid grid-cols-3 gap-4"> <div>01</div> <div class="invisible ...">02</div> <div>03</div></div>

To completely remove an element from the document, use the display property instead.

### Collapsing elements

Use the `collapse` utility to hide table rows, row groups, columns, and column groups as if they were set to `display: none`, but without impacting the size of other rows and columns:

Showing all rows

| Invoice # | Client | Amount |
| --- | --- | --- |
| #100 | Pendant Publishing | $2,000.00 |
| #101 | Kruger Industrial Smoothing | $545.00 |
| #102 | J. Peterman | $10,000.25 |

Hiding a row using `` `collapse` ``

| Invoice # | Client | Amount |
| --- | --- | --- |
| #100 | Pendant Publishing | $2,000.00 |
| #101 | Kruger Industrial Smoothing | $545.00 |
| #102 | J. Peterman | $10,000.25 |

Hiding a row using `` `hidden` ``

| Invoice # | Client | Amount |
| --- | --- | --- |
| #100 | Pendant Publishing | $2,000.00 |
| #101 | Kruger Industrial Smoothing | $545.00 |
| #102 | J. Peterman | $10,000.25 |

    <table> <thead> <tr> <th>Invoice #</th> <th>Client</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>#100</td> <td>Pendant Publishing</td> <td>$2,000.00</td> </tr> <tr class="collapse"> <td>#101</td> <td>Kruger Industrial Smoothing</td> <td>$545.00</td> </tr> <tr> <td>#102</td> <td>J. Peterman</td> <td>$10,000.25</td> </tr> </tbody></table>

This makes it possible to dynamically toggle rows and columns without affecting the table layout.

### Making elements visible

Use the `visible` utility to make an element visible:

01

02

03

    <div class="grid grid-cols-3 gap-4"> <div>01</div> <div class="visible ...">02</div> <div>03</div></div>

This is mostly useful for undoing the `invisible` utility at different screen sizes.

### Responsive design

Prefix a `visibility` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="visible md:invisible ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/z-index

Utilities for controlling the stack order of an element.

| Class | Styles |
| --- | --- |
| `z-<number>` | 
`z-index: <number>;`

 |
| `z-auto` | 

`z-index: auto;`

 |
| `z-[<value>]` | 

`z-index: <value>;`

 |
| `z-(<custom-property>)` | 

`z-index: var(<custom-property>);`

 |

## Examples

### Basic example

Use the `z-<number>` utilities like `z-10` and `z-50` to control the stack order (or three-dimensional positioning) of an element, regardless of the order it has been displayed:

05

04

03

02

01

    <div class="z-40 ...">05</div><div class="z-30 ...">04</div><div class="z-20 ...">03</div><div class="z-10 ...">02</div><div class="z-0 ...">01</div>

### Using negative values

To use a negative z-index value, prefix the class name with a dash to convert it to a negative value:

01

02

03

04

05

    <div class="...">05</div><div class="...">04</div><div class="-z-10 ...">03</div><div class="...">02</div><div class="...">01</div>

### Using a custom value

Use the `z-[<value>]` syntax to set the stack order based on a completely custom value:

    <div class="z-[calc(var(--index)+1)] ..."> <!-- ... --></div>

For CSS variables, you can also use the `z-(<custom-property>)` syntax:

    <div class="z-(--my-z) ..."> <!-- ... --></div>

This is just a shorthand for `z-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `z-index` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="z-0 md:z-50 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/flex-basis

Utilities for controlling the initial size of flex items.

| Class | Styles |
| --- | --- |
| `basis-<number>` | 
`flex-basis: calc(var(--spacing) * <number>);`

 |
| `basis-<fraction>` | 

`flex-basis: calc(<fraction> * 100%);`

 |
| `basis-full` | 

`flex-basis: 100%;`

 |
| `basis-auto` | 

`flex-basis: auto;`

 |
| `basis-3xs` | 

`flex-basis: var(--container-3xs); /* 16rem (256px) */`

 |
| `basis-2xs` | 

`flex-basis: var(--container-2xs); /* 18rem (288px) */`

 |
| `basis-xs` | 

`flex-basis: var(--container-xs); /* 20rem (320px) */`

 |
| `basis-sm` | 

`flex-basis: var(--container-sm); /* 24rem (384px) */`

 |
| `basis-md` | 

`flex-basis: var(--container-md); /* 28rem (448px) */`

 |
| `basis-lg` | 

`flex-basis: var(--container-lg); /* 32rem (512px) */`

 |

## Examples

### Using the spacing scale

Use `basis-<number>` utilities like `basis-64` and `basis-128` to set the initial size of flex items based on the spacing scale:

01

02

03

    <div class="flex flex-row"> <div class="basis-64">01</div> <div class="basis-64">02</div> <div class="basis-128">03</div></div>

### Using the container scale

Use utilities like `basis-xs` and `basis-sm` to set the initial size of flex items based on the container scale:

01

02

03

04

    <div class="flex flex-row"> <div class="basis-3xs">01</div> <div class="basis-2xs">02</div> <div class="basis-xs">03</div> <div class="basis-sm">04</div></div>

### Using percentages

Use `basis-<fraction>` utilities like `basis-1/2` and `basis-2/3` to set the initial size of flex items:

01

02

    <div class="flex flex-row"> <div class="basis-1/3">01</div> <div class="basis-2/3">02</div></div>

### Using a custom value

Use the `basis-[<value>]` syntax to set the basis based on a completely custom value:

    <div class="basis-[30vw] ..."> <!-- ... --></div>

For CSS variables, you can also use the `basis-(<custom-property>)` syntax:

    <div class="basis-(--my-basis) ..."> <!-- ... --></div>

This is just a shorthand for `basis-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `flex-basis` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="flex flex-row"> <div class="basis-1/4 md:basis-1/3">01</div> <div class="basis-1/4 md:basis-1/3">02</div> <div class="basis-1/2 md:basis-1/3">03</div></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--container-*` theme variables to customize the fixed-width basis utilities in your project:

    @theme { --container-4xs: 14rem; }

Now the `basis-4xs` utility can be used in your markup:

    <div class="basis-4xs"> <!-- ... --></div>

The `basis-<number>` utilities are driven by the `--spacing` theme variable, which you can also customize:

    @theme { --spacing: 1px; }

Learn more about customizing the spacing scale in the theme documentation.

---

## Page: https://tailwindcss.com/docs/flex-direction

Utilities for controlling the direction of flex items.

| Class | Styles |
| --- | --- |
| `flex-row` | 
`flex-direction: row;`

 |
| `flex-row-reverse` | 

`flex-direction: row-reverse;`

 |
| `flex-col` | 

`flex-direction: column;`

 |
| `flex-col-reverse` | 

`flex-direction: column-reverse;`

 |

## Examples

### Row

Use `flex-row` to position flex items horizontally in the same direction as text:

01

02

03

    <div class="flex flex-row ..."> <div>01</div> <div>02</div> <div>03</div></div>

### Row reversed

Use `flex-row-reverse` to position flex items horizontally in the opposite direction:

01

02

03

    <div class="flex flex-row-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>

### Column

Use `flex-col` to position flex items vertically:

01

02

03

    <div class="flex flex-col ..."> <div>01</div> <div>02</div> <div>03</div></div>

### Column reversed

Use `flex-col-reverse` to position flex items vertically in the opposite direction:

01

02

03

    <div class="flex flex-col-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>

### Responsive design

Prefix a `flex-direction` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="flex flex-col md:flex-row ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/flex-wrap

Utilities for controlling how flex items wrap.

| Class | Styles |
| --- | --- |
| `flex-nowrap` | 
`flex-wrap: nowrap;`

 |
| `flex-wrap` | 

`flex-wrap: wrap;`

 |
| `flex-wrap-reverse` | 

`flex-wrap: wrap-reverse;`

 |

## Examples

### Don't wrap

Use `flex-nowrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:

01

02

03

    <div class="flex flex-nowrap"> <div>01</div> <div>02</div> <div>03</div></div>

### Wrap normally

Use `flex-wrap` to allow flex items to wrap:

01

02

03

    <div class="flex flex-wrap"> <div>01</div> <div>02</div> <div>03</div></div>

### Wrap reversed

Use `flex-wrap-reverse` to wrap flex items in the reverse direction:

01

02

03

    <div class="flex flex-wrap-reverse"> <div>01</div> <div>02</div> <div>03</div></div>

### Responsive design

Prefix a `flex-wrap` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="flex flex-wrap md:flex-wrap-reverse ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/flex

Utilities for controlling how flex items both grow and shrink.

| Class | Styles |
| --- | --- |
| `flex-<number>` | 
`flex: <number>;`

 |
| `flex-<fraction>` | 

`flex: calc(<fraction> * 100%);`

 |
| `flex-auto` | 

`flex: 1 1 auto;`

 |
| `flex-initial` | 

`flex: 0 1 auto;`

 |
| `flex-none` | 

`flex: none;`

 |
| `flex-(<custom-property>)` | 

`flex: var(<custom-property>);`

 |
| `flex-[<value>]` | 

`flex: <value>;`

 |

## Examples

### Basic example

Use `flex-<number>` utilities like `flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size:

01

02

03

    <div class="flex"> <div class="w-14 flex-none ...">01</div> <div class="w-64 flex-1 ...">02</div> <div class="w-32 flex-1 ...">03</div></div>

### Initial

Use `flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size:

01

02

03

    <div class="flex"> <div class="w-14 flex-none ...">01</div> <div class="w-64 flex-initial ...">02</div> <div class="w-32 flex-initial ...">03</div></div>

### Auto

Use `flex-auto` to allow a flex item to grow and shrink, taking into account its initial size:

01

02

03

    <div class="flex ..."> <div class="w-14 flex-none ...">01</div> <div class="w-64 flex-auto ...">02</div> <div class="w-32 flex-auto ...">03</div></div>

### None

Use `flex-none` to prevent a flex item from growing or shrinking:

01

02

03

    <div class="flex ..."> <div class="w-14 flex-none ...">01</div> <div class="w-32 flex-none ...">02</div> <div class="flex-1 ...">03</div></div>

### Using a custom value

Use the `flex-[<value>]` syntax to set the flex shorthand property based on a completely custom value:

    <div class="flex-[3_1_auto] ..."> <!-- ... --></div>

For CSS variables, you can also use the `flex-(<custom-property>)` syntax:

    <div class="flex-(--my-flex) ..."> <!-- ... --></div>

This is just a shorthand for `flex-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `flex` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="flex-none md:flex-1 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/flex-grow

Utilities for controlling how flex items grow.

| Class | Styles |
| --- | --- |
| `grow` | 
`flex-grow: 1;`

 |
| `grow-<number>` | 

`flex-grow: <number>;`

 |
| `grow-[<value>]` | 

`flex-grow: <value>;`

 |
| `grow-(<custom-property>)` | 

`flex-grow: var(<custom-property>);`

 |

## Examples

### Allowing items to grow

Use `grow` to allow a flex item to grow to fill any available space:

01

02

03

    <div class="flex ..."> <div class="size-14 flex-none ...">01</div> <div class="size-14 grow ...">02</div> <div class="size-14 flex-none ...">03</div></div>

### Growing items based on factor

Use `grow-<number>` utilities like `grow-3` to make flex items grow proportionally based on their growth factor, allowing them to fill the available space relative to each other:

01

02

03

    <div class="flex ..."> <div class="size-14 grow-3 ...">01</div> <div class="size-14 grow-7 ...">02</div> <div class="size-14 grow-3 ...">03</div></div>

### Preventing items from growing

Use `grow-0` to prevent a flex item from growing:

01

02

03

    <div class="flex ..."> <div class="size-14 grow ...">01</div> <div class="size-14 grow-0 ...">02</div> <div class="size-14 grow ...">03</div></div>

### Using a custom value

Use the `grow-[<value>]` syntax to set the flex grow factor based on a completely custom value:

    <div class="grow-[25vw] ..."> <!-- ... --></div>

For CSS variables, you can also use the `grow-(<custom-property>)` syntax:

    <div class="grow-(--my-grow) ..."> <!-- ... --></div>

This is just a shorthand for `grow-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `flex-grow` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="grow md:grow-0 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/flex-shrink

Utilities for controlling how flex items shrink.

| Class | Styles |
| --- | --- |
| `shrink` | 
`flex-shrink: 1;`

 |
| `shrink-<number>` | 

`flex-shrink: <number>;`

 |
| `shrink-[<value>]` | 

`flex-shrink: <value>;`

 |
| `shrink-(<custom-property>)` | 

`flex-shrink: var(<custom-property>);`

 |

## Examples

### Allowing flex items to shrink

Use `shrink` to allow a flex item to shrink if needed:

01

02

03

    <div class="flex ..."> <div class="h-14 w-14 flex-none ...">01</div> <div class="h-14 w-64 shrink ...">02</div> <div class="h-14 w-14 flex-none ...">03</div></div>

### Preventing items from shrinking

Use `shrink-0` to prevent a flex item from shrinking:

01

02

03

    <div class="flex ..."> <div class="h-16 flex-1 ...">01</div> <div class="h-16 w-32 shrink-0 ...">02</div> <div class="h-16 flex-1 ...">03</div></div>

### Using a custom value

Use the `shrink-[<value>]` syntax to set the flex shrink factor based on a completely custom value:

    <div class="shrink-[calc(100vw-var(--sidebar))] ..."> <!-- ... --></div>

For CSS variables, you can also use the `shrink-(<custom-property>)` syntax:

    <div class="shrink-(--my-shrink) ..."> <!-- ... --></div>

This is just a shorthand for `shrink-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `flex-shrink` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="shrink md:shrink-0 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/order

Utilities for controlling the order of flex and grid items.

| Class | Styles |
| --- | --- |
| `order-<number>` | 
`order: <number>;`

 |
| `-order-<number>` | 

`order: calc(<number> * -1);`

 |
| `order-first` | 

`order: calc(-infinity);`

 |
| `order-last` | 

`order: calc(infinity);`

 |
| `order-none` | 

`order: 0;`

 |
| `order-(<custom-property>)` | 

`order: var(<custom-property>);`

 |
| `order-[<value>]` | 

`order: <value>;`

 |

## Examples

### Explicitly setting a sort order

Use `order-<number>` utilities like `order-1` and `order-3` to render flex and grid items in a different order than they appear in the document:

01

02

03

    <div class="flex justify-between ..."> <div class="order-3 ...">01</div> <div class="order-1 ...">02</div> <div class="order-2 ...">03</div></div>

### Ordering items first or last

Use the `order-first` and `order-last` utilities to render flex and grid items first or last:

01

02

03

    <div class="flex justify-between ..."> <div class="order-last ...">01</div> <div class="...">02</div> <div class="order-first ...">03</div></div>

### Using negative values

To use a negative order value, prefix the class name with a dash to convert it to a negative value:

    <div class="-order-1"> <!-- ... --></div>

### Using a custom value

Use the `order-[<value>]` syntax to set the order based on a completely custom value:

    <div class="order-[min(var(--total-items),10)] ..."> <!-- ... --></div>

For CSS variables, you can also use the `order-(<custom-property>)` syntax:

    <div class="order-(--my-order) ..."> <!-- ... --></div>

This is just a shorthand for `order-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix an `order` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="order-first md:order-last ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/grid-template-columns

Utilities for specifying the columns in a grid layout.

| Class | Styles |
| --- | --- |
| `grid-cols-<number>` | 
`grid-template-columns: repeat(<number>, minmax(0, 1fr));`

 |
| `grid-cols-none` | 

`grid-template-columns: none;`

 |
| `grid-cols-subgrid` | 

`grid-template-columns: subgrid;`

 |
| `grid-cols-[<value>]` | 

`grid-template-columns: <value>;`

 |
| `grid-cols-(<custom-property>)` | 

`grid-template-columns: var(<custom-property>);`

 |

## Examples

### Specifying the grid columns

Use `grid-cols-<number>` utilities like `grid-cols-2` and `grid-cols-4` to create grids with _n_ equally sized columns:

01

02

03

04

05

06

07

08

09

    <div class="grid grid-cols-4 gap-4"> <div>01</div> <!-- ... --> <div>09</div></div>

### Implementing a subgrid

Use the `grid-cols-subgrid` utility to adopt the column tracks defined by the item's parent:

01

02

03

04

05

06

    <div class="grid grid-cols-4 gap-4"> <div>01</div> <!-- ... --> <div>05</div> <div class="col-span-3 grid grid-cols-subgrid gap-4"> <div class="col-start-2">06</div> </div></div>

### Using a custom value

Use the `grid-cols-[<value>]` syntax to set the columns based on a completely custom value:

    <div class="grid-cols-[200px_minmax(900px,_1fr)_100px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `grid-cols-(<custom-property>)` syntax:

    <div class="grid-cols-(--my-grid-cols) ..."> <!-- ... --></div>

This is just a shorthand for `grid-cols-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `grid-template-columns` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="grid grid-cols-1 md:grid-cols-6 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/grid-column

| Class | Styles |
| --- | --- |
| `col-span-<number>` | 
`grid-column: span <number> / span <number>;`

 |
| `col-span-full` | 

`grid-column: 1 / -1;`

 |
| `col-span-(<custom-property>)` | 

`grid-column: span var(<custom-property>) / span var(<custom-property>);`

 |
| `col-span-[<value>]` | 

`grid-column: span <value> / span <value>;`

 |
| `col-start-<number>` | 

`grid-column-start: <number>;`

 |
| `-col-start-<number>` | 

`grid-column-start: calc(<number> * -1);`

 |
| `col-start-auto` | 

`grid-column-start: auto;`

 |
| `col-start-(<custom-property>)` | 

`grid-column-start: var(<custom-property>);`

 |
| `col-start-[<value>]` | 

`grid-column-start: <value>;`

 |
| `col-end-<number>` | 

`grid-column-end: <number>;`

 |

## Examples

### Spanning columns

Use `col-span-<number>` utilities like `col-span-2` and `col-span-4` to make an element span _n_ columns:

01

02

03

04

05

06

07

    <div class="grid grid-cols-3 gap-4"> <div class="...">01</div> <div class="...">02</div> <div class="...">03</div> <div class="col-span-2 ...">04</div> <div class="...">05</div> <div class="...">06</div> <div class="col-span-2 ...">07</div></div>

### Starting and ending lines

Use `col-start-<number>` or `col-end-<number>` utilities like `col-start-2` and `col-end-3` to make an element start or end at the _nth_ grid line:

01

02

03

04

    <div class="grid grid-cols-6 gap-4"> <div class="col-span-4 col-start-2 ...">01</div> <div class="col-start-1 col-end-3 ...">02</div> <div class="col-span-2 col-end-7 ...">03</div> <div class="col-start-1 col-end-7 ...">04</div></div>

These can also be combined with the `col-span-<number>` utilities to span a specific number of columns.

### Using a custom value

Use utilities like `col-[<value>]`,`col-span-[<value>]`,`col-start-[<value>]`, and `col-end-[<value>]` to set the grid column size and location based on a completely custom value:

    <div class="col-[16_/_span_16] ..."> <!-- ... --></div>

For CSS variables, you can also use the `col-(<custom-property>)` syntax:

    <div class="col-(--my-columns) ..."> <!-- ... --></div>

This is just a shorthand for `col-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix `grid-column`,`grid-column-start`, and `grid-column-end` utilities with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="col-span-2 md:col-span-6 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/grid-template-rows

Utilities for specifying the rows in a grid layout.

| Class | Styles |
| --- | --- |
| `grid-rows-<number>` | 
`grid-template-rows: repeat(<number>, minmax(0, 1fr));`

 |
| `grid-rows-none` | 

`grid-template-rows: none;`

 |
| `grid-rows-subgrid` | 

`grid-template-rows: subgrid;`

 |
| `grid-rows-[<value>]` | 

`grid-template-rows: <value>;`

 |
| `grid-rows-(<custom-property>)` | 

`grid-template-rows: var(<custom-property>);`

 |

## Examples

### Specifying the grid rows

Use `grid-rows-<number>` utilities like `grid-rows-2` and `grid-rows-4` to create grids with _n_ equally sized rows:

01

02

03

04

05

06

07

08

09

    <div class="grid grid-flow-col grid-rows-4 gap-4"> <div>01</div> <!-- ... --> <div>09</div></div>

### Implementing a subgrid

Use the `grid-rows-subgrid` utility to adopt the row tracks defined by the item's parent:

01

02

03

04

05

06

07

08

09

10

    <div class="grid grid-flow-col grid-rows-4 gap-4"> <div>01</div> <!-- ... --> <div>05</div> <div class="row-span-3 grid grid-rows-subgrid gap-4"> <div class="row-start-2">06</div> </div> <div>07</div> <!-- ... --> <div>10</div></div>

### Using a custom value

Use the `grid-rows-[<value>]` syntax to set the rows based on a completely custom value:

    <div class="grid-rows-[200px_minmax(900px,1fr)_100px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `grid-rows-(<custom-property>)` syntax:

    <div class="grid-rows-(--my-grid-rows) ..."> <!-- ... --></div>

This is just a shorthand for `grid-rows-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `grid-template-rows` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="grid grid-rows-2 md:grid-rows-6 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/grid-row

Utilities for controlling how elements are sized and placed across grid rows.

| Class | Styles |
| --- | --- |
| `row-span-<number>` | 
`grid-row: span <number> / span <number>;`

 |
| `row-span-full` | 

`grid-row: 1 / -1;`

 |
| `row-span-(<custom-property>)` | 

`grid-row: span var(<custom-property>) / span var(<custom-property>);`

 |
| `row-span-[<value>]` | 

`grid-row: span <value> / span <value>;`

 |
| `row-start-<number>` | 

`grid-row-start: <number>;`

 |
| `-row-start-<number>` | 

`grid-row-start: calc(<number> * -1);`

 |
| `row-start-auto` | 

`grid-row-start: auto;`

 |
| `row-start-(<custom-property>)` | 

`grid-row-start: var(<custom-property>);`

 |
| `row-start-[<value>]` | 

`grid-row-start: <value>;`

 |
| `row-end-<number>` | 

`grid-row-end: <number>;`

 |

## Examples

### Spanning rows

Use `row-span-<number>` utilities like `row-span-2` and `row-span-4` to make an element span _n_ rows:

01

02

03

    <div class="grid grid-flow-col grid-rows-3 gap-4"> <div class="row-span-3 ...">01</div> <div class="col-span-2 ...">02</div> <div class="col-span-2 row-span-2 ...">03</div></div>

### Starting and ending lines

Use `row-start-<number>` or `row-end-<number>` utilities like `row-start-2` and `row-end-3` to make an element start or end at the _nth_ grid line:

01

02

03

    <div class="grid grid-flow-col grid-rows-3 gap-4"> <div class="row-span-2 row-start-2 ...">01</div> <div class="row-span-2 row-end-3 ...">02</div> <div class="row-start-1 row-end-4 ...">03</div></div>

These can also be combined with the `row-span-<number>` utilities to span a specific number of rows.

### Using a custom value

Use utilities like `row-[<value>]`,`row-span-[<value>]`,`row-start-[<value>]`, and `row-end-[<value>]` to set the grid row size and location based on a completely custom value:

    <div class="row-[span_16_/_span_16] ..."> <!-- ... --></div>

For CSS variables, you can also use the `row-(<custom-property>)` syntax:

    <div class="row-(--my-rows) ..."> <!-- ... --></div>

This is just a shorthand for `row-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix `grid-row`,`grid-row-start`, and `grid-row-end` utilities with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="row-span-3 md:row-span-4 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/grid-auto-flow

Utilities for controlling how elements in a grid are auto-placed.

| Class | Styles |
| --- | --- |
| `grid-flow-row` | 
`grid-auto-flow: row;`

 |
| `grid-flow-col` | 

`grid-auto-flow: column;`

 |
| `grid-flow-dense` | 

`grid-auto-flow: dense;`

 |
| `grid-flow-row-dense` | 

`grid-auto-flow: row dense;`

 |
| `grid-flow-col-dense` | 

`grid-auto-flow: column dense;`

 |

## Examples

### Basic example

Use utilities like `grid-flow-col` and `grid-flow-row-dense` to control how the auto-placement algorithm works for a grid layout:

01

02

03

04

05

    <div class="grid grid-flow-row-dense grid-cols-3 grid-rows-3 ..."> <div class="col-span-2">01</div> <div class="col-span-2">02</div> <div>03</div> <div>04</div> <div>05</div></div>

### Responsive design

Prefix a `grid-auto-flow` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="grid grid-flow-col md:grid-flow-row ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/grid-auto-columns

Utilities for controlling the size of implicitly-created grid columns.

| Class | Styles |
| --- | --- |
| `auto-cols-auto` | 
`grid-auto-columns: auto;`

 |
| `auto-cols-min` | 

`grid-auto-columns: min-content;`

 |
| `auto-cols-max` | 

`grid-auto-columns: max-content;`

 |
| `auto-cols-fr` | 

`grid-auto-columns: minmax(0, 1fr);`

 |
| `auto-cols-(<custom-property>)` | 

`grid-auto-columns: var(<custom-property>);`

 |
| `auto-cols-[<value>]` | 

`grid-auto-columns: <value>;`

 |

## Examples

### Basic example

Use utilities like `auto-cols-min` and `auto-cols-max` to control the size of implicitly-created grid columns:

    <div class="grid auto-cols-max grid-flow-col"> <div>01</div> <div>02</div> <div>03</div></div>

### Using a custom value

Use the `auto-cols-[<value>]` syntax to set the size of implicitly-created grid columns based on a completely custom value:

    <div class="auto-cols-[minmax(0,2fr)] ..."> <!-- ... --></div>

For CSS variables, you can also use the `auto-cols-(<custom-property>)` syntax:

    <div class="auto-cols-(--my-auto-cols) ..."> <!-- ... --></div>

This is just a shorthand for `auto-cols-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `grid-auto-columns` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="grid grid-flow-col auto-cols-max md:auto-cols-min ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/grid-auto-rows

Utilities for controlling the size of implicitly-created grid rows.

| Class | Styles |
| --- | --- |
| `auto-rows-auto` | 
`grid-auto-rows: auto;`

 |
| `auto-rows-min` | 

`grid-auto-rows: min-content;`

 |
| `auto-rows-max` | 

`grid-auto-rows: max-content;`

 |
| `auto-rows-fr` | 

`grid-auto-rows: minmax(0, 1fr);`

 |
| `auto-rows-(<custom-property>)` | 

`grid-auto-rows: var(<custom-property>);`

 |
| `auto-rows-[<value>]` | 

`grid-auto-rows: <value>;`

 |

## Examples

### Basic example

Use utilities like `auto-rows-min` and `auto-rows-max` to control the size of implicitly-created grid rows:

    <div class="grid grid-flow-row auto-rows-max"> <div>01</div> <div>02</div> <div>03</div></div>

### Using a custom value

Use the `auto-rows-[<value>]` syntax to set the size of implicitly-created grid rows based on a completely custom value:

    <div class="auto-rows-[minmax(0,2fr)] ..."> <!-- ... --></div>

For CSS variables, you can also use the `auto-rows-(<custom-property>)` syntax:

    <div class="auto-rows-(--my-auto-rows) ..."> <!-- ... --></div>

This is just a shorthand for `auto-rows-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `grid-auto-rows` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="grid grid-flow-row auto-rows-max md:auto-rows-min ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/gap

Utilities for controlling gutters between grid and flexbox items.

| Class | Styles |
| --- | --- |
| `gap-<number>` | 
`gap: calc(var(--spacing) * <value>);`

 |
| `gap-(<custom-property>)` | 

`gap: var(<custom-property>);`

 |
| `gap-[<value>]` | 

`gap: <value>;`

 |
| `gap-x-<number>` | 

`column-gap: calc(var(--spacing) * <value>);`

 |
| `gap-x-(<custom-property>)` | 

`column-gap: var(<custom-property>);`

 |
| `gap-x-[<value>]` | 

`column-gap: <value>;`

 |
| `gap-y-<number>` | 

`row-gap: calc(var(--spacing) * <value>);`

 |
| `gap-y-(<custom-property>)` | 

`row-gap: var(<custom-property>);`

 |
| `gap-y-[<value>]` | 

`row-gap: <value>;`

 |

## Examples

### Basic example

Use `gap-<number>` utilities like `gap-2` and `gap-4` to change the gap between both rows and columns in grid and flexbox layouts:

01

02

03

04

    <div class="grid grid-cols-2 gap-4"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>

### Changing row and column gaps independently

Use `gap-x-<number>` or `gap-y-<number>` utilities like `gap-x-8` and `gap-y-4` to change the gap between columns and rows independently:

01

02

03

04

05

06

    <div class="grid grid-cols-3 gap-x-8 gap-y-4"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

### Using a custom value

Use utilities like `gap-[<value>]`,`gap-x-[<value>]`, and `gap-y-[<value>]` to set the gap based on a completely custom value:

    <div class="gap-[10vw] ..."> <!-- ... --></div>

For CSS variables, you can also use the `gap-(<custom-property>)` syntax:

    <div class="gap-(--my-gap) ..."> <!-- ... --></div>

This is just a shorthand for `gap-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix `gap`,`column-gap`, and `row-gap` utilities with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="grid gap-4 md:gap-6 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/justify-content

Utilities for controlling how flex and grid items are positioned along a container's main axis.

| Class | Styles |
| --- | --- |
| `justify-start` | 
`justify-content: flex-start;`

 |
| `justify-end` | 

`justify-content: flex-end;`

 |
| `justify-end-safe` | 

`justify-content: safe flex-end;`

 |
| `justify-center` | 

`justify-content: center;`

 |
| `justify-center-safe` | 

`justify-content: safe center;`

 |
| `justify-between` | 

`justify-content: space-between;`

 |
| `justify-around` | 

`justify-content: space-around;`

 |
| `justify-evenly` | 

`justify-content: space-evenly;`

 |
| `justify-stretch` | 

`justify-content: stretch;`

 |
| `justify-baseline` | 

`justify-content: baseline;`

 |
| `justify-normal` | 

`justify-content: normal;`

 |

## Examples

### Start

Use the `justify-start` utility to justify items against the start of the container's main axis:

01

02

03

    <div class="flex justify-start ..."> <div>01</div> <div>02</div> <div>03</div></div>

### Center

Use the `justify-center` or `justify-center-safe` utilities to justify items along the center of the container's main axis:

Resize the container to see the alignment behavior

justify-center

01

02

03

04

justify-center-safe

01

02

03

04

justify-center

    <div class="flex justify-center ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>

justify-center-safe

    <div class="flex justify-center-safe ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>

When there is not enough space available, the `justify-center-safe` utility will align items to the start of the container instead of the center.

### End

Use the `justify-end` or `justify-end-safe` utilities to justify items against the end of the container's main axis:

Resize the container to see the alignment behavior

justify-end

01

02

03

04

justify-end-safe

01

02

03

04

justify-end

    <div class="flex justify-end ..."> <div>01</div> <div>02</div> <div>03</div> <div>03</div></div>

justify-end-safe

    <div class="flex justify-end-safe ..."> <div>01</div> <div>02</div> <div>03</div> <div>03</div></div>

When there is not enough space available, the `justify-end-safe` utility will align items to the start of the container instead of the end.

### Space between

Use the `justify-between` utility to justify items along the container's main axis such that there is an equal amount of space between each item:

01

02

03

    <div class="flex justify-between ..."> <div>01</div> <div>02</div> <div>03</div></div>

### Space around

Use the `justify-around` utility to justify items along the container's main axis such that there is an equal amount of space on each side of each item:

01

02

03

    <div class="flex justify-around ..."> <div>01</div> <div>02</div> <div>03</div></div>

### Space evenly

Use the `justify-evenly` utility to justify items along the container's main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `justify-around`:

01

02

03

    <div class="flex justify-evenly ..."> <div>01</div> <div>02</div> <div>03</div></div>

### Stretch

Use the `justify-stretch` utility to allow content items to fill the available space along the container's main axis:

01

02

03

    <div class="flex justify-stretch ..."> <div>01</div> <div>02</div> <div>03</div></div>

### Normal

Use the `justify-normal` utility to pack content items in their default position as if no `justify-content` value was set:

01

02

03

    <div class="flex justify-normal ..."> <div>01</div> <div>02</div> <div>03</div></div>

### Responsive design

Prefix a `justify-content` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="flex justify-start md:justify-between ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/justify-items

Utilities for controlling how grid items are aligned along their inline axis.

| Class | Styles |
| --- | --- |
| `justify-items-start` | 
`justify-items: start;`

 |
| `justify-items-end` | 

`justify-items: end;`

 |
| `justify-items-end-safe` | 

`justify-items: safe end;`

 |
| `justify-items-center` | 

`justify-items: center;`

 |
| `justify-items-center-safe` | 

`justify-items: safe center;`

 |
| `justify-items-stretch` | 

`justify-items: stretch;`

 |
| `justify-items-normal` | 

`justify-items: normal;`

 |

## Examples

### Start

Use the `justify-items-start` utility to justify grid items against the start of their inline axis:

01

02

03

04

05

06

    <div class="grid justify-items-start ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

### End

Use the `justify-items-end` or `justify-items-end-safe` utilities to justify grid items against the end of their inline axis:

Resize the container to see the alignment behavior

justify-items-end

01

02

03

justify-items-end-safe

01

02

03

justify-items-end

    <div class="grid grid-flow-col justify-items-end ..."> <div>01</div> <div>02</div> <div>03</div></div>

justify-items-end-safe

    <div class="grid grid-flow-col justify-items-end-safe ..."> <div>01</div> <div>02</div> <div>03</div></div>

When there is not enough space available, the `justify-items-end-safe` utility will align items to the start of the container instead of the end.

### Center

Use the `justify-items-center` or `justify-items-center-safe` utilities to justify grid items against the end of their inline axis:

Resize the container to see the alignment behavior

justify-items-center

01

02

03

justify-items-center-safe

01

02

03

justify-items-center

    <div class="grid grid-flow-col justify-items-center ..."> <div>01</div> <div>02</div> <div>03</div></div>

justify-items-center-safe

    <div class="grid grid-flow-col justify-items-center-safe ..."> <div>01</div> <div>02</div> <div>03</div></div>

When there is not enough space available, the `justify-items-center-safe` utility will align items to the start of the container instead of the center.

### Stretch

Use the `justify-items-stretch` utility to stretch items along their inline axis:

01

02

03

04

05

06

    <div class="grid justify-items-stretch ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

### Responsive design

Prefix a `justify-items` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="grid justify-items-start md:justify-items-center ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/justify-self

Utilities for controlling how an individual grid item is aligned along its inline axis.

| Class | Styles |
| --- | --- |
| `justify-self-auto` | 
`justify-self: auto;`

 |
| `justify-self-start` | 

`justify-self: start;`

 |
| `justify-self-center` | 

`justify-self: center;`

 |
| `justify-self-center-safe` | 

`justify-self: safe center;`

 |
| `justify-self-end` | 

`justify-self: end;`

 |
| `justify-self-end-safe` | 

`justify-self: safe end;`

 |
| `justify-self-stretch` | 

`justify-self: stretch;`

 |

## Examples

### Auto

Use the `justify-self-auto` utility to align an item based on the value of the grid's `justify-items` property:

01

02

03

04

05

06

    <div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-auto ...">02</div> <!-- ... --></div>

### Start

Use the `justify-self-start` utility to align a grid item to the start of its inline axis:

01

02

03

04

05

06

    <div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-start ...">02</div> <!-- ... --></div>

### Center

Use the `justify-self-center` or `justify-self-center-safe` utilities to align a grid item along the center of its inline axis:

Resize the container to see the alignment behavior

justify-self-center

01

02

03

justify-self-center-safe

01

02

03

justify-self-center

    <div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-center ...">02</div> <!-- ... --></div>

justify-self-center-safe

    <div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-center-safe ...">02</div> <!-- ... --></div>

When there is not enough space available, the `justify-self-center-safe` utility will align the item to the start of the container instead of the end.

### End

Use the `justify-self-end` or `justify-self-end-safe` utilities to align a grid item to the end of its inline axis:

Resize the container to see the alignment behavior

justify-self-end

01

02

03

justify-self-end-safe

01

02

03

justify-self-end

    <div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-end ...">02</div> <!-- ... --></div>

justify-self-end-safe

    <div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-end-safe ...">02</div> <!-- ... --></div>

When there is not enough space available, the `justify-self-end-safe` utility will align the item to the start of the container instead of the end.

### Stretch

Use the `justify-self-stretch` utility to stretch a grid item to fill the grid area on its inline axis:

01

02

03

04

05

06

    <div class="grid justify-items-start ..."> <!-- ... --> <div class="justify-self-stretch ...">02</div> <!-- ... --></div>

### Responsive design

Prefix a `justify-self` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="justify-self-start md:justify-self-end ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/align-content

Utilities for controlling how rows are positioned in multi-row flex and grid containers.

| Class | Styles |
| --- | --- |
| `content-normal` | 
`align-content: normal;`

 |
| `content-center` | 

`align-content: center;`

 |
| `content-start` | 

`align-content: flex-start;`

 |
| `content-end` | 

`align-content: flex-end;`

 |
| `content-between` | 

`align-content: space-between;`

 |
| `content-around` | 

`align-content: space-around;`

 |
| `content-evenly` | 

`align-content: space-evenly;`

 |
| `content-baseline` | 

`align-content: baseline;`

 |
| `content-stretch` | 

`align-content: stretch;`

 |

## Examples

### Start

Use `content-start` to pack rows in a container against the start of the cross axis:

01

02

03

04

05

    <div class="grid h-56 grid-cols-3 content-start gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>

### Center

Use `content-center` to pack rows in a container in the center of the cross axis:

01

02

03

04

05

    <div class="grid h-56 grid-cols-3 content-center gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>

### End

Use `content-end` to pack rows in a container against the end of the cross axis:

01

02

03

04

05

    <div class="grid h-56 grid-cols-3 content-end gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>

### Space between

Use `content-between` to distribute rows in a container such that there is an equal amount of space between each line:

01

02

03

04

05

    <div class="grid h-56 grid-cols-3 content-between gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>

### Space around

Use `content-around` to distribute rows in a container such that there is an equal amount of space around each line:

01

02

03

04

05

    <div class="grid h-56 grid-cols-3 content-around gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>

### Space evenly

Use `content-evenly` to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `content-around`:

01

02

03

04

05

    <div class="grid h-56 grid-cols-3 content-evenly gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>

### Stretch

Use `content-stretch` to allow content items to fill the available space along the container’s cross axis:

01

02

03

04

05

    <div class="grid h-56 grid-cols-3 content-stretch gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>

### Normal

Use `content-normal` to pack content items in their default position as if no `align-content` value was set:

01

02

03

04

05

    <div class="grid h-56 grid-cols-3 content-normal gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>

### Responsive design

Prefix an `align-content` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="grid content-start md:content-around ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/align-items

Utilities for controlling how flex and grid items are positioned along a container's cross axis.

| Class | Styles |
| --- | --- |
| `items-start` | 
`align-items: flex-start;`

 |
| `items-end` | 

`align-items: flex-end;`

 |
| `items-end-safe` | 

`align-items: safe flex-end;`

 |
| `items-center` | 

`align-items: center;`

 |
| `items-center-safe` | 

`align-items: safe center;`

 |
| `items-baseline` | 

`align-items: baseline;`

 |
| `items-baseline-last` | 

`align-items: last baseline;`

 |
| `items-stretch` | 

`align-items: stretch;`

 |

## Examples

### Stretch

Use the `items-stretch` utility to stretch items to fill the container's cross axis:

01

02

03

    <div class="flex items-stretch ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>

### Start

Use the `items-start` utility to align items to the start of the container's cross axis:

01

02

03

    <div class="flex items-start ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>

### Center

Use the `items-center` utility to align items along the center of the container's cross axis:

01

02

03

    <div class="flex items-center ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>

### End

Use the `items-end` utility to align items to the end of the container's cross axis:

01

02

03

    <div class="flex items-end ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>

### Baseline

Use the `items-baseline` utility to align items along the container's cross axis such that all of their baselines align:

01

02

03

    <div class="flex items-baseline ..."> <div class="pt-2 pb-6">01</div> <div class="pt-8 pb-12">02</div> <div class="pt-12 pb-4">03</div></div>

### Last baseline

Use the `items-baseline-last` utility to align items along the container's cross axis such that all of their baselines align with the last baseline in the container:

Spencer Sharp

Working on the future of astronaut recruitment at Space Recruit.

spacerecruit.com

    <div class="grid grid-cols-[1fr_auto] items-baseline-last"> <div> <img src="img/spencer-sharp.jpg" /> <h4>Spencer Sharp</h4> <p>Working on the future of astronaut recruitment at Space Recruit.</p> </div> <p>spacerecruit.com</p></div>

This is useful for ensuring that text items align with each other, even if they have different heights.

### Responsive design

Prefix an `align-items` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="flex items-stretch md:items-center ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/align-self

Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.

| Class | Styles |
| --- | --- |
| `self-auto` | 
`align-self: auto;`

 |
| `self-start` | 

`align-self: flex-start;`

 |
| `self-end` | 

`align-self: flex-end;`

 |
| `self-end-safe` | 

`align-self: safe flex-end;`

 |
| `self-center` | 

`align-self: center;`

 |
| `self-center-safe` | 

`align-self: safe center;`

 |
| `self-stretch` | 

`align-self: stretch;`

 |
| `self-baseline` | 

`align-self: baseline;`

 |
| `self-baseline-last` | 

`align-self: last baseline;`

 |

## Examples

### Auto

Use the `self-auto` utility to align an item based on the value of the container's `align-items` property:

01

02

03

    <div class="flex items-stretch ..."> <div>01</div> <div class="self-auto ...">02</div> <div>03</div></div>

### Start

Use the `self-start` utility to align an item to the start of the container's cross axis, despite the container's `align-items` value:

01

02

03

    <div class="flex items-stretch ..."> <div>01</div> <div class="self-start ...">02</div> <div>03</div></div>

### Center

Use the `self-center` utility to align an item along the center of the container's cross axis, despite the container's `align-items` value:

01

02

03

    <div class="flex items-stretch ..."> <div>01</div> <div class="self-center ...">02</div> <div>03</div></div>

### End

Use the `self-end` utility to align an item to the end of the container's cross axis, despite the container's `align-items` value:

01

02

03

    <div class="flex items-stretch ..."> <div>01</div> <div class="self-end ...">02</div> <div>03</div></div>

### Stretch

Use the `self-stretch` utility to stretch an item to fill the container's cross axis, despite the container's `align-items` value:

01

02

03

    <div class="flex items-stretch ..."> <div>01</div> <div class="self-stretch ...">02</div> <div>03</div></div>

### Baseline

Use the `self-baseline` utility to align an item such that its baseline aligns with the baseline of the flex container's cross axis:

01

02

03

    <div class="flex ..."> <div class="self-baseline pt-2 pb-6">01</div> <div class="self-baseline pt-8 pb-12">02</div> <div class="self-baseline pt-12 pb-4">03</div></div>

### Last baseline

Use the `self-baseline-last` utility to align an item along the container's cross axis such that its baseline aligns with the last baseline in the container:

Spencer Sharp

Working on the future of astronaut recruitment at Space Recruit.

spacerecruit.com

    <div class="grid grid-cols-[1fr_auto]"> <div> <img src="img/spencer-sharp.jpg" /> <h4>Spencer Sharp</h4> <p class="self-baseline-last">Working on the future of astronaut recruitment at Space Recruit.</p> </div> <p class="self-baseline-last">spacerecruit.com</p></div>

This is useful for ensuring that text items align with each other, even if they have different heights.

### Responsive design

Prefix an `align-self` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="self-auto md:self-end ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/place-content

| Class | Styles |
| --- | --- |
| `place-content-center` | 
`place-content: center;`

 |
| `place-content-center-safe` | 

`place-content: safe center;`

 |
| `place-content-start` | 

`place-content: start;`

 |
| `place-content-end` | 

`place-content: end;`

 |
| `place-content-end-safe` | 

`place-content: safe end;`

 |
| `place-content-between` | 

`place-content: space-between;`

 |
| `place-content-around` | 

`place-content: space-around;`

 |
| `place-content-evenly` | 

`place-content: space-evenly;`

 |
| `place-content-baseline` | 

`place-content: baseline;`

 |
| `place-content-stretch` | 

`place-content: stretch;`

 |

## Examples

### Center

Use `place-content-center` to pack items in the center of the block axis:

01

02

03

04

    <div class="grid h-48 grid-cols-2 place-content-center gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>

### Start

Use `place-content-start` to pack items against the start of the block axis:

01

02

03

04

    <div class="grid h-48 grid-cols-2 place-content-start gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>

### End

Use `place-content-end` to pack items against the end of the block axis:

01

02

03

04

    <div class="grid h-48 grid-cols-2 place-content-end gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>

### Space between

Use `place-content-between` to distribute grid items along the block axis so that there is an equal amount of space between each row on the block axis:

01

02

03

04

    <div class="grid h-48 grid-cols-2 place-content-between gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>

### Space around

Use `place-content-around` to distribute grid items such that there is an equal amount of space around each row on the block axis:

01

02

03

04

    <div class="grid h-48 grid-cols-2 place-content-around gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>

### Space evenly

Use `place-content-evenly` to distribute grid items such that they are evenly spaced on the block axis:

01

02

03

04

    <div class="grid h-48 grid-cols-2 place-content-evenly gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>

### Stretch

Use `place-content-stretch` to stretch grid items along their grid areas on the block axis:

01

02

03

04

    <div class="grid h-48 grid-cols-2 place-content-stretch gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>

### Responsive design

Prefix a `place-content` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="grid place-content-start md:place-content-center ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/place-items

Utilities for controlling how items are justified and aligned at the same time.

| Class | Styles |
| --- | --- |
| `place-items-start` | 
`place-items: start;`

 |
| `place-items-end` | 

`place-items: end;`

 |
| `place-items-end-safe` | 

`place-items: safe end;`

 |
| `place-items-center` | 

`place-items: center;`

 |
| `place-items-center-safe` | 

`place-items: safe center;`

 |
| `place-items-baseline` | 

`place-items: baseline;`

 |
| `place-items-stretch` | 

`place-items: stretch;`

 |

## Examples

### Start

Use `place-items-start` to place grid items on the start of their grid areas on both axes:

01

02

03

04

05

06

    <div class="grid grid-cols-3 place-items-start gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

### End

Use `place-items-end` to place grid items on the end of their grid areas on both axes:

01

02

03

04

05

06

    <div class="grid h-56 grid-cols-3 place-items-end gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

### Center

Use `place-items-center` to place grid items on the center of their grid areas on both axes:

01

02

03

04

05

06

    <div class="grid h-56 grid-cols-3 place-items-center gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

### Stretch

Use `place-items-stretch` to stretch items along their grid areas on both axes:

01

02

03

04

05

06

    <div class="grid h-56 grid-cols-3 place-items-stretch gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

## Responsive design

Prefix a `place-items` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="grid place-items-start md:place-items-center ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/place-self

Utilities for controlling how an individual item is justified and aligned at the same time.

| Class | Styles |
| --- | --- |
| `place-self-auto` | 
`place-self: auto;`

 |
| `place-self-start` | 

`place-self: start;`

 |
| `place-self-end` | 

`place-self: end;`

 |
| `place-self-end-safe` | 

`place-self: safe end;`

 |
| `place-self-center` | 

`place-self: center;`

 |
| `place-self-center-safe` | 

`place-self: safe center;`

 |
| `place-self-stretch` | 

`place-self: stretch;`

 |

## Examples

### Auto

Use `place-self-auto` to align an item based on the value of the container's `place-items` property:

01

02

03

04

05

06

    <div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-auto ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

### Start

Use `place-self-start` to align an item to the start on both axes:

01

02

03

04

05

06

    <div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-start ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

### Center

Use `place-self-center` to align an item at the center on both axes:

01

02

03

04

05

06

    <div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-center ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

### End

Use `place-self-end` to align an item to the end on both axes:

01

02

03

04

05

06

    <div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-end ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

### Stretch

Use `place-self-stretch` to stretch an item on both axes:

01

02

03

04

05

06

    <div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-stretch ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>

### Responsive design

Prefix a `place-self` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="place-self-start md:place-self-end ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/padding

Utilities for controlling an element's padding.

| Class | Styles |
| --- | --- |
| `p-<number>` | 
`padding: calc(var(--spacing) * <number>);`

 |
| `p-px` | 

`padding: 1px;`

 |
| `p-(<custom-property>)` | 

`padding: var(<custom-property>);`

 |
| `p-[<value>]` | 

`padding: <value>;`

 |
| `px-<number>` | 

`padding-inline: calc(var(--spacing) * <number>);`

 |
| `px-px` | 

`padding-inline: 1px;`

 |
| `px-(<custom-property>)` | 

`padding-inline: var(<custom-property>);`

 |
| `px-[<value>]` | 

`padding-inline: <value>;`

 |
| `py-<number>` | 

`padding-block: calc(var(--spacing) * <number>);`

 |
| `py-px` | 

`padding-block: 1px;`

 |

## Examples

### Basic example

Use `p-<number>` utilities like `p-4` and `p-8` to control the padding on all sides of an element:

p-8

    <div class="p-8 ...">p-8</div>

### Adding padding to one side

Use `pt-<number>`, `pr-<number>`, `pb-<number>`, and `pl-<number>` utilities like `pt-6` and `pr-4` to control the padding on one side of an element:

pt-6

pr-4

pb-8

pl-2

    <div class="pt-6 ...">pt-6</div><div class="pr-4 ...">pr-4</div><div class="pb-8 ...">pb-8</div><div class="pl-2 ...">pl-2</div>

### Adding horizontal padding

Use `px-<number>` utilities like `px-4` and `px-8` to control the horizontal padding of an element:

px-8

    <div class="px-8 ...">px-8</div>

### Adding vertical padding

Use `py-<number>` utilities like `py-4` and `py-8` to control the vertical padding of an element:

py-8

    <div class="py-8 ...">py-8</div>

### Using logical properties

Use `ps-<number>` or `pe-<number>` utilities like `ps-4` and `pe-8` to set the `padding-inline-start` and `padding-inline-end` logical properties, which map to either the left or right side based on the text direction:

Left-to-right

ps-8

pe-8

Right-to-left

ps-8

pe-8

    <div> <div dir="ltr"> <div class="ps-8 ...">ps-8</div> <div class="pe-8 ...">pe-8</div> </div> <div dir="rtl"> <div class="ps-8 ...">ps-8</div> <div class="pe-8 ...">pe-8</div> </div></div>

For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

### Using a custom value

Use utilities like `p-[<value>]`,`px-[<value>]`, and `pb-[<value>]` to set the padding based on a completely custom value:

    <div class="p-[5px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `p-(<custom-property>)` syntax:

    <div class="p-(--my-padding) ..."> <!-- ... --></div>

This is just a shorthand for `p-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `padding` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="py-4 md:py-8 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

The `p-<number>`,`px-<number>`,`py-<number>`,`ps-<number>`,`pe-<number>`,`pt-<number>`,`pr-<number>`,`pb-<number>`, and `pl-<number>` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme:

    @theme { --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.

---

## Page: https://tailwindcss.com/docs/margin

Utilities for controlling an element's margin.

| Class | Styles |
| --- | --- |
| `m-<number>` | 
`margin: calc(var(--spacing) * <number>);`

 |
| `-m-<number>` | 

`margin: calc(var(--spacing) * -<number>);`

 |
| `m-auto` | 

`margin: auto;`

 |
| `m-px` | 

`margin: 1px;`

 |
| `-m-px` | 

`margin: -1px;`

 |
| `m-(<custom-property>)` | 

`margin: var(<custom-property>);`

 |
| `m-[<value>]` | 

`margin: <value>;`

 |
| `mx-<number>` | 

`margin-inline: calc(var(--spacing) * <number>);`

 |
| `-mx-<number>` | 

`margin-inline: calc(var(--spacing) * -<number>);`

 |
| `mx-auto` | 

`margin-inline: auto;`

 |

## Examples

### Basic example

Use `m-<number>` utilities like `m-4` and `m-8` to control the margin on all sides of an element:

m-8

    <div class="m-8 ...">m-8</div>

### Adding margin to a single side

Use `mt-<number>`, `mr-<number>`, `mb-<number>`, and `ml-<number>` utilities like `ml-2` and `mt-6` to control the margin on one side of an element:

mt-6

mr-4

mb-8

ml-2

    <div class="mt-6 ...">mt-6</div><div class="mr-4 ...">mr-4</div><div class="mb-8 ...">mb-8</div><div class="ml-2 ...">ml-2</div>

### Adding horizontal margin

Use `mx-<number>` utilities like `mx-4` and `mx-8` to control the horizontal margin of an element:

mx-8

    <div class="mx-8 ...">mx-8</div>

### Adding vertical margin

Use `my-<number>` utilities like `my-4` and `my-8` to control the vertical margin of an element:

my-8

    <div class="my-8 ...">my-8</div>

### Using negative values

To use a negative margin value, prefix the class name with a dash to convert it to a negative value:

\-mt-8

    <div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div><div class="-mt-8 bg-sky-300 ...">-mt-8</div>

### Using logical properties

Use `ms-<number>` or `me-<number>` utilities like `ms-4` and `me-8` to set the `margin-inline-start` and `margin-inline-end` logical properties:

Left-to-right

ms-8

me-8

Right-to-left

ms-8

me-8

    <div> <div dir="ltr"> <div class="ms-8 ...">ms-8</div> <div class="me-8 ...">me-8</div> </div> <div dir="rtl"> <div class="ms-8 ...">ms-8</div> <div class="me-8 ...">me-8</div> </div></div>

### Adding space between children

Use `space-x-<number>` or `space-y-<number>` utilities like `space-x-4` and `space-y-8` to control the space between elements:

01

02

03

    <div class="flex space-x-4 ..."> <div>01</div> <div>02</div> <div>03</div></div>

#### Reversing children order

If your elements are in reverse order (using say `flex-row-reverse` or `flex-col-reverse`), use the `space-x-reverse` or `space-y-reverse` utilities to ensure the space is added to the correct side of each element:

01

02

03

    <div class="flex flex-row-reverse space-x-4 space-x-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>

#### Limitations

The space utilities are really just a shortcut for adding margin to all-but-the-last-item in a group, and aren't designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.

For those situations, it's better to use the gap utilities when possible, or add margin to every element with a matching negative margin on the parent.

Additionally, the space utilities are not designed to work together with the divide utilities. For those situations, consider adding margin/padding utilities to the children instead.

### Using a custom value

Use utilities like `m-[<value>]`,`mx-[<value>]`, and `mb-[<value>]` to set the margin based on a completely custom value:

    <div class="m-[5px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `m-(<custom-property>)` syntax:

    <div class="m-(--my-margin) ..."> <!-- ... --></div>

This is just a shorthand for `m-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `margin` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="mt-4 md:mt-8 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

The `m-<number>`,`mx-<number>`,`my-<number>`,`ms-<number>`,`me-<number>`,`mt-<number>`,`mr-<number>`,`mb-<number>`, and `ml-<number>` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme:

    @theme { --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.

---

## Page: https://tailwindcss.com/docs/width

Utilities for setting the width of an element.

| Class | Styles |
| --- | --- |
| `w-<number>` | 
`width: calc(var(--spacing) * <number>);`

 |
| `w-<fraction>` | 

`width: calc(<fraction> * 100%);`

 |
| `w-3xs` | 

`width: var(--container-3xs); /* 16rem (256px) */`

 |
| `w-2xs` | 

`width: var(--container-2xs); /* 18rem (288px) */`

 |
| `w-xs` | 

`width: var(--container-xs); /* 20rem (320px) */`

 |
| `w-sm` | 

`width: var(--container-sm); /* 24rem (384px) */`

 |
| `w-md` | 

`width: var(--container-md); /* 28rem (448px) */`

 |
| `w-lg` | 

`width: var(--container-lg); /* 32rem (512px) */`

 |
| `w-xl` | 

`width: var(--container-xl); /* 36rem (576px) */`

 |
| `w-2xl` | 

`width: var(--container-2xl); /* 42rem (672px) */`

 |

## Examples

### Basic example

Use `w-<number>` utilities like `w-24` and `w-64` to set an element to a fixed width based on the spacing scale:

w-96

w-80

w-64

w-48

w-40

w-32

w-24

    <div class="w-96 ...">w-96</div><div class="w-80 ...">w-80</div><div class="w-64 ...">w-64</div><div class="w-48 ...">w-48</div><div class="w-40 ...">w-40</div><div class="w-32 ...">w-32</div><div class="w-24 ...">w-24</div>

### Using a percentage

Use `w-full` or `w-<fraction>` utilities like `w-1/2` and `w-2/5` to give an element a percentage-based width:

w-1/2

w-1/2

w-2/5

w-3/5

w-1/3

w-2/3

w-1/4

w-3/4

w-1/5

w-4/5

w-1/6

w-5/6

w-full

    <div class="flex ..."> <div class="w-1/2 ...">w-1/2</div> <div class="w-1/2 ...">w-1/2</div></div><div class="flex ..."> <div class="w-2/5 ...">w-2/5</div> <div class="w-3/5 ...">w-3/5</div></div><div class="flex ..."> <div class="w-1/3 ...">w-1/3</div> <div class="w-2/3 ...">w-2/3</div></div><div class="flex ..."> <div class="w-1/4 ...">w-1/4</div> <div class="w-3/4 ...">w-3/4</div></div><div class="flex ..."> <div class="w-1/5 ...">w-1/5</div> <div class="w-4/5 ...">w-4/5</div></div><div class="flex ..."> <div class="w-1/6 ...">w-1/6</div> <div class="w-5/6 ...">w-5/6</div></div><div class="w-full ...">w-full</div>

### Using the container scale

Use utilities like `w-sm` and `w-xl` to set an element to a fixed width based on the container scale:

w-xl

w-lg

w-md

w-sm

w-xs

w-2xs

w-3xs

    <div class="w-xl ...">w-xl</div><div class="w-lg ...">w-lg</div><div class="w-md ...">w-md</div><div class="w-sm ...">w-sm</div><div class="w-xs ...">w-xs</div><div class="w-2xs ...">w-2xs</div><div class="w-3xs ...">w-3xs</div>

### Matching the viewport

Use the `w-screen` utility to make an element span the entire width of the viewport:

    <div class="w-screen"> <!-- ... --></div>

Alternatively, you can match the width of the large, small or dynamic viewports using the `w-lvw`, `w-svw`, and `w-dvw` utilities.

### Resetting the width

Use the `w-auto` utility to remove an element's assigned width under a specific condition, like at a particular breakpoint:

    <div class="w-full md:w-auto"> <!-- ... --></div>

### Setting both width and height

Use utilities like `size-px`, `size-4`, and `size-full` to set both the width and height of an element at the same time:

size-16

size-20

size-24

size-32

size-40

    <div class="size-16 ...">size-16</div><div class="size-20 ...">size-20</div><div class="size-24 ...">size-24</div><div class="size-32 ...">size-32</div><div class="size-40 ...">size-40</div>

### Using a custom value

Use the `w-[<value>]` syntax to set the width based on a completely custom value:

    <div class="w-[5px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `w-(<custom-property>)` syntax:

    <div class="w-(--my-width) ..."> <!-- ... --></div>

This is just a shorthand for `w-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `width` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="w-1/2 md:w-full ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

The `w-<number>` and `size-<number>` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme:

    @theme { --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.

---

## Page: https://tailwindcss.com/docs/min-width

Utilities for setting the minimum width of an element.

| Class | Styles |
| --- | --- |
| `min-w-<number>` | 
`min-width: calc(var(--spacing) * <number>);`

 |
| `min-w-<fraction>` | 

`min-width: calc(<fraction> * 100%);`

 |
| `min-w-3xs` | 

`min-width: var(--container-3xs); /* 16rem (256px) */`

 |
| `min-w-2xs` | 

`min-width: var(--container-2xs); /* 18rem (288px) */`

 |
| `min-w-xs` | 

`min-width: var(--container-xs); /* 20rem (320px) */`

 |
| `min-w-sm` | 

`min-width: var(--container-sm); /* 24rem (384px) */`

 |
| `min-w-md` | 

`min-width: var(--container-md); /* 28rem (448px) */`

 |
| `min-w-lg` | 

`min-width: var(--container-lg); /* 32rem (512px) */`

 |
| `min-w-xl` | 

`min-width: var(--container-xl); /* 36rem (576px) */`

 |
| `min-w-2xl` | 

`min-width: var(--container-2xl); /* 42rem (672px) */`

 |

## Examples

### Basic example

Use `min-w-<number>` utilities like `min-w-24` and `min-w-64` to set an element to a fixed minimum width based on the spacing scale:

min-w-80

min-w-64

min-w-48

min-w-40

min-w-32

min-w-24

    <div class="w-20 ..."> <div class="min-w-80 ...">min-w-80</div> <div class="min-w-64 ...">min-w-64</div> <div class="min-w-48 ...">min-w-48</div> <div class="min-w-40 ...">min-w-40</div> <div class="min-w-32 ...">min-w-32</div> <div class="min-w-24 ...">min-w-24</div></div>

### Using a percentage

Use `min-w-full` or `min-w-<fraction>` utilities like `min-w-1/2` and `min-w-2/5` to give an element a percentage-based minimum width:

min-w-3/4

w-full

    <div class="flex ..."> <div class="min-w-3/4 ...">min-w-3/4</div> <div class="w-full ...">w-full</div></div>

### Using the container scale

Use utilities like `min-w-sm` and `min-w-xl` to set an element to a fixed minimum width based on the container scale:

min-w-lg

min-w-md

min-w-sm

min-w-xs

min-w-2xs

min-w-3xs

    <div class="w-40 ..."> <div class="min-w-lg ...">min-w-lg</div> <div class="min-w-md ...">min-w-md</div> <div class="min-w-sm ...">min-w-sm</div> <div class="min-w-xs ...">min-w-xs</div> <div class="min-w-2xs ...">min-w-2xs</div> <div class="min-w-3xs ...">min-w-3xs</div></div>

### Using a custom value

Use the `min-w-[<value>]` syntax to set the minimum width based on a completely custom value:

    <div class="min-w-[220px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `min-w-(<custom-property>)` syntax:

    <div class="min-w-(--my-min-width) ..."> <!-- ... --></div>

This is just a shorthand for `min-w-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `min-width` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="w-24 min-w-full md:min-w-0 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

The `min-w-<number>` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme:

    @theme { --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.

---

## Page: https://tailwindcss.com/docs/max-width

Utilities for setting the maximum width of an element.

| Class | Styles |
| --- | --- |
| `max-w-<number>` | 
`max-width: calc(var(--spacing) * <number>);`

 |
| `max-w-<fraction>` | 

`max-width: calc(<fraction> * 100%);`

 |
| `max-w-3xs` | 

`max-width: var(--container-3xs); /* 16rem (256px) */`

 |
| `max-w-2xs` | 

`max-width: var(--container-2xs); /* 18rem (288px) */`

 |
| `max-w-xs` | 

`max-width: var(--container-xs); /* 20rem (320px) */`

 |
| `max-w-sm` | 

`max-width: var(--container-sm); /* 24rem (384px) */`

 |
| `max-w-md` | 

`max-width: var(--container-md); /* 28rem (448px) */`

 |
| `max-w-lg` | 

`max-width: var(--container-lg); /* 32rem (512px) */`

 |
| `max-w-xl` | 

`max-width: var(--container-xl); /* 36rem (576px) */`

 |
| `max-w-2xl` | 

`max-width: var(--container-2xl); /* 42rem (672px) */`

 |

## Examples

### Basic example

Use `max-w-<number>` utilities like `max-w-24` and `max-w-64` to set an element to a fixed maximum width based on the spacing scale:

Resize the example to see the expected behavior

max-w-96

max-w-80

max-w-64

max-w-48

max-w-40

max-w-32

max-w-24

    <div class="w-full max-w-96 ...">max-w-96</div><div class="w-full max-w-80 ...">max-w-80</div><div class="w-full max-w-64 ...">max-w-64</div><div class="w-full max-w-48 ...">max-w-48</div><div class="w-full max-w-40 ...">max-w-40</div><div class="w-full max-w-32 ...">max-w-32</div><div class="w-full max-w-24 ...">max-w-24</div>

### Using a percentage

Use `max-w-full` or `max-w-<fraction>` utilities like `max-w-1/2` and `max-w-2/5` to give an element a percentage-based maximum width:

Resize the example to see the expected behavior

max-w-9/10

max-w-3/4

max-w-1/2

max-w-1/3

    <div class="w-full max-w-9/10 ...">max-w-9/10</div><div class="w-full max-w-3/4 ...">max-w-3/4</div><div class="w-full max-w-1/2 ...">max-w-1/2</div><div class="w-full max-w-1/3 ...">max-w-1/3</div>

### Using the container scale

Use utilities like `max-w-sm` and `max-w-xl` to set an element to a fixed maximum width based on the container scale:

Resize the example to see the expected behavior

Andrew Alfred

Assistant to the Traveling Secretary

    <div class="max-w-md ..."> <!-- ... --></div>

### Using breakpoints container

Use the `container` utility to set the maximum width of an element to match the `min-width` of the current breakpoint. This is useful if you'd prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport:

    <div class="container"> <!-- ... --></div>

Note that unlike containers you might have used in other frameworks, Tailwind's container does not center itself automatically and does not have any built-in horizontal padding. Use `mx-auto` and the `px-<number>` utilities to add these:

    <div class="container mx-auto px-4"> <!-- ... --></div>

### Using a custom value

Use the `max-w-[<value>]` syntax to set the maximum width based on a completely custom value:

    <div class="max-w-[220px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `max-w-(<custom-property>)` syntax:

    <div class="max-w-(--my-max-width) ..."> <!-- ... --></div>

This is just a shorthand for `max-w-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `max-width` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="max-w-sm md:max-w-lg ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

The `max-w-<number>` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme:

    @theme { --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.

---

## Page: https://tailwindcss.com/docs/height

Utilities for setting the height of an element.

| Class | Styles |
| --- | --- |
| `h-<number>` | 
`height: calc(var(--spacing) * <number>);`

 |
| `h-<fraction>` | 

`height: calc(<fraction> * 100%);`

 |
| `h-auto` | 

`height: auto;`

 |
| `h-px` | 

`height: 1px;`

 |
| `h-full` | 

`height: 100%;`

 |
| `h-screen` | 

`height: 100vh;`

 |
| `h-dvh` | 

`height: 100dvh;`

 |
| `h-dvw` | 

`height: 100dvw;`

 |
| `h-lvh` | 

`height: 100lvh;`

 |
| `h-lvw` | 

`height: 100lvw;`

 |

## Examples

### Basic example

Use `h-<number>` utilities like `h-24` and `h-64` to set an element to a fixed height based on the spacing scale:

h-96

h-80

h-64

h-48

h-40

h-32

h-24

    <div class="h-96 ...">h-96</div><div class="h-80 ...">h-80</div><div class="h-64 ...">h-64</div><div class="h-48 ...">h-48</div><div class="h-40 ...">h-40</div><div class="h-32 ...">h-32</div><div class="h-24 ...">h-24</div>

### Using a percentage

Use `h-full` or `h-<fraction>` utilities like `h-1/2` and `h-2/5` to give an element a percentage-based height:

h-full

h-9/10

h-3/4

h-1/2

h-1/3

    <div class="h-full ...">h-full</div><div class="h-9/10 ...">h-9/10</div><div class="h-3/4 ...">h-3/4</div><div class="h-1/2 ...">h-1/2</div><div class="h-1/3 ...">h-1/3</div>

### Matching viewport

Use the `h-screen` utility to make an element span the entire height of the viewport:

    <div class="h-screen"> <!-- ... --></div>

### Matching dynamic viewport

Use the `h-dvh` utility to make an element span the entire height of the viewport, which changes as the browser UI expands or contracts:

Scroll the viewport to see the viewport height change

tailwindcss.com

h-dvh

    <div class="h-dvh"> <!-- ... --></div>

### Matching large viewport

Use the `h-lvh` utility to set an element's height to the largest possible height of the viewport:

Scroll the viewport to see the viewport height change

tailwindcss.com

h-lvh

    <div class="h-lvh"> <!-- ... --></div>

### Matching small viewport

Use the `h-svh` utility to set an element's height to the smallest possible height of the viewport:

Scroll the viewport to see the viewport height change

tailwindcss.com

h-svh

    <div class="h-svh"> <!-- ... --></div>

### Setting both width and height

Use utilities like `size-px`, `size-4`, and `size-full` to set both the width and height of an element at the same time:

size-16

size-20

size-24

size-32

size-40

    <div class="size-16 ...">size-16</div><div class="size-20 ...">size-20</div><div class="size-24 ...">size-24</div><div class="size-32 ...">size-32</div><div class="size-40 ...">size-40</div>

### Using a custom value

Use the `h-[<value>]` syntax to set the height based on a completely custom value:

    <div class="h-[32rem] ..."> <!-- ... --></div>

For CSS variables, you can also use the `h-(<custom-property>)` syntax:

    <div class="h-(--my-height) ..."> <!-- ... --></div>

This is just a shorthand for `h-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `height` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="h-1/2 md:h-full ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

The `h-<number>` and `size-<number>` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme:

    @theme { --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.

---

## Page: https://tailwindcss.com/docs/color

Utilities for controlling the text color of an element.

| Class | Styles |
| --- | --- |
| `text-inherit` | 
`color: inherit;`

 |
| `text-current` | 

`color: currentColor;`

 |
| `text-transparent` | 

`color: transparent;`

 |
| `text-black` | 

`color: var(--color-black); /* #000 */`

 |
| `text-white` | 

`color: var(--color-white); /* #fff */`

 |
| `text-red-50` | 

`color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`

 |
| `text-red-100` | 

`color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`

 |
| `text-red-200` | 

`color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`

 |
| `text-red-300` | 

`color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`

 |
| `text-red-400` | 

`color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`

 |

## Examples

### Basic example

Use utilities like `text-blue-600` and `text-sky-400` to control the text color of an element:

The quick brown fox jumps over the lazy dog.

    <p class="text-blue-600 dark:text-sky-400">The quick brown fox...</p>

### Changing the opacity

Use the color opacity modifier to control the text color opacity of an element:

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

    <p class="text-blue-600/100 dark:text-sky-400/100">The quick brown fox...</p><p class="text-blue-600/75 dark:text-sky-400/75">The quick brown fox...</p><p class="text-blue-600/50 dark:text-sky-400/50">The quick brown fox...</p><p class="text-blue-600/25 dark:text-sky-400/25">The quick brown fox...</p>

### Using a custom value

Use the `text-[<value>]` syntax to set the text color based on a completely custom value:

    <p class="text-[#50d71e] ..."> Lorem ipsum dolor sit amet...</p>

For CSS variables, you can also use the `text-(<custom-property>)` syntax:

    <p class="text-(--my-color) ..."> Lorem ipsum dolor sit amet...</p>

This is just a shorthand for `text-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Applying on hover

Prefix a `color` utility with a variant like `hover:*` to only apply the utility in that state:

Hover over the text to see the expected behavior

Oh I gotta get on that internet, I'm late on everything!

    <p class="..."> Oh I gotta get on that <a class="underline hover:text-blue-600 dark:hover:text-blue-400" href="https://en.wikipedia.org/wiki/Internet">internet</a>, I'm late on everything!</p>

Learn more about using variants in the variants documentation.

### Responsive design

Prefix a `color` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="text-blue-600 md:text-green-600 ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `text-regal-blue` utility can be used in your markup:

    <p class="text-regal-blue"> Lorem ipsum dolor sit amet...</p>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/text-decoration-line

Utilities for controlling the decoration of text.

| Class | Styles |
| --- | --- |
| `underline` | 
`text-decoration-line: underline;`

 |
| `overline` | 

`text-decoration-line: overline;`

 |
| `line-through` | 

`text-decoration-line: line-through;`

 |
| `no-underline` | 

`text-decoration-line: none;`

 |

## Examples

### Underling text

Use the `underline` utility to add an underline to the text of an element:

The quick brown fox jumps over the lazy dog.

    <p class="underline">The quick brown fox...</p>

### Adding an overline to text

Use the `overline` utility to add an overline to the text of an element:

The quick brown fox jumps over the lazy dog.

    <p class="overline">The quick brown fox...</p>

### Adding a line through text

Use the `line-through` utility to add a line through the text of an element:

The quick brown fox jumps over the lazy dog.

    <p class="line-through">The quick brown fox...</p>

### Removing a line from text

Use the `no-underline` utility to remove a line from the text of an element:

The quick brown fox jumps over the lazy dog.

    <p class="no-underline">The quick brown fox...</p>

### Applying on hover

Prefix a `text-decoration-line` utility with a variant like `hover:*` to only apply the utility in that state:

Hover over the text to see the expected behavior

    <p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>

Learn more about using variants in the variants documentation.

### Responsive design

Prefix a `text-decoration-line` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <a class="no-underline md:underline ..." href="..."> <!-- ... --></a>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/text-decoration-color

Utilities for controlling the color of text decorations.

| Class | Styles |
| --- | --- |
| `decoration-inherit` | 
`text-decoration-color: inherit;`

 |
| `decoration-current` | 

`text-decoration-color: currentColor;`

 |
| `decoration-transparent` | 

`text-decoration-color: transparent;`

 |
| `decoration-black` | 

`text-decoration-color: var(--color-black); /* #000 */`

 |
| `decoration-white` | 

`text-decoration-color: var(--color-white); /* #fff */`

 |
| `decoration-red-50` | 

`text-decoration-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`

 |
| `decoration-red-100` | 

`text-decoration-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`

 |
| `decoration-red-200` | 

`text-decoration-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`

 |
| `decoration-red-300` | 

`text-decoration-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`

 |
| `decoration-red-400` | 

`text-decoration-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`

 |

## Examples

### Basic example

Use utilities like `decoration-sky-500` and `decoration-pink-500` to change the text decoration color of an element:

    <p> I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at <a class="underline decoration-sky-500">My Company, Inc</a>. Outside of work, I like to <a class="underline decoration-pink-500">watch pod-racing</a> and have <a class="underline decoration-indigo-500">light-saber</a> fights.</p>

### Changing the opacity

Use the color opacity modifier to control the text decoration color opacity of an element:

    <p> I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at <a class="underline decoration-sky-500/30">My Company, Inc</a>. Outside of work, I like to <a class="underline decoration-pink-500/30">watch pod-racing</a> and have <a class="underline decoration-indigo-500/30">light-saber</a> fights.</p>

### Using a custom value

Use the `decoration-[<value>]` syntax to set the text decoration color based on a completely custom value:

    <p class="decoration-[#50d71e] ..."> Lorem ipsum dolor sit amet...</p>

For CSS variables, you can also use the `decoration-(<custom-property>)` syntax:

    <p class="decoration-(--my-color) ..."> Lorem ipsum dolor sit amet...</p>

This is just a shorthand for `decoration-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Applying on hover

Prefix a `text-decoration-color` utility with a variant like `hover:*` to only apply the utility in that state:

Hover over the text to see the expected behavior

    <p>The <a href="..." class="underline hover:decoration-pink-500 ...">quick brown fox</a> jumps over the lazy dog.</p>

Learn more about using variants in the variants documentation.

### Responsive design

Prefix a `text-decoration-color` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="underline decoration-sky-600 md:decoration-blue-400 ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `decoration-regal-blue` utility can be used in your markup:

    <p class="decoration-regal-blue"> Lorem ipsum dolor sit amet...</p>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/text-decoration-style

Typography

Utilities for controlling the style of text decorations.

| Class | Styles |
| --- | --- |
| `decoration-solid` | 
`text-decoration-style: solid;`

 |
| `decoration-double` | 

`text-decoration-style: double;`

 |
| `decoration-dotted` | 

`text-decoration-style: dotted;`

 |
| `decoration-dashed` | 

`text-decoration-style: dashed;`

 |
| `decoration-wavy` | 

`text-decoration-style: wavy;`

 |

## Examples

### Basic example

Use utilities like `decoration-dotted` and `decoration-dashed` to change the text decoration style of an element:

decoration-solid

The quick brown fox jumps over the lazy dog.

decoration-double

The quick brown fox jumps over the lazy dog.

decoration-dotted

The quick brown fox jumps over the lazy dog.

decoration-dashed

The quick brown fox jumps over the lazy dog.

decoration-wavy

The quick brown fox jumps over the lazy dog.

    <p class="underline decoration-solid">The quick brown fox...</p><p class="underline decoration-double">The quick brown fox...</p><p class="underline decoration-dotted">The quick brown fox...</p><p class="underline decoration-dashed">The quick brown fox...</p><p class="underline decoration-wavy">The quick brown fox...</p>

### Responsive design

Prefix a `text-decoration-style` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="underline md:decoration-dashed ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

### On this page

*   Quick reference
*   Examples
    *   Basic example
    *   Responsive design

5-day mini-course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course →

---

## Page: https://tailwindcss.com/docs/text-decoration-thickness

Utilities for controlling the thickness of text decorations.

| Class | Styles |
| --- | --- |
| `decoration-<number>` | 
`text-decoration-thickness: <number>px;`

 |
| `decoration-from-font` | 

`text-decoration-thickness: from-font;`

 |
| `decoration-auto` | 

`text-decoration-thickness: auto;`

 |
| `decoration-(length:<custom-property>)` | 

`text-decoration-thickness: var(<custom-property>);`

 |
| `decoration-[<value>]` | 

`text-decoration-thickness: <value>;`

 |

## Examples

### Basic example

Use `decoration-<number>` utilities like `decoration-2` and `decoration-4` to change the text decoration thickness of an element:

decoration-1

The quick brown fox jumps over the lazy dog.

decoration-2

The quick brown fox jumps over the lazy dog.

decoration-4

The quick brown fox jumps over the lazy dog.

    <p class="underline decoration-1">The quick brown fox...</p><p class="underline decoration-2">The quick brown fox...</p><p class="underline decoration-4">The quick brown fox...</p>

### Using a custom value

Use the `decoration-[<value>]` syntax to set the text decoration thickness based on a completely custom value:

    <p class="decoration-[0.25rem] ..."> Lorem ipsum dolor sit amet...</p>

For CSS variables, you can also use the `decoration-(length:<custom-property>)` syntax:

    <p class="decoration-(length:--my-decoration-thickness) ..."> Lorem ipsum dolor sit amet...</p>

This is just a shorthand for `decoration-[length:var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `text-decoration-thickness` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="underline md:decoration-4 ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/text-underline-offset

Utilities for controlling the offset of a text underline.

| Class | Styles |
| --- | --- |
| `underline-offset-<number>` | 
`text-underline-offset: <number>px;`

 |
| `-underline-offset-<number>` | 

`text-underline-offset: calc(<number>px * -1);`

 |
| `underline-offset-auto` | 

`text-underline-offset: auto;`

 |
| `underline-offset-(<custom-property>)` | 

`text-underline-offset: var(<custom-property>);`

 |
| `underline-offset-[<value>]` | 

`text-underline-offset: <value>;`

 |

## Examples

### Basic example

Use `underline-offset-<number>` utilities like `underline-offset-2` and `underline-offset-4` to change the offset of a text underline:

underline-offset-1

The quick brown fox jumps over the lazy dog.

underline-offset-2

The quick brown fox jumps over the lazy dog.

underline-offset-4

The quick brown fox jumps over the lazy dog.

underline-offset-8

The quick brown fox jumps over the lazy dog.

    <p class="underline underline-offset-1">The quick brown fox...</p><p class="underline underline-offset-2">The quick brown fox...</p><p class="underline underline-offset-4">The quick brown fox...</p><p class="underline underline-offset-8">The quick brown fox...</p>

### Using a custom value

Use the `underline-offset-[<value>]` syntax to set the text underline offset based on a completely custom value:

    <p class="underline-offset-[3px] ..."> Lorem ipsum dolor sit amet...</p>

For CSS variables, you can also use the `underline-offset-(<custom-property>)` syntax:

    <p class="underline-offset-(--my-underline-offset) ..."> Lorem ipsum dolor sit amet...</p>

This is just a shorthand for `underline-offset-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `text-underline-offset` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="underline md:underline-offset-4 ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/text-transform

Utilities for controlling the capitalization of text.

| Class | Styles |
| --- | --- |
| `uppercase` | 
`text-transform: uppercase;`

 |
| `lowercase` | 

`text-transform: lowercase;`

 |
| `capitalize` | 

`text-transform: capitalize;`

 |
| `normal-case` | 

`text-transform: none;`

 |

## Examples

### Uppercasing text

Use the `uppercase` utility to uppercase the text of an element:

The quick brown fox jumps over the lazy dog.

    <p class="uppercase">The quick brown fox ...</p>

### Lowercasing text

Use the `lowercase` utility to lowercase the text of an element:

The quick brown fox jumps over the lazy dog.

    <p class="lowercase">The quick brown fox ...</p>

### Capitalizing text

Use the `capitalize` utility to capitalize text of an element:

The quick brown fox jumps over the lazy dog.

    <p class="capitalize">The quick brown fox ...</p>

### Resetting text casing

Use the `normal-case` utility to preserve the original text casing of an element—typically used to reset capitalization at different breakpoints:

The quick brown fox jumps over the lazy dog.

    <p class="normal-case">The quick brown fox ...</p>

### Responsive design

Prefix a `text-transform` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="capitalize md:uppercase ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/text-overflow

Utilities for controlling how the text of an element overflows.

| Class | Styles |
| --- | --- |
| `truncate` | 
`overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`

 |
| `text-ellipsis` | 

`text-overflow: ellipsis;`

 |
| `text-clip` | 

`text-overflow: clip;`

 |

## Examples

### Truncating text

Use the `truncate` utility to prevent text from wrapping and truncate overflowing text with an ellipsis (…) if needed:

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    <p class="truncate">The longest word in any of the major...</p>

### Adding an ellipsis

Use the `text-ellipsis` utility to truncate overflowing text with an ellipsis (…) if needed:

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    <p class="overflow-hidden text-ellipsis">The longest word in any of the major...</p>

### Clipping text

Use the `text-clip` utility to truncate the text at the limit of the content area:

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    <p class="overflow-hidden text-clip">The longest word in any of the major...</p>

This is the default browser behavior.

### Responsive design

Prefix a `text-overflow` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="text-ellipsis md:text-clip ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/text-wrap

Utilities for controlling how text wraps within an element.

| Class | Styles |
| --- | --- |
| `text-wrap` | 
`text-wrap: wrap;`

 |
| `text-nowrap` | 

`text-wrap: nowrap;`

 |
| `text-balance` | 

`text-wrap: balance;`

 |
| `text-pretty` | 

`text-wrap: pretty;`

 |

## Examples

### Allowing text to wrap

Use the `text-wrap` utility to wrap overflowing text onto multiple lines at logical points in the text:

Beloved Manhattan soup stand closes

New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.

    <article class="text-wrap"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>

### Preventing text from wrapping

Use the `text-nowrap` utility to prevent text from wrapping, allowing it to overflow if necessary:

Beloved Manhattan soup stand closes

New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.

    <article class="text-nowrap"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>

### Balanced text wrapping

Use the `text-balance` utility to distribute the text evenly across each line:

Beloved Manhattan soup stand closes

New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.

    <article> <h3 class="text-balance">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>

For performance reasons browsers limit text balancing to blocks that are ~6 lines or less, making it best suited for headings.

### Pretty text wrapping

Use the `text-pretty` utility to prevent orphans (a single word on its own line) at the end of a text block:

Beloved Manhattan soup stand closes

New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.

    <article> <h3 class="text-pretty">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>

### Responsive design

Prefix a `text-wrap` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <h1 class="text-pretty md:text-balance ..."> <!-- ... --></h1>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/text-indent

Utilities for controlling the amount of empty space shown before text in a block.

| Class | Styles |
| --- | --- |
| `indent-<number>` | 
`text-indent: calc(var(--spacing) * <number>)`

 |
| `-indent-<number>` | 

`text-indent: calc(var(--spacing) * -<number>)`

 |
| `indent-px` | 

`text-indent: 1px;`

 |
| `-indent-px` | 

`text-indent: -1px;`

 |
| `indent-(<custom-property>)` | 

`text-indent: var(<custom-property>);`

 |
| `indent-[<value>]` | 

`text-indent: <value>;`

 |

## Examples

### Basic example

Use `indent-<number>` utilities like `indent-2` and `indent-8` to set the amount of empty space (indentation) that's shown before text in a block:

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.

    <p class="indent-8">So I started to walk into the water...</p>

### Using negative values

To use a negative text indent value, prefix the class name with a dash to convert it to a negative value:

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.

    <p class="-indent-8">So I started to walk into the water...</p>

### Using a custom value

Use the `indent-[<value>]` syntax to set the text indentation based on a completely custom value:

    <p class="indent-[50%] ..."> Lorem ipsum dolor sit amet...</p>

For CSS variables, you can also use the `indent-(<custom-property>)` syntax:

    <p class="indent-(--my-indentation) ..."> Lorem ipsum dolor sit amet...</p>

This is just a shorthand for `indent-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `text-indent` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="indent-4 md:indent-8 ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/vertical-align

| Class | Styles |
| --- | --- |
| `align-baseline` | 
`vertical-align: baseline;`

 |
| `align-top` | 

`vertical-align: top;`

 |
| `align-middle` | 

`vertical-align: middle;`

 |
| `align-bottom` | 

`vertical-align: bottom;`

 |
| `align-text-top` | 

`vertical-align: text-top;`

 |
| `align-text-bottom` | 

`vertical-align: text-bottom;`

 |
| `align-sub` | 

`vertical-align: sub;`

 |
| `align-super` | 

`vertical-align: super;`

 |
| `align-(<custom-property>)` | 

`vertical-align: var(<custom-property>);`

 |
| `align-[<value>]` | 

`vertical-align: <value>;`

 |

## Examples

### Aligning to baseline

Use the `align-baseline` utility to align the baseline of an element with the baseline of its parent:

The quick brown fox jumps over the lazy dog.

    <span class="inline-block align-baseline">The quick brown fox...</span>

### Aligning to top

Use the `align-top` utility to align the top of an element and its descendants with the top of the entire line:

The quick brown fox jumps over the lazy dog.

    <span class="inline-block align-top">The quick brown fox...</span>

### Aligning to middle

Use the `align-middle` utility to align the middle of an element with the baseline plus half the x-height of the parent:

The quick brown fox jumps over the lazy dog.

    <span class="inline-block align-middle">The quick brown fox...</span>

### Aligning to bottom

Use the `align-bottom` utility to align the bottom of an element and its descendants with the bottom of the entire line:

The quick brown fox jumps over the lazy dog.

    <span class="inline-block align-bottom">The quick brown fox...</span>

### Aligning to parent top

Use the `align-text-top` utility to align the top of an element with the top of the parent element's font:

The quick brown fox jumps over the lazy dog.

    <span class="inline-block align-text-top">The quick brown fox...</span>

### Aligning to parent bottom

Use the `align-text-bottom` utility to align the bottom of an element with the bottom of the parent element's font:

The quick brown fox jumps over the lazy dog.

    <span class="inline-block align-text-bottom">The quick brown fox...</span>

### Using a custom value

Use the `align-[<value>]` syntax to set the vertical alignment based on a completely custom value:

    <span class="align-[4px] ..."> <!-- ... --></span>

For CSS variables, you can also use the `align-(<custom-property>)` syntax:

    <span class="align-(--my-alignment) ..."> <!-- ... --></span>

This is just a shorthand for `align-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `vertical-align` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <span class="align-middle md:align-top ..."> <!-- ... --></span>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/white-space

Utilities for controlling an element's white-space property.

| Class | Styles |
| --- | --- |
| `whitespace-normal` | 
`white-space: normal;`

 |
| `whitespace-nowrap` | 

`white-space: nowrap;`

 |
| `whitespace-pre` | 

`white-space: pre;`

 |
| `whitespace-pre-line` | 

`white-space: pre-line;`

 |
| `whitespace-pre-wrap` | 

`white-space: pre-wrap;`

 |
| `whitespace-break-spaces` | 

`white-space: break-spaces;`

 |

## Examples

### Normal

Use the `whitespace-normal` utility to cause text to wrap normally within an element. Newlines and spaces will be collapsed:

Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

    <p class="whitespace-normal">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

### No Wrap

Use the `whitespace-nowrap` utility to prevent text from wrapping within an element. Newlines and spaces will be collapsed:

Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

    <p class="overflow-auto whitespace-nowrap">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

### Pre

Use the `whitespace-pre` utility to preserve newlines and spaces within an element. Text will not be wrapped:

Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

    <p class="overflow-auto whitespace-pre">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

### Pre Line

Use the `whitespace-pre-line` utility to preserve newlines but not spaces within an element. Text will be wrapped normally:

Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

    <p class="whitespace-pre-line">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

### Pre Wrap

Use the `whitespace-pre-wrap` utility to preserve newlines and spaces within an element. Text will be wrapped normally:

Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

    <p class="whitespace-pre-wrap">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

### Break Spaces

Use the `whitespace-break-spaces` utility to preserve newlines and spaces within an element. White space at the end of lines will not hang, but will wrap to the next line:

Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

    <p class="whitespace-break-spaces">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>

### Responsive design

Prefix a `white-space` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="whitespace-pre md:whitespace-normal ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/word-break

Utilities for controlling word breaks in an element.

| Class | Styles |
| --- | --- |
| `break-normal` | 
`word-break: normal;`

 |
| `break-all` | 

`word-break: break-all;`

 |
| `break-keep` | 

`word-break: keep-all;`

 |

## Examples

### Normal

Use the `break-normal` utility to only add line breaks at normal word break points:

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    <p class="break-normal">The longest word in any of the major...</p>

### Break All

Use the `break-all` utility to add line breaks whenever necessary, without trying to preserve whole words:

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    <p class="break-all">The longest word in any of the major...</p>

### Break Keep

Use the `break-keep` utility to prevent line breaks from being applied to Chinese/Japanese/Korean (CJK) text:

抗衡不屈不挠 (kànghéng bùqū bùnáo) 这是一个长词，意思是不畏强暴，奋勇抗争，坚定不移，永不放弃。这个词通常用来描述那些在面对困难和挑战时坚持自己信念的人， 他们克服一切困难，不屈不挠地追求自己的目标。无论遇到多大的挑战，他们都能够坚持到底，不放弃，最终获得胜利。

    <p class="break-keep">抗衡不屈不挠...</p>

For non-CJK text the `break-keep` utility has the same behavior as the `break-normal` utility.

### Responsive design

Prefix a `word-break` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="break-normal md:break-all ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/overflow-wrap

Utilities for controlling line breaks within words in an overflowing element.

| Class | Styles |
| --- | --- |
| `wrap-break-word` | 
`overflow-wrap: break-word;`

 |
| `wrap-anywhere` | 

`overflow-wrap: anywhere;`

 |
| `wrap-normal` | 

`overflow-wrap: normal;`

 |

## Examples

### Wrapping mid-word

Use the `wrap-break-word` utility to allow line breaks between letters in a word if needed:

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    <p class="wrap-break-word">The longest word in any of the major...</p>

### Wrapping anywhere

The `wrap-anywhere` utility behaves similarly to `wrap-break-word`, except that the browser factors in mid-word line breaks when calculating the intrinsic size of the element:

wrap-break-word

Jay Riemenschneider

jason.riemenschneider@vandelayindustries.com

wrap-anywhere

Jay Riemenschneider

jason.riemenschneider@vandelayindustries.com

    <div class="flex max-w-sm"> <img class="size-16 rounded-full" src="/img/profile.jpg" /> <div class="wrap-break-word"> <p class="font-medium">Jay Riemenschneider</p> <p>jason.riemenschneider@vandelayindustries.com</p> </div></div><div class="flex max-w-sm"> <img class="size-16 rounded-full" src="/img/profile.jpg" /> <div class="wrap-anywhere"> <p class="font-medium">Jay Riemenschneider</p> <p>jason.riemenschneider@vandelayindustries.com</p> </div></div>

This is useful for wrapping text inside of `flex` containers, where you would usually need to set `min-width: 0` on the child element to allow it to shrink below its content size.

### Wrapping normally

Use the `wrap-normal` utility to only allow line breaks at natural wrapping points, like spaces, hyphens, and punctuation:

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    <p class="wrap-normal">The longest word in any of the major...</p>

### Responsive design

Prefix an `overflow-wrap` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="wrap-normal md:wrap-break-word ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/hyphens

Utilities for controlling how words should be hyphenated.

| Class | Styles |
| --- | --- |
| `hyphens-none` | 
`hyphens: none;`

 |
| `hyphens-manual` | 

`hyphens: manual;`

 |
| `hyphens-auto` | 

`hyphens: auto;`

 |

## Examples

### Preventing hyphenation

Use the `hyphens-none` utility to prevent words from being hyphenated even if the line break suggestion `&shy;` is used:

Officially recognized by the Duden dictionary as the longest word in German, Kraftfahrzeughaftpflichtversicherung is a 36 letter word for motor vehicle liability insurance.

    <p class="hyphens-none"> ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...</p>

### Manual hyphenation

Use the `hyphens-manual` utility to only set hyphenation points where the line break suggestion `&shy;` is used:

Officially recognized by the Duden dictionary as the longest word in German, Kraftfahrzeughaftpflichtversicherung is a 36 letter word for motor vehicle liability insurance.

    <p class="hyphens-manual"> ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...</p>

This is the default browser behavior.

### Automatic hyphenation

Use the `hyphens-auto` utility to allow the browser to automatically choose hyphenation points based on the language:

Officially recognized by the Duden dictionary as the longest word in German, Kraftfahrzeughaftpflichtversicherung is a 36 letter word for motor vehicle liability insurance.

    <p class="hyphens-auto" lang="de"> ... Kraftfahrzeughaftpflichtversicherung is a ...</p>

The line break suggestion `&shy;` will be preferred over automatic hyphenation points.

### Responsive design

Prefix a `hyphens` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="hyphens-none md:hyphens-auto ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/content

Utilities for controlling the content of the before and after pseudo-elements.

| Class | Styles |
| --- | --- |
| `content-[<value>]` | 
`content: <value>;`

 |
| `content-(<custom-property>)` | 

`content: var(<custom-property>);`

 |
| `content-none` | 

`content: none;`

 |

## Examples

### Basic example

Use the `content-[<value>]` syntax, along with the `before` and `after` variants, to set the contents of the `::before` and `::after` pseudo-elements:

Higher resolution means more than just a better-quality image. With a Retina 6K display, Pro Display XDR gives you nearly 40 percent more screen real estate than a 5K display.

    <p>Higher resolution means more than just a better-quality image. With aRetina 6K display, <a class="text-blue-600 after:content-['_↗']" href="...">Pro Display XDR</a> gives you nearly 40 percent more screen real estate thana 5K display.</p>

### Referencing an attribute value

Use the `content-[attr(<name>)]` syntax to reference a value stored in an attribute using the `attr()` CSS function:

    <p before="Hello World" class="before:content-[attr(before)] ..."> <!-- ... --></p>

### Using spaces and underscores

Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore:

    <p class="before:content-['Hello_World'] ..."></p>

If you need to include an actual underscore, you can do this by escaping it with a backslash:

    <p class="before:content-['Hello\_World']"></p>

### Using a CSS variable

Use the `content-(<custom-property>)` syntax to control the contents of the `::before` and `::after` pseudo-elements using a CSS variable:

    <p class="content-(--my-content)"></p>

This is just a shorthand for `content-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `content` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="before:content-['Mobile'] md:before:content-['Desktop'] ..."></p>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/background-attachment

My trip to the summit

November 16, 2021 · 4 min read

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

---

## Page: https://tailwindcss.com/docs/background-clip

Utilities for controlling the bounding box of an element's background.

| Class | Styles |
| --- | --- |
| `bg-clip-border` | 
`background-clip: border-box;`

 |
| `bg-clip-padding` | 

`background-clip: padding-box;`

 |
| `bg-clip-content` | 

`background-clip: content-box;`

 |
| `bg-clip-text` | 

`background-clip: text;`

 |

## Examples

### Basic example

Use the `bg-clip-border`, `bg-clip-padding`, and `bg-clip-content` utilities to control the bounding box of an element's background:

bg-clip-border

bg-clip-padding

bg-clip-content

    <div class="border-4 bg-indigo-500 bg-clip-border p-3"></div><div class="border-4 bg-indigo-500 bg-clip-padding p-3"></div><div class="border-4 bg-indigo-500 bg-clip-content p-3"></div>

### Cropping to text

Use the `bg-clip-text` utility to crop an element's background to match the shape of the text:

Hello world

    <p class="bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-5xl font-extrabold text-transparent ..."> Hello world</p>

### Responsive design

Prefix a `background-clip` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="bg-clip-border md:bg-clip-padding ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/background-color

Utilities for controlling an element's background color.

| Class | Styles |
| --- | --- |
| `bg-inherit` | 
`background-color: inherit;`

 |
| `bg-current` | 

`background-color: currentColor;`

 |
| `bg-transparent` | 

`background-color: transparent;`

 |
| `bg-black` | 

`background-color: var(--color-black); /* #000 */`

 |
| `bg-white` | 

`background-color: var(--color-white); /* #fff */`

 |
| `bg-red-50` | 

`background-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`

 |
| `bg-red-100` | 

`background-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`

 |
| `bg-red-200` | 

`background-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`

 |
| `bg-red-300` | 

`background-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`

 |
| `bg-red-400` | 

`background-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`

 |

## Examples

### Basic example

Use utilities like `bg-white`, `bg-indigo-500` and `bg-transparent` to control the background color of an element:

bg-blue-500

bg-cyan-500

bg-pink-500

    <button class="bg-blue-500 ...">Button A</button><button class="bg-cyan-500 ...">Button B</button><button class="bg-pink-500 ...">Button C</button>

### Changing the opacity

Use the color opacity modifier to control the opacity of an element's background color:

bg-sky-500/100

bg-sky-500/75

bg-sky-500/50

    <button class="bg-sky-500/100 ..."></button><button class="bg-sky-500/75 ..."></button><button class="bg-sky-500/50 ..."></button>

### Using a custom value

Use the `bg-[<value>]` syntax to set the background color based on a completely custom value:

    <div class="bg-[#50d71e] ..."> <!-- ... --></div>

For CSS variables, you can also use the `bg-(<custom-property>)` syntax:

    <div class="bg-(--my-color) ..."> <!-- ... --></div>

This is just a shorthand for `bg-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Applying on hover

Prefix a `background-color` utility with a variant like `hover:*` to only apply the utility in that state:

    <button class="bg-indigo-500 hover:bg-fuchsia-500 ...">Save changes</button>

Learn more about using variants in the variants documentation.

### Responsive design

Prefix a `background-color` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="bg-blue-500 md:bg-green-500 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `bg-regal-blue` utility can be used in your markup:

    <div class="bg-regal-blue"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/background-image

Utilities for controlling an element's background image.

| Class | Styles |
| --- | --- |
| `bg-[<value>]` | 
`background-image: <value>;`

 |
| `bg-(image:<custom-property>)` | 

`background-image: var(<custom-property>);`

 |
| `bg-none` | 

`background-image: none;`

 |
| `bg-linear-to-t` | 

`background-image: linear-gradient(to top, var(--tw-gradient-stops));`

 |
| `bg-linear-to-tr` | 

`background-image: linear-gradient(to top right, var(--tw-gradient-stops));`

 |
| `bg-linear-to-r` | 

`background-image: linear-gradient(to right, var(--tw-gradient-stops));`

 |
| `bg-linear-to-br` | 

`background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));`

 |
| `bg-linear-to-b` | 

`background-image: linear-gradient(to bottom, var(--tw-gradient-stops));`

 |
| `bg-linear-to-bl` | 

`background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));`

 |
| `bg-linear-to-l` | 

`background-image: linear-gradient(to left, var(--tw-gradient-stops));`

 |

## Examples

### Basic example

Use the `bg-[<value>]` syntax to set the background image of an element:

    <div class="bg-[url(/img/mountains.jpg)] ..."></div>

### Adding a linear gradient

Use utilities like `bg-linear-to-r` and `bg-linear-<angle>` with the color stop utilities to add a linear gradient to an element:

    <div class="h-14 bg-linear-to-r from-cyan-500 to-blue-500"></div><div class="h-14 bg-linear-to-t from-sky-500 to-indigo-500"></div><div class="h-14 bg-linear-to-bl from-violet-500 to-fuchsia-500"></div><div class="h-14 bg-linear-65 from-purple-500 to-pink-500"></div>

### Adding a radial gradient

Use the `bg-radial` and `bg-radial-[<position>]` utilities with the color stop utilities to add a radial gradient to an element:

    <div class="size-18 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700"></div><div class="size-18 rounded-full bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90%"></div><div class="size-18 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

### Adding a conic gradient

Use the `bg-conic` and `bg-conic-<angle>` utilities with the color stop utilities to add a conic gradient to an element:

    <div class="size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%"></div><div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div><div class="size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700"></div>

### Setting gradient color stops

Use utilities like `from-indigo-500`, `via-purple-500`, and `to-pink-500` to set the colors of the gradient stops:

    <div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 ..."></div>

### Setting gradient stop positions

Use utilities like `from-10%`, `via-30%`, and `to-90%` to set more precise positions for the gradient color stops:

10%

30%

90%

    <div class="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ..."></div>

### Changing interpolation mode

Use the interpolation modifier to control the interpolation mode of a gradient:

srgb

hsl

oklab

oklch

longer

shorter

increasing

decreasing

    <div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/hsl from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/oklab from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/longer from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/shorter from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/increasing from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/decreasing from-indigo-500 to-teal-400"></div>

By default gradients are interpolated in the `oklab` color space.

### Removing background images

Use the `bg-none` utility to remove an existing background image from an element:

    <div class="bg-none"></div>

### Using a custom value

Use utilities like `bg-linear-[<value>]` and `from-[<value>]` to set the gradient based on a completely custom value:

    <div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal] ..."> <!-- ... --></div>

For CSS variables, you can also use the `bg-linear-(<custom-property>)` syntax:

    <div class="bg-linear-(--my-gradient) ..."> <!-- ... --></div>

This is just a shorthand for `bg-linear-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `background-image` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="from-purple-400 md:from-yellow-500 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now utilities like `from-regal-blue`,`via-regal-blue`, and `to-regal-blue` can be used in your markup:

    <div class="from-regal-blue"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/background-origin

Utilities for controlling how an element's background is positioned relative to borders, padding, and content.

| Class | Styles |
| --- | --- |
| `bg-origin-border` | 
`background-origin: border-box;`

 |
| `bg-origin-padding` | 

`background-origin: padding-box;`

 |
| `bg-origin-content` | 

`background-origin: content-box;`

 |

## Examples

### Basic example

Use the `bg-origin-border`, `bg-origin-padding`, and `bg-origin-content` utilities to control where an element's background is rendered:

bg-origin-border

bg-origin-padding

bg-origin-content

    <div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-border p-3 ..."></div><div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-padding p-3 ..."></div><div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-content p-3 ..."></div>

### Responsive design

Prefix a `background-origin` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="bg-origin-border md:bg-origin-padding ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/background-position

Utilities for controlling the position of an element's background image.

| Class | Styles |
| --- | --- |
| `bg-top-left` | 
`background-position: top left;`

 |
| `bg-top` | 

`background-position: top;`

 |
| `bg-top-right` | 

`background-position: top right;`

 |
| `bg-left` | 

`background-position: left;`

 |
| `bg-center` | 

`background-position: center;`

 |
| `bg-right` | 

`background-position: right;`

 |
| `bg-bottom-left` | 

`background-position: bottom left;`

 |
| `bg-bottom` | 

`background-position: bottom;`

 |
| `bg-bottom-right` | 

`background-position: bottom right;`

 |
| `bg-position-(<custom-property>)` | 

`background-position: var(<custom-property>);`

 |
| `bg-position-[<value>]` | 

`background-position: <value>;`

 |

## Examples

### Basic example

Use utilities like `bg-center`, `bg-right`, and `bg-top-left` to control the position of an element's background image:

Hover over these examples to see the full image

bg-top-left

bg-top

bg-top-right

bg-left

bg-center

bg-right

bg-bottom-left

bg-bottom

bg-bottom-right

    <div class="bg-[url(/img/mountains.jpg)] bg-top-left"></div><div class="bg-[url(/img/mountains.jpg)] bg-top"></div><div class="bg-[url(/img/mountains.jpg)] bg-top-right"></div><div class="bg-[url(/img/mountains.jpg)] bg-left"></div><div class="bg-[url(/img/mountains.jpg)] bg-center"></div><div class="bg-[url(/img/mountains.jpg)] bg-right"></div><div class="bg-[url(/img/mountains.jpg)] bg-bottom-left"></div><div class="bg-[url(/img/mountains.jpg)] bg-bottom"></div><div class="bg-[url(/img/mountains.jpg)] bg-bottom-right"></div>

### Using a custom value

Use the `bg-position-[<value>]` syntax to set the background position based on a completely custom value:

    <div class="bg-position-[center_top_1rem] ..."> <!-- ... --></div>

For CSS variables, you can also use the `bg-position-(<custom-property>)` syntax:

    <div class="bg-position-(--my-bg-position) ..."> <!-- ... --></div>

This is just a shorthand for `bg-position-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `background-position` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="bg-center md:bg-top ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/background-repeat

Utilities for controlling the repetition of an element's background image.

| Class | Styles |
| --- | --- |
| `bg-repeat` | 
`background-repeat: repeat;`

 |
| `bg-repeat-x` | 

`background-repeat: repeat-x;`

 |
| `bg-repeat-y` | 

`background-repeat: repeat-y;`

 |
| `bg-repeat-space` | 

`background-repeat: space;`

 |
| `bg-repeat-round` | 

`background-repeat: round;`

 |
| `bg-no-repeat` | 

`background-repeat: no-repeat;`

 |

## Examples

### Basic example

Use the `bg-repeat` utility to repeat the background image both vertically and horizontally:

    <div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat ..."></div>

### Repeating horizontally

Use the `bg-repeat-x` utility to only repeat the background image horizontally:

    <div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-x ..."></div>

### Repeating vertically

Use the `bg-repeat-y` utility to only repeat the background image vertically:

    <div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-y ..."></div>

### Preventing clipping

Use the `bg-repeat-space` utility to repeat the background image without clipping:

    <div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-space ..."></div>

### Preventing clipping and gaps

Use the `bg-repeat-round` utility to repeat the background image without clipping, stretching if needed to avoid gaps:

    <div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-round ..."></div>

### Disabling repeating

Use the `bg-no-repeat` utility to prevent a background image from repeating:

    <div class="bg-[url(/img/clouds.svg)] bg-center bg-no-repeat ..."></div>

### Responsive design

Prefix a `background-repeat` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="bg-repeat md:bg-repeat-x ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/background-size

Utilities for controlling the background size of an element's background image.

| Class | Styles |
| --- | --- |
| `bg-auto` | 
`background-size: auto;`

 |
| `bg-cover` | 

`background-size: cover;`

 |
| `bg-contain` | 

`background-size: contain;`

 |
| `bg-size-(<custom-property>)` | 

`background-size: var(<custom-property>);`

 |
| `bg-size-[<value>]` | 

`background-size: <value>;`

 |

## Examples

### Filling the container

Use the `bg-cover` utility to scale the background image until it fills the background layer, cropping the image if needed:

    <div class="bg-[url(/img/mountains.jpg)] bg-cover bg-center"></div>

### Filling without cropping

Use the `bg-contain` utility to scale the background image to the outer edges without cropping or stretching:

    <div class="bg-[url(/img/mountains.jpg)] bg-contain bg-center"></div>

### Using the default size

Use the `bg-auto` utility to display the background image at its default size:

    <div class="bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat"></div>

### Using a custom value

Use the `bg-size-[<value>]` syntax to set the background size based on a completely custom value:

    <div class="bg-size-[auto_100px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `bg-size-(<custom-property>)` syntax:

    <div class="bg-size-(--my-image-size) ..."> <!-- ... --></div>

This is just a shorthand for `bg-size-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `background-size` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="bg-auto md:bg-contain ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/border-radius

Utilities for controlling the border radius of an element.

| Class | Styles |
| --- | --- |
| `rounded-xs` | 
`border-radius: var(--radius-xs); /* 0.125rem (2px) */`

 |
| `rounded-sm` | 

`border-radius: var(--radius-sm); /* 0.25rem (4px) */`

 |
| `rounded-md` | 

`border-radius: var(--radius-md); /* 0.375rem (6px) */`

 |
| `rounded-lg` | 

`border-radius: var(--radius-lg); /* 0.5rem (8px) */`

 |
| `rounded-xl` | 

`border-radius: var(--radius-xl); /* 0.75rem (12px) */`

 |
| `rounded-2xl` | 

`border-radius: var(--radius-2xl); /* 1rem (16px) */`

 |
| `rounded-3xl` | 

`border-radius: var(--radius-3xl); /* 1.5rem (24px) */`

 |
| `rounded-4xl` | 

`border-radius: var(--radius-4xl); /* 2rem (32px) */`

 |
| `rounded-none` | 

`border-radius: 0;`

 |
| `rounded-full` | 

`border-radius: calc(infinity * 1px);`

 |

## Examples

### Basic example

Use utilities like `rounded-sm` and `rounded-md` to apply different border radius sizes to an element:

rounded-sm

rounded-md

rounded-lg

rounded-xl

    <div class="rounded-sm ..."></div><div class="rounded-md ..."></div><div class="rounded-lg ..."></div><div class="rounded-xl ..."></div>

### Rounding sides separately

Use utilities like `rounded-t-md` and `rounded-r-lg` to only round one side of an element:

rounded-t-lg

rounded-r-lg

rounded-b-lg

rounded-l-lg

    <div class="rounded-t-lg ..."></div><div class="rounded-r-lg ..."></div><div class="rounded-b-lg ..."></div><div class="rounded-l-lg ..."></div>

### Rounding corners separately

Use utilities like `rounded-tr-md` and `rounded-tl-lg` utilities to only round one corner of an element:

rounded-tl-lg

rounded-tr-lg

rounded-br-lg

rounded-bl-lg

    <div class="rounded-tl-lg ..."></div><div class="rounded-tr-lg ..."></div><div class="rounded-br-lg ..."></div><div class="rounded-bl-lg ..."></div>

### Using logical properties

Use utilities like `rounded-s-md` and `rounded-se-xl` to set the border radius using logical properties, which map to the appropriate corners based on the text direction:

Left-to-right

Right-to-left

    <div dir="ltr"> <div class="rounded-s-lg ..."></div></div><div dir="rtl"> <div class="rounded-s-lg ..."></div></div>

Here are all the available border radius logical property utilities and their physical property equivalents in both LTR and RTL modes.

| Class | Left-to-right | Right-to-left |
| --- | --- | --- |
| `rounded-s-*` | `rounded-l-*` | `rounded-r-*` |
| `rounded-e-*` | `rounded-r-*` | `rounded-l-*` |
| `rounded-ss-*` | `rounded-tl-*` | `rounded-tr-*` |
| `rounded-se-*` | `rounded-tr-*` | `rounded-tl-*` |
| `rounded-es-*` | `rounded-bl-*` | `rounded-br-*` |
| `rounded-ee-*` | `rounded-br-*` | `rounded-bl-*` |

For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

### Creating pill buttons

Use the `rounded-full` utility to create pill buttons:

rounded-full

    <button class="rounded-full ...">Save Changes</button>

### Removing the border radius

Use the `rounded-none` utility to remove an existing border radius from an element:

rounded-none

    <button class="rounded-none ...">Save Changes</button>

### Using a custom value

Use the `rounded-[<value>]` syntax to set the border radius based on a completely custom value:

    <div class="rounded-[2vw] ..."> <!-- ... --></div>

For CSS variables, you can also use the `rounded-(<custom-property>)` syntax:

    <div class="rounded-(--my-radius) ..."> <!-- ... --></div>

This is just a shorthand for `rounded-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `border-radius` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="rounded md:rounded-lg ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--radius-*` theme variables to customize the border radius utilities in your project:

    @theme { --radius-5xl: 3rem; }

Now the `rounded-5xl` utility can be used in your markup:

    <div class="rounded-5xl"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/border-width

Utilities for controlling the width of an element's borders.

| Class | Styles |
| --- | --- |
| `border` | 
`border-width: 1px;`

 |
| `border-<number>` | 

`border-width: <number>px;`

 |
| `border-(length:<custom-property>)` | 

`border-width: var(<custom-property>);`

 |
| `border-[<value>]` | 

`border-width: <value>;`

 |
| `border-x` | 

`border-inline-width: 1px;`

 |
| `border-x-<number>` | 

`border-inline-width: <number>px;`

 |
| `border-x-(length:<custom-property>)` | 

`border-inline-width: var(<custom-property>);`

 |
| `border-x-[<value>]` | 

`border-inline-width: <value>;`

 |
| `border-y` | 

`border-block-width: 1px;`

 |
| `border-y-<number>` | 

`border-block-width: <number>px;`

 |

## Examples

### Basic example

Use `border` or `border-<number>` utilities like `border-2` and `border-4` to set the border width for all sides of an element:

border

border-2

border-4

border-8

    <div class="border border-indigo-600 ..."></div><div class="border-2 border-indigo-600 ..."></div><div class="border-4 border-indigo-600 ..."></div><div class="border-8 border-indigo-600 ..."></div>

### Individual sides

Use utilities like `border-r` and `border-t-4` to set the border width for one side of an element:

border-t-4

border-r-4

border-b-4

border-l-4

    <div class="border-t-4 border-indigo-500 ..."></div><div class="border-r-4 border-indigo-500 ..."></div><div class="border-b-4 border-indigo-500 ..."></div><div class="border-l-4 border-indigo-500 ..."></div>

### Horizontal and vertical sides

Use utilities like `border-x` and `border-y-4` to set the border width on two sides of an element at the same time:

border-x-4

border-y-4

    <div class="border-x-4 border-indigo-500 ..."></div><div class="border-y-4 border-indigo-500 ..."></div>

### Using logical properties

Use utilities like `border-s` and `border-e-4` to set the `border-inline-start-width` and `border-inline-end-width` logical properties, which map to either the left or right border based on the text direction:

Left-to-right

Right-to-left

    <div dir="ltr"> <div class="border-s-4 ..."></div></div><div dir="rtl"> <div class="border-s-4 ..."></div></div>

### Between children

Use utilities like `divide-x` and `divide-y-4` to add borders between child elements:

01

02

03

    <div class="grid grid-cols-3 divide-x-4"> <div>01</div> <div>02</div> <div>03</div></div>

#### Reversing children order

If your elements are in reverse order (using say `flex-row-reverse` or `flex-col-reverse`), use the `divide-x-reverse` or `divide-y-reverse` utilities to ensure the border is added to the correct side of each element:

01

02

03

    <div class="flex flex-col-reverse divide-y-4 divide-y-reverse divide-gray-200"> <div>01</div> <div>02</div> <div>03</div></div>

### Using a custom value

Use the `border-[<value>]` syntax to set the border width based on a completely custom value:

    <div class="border-[2vw] ..."> <!-- ... --></div>

For CSS variables, you can also use the `border-(length:<custom-property>)` syntax:

    <div class="border-(length:--my-border-width) ..."> <!-- ... --></div>

This is just a shorthand for `border-[length:var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `border-width` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="border-2 md:border-t-4 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/border-color

Utilities for controlling the color of an element's borders.

| Class | Styles |
| --- | --- |
| `border-inherit` | 
`border-color: inherit;`

 |
| `border-current` | 

`border-color: currentColor;`

 |
| `border-transparent` | 

`border-color: transparent;`

 |
| `border-black` | 

`border-color: var(--color-black); /* #000 */`

 |
| `border-white` | 

`border-color: var(--color-white); /* #fff */`

 |
| `border-red-50` | 

`border-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`

 |
| `border-red-100` | 

`border-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`

 |
| `border-red-200` | 

`border-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`

 |
| `border-red-300` | 

`border-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`

 |
| `border-red-400` | 

`border-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`

 |

## Examples

### Basic example

Use utilities like `border-rose-500` and `border-lime-100` to control the border color of an element:

border-indigo-500

border-purple-500

border-sky-500

    <div class="border-4 border-indigo-500 ..."></div><div class="border-4 border-purple-500 ..."></div><div class="border-4 border-sky-500 ..."></div>

### Changing the opacity

Use the color opacity modifier to control the opacity of an element's border color:

border-indigo-500/100

border-indigo-500/75

border-indigo-500/50

    <div class="border-4 border-indigo-500/100 ..."></div><div class="border-4 border-indigo-500/75 ..."></div><div class="border-4 border-indigo-500/50 ..."></div>

### Individual sides

Use utilities like `border-t-indigo-500` and `border-r-lime-100` to set the border color for one side of an element:

border-t-indigo-500

border-r-indigo-500

border-b-indigo-500

border-l-indigo-500

    <div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-r-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-b-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-l-indigo-500 ..."></div>

### Horizontal and vertical sides

Use utilities like `border-x-indigo-500` and `border-y-lime-100` to set the border color on two sides of an element at the same time:

border-x-indigo-500

border-y-indigo-500

    <div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div>

### Using logical properties

Use utilities like `border-s-indigo-500` and `border-e-lime-100` to set the `border-inline-start-color` and `border-inline-end-color` logical properties, which map to either the left or right border based on the text direction:

Left-to-right

Right-to-left

    <div dir="ltr"> <div class="border-s-indigo-500 ..."></div></div><div dir="rtl"> <div class="border-s-indigo-500 ..."></div></div>

### Divider between children

Use utilities like `divide-indigo-500` and `divide-lime-100` to control the border color between child elements:

01

02

03

    <div class="grid grid-cols-3 divide-x-4 divide-indigo-500"> <div>01</div> <div>02</div> <div>03</div></div>

### Using a custom value

Use the `border-[<value>]` syntax to set the border color based on a completely custom value:

    <div class="border-[#243c5a] ..."> <!-- ... --></div>

For CSS variables, you can also use the `border-(<custom-property>)` syntax:

    <div class="border-(--my-border) ..."> <!-- ... --></div>

This is just a shorthand for `border-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Applying on focus

Prefix a `border-color` utility with a variant like `focus:*` to only apply the utility in that state:

Email address

    <input class="border-2 border-gray-700 focus:border-pink-600 ..." />

Learn more about using variants in the variants documentation.

### Responsive design

Prefix a `border-color` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="border-blue-500 md:border-green-500 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `border-regal-blue` utility can be used in your markup:

    <div class="border-regal-blue"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/border-style

Utilities for controlling the style of an element's borders.

| Class | Styles |
| --- | --- |
| `border-solid` | 
`border-style: solid;`

 |
| `border-dashed` | 

`border-style: dashed;`

 |
| `border-dotted` | 

`border-style: dotted;`

 |
| `border-double` | 

`border-style: double;`

 |
| `border-hidden` | 

`border-style: hidden;`

 |
| `border-none` | 

`border-style: none;`

 |
| `divide-solid` | 

`& > :not(:last-child) { border-style: solid; }`

 |
| `divide-dashed` | 

`& > :not(:last-child) { border-style: dashed; }`

 |
| `divide-dotted` | 

`& > :not(:last-child) { border-style: dotted; }`

 |
| `divide-double` | 

`& > :not(:last-child) { border-style: double; }`

 |
| `divide-hidden` | 

`& > :not(:last-child) { border-style: hidden; }`

 |
| `divide-none` | 

`& > :not(:last-child) { border-style: none; }`

 |

## Examples

### Basic example

Use utilities like `border-solid` and `border-dotted` to control an element's border style:

border-solid

border-dashed

border-dotted

border-double

    <div class="border-2 border-solid ..."></div><div class="border-2 border-dashed ..."></div><div class="border-2 border-dotted ..."></div><div class="border-4 border-double ..."></div>

### Removing a border

Use the `border-none` utility to remove an existing border from an element:

    <button class="border-none ...">Save Changes</button>

This is most commonly used to remove a border style that was applied at a smaller breakpoint.

### Setting the divider style

Use utilities like `divide-dashed` and `divide-dotted` to control the border style between child elements:

01

02

03

    <div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500"> <div>01</div> <div>02</div> <div>03</div></div>

### Responsive design

Prefix a `border-style` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="border-solid md:border-dotted ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/outline-width

Utilities for controlling the width of an element's outline.

| Class | Styles |
| --- | --- |
| `outline` | 
`outline-width: 1px;`

 |
| `outline-<number>` | 

`outline-width: <number>px;`

 |
| `outline-(length:<custom-property>)` | 

`outline-width: var(<custom-property>);`

 |
| `outline-[<value>]` | 

`outline-width: <value>;`

 |

## Examples

### Basic example

Use `outline` or `outline-<number>` utilities like `outline-2` and `outline-4` to set the width of an element's outline:

outline

outline-2

outline-4

    <button class="outline outline-offset-2 ...">Button A</button><button class="outline-2 outline-offset-2 ...">Button B</button><button class="outline-4 outline-offset-2 ...">Button C</button>

### Applying on focus

Prefix an `outline-width` utility with a variant like `focus:*` to only apply the utility in that state:

Focus the button to see the outline added

    <button class="outline-offset-2 outline-sky-500 focus:outline-2 ...">Save Changes</button>

Learn more about using variants in the variants documentation.

### Using a custom value

Use the `outline-[<value>]` syntax to set the outline width based on a completely custom value:

    <div class="outline-[2vw] ..."> <!-- ... --></div>

For CSS variables, you can also use the `outline-(length:<custom-property>)` syntax:

    <div class="outline-(length:--my-outline-width) ..."> <!-- ... --></div>

This is just a shorthand for `outline-[length:var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix an `outline-width` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="outline md:outline-2 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/outline-color

Utilities for controlling the color of an element's outline.

| Class | Styles |
| --- | --- |
| `outline-inherit` | 
`outline-color: inherit;`

 |
| `outline-current` | 

`outline-color: currentColor;`

 |
| `outline-transparent` | 

`outline-color: transparent;`

 |
| `outline-black` | 

`outline-color: var(--color-black); /* #000 */`

 |
| `outline-white` | 

`outline-color: var(--color-white); /* #fff */`

 |
| `outline-red-50` | 

`outline-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`

 |
| `outline-red-100` | 

`outline-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`

 |
| `outline-red-200` | 

`outline-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`

 |
| `outline-red-300` | 

`outline-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`

 |
| `outline-red-400` | 

`outline-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`

 |

## Examples

### Basic example

Use utilities like `outline-rose-500` and `outline-lime-100` to control the color of an element's outline:

outline-blue-500

outline-cyan-500

outline-pink-500

    <button class="outline-2 outline-offset-2 outline-blue-500 ...">Button A</button><button class="outline-2 outline-offset-2 outline-cyan-500 ...">Button B</button><button class="outline-2 outline-offset-2 outline-pink-500 ...">Button C</button>

### Changing the opacity

Use the color opacity modifier to control the opacity of an element's outline color:

outline-blue-500/100

outline-blue-500/75

outline-blue-500/50

    <button class="outline-2 outline-blue-500/100 ...">Button A</button><button class="outline-2 outline-blue-500/75 ...">Button B</button><button class="outline-2 outline-blue-500/50 ...">Button C</button>

### Using a custom value

Use the `outline-[<value>]` syntax to set the outline color based on a completely custom value:

    <div class="outline-[#243c5a] ..."> <!-- ... --></div>

For CSS variables, you can also use the `outline-(<custom-property>)` syntax:

    <div class="outline-(--my-color) ..."> <!-- ... --></div>

This is just a shorthand for `outline-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix an `outline-color` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="outline md:outline-blue-400 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `outline-regal-blue` utility can be used in your markup:

    <div class="outline-regal-blue"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/outline-style

Utilities for controlling the style of an element's outline.

| Class | Styles |
| --- | --- |
| `outline-solid` | 
`outline-style: solid;`

 |
| `outline-dashed` | 

`outline-style: dashed;`

 |
| `outline-dotted` | 

`outline-style: dotted;`

 |
| `outline-double` | 

`outline-style: double;`

 |
| `outline-none` | 

`outline-style: none;`

 |
| `outline-hidden` | 

`outline: 2px solid transparent; outline-offset: 2px;`

 |

## Examples

### Basic example

Use utilities like `outline-solid` and `outline-dashed` to set the style of an element's outline:

outline-solid

outline-dashed

outline-dotted

outline-double

    <button class="outline-2 outline-offset-2 outline-solid ...">Button A</button><button class="outline-2 outline-offset-2 outline-dashed ...">Button B</button><button class="outline-2 outline-offset-2 outline-dotted ...">Button C</button><button class="outline-3 outline-offset-2 outline-double ...">Button D</button>

### Hiding an outline

Use the `outline-hidden` utility to hide the default browser outline on focused elements, while still preserving the outline in forced colors mode:

Try emulating \`forced-colors: active\` in your developer tools to see the behavior

    <input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />

It is highly recommended to apply your own focus styling for accessibility when using this utility.

### Removing outlines

Use the `outline-none` utility to completely remove the default browser outline on focused elements:

    <div class="focus-within:outline-2 focus-within:outline-indigo-600 ..."> <textarea class="outline-none ..." placeholder="Leave a comment..." /> <button class="..." type="button">Post</button></div>

It is highly recommended to apply your own focus styling for accessibility when using this utility.

### Responsive design

Prefix an `outline-style` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="outline md:outline-dashed ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/outline-offset

Utilities for controlling the offset of an element's outline.

| Class | Styles |
| --- | --- |
| `outline-offset-<number>` | 
`outline-offset: <number>px;`

 |
| `-outline-offset-<number>` | 

`outline-offset: calc(<number>px * -1);`

 |
| `outline-offset-(<custom-property>)` | 

`outline-offset: var(<custom-property>);`

 |
| `outline-offset-[<value>]` | 

`outline-offset: <value>;`

 |

## Examples

### Basic example

Use utilities like `outline-offset-2` and `outline-offset-4` to change the offset of an element's outline:

outline-offset-0

outline-offset-2

outline-offset-4

    <button class="outline-2 outline-offset-0 ...">Button A</button><button class="outline-2 outline-offset-2 ...">Button B</button><button class="outline-2 outline-offset-4 ...">Button C</button>

### Using a custom value

Use the `outline-offset-[<value>]` syntax to set the outline offset based on a completely custom value:

    <div class="outline-offset-[2vw] ..."> <!-- ... --></div>

For CSS variables, you can also use the `outline-offset-(<custom-property>)` syntax:

    <div class="outline-offset-(--my-outline-offset) ..."> <!-- ... --></div>

This is just a shorthand for `outline-offset-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix an `outline-offset` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="outline md:outline-offset-2 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/box-shadow

Utilities for controlling the box shadow of an element.

| Class | Styles |
| --- | --- |
| `shadow-2xs` | 
`box-shadow: var(--shadow-2xs); /* 0 1px rgb(0 0 0 / 0.05) */`

 |
| `shadow-xs` | 

`box-shadow: var(--shadow-xs); /* 0 1px 2px 0 rgb(0 0 0 / 0.05) */`

 |
| `shadow-sm` | 

`box-shadow: var(--shadow-sm); /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */`

 |
| `shadow-md` | 

`box-shadow: var(--shadow-md); /* 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */`

 |
| `shadow-lg` | 

`box-shadow: var(--shadow-lg); /* 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */`

 |
| `shadow-xl` | 

`box-shadow: var(--shadow-xl); /* 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */`

 |
| `shadow-2xl` | 

`box-shadow: var(--shadow-2xl); /* 0 25px 50px -12px rgb(0 0 0 / 0.25) */`

 |
| `shadow-none` | 

`box-shadow: 0 0 #0000;`

 |
| `shadow-(<custom-property>)` | 

`box-shadow: var(<custom-property>);`

 |
| `shadow-(color:<custom-property>)` | 

`--tw-shadow-color: var(<custom-property>);`

 |

## Examples

### Basic example

Use utilities like `shadow-sm` and `shadow-lg` to apply different sized outer box shadows to an element:

shadow-md

shadow-lg

shadow-xl

    <div class="shadow-md ..."></div><div class="shadow-lg ..."></div><div class="shadow-xl ..."></div>

### Changing the opacity

Use the opacity modifier to adjust the opacity of the box shadow:

shadow-xl

shadow-xl/20

shadow-xl/30

    <div class="shadow-xl ..."></div><div class="shadow-xl/20 ..."></div><div class="shadow-xl/30 ..."></div>

The default box shadow opacities are quite low (25% or less), so increasing the opacity (to like 50%) will make the box shadows more pronounced.

### Setting the shadow color

Use utilities like `shadow-indigo-500` and `shadow-cyan-500/50` to change the color of a box shadow:

shadow-cyan-500/50

shadow-blue-500/50

shadow-indigo-500/50

    <button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button><button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button><button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>

By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.

### Adding an inset shadow

Use utilities like `inset-shadow-xs` and `inset-shadow-sm` to apply an inset box shadow to an element:

inset-shadow-2xs

inset-shadow-xs

inset-shadow-sm

    <div class="inset-shadow-2xs ..."></div><div class="inset-shadow-xs ..."></div><div class="inset-shadow-sm ..."></div>

You can adjust the opacity of an inset shadow using the opacity modifier, like `inset-shadow-sm/50`. The default inset shadow opacities are quite low (5%), so increasing the opacity (to like 50%) will make the inset shadows more pronounced.

### Setting the inset shadow color

Use utilities like `inset-shadow-indigo-500` and `inset-shadow-cyan-500/50` to change the color of an inset box shadow:

inset-shadow-indigo-500

inset-shadow-indigo-500/50

    <div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div><div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>

By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.

### Adding a ring

Use `ring` or `ring-<number>` utilities like `ring-2` and `ring-4` to apply a solid box-shadow to an element:

ring

ring-2

ring-4

    <button class="ring ...">Subscribe</button><button class="ring-2 ...">Subscribe</button><button class="ring-4 ...">Subscribe</button>

By default rings match the `currentColor` of the element they are applied to.

### Setting the ring color

Use utilities like `ring-indigo-500` and `ring-cyan-500/50` to change the color of a ring:

ring-blue-500

ring-blue-500/50

    <button class="ring-2 ring-blue-500 ...">Subscribe</button><button class="ring-2 ring-blue-500/50 ...">Subscribe</button>

By default rings have an opacity of 100% but you can adjust this using the opacity modifier.

### Adding an inset ring

Use `inset-ring` or `inset-ring-<number>` utilities like `inset-ring-2` and `inset-ring-4` to apply a solid inset box-shadow to an element:

inset-ring

inset-ring-2

inset-ring-4

    <button class="inset-ring ...">Subscribe</button><button class="inset-ring-2 ...">Subscribe</button><button class="inset-ring-4 ...">Subscribe</button>

By default inset rings match the `currentColor` of the element they are applied to.

### Setting the inset ring color

Use utilities like `inset-ring-indigo-500` and `inset-ring-cyan-500/50` to change the color of an inset ring:

inset-ring-blue-500

inset-ring-blue-500/50

    <button class="inset-ring-2 inset-ring-blue-500 ...">Subscribe</button><button class="inset-ring-2 inset-ring-blue-500/50 ...">Subscribe</button>

By default inset rings have an opacity of 100% but you can adjust this using the opacity modifier.

### Removing a box shadow

Use the `shadow-none`, `inset-shadow-none`,`ring-0`, and `inset-ring-0` utilities to remove an existing box shadow from an element:

shadow-none

    <div class="shadow-none ..."></div>

### Using a custom value

Use utilities like `shadow-[<value>]`,`inset-shadow-[<value>]`,`ring-[<value>]`, and `inset-ring-[<value>]` to set the box shadow based on a completely custom value:

    <div class="shadow-[0_35px_35px_rgba(0,0,0,0.25)] ..."> <!-- ... --></div>

For CSS variables, you can also use the `shadow-(<custom-property>)` syntax:

    <div class="shadow-(--my-shadow) ..."> <!-- ... --></div>

This is just a shorthand for `shadow-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `box-shadow` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="shadow-none md:shadow-lg ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

### Customizing shadows

Use the `--shadow-*` theme variables to customize the box shadow utilities in your project:

    @theme { --shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); }

Now the `shadow-3xl` utility can be used in your markup:

    <div class="shadow-3xl"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

### Customizing inset shadows

Use the `--inset-shadow-*` theme variables to customize the inset box shadow utilities in your project:

    @theme { --inset-shadow-md: inset 0 2px 3px rgba(0, 0, 0, 0.25); }

Now the `inset-shadow-md` utility can be used in your markup:

    <div class="inset-shadow-md"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

### Customizing shadow colors

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now utilities like `shadow-regal-blue`,`inset-shadow-regal-blue`,`ring-regal-blue`, and `inset-ring-regal-blue` can be used in your markup:

    <div class="shadow-regal-blue"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/text-shadow

Utilities for controlling the shadow of a text element.

| Class | Styles |
| --- | --- |
| `text-shadow-2xs` | 
`text-shadow: var(--text-shadow-2xs); /* 0px 1px 0px rgb(0 0 0 / 0.15) */`

 |
| `text-shadow-xs` | 

`text-shadow: var(--text-shadow-xs); /* 0px 1px 1px rgb(0 0 0 / 0.2) */`

 |
| `text-shadow-sm` | 

`text-shadow: var(--text-shadow-sm); /* 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) */`

 |
| `text-shadow-md` | 

`text-shadow: var(--text-shadow-md); /* 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) */`

 |
| `text-shadow-lg` | 

`text-shadow: var(--text-shadow-lg); /* 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) */`

 |
| `text-shadow-none` | 

`text-shadow: none;`

 |
| `text-shadow-(<custom-property>)` | 

`text-shadow: var(<custom-property>);`

 |
| `text-shadow-(color:<custom-property>)` | 

`--tw-shadow-color var(<custom-property>);`

 |
| `text-shadow-[<value>]` | 

`text-shadow: <value>;`

 |
| `text-shadow-inherit` | 

`--tw-shadow-color inherit;`

 |

## Examples

### Basic example

Use utilities like `text-shadow-sm` and `shadow-lg` to apply different sized text shadows to a text element:

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

    <p class="text-shadow-2xs ...">The quick brown fox...</p><p class="text-shadow-xs ...">The quick brown fox...</p><p class="text-shadow-sm ...">The quick brown fox...</p><p class="text-shadow-md ...">The quick brown fox...</p><p class="text-shadow-lg ...">The quick brown fox...</p>

### Changing the opacity

Use the opacity modifier to adjust the opacity of the text shadow:

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

    <p class="text-shadow-lg ...">The quick brown fox...</p><p class="text-shadow-lg/20 ...">The quick brown fox...</p><p class="text-shadow-lg/30 ...">The quick brown fox...</p>

The default text shadow opacities are quite low (20% or less), so increasing the opacity (to like 50%) will make the text shadows more pronounced.

### Setting the shadow color

Use utilities like `text-shadow-indigo-500` and `text-shadow-cyan-500/50` to change the color of a text shadow:

    <button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Book a demo</button><button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">See pricing</button>

By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.

### Removing a text shadow

Use the `text-shadow-none` utility to remove an existing text shadow from an element:

    <p class="text-shadow-lg dark:text-shadow-none"> <!-- ... --></p>

### Using a custom value

Use the `text-shadow-[<value>]` syntax to set the text shadow based on a completely custom value:

    <p class="text-shadow-[0_35px_35px_rgb(0_0_0_/_0.25)] ..."> Lorem ipsum dolor sit amet...</p>

For CSS variables, you can also use the `text-shadow-(<custom-property>)` syntax:

    <p class="text-shadow-(--my-text-shadow) ..."> Lorem ipsum dolor sit amet...</p>

This is just a shorthand for `text-shadow-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `text-shadow` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="text-shadow-none md:text-shadow-lg ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

## Customizing your theme

### Customizing text shadows

Use the `--text-shadow-*` theme variables to customize the text shadow utilities in your project:

    @theme { --text-shadow-xl: 0 35px 35px rgb(0, 0, 0 / 0.25); }

Now the `text-shadow-xl` utility can be used in your markup:

    <p class="text-shadow-xl"> Lorem ipsum dolor sit amet...</p>

Learn more about customizing your theme in the theme documentation.

### Customizing shadow colors

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `text-shadow-regal-blue` utility can be used in your markup:

    <p class="text-shadow-regal-blue"> Lorem ipsum dolor sit amet...</p>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/opacity

Utilities for controlling the opacity of an element.

| Class | Styles |
| --- | --- |
| `opacity-<number>` | 
`opacity: <number>%;`

 |
| `opacity-(<custom-property>)` | 

`opacity: var(<custom-property>);`

 |
| `opacity-[<value>]` | 

`opacity: <value>;`

 |

## Examples

### Basic example

Use `opacity-<number>` utilities like `opacity-25` and `opacity-100` to set the opacity of an element:

opacity-100

opacity-75

opacity-50

opacity-25

    <button class="bg-indigo-500 opacity-100 ..."></button><button class="bg-indigo-500 opacity-75 ..."></button><button class="bg-indigo-500 opacity-50 ..."></button><button class="bg-indigo-500 opacity-25 ..."></button>

### Applying conditionally

Prefix an `opacity` utility with a variant like `disabled:*` to only apply the utility in that state:

    <input class="opacity-100 disabled:opacity-75 ..." type="text" />

Learn more about using variants in the variants documentation.

### Using a custom value

Use the `opacity-[<value>]` syntax to set the opacity based on a completely custom value:

    <button class="opacity-[.67] ..."> <!-- ... --></button>

For CSS variables, you can also use the `opacity-(<custom-property>)` syntax:

    <button class="opacity-(--my-opacity) ..."> <!-- ... --></button>

This is just a shorthand for `opacity-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix an `opacity` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <button class="opacity-50 md:opacity-100 ..."> <!-- ... --></button>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/mix-blend-mode

Utilities for controlling how an element should blend with the background.

| Class | Styles |
| --- | --- |
| `mix-blend-normal` | 
`mix-blend-mode: normal;`

 |
| `mix-blend-multiply` | 

`mix-blend-mode: multiply;`

 |
| `mix-blend-screen` | 

`mix-blend-mode: screen;`

 |
| `mix-blend-overlay` | 

`mix-blend-mode: overlay;`

 |
| `mix-blend-darken` | 

`mix-blend-mode: darken;`

 |
| `mix-blend-lighten` | 

`mix-blend-mode: lighten;`

 |
| `mix-blend-color-dodge` | 

`mix-blend-mode: color-dodge;`

 |
| `mix-blend-color-burn` | 

`mix-blend-mode: color-burn;`

 |
| `mix-blend-hard-light` | 

`mix-blend-mode: hard-light;`

 |
| `mix-blend-soft-light` | 

`mix-blend-mode: soft-light;`

 |

## Examples

### Basic example

Use utilities like `mix-blend-overlay` and `mix-blend-soft-light` to control how an element's content and background is blended with other content in the same stacking context:

    <div class="flex justify-center -space-x-14"> <div class="bg-blue-500 mix-blend-multiply ..."></div> <div class="bg-pink-500 mix-blend-multiply ..."></div></div>

### Isolating blending

Use the `isolate` utility on the parent element to create a new stacking context and prevent blending with content behind it:

    <div class="isolate flex justify-center -space-x-14"> <div class="bg-yellow-500 mix-blend-multiply ..."></div> <div class="bg-green-500 mix-blend-multiply ..."></div></div><div class="flex justify-center -space-x-14"> <div class="bg-yellow-500 mix-blend-multiply ..."></div> <div class="bg-green-500 mix-blend-multiply ..."></div></div>

### Responsive design

Prefix a `mix-blend-mode` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="mix-blend-multiply md:mix-blend-overlay ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/background-blend-mode

Effects

Utilities for controlling how an element's background image should blend with its background color.

| Class | Styles |
| --- | --- |
| `bg-blend-normal` | 
`background-blend-mode: normal;`

 |
| `bg-blend-multiply` | 

`background-blend-mode: multiply;`

 |
| `bg-blend-screen` | 

`background-blend-mode: screen;`

 |
| `bg-blend-overlay` | 

`background-blend-mode: overlay;`

 |
| `bg-blend-darken` | 

`background-blend-mode: darken;`

 |
| `bg-blend-lighten` | 

`background-blend-mode: lighten;`

 |
| `bg-blend-color-dodge` | 

`background-blend-mode: color-dodge;`

 |
| `bg-blend-color-burn` | 

`background-blend-mode: color-burn;`

 |
| `bg-blend-hard-light` | 

`background-blend-mode: hard-light;`

 |
| `bg-blend-soft-light` | 

`background-blend-mode: soft-light;`

 |

## Examples

### Basic example

Use utilities like `bg-blend-difference` and `bg-blend-saturation` to control how the background image and color of an element are blended:

bg-blend-multiply

bg-blend-soft-light

bg-blend-overlay

    <div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-multiply ..."></div><div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-soft-light ..."></div><div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-overlay ..."></div>

### Responsive design

Prefix a `background-blend-mode` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-lighten md:bg-blend-darken ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

### On this page

*   Quick reference
*   Examples
    *   Basic example
    *   Responsive design

5-day mini-course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course →

---

## Page: https://tailwindcss.com/docs/mask-clip

Utilities for controlling the bounding box of an element's mask.

| Class | Styles |
| --- | --- |
| `mask-clip-border` | 
`mask-clip: border-box;`

 |
| `mask-clip-padding` | 

`mask-clip: padding-box;`

 |
| `mask-clip-content` | 

`mask-clip: content-box;`

 |
| `mask-clip-fill` | 

`mask-clip: fill-box;`

 |
| `mask-clip-stroke` | 

`mask-clip: stroke-box;`

 |
| `mask-clip-view` | 

`mask-clip: view-box;`

 |
| `mask-no-clip` | 

`mask-clip: no-clip;`

 |

## Examples

### Basic example

Use utilities like `mask-clip-border`, `mask-clip-padding`, and `mask-clip-content` to control the bounding box of an element's mask:

mask-clip-border

mask-clip-padding

mask-clip-content

    <div class="mask-clip-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-clip-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-clip-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>

### Responsive design

Prefix a `mask-clip` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="mask-clip-border md:mask-clip-padding ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/mask-composite

    <div class="mask-add mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div><div class="mask-subtract mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div><div class="mask-intersect mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div><div class="mask-exclude mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>

---

## Page: https://tailwindcss.com/docs/mask-image

Utilities for controlling an element's mask image.

| Class | Styles |
| --- | --- |
| `mask-[<value>]` | 
`mask-image: <value>;`

 |
| `mask-(<custom-property>)` | 

`mask-image: var(<custom-property>);`

 |
| `mask-none` | 

`mask-image: none;`

 |
| `mask-linear-<number>` | 

`mask-image: linear-gradient(<number>deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));`

 |
| `-mask-linear-<number>` | 

`mask-image: linear-gradient(calc(<number>deg * -1), black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));`

 |
| `mask-linear-from-<number>` | 

`mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-linear-to));`

 |
| `mask-linear-from-<percentage>` | 

`mask-image: linear-gradient(var(--tw-mask-linear-position), black <percentage>, transparent var(--tw-mask-linear-to));`

 |
| `mask-linear-from-<color>` | 

`mask-image: linear-gradient(var(--tw-mask-linear-position), <color> var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to));`

 |
| `mask-linear-from-(<custom-property>)` | 

`mask-image: linear-gradient(var(--tw-mask-linear-position), black <custom-property>, transparent var(--tw-mask-linear-to));`

 |
| `mask-linear-from-[<value>]` | 

`mask-image: linear-gradient(var(--tw-mask-linear-position), black <value>, transparent var(--tw-mask-linear-to));`

 |

## Examples

### Using an image mask

Use the `mask-[<value>]` syntax to set the mask image of an element:

    <div class="mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."> <!-- ... --></div>

### Masking edges

Use utilities like `mask-b-from-<value>` and `mask-t-to-<value>` to add a linear gradient mask to a single side of an element:

mask-t-from-50%

mask-r-from-30%

mask-l-from-50% mask-l-to-90%

mask-b-from-20% mask-b-to-80%

    <div class="mask-t-from-50% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-r-from-30% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-l-from-50% mask-l-to-90% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

Additionally, use utilities like `mask-x-from-70%` and `mask-y-to-90%` to apply a mask to two sides of an element at the same time:

mask-x-from-70% mask-x-to-90%

mask-y-from-70% mask-y-to-90%

    <div class="mask-x-from-70% mask-x-to-90% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-y-from-70% mask-y-to-90% bg-[url(/img/mountains.jpg)] ..."></div>

By default, linear gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask-<side>-from-<color>` and `mask-<side>-to-<color>` utilities.

### Adding an angled linear mask

Use utilities like `mask-linear-<angle>`, `mask-linear-from-20`, and `mask-linear-to-40` to add a custom linear gradient mask to an element:

mask-linear-50

\-mask-linear-50

    <div class="mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div><div class="-mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

### Adding a radial mask

Use the `mask-radial-from-<value>` and `mask-radial-to-<value>` utilities to add a radial gradient mask to an element:

Speed

Built for power users

Work faster than ever with our keyboard shortcuts

    <div class="flex items-center gap-4"> <img class="mask-radial-[100%_100%] mask-radial-from-75% mask-radial-at-left ..." src="/img/keyboard.png" /> <div class="font-medium"> <p class="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Speed</p> <p class="mt-2 text-base text-gray-700 dark:text-gray-300">Built for power users</p> <p class="mt-1 text-sm leading-relaxed text-balance text-gray-500"> Work faster than ever with customizable keyboard shortcuts </p> </div></div>

By default, radial gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask-radial-from-<color>` and `mask-radial-to-<color>` utilities.

#### Setting the radial position

Use utilities like `mask-radial-at-bottom-left` and `mask-radial-at-[35%_35%]` to set the position of the center of the radial gradient mask:

mask-radial-at-top-left

mask-radial-at-top

mask-radial-at-top-right

mask-radial-at-left

mask-radial-at-center

mask-radial-at-right

mask-radial-at-bottom-left

mask-radial-at-bottom

mask-radial-at-bottom-right

    <div class="mask-radial-at-top-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-top mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-top-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-center mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-bottom-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-bottom mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-bottom-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>

This is different from `mask-position` which sets the position of the mask image itself, not the radial gradient.

#### Setting the radial size

Use utilities like `mask-radial-closest-corner` and `mask-radial-farthest-side` to set the size of the radial gradient mask:

mask-radial-closest-side

mask-radial-closest-corner

mask-radial-farthest-side

mask-radial-farthest-corner

    <div class="mask-radial-closest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-closest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-farthest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-farthest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>

When setting a custom radial gradient size, the units you can use depend on the `<ending-shape>` of the gradient which is set to `ellipse` by default.

With `mask-circle`, you can only use a single fixed length, like `mask-radial-[5rem]`. Whereas with `mask-ellipse`, you can specify each axis as a fixed length or percentage, like `mask-radial-[40%_80%]`.

### Adding a conic mask

Use the `mask-conic-from-<value>`, `mask-conic-to-<value>` and `mask-conic-<angle>` utilities to add a conic gradient mask to an element:

Storage used: 75%

0.48 GB out of 2 GB remaining

    <div class="flex items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800"> <div class="grid grid-cols-1 grid-rows-1"> <div class="border-4 border-gray-100 dark:border-gray-700 ..."></div> <div class="border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75% dark:border-amber-400 ..."></div> </div> <div class="w-0 flex-1 text-sm text-gray-950 dark:text-white"> <p class="font-medium">Storage used: 75%</p> <p class="mt-1 text-gray-500 dark:text-gray-400"><span class="font-medium">0.48 GB</span> out of 2 GB remaining</p> </div></div>

By default, conic gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask-conic-from-<color>` and `mask-conic-to-<color>` utilities.

### Combining masks

Gradient mask utilities, like `mask-radial-from-<value>`, `mask-conic-to-<value>`, and `mask-l-from-<value>` can be combined to create more complex gradient masks:

    <div class="mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ..."></div>

This behavior relies on the fact that Tailwind sets the `mask-composite` property to `intersect` by default. Changing this property will affect how the gradient masks are combined.

### Removing mask images

Use the `mask-none` utility to remove an existing mask image from an element:

    <div class="mask-none"> <!-- ... --></div>

### Using a custom value

Use utilities like `mask-linear-[<value>]` and `mask-radial-[<value>]` to set the mask image based on a completely custom value:

    <div class="mask-linear-[70deg,transparent_10%,black,transparent_80%] ..."> <!-- ... --></div>

For CSS variables, you can also use the `mask-linear-(<custom-property>)` syntax:

    <div class="mask-linear-(--my-mask) ..."> <!-- ... --></div>

This is just a shorthand for `mask-linear-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `mask-image` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="mask-radial-from-70% md:mask-radial-from-50% ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now utilities like `mask-radial-from-regal-blue`,`mask-conic-to-regal-blue`, and `mask-b-from-regal-blue` can be used in your markup:

    <div class="mask-radial-from-regal-blue"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/mask-mode

Utilities for controlling an element's mask mode.

| Class | Styles |
| --- | --- |
| `mask-alpha` | 
`mask-mode: alpha;`

 |
| `mask-luminance` | 

`mask-mode: luminance;`

 |
| `mask-match` | 

`mask-mode: match-source;`

 |

## Examples

### Basic example

Use the `mask-alpha`, `mask-luminance` and `mask-match` utilities to control the mode of an element's mask:

mask-alpha

mask-luminance

    <div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>

When using `mask-luminance` the luminance value of the mask determines visibility, so sticking with grayscale colors will produce the most predictable results. With `mask-alpha`, the opacity of the mask determines the visibility of the masked element.

### Responsive design

Prefix a `mask-mode` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="mask-alpha md:mask-luminance ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/mask-origin

Utilities for controlling how an element's mask image is positioned relative to borders, padding, and content.

| Class | Styles |
| --- | --- |
| `mask-origin-border` | 
`mask-origin: border-box;`

 |
| `mask-origin-padding` | 

`mask-origin: padding-box;`

 |
| `mask-origin-content` | 

`mask-origin: content-box;`

 |
| `mask-origin-fill` | 

`mask-origin: fill-box;`

 |
| `mask-origin-stroke` | 

`mask-origin: stroke-box;`

 |
| `mask-origin-view` | 

`mask-origin: view-box;`

 |

## Examples

### Basic example

Use utilities like `mask-origin-border`, `mask-origin-padding`, and `mask-origin-content` to control where an element's mask is rendered:

mask-origin-border

mask-origin-padding

mask-origin-content

    <div class="mask-origin-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-origin-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-origin-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>

### Responsive design

Prefix a `mask-origin` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="mask-origin-border md:mask-origin-padding ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/mask-position

Utilities for controlling the position of an element's mask image.

| Class | Styles |
| --- | --- |
| `mask-top-left` | 
`mask-position: top left;`

 |
| `mask-top` | 

`mask-position: top;`

 |
| `mask-top-right` | 

`mask-position: top right;`

 |
| `mask-left` | 

`mask-position: left;`

 |
| `mask-center` | 

`mask-position: center;`

 |
| `mask-right` | 

`mask-position: right;`

 |
| `mask-bottom-left` | 

`mask-position: bottom left;`

 |
| `mask-bottom` | 

`mask-position: bottom;`

 |
| `mask-bottom-right` | 

`mask-position: bottom right;`

 |
| `mask-position-(<custom-property>)` | 

`mask-position: var(<custom-property>);`

 |
| `mask-position-[<value>]` | 

`mask-position: <value>;`

 |

## Examples

### Basic example

Use utilities like `mask-center`, `mask-right`, and `mask-left-top` to control the position of an element's mask image:

mask-top-left

mask-top

mask-top-right

mask-left

mask-center

mask-right

mask-bottom-left

mask-bottom

mask-bottom-right

    <div class="mask-top-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-top mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-top-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-center mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-bottom-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-bottom mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-bottom-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>

### Using a custom value

Use the `mask-position-[<value>]` syntax to set the mask position based on a completely custom value:

    <div class="mask-position-[center_top_1rem] ..."> <!-- ... --></div>

For CSS variables, you can also use the `mask-position-(<custom-property>)` syntax:

    <div class="mask-position-(--my-mask-position) ..."> <!-- ... --></div>

This is just a shorthand for `mask-position-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `mask-position` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="mask-center md:mask-top ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/mask-repeat

Utilities for controlling the repetition of an element's mask image.

| Class | Styles |
| --- | --- |
| `mask-repeat` | 
`mask-repeat: repeat;`

 |
| `mask-no-repeat` | 

`mask-repeat: no-repeat;`

 |
| `mask-repeat-x` | 

`mask-repeat: repeat-x;`

 |
| `mask-repeat-y` | 

`mask-repeat: repeat-y;`

 |
| `mask-repeat-space` | 

`mask-repeat: space;`

 |
| `mask-repeat-round` | 

`mask-repeat: round;`

 |

## Examples

### Basic example

Use the `mask-repeat` utility to repeat the mask image both vertically and horizontally:

    <div class="mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

### Repeating horizontally

Use the `mask-repeat-x` utility to only repeat the mask image horizontally:

    <div class="mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>

### Repeating vertically

Use the `mask-repeat-y` utility to only repeat the mask image vertically:

    <div class="mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>

### Preventing clipping

Use the `mask-repeat-space` utility to repeat the mask image without clipping:

    <div class="mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

### Preventing clipping and gaps

Use the `mask-repeat-round` utility to repeat the mask image without clipping, stretching if needed to avoid gaps:

    <div class="mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

### Disabling repeating

Use the `mask-no-repeat` utility to prevent a mask image from repeating:

    <div class="mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

### Responsive design

Prefix a `mask-repeat` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="mask-repeat md:mask-repeat-x ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/mask-size

Utilities for controlling the size of an element's mask image.

| Class | Styles |
| --- | --- |
| `mask-auto` | 
`mask-size: auto;`

 |
| `mask-cover` | 

`mask-size: cover;`

 |
| `mask-contain` | 

`mask-size: contain;`

 |
| `mask-size-(<custom-property>)` | 

`mask-size: var(<custom-property>);`

 |
| `mask-size-[<value>]` | 

`mask-size: <value>;`

 |

## Examples

### Filling the container

Use the `mask-cover` utility to scale the mask image until it fills the mask layer, cropping the image if needed:

    <div class="mask-cover mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

### Filling without cropping

Use the `mask-contain` utility to scale the mask image to the outer edges without cropping or stretching:

    <div class="mask-contain mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

### Using the default size

Use the `mask-auto` utility to display the mask image at its default size:

    <div class="mask-auto mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

### Using a custom value

Use the `mask-size-[<value>]` syntax to set the mask image size based on a completely custom value:

    <div class="mask-size-[auto_100px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `mask-size-(<custom-property>)` syntax:

    <div class="mask-size-(--my-mask-size) ..."> <!-- ... --></div>

This is just a shorthand for `mask-size-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `mask-size` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="mask-auto md:mask-contain ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/mask-type

Utilities for controlling how an SVG mask is interpreted.

| Class | Styles |
| --- | --- |
| `mask-type-alpha` | 
`mask-type: alpha;`

 |
| `mask-type-luminance` | 

`mask-type: luminance;`

 |

## Examples

### Basic example

Use the `mask-type-alpha` and `mask-type-luminance` utilities to control the type of an SVG mask:

mask-type-alpha

mask-type-luminance

    <svg> <mask id="blob1" class="mask-type-alpha fill-gray-700/70"> <path d="..."></path> </mask> <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob1)" /></svg><svg> <mask id="blob2" class="mask-type-luminance fill-gray-700/70"> <path d="..."></path> </mask> <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob2)" /></svg>

When using `mask-type-luminance` the luminance value of the SVG mask determines visibility, so sticking with grayscale colors will produce the most predictable results. With `mask-alpha`, the opacity of the SVG mask determines the visibility of the masked element.

### Responsive design

Prefix a `mask-type` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <mask class="mask-type-alpha md:mask-type-luminance ..."> <!-- ... --></mask>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/filter

Utilities for applying filters to an element.

| Class | Styles |
| --- | --- |
| `filter-none` | 
`filter: none;`

 |
| `filter-(<custom-property>)` | 

`filter: var(<custom-property>);`

 |
| `filter-[<value>]` | 

`filter: <value>;`

 |

## Examples

### Basic example

Use utilities like `blur-xs` and `grayscale` to apply filters to an element:

blur-xs

grayscale

combined

    <img class="blur-xs" src="/img/mountains.jpg" /><img class="grayscale" src="/img/mountains.jpg" /><img class="blur-xs grayscale" src="/img/mountains.jpg" />

You can combine the following filter utilities: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, and sepia.

### Removing filters

Use the `filter-none` utility to remove all of the filters applied to an element:

    <img class="blur-md brightness-150 invert md:filter-none" src="/img/mountains.jpg" />

### Using a custom value

Use the `filter-[<value>]` syntax to set the filter based on a completely custom value:

    <img class="filter-[url('filters.svg#filter-id')] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `filter-(<custom-property>)` syntax:

    <img class="filter-(--my-filter) ..." src="/img/mountains.jpg" />

This is just a shorthand for `filter-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Applying on hover

Prefix a `filter` utility with a variant like `hover:*` to only apply the utility in that state:

    <img class="blur-sm hover:filter-none ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

### Responsive design

Prefix a `filter` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="blur-sm md:filter-none ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/filter-blur

Utilities for applying blur filters to an element.

| Class | Styles |
| --- | --- |
| `blur-xs` | 
`filter: blur(var(--blur-xs)); /* 4px */`

 |
| `blur-sm` | 

`filter: blur(var(--blur-sm)); /* 8px */`

 |
| `blur-md` | 

`filter: blur(var(--blur-md)); /* 12px */`

 |
| `blur-lg` | 

`filter: blur(var(--blur-lg)); /* 16px */`

 |
| `blur-xl` | 

`filter: blur(var(--blur-xl)); /* 24px */`

 |
| `blur-2xl` | 

`filter: blur(var(--blur-2xl)); /* 40px */`

 |
| `blur-3xl` | 

`filter: blur(var(--blur-3xl)); /* 64px */`

 |
| `blur-none` | 

`filter: ;`

 |
| `blur-(<custom-property>)` | 

`filter: blur(var(<custom-property>));`

 |
| `blur-[<value>]` | 

`filter: blur(<value>);`

 |

## Examples

### Basic example

Use utilities like `blur-sm` and `blur-lg` to blur an element:

blur-none

blur-sm

blur-lg

blur-2xl

    <img class="blur-none" src="/img/mountains.jpg" /><img class="blur-sm" src="/img/mountains.jpg" /><img class="blur-lg" src="/img/mountains.jpg" /><img class="blur-2xl" src="/img/mountains.jpg" />

### Using a custom value

Use the `blur-[<value>]` syntax to set the blur based on a completely custom value:

    <img class="blur-[2px] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `blur-(<custom-property>)` syntax:

    <img class="blur-(--my-blur) ..." src="/img/mountains.jpg" />

This is just a shorthand for `blur-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `filter: blur()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="blur-none md:blur-lg ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--blur-*` theme variables to customize the blur utilities in your project:

    @theme { --blur-2xs: 2px; }

Now the `blur-2xs` utility can be used in your markup:

    <img class="blur-2xs" src="/img/mountains.jpg" />

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/filter-brightness

Utilities for applying brightness filters to an element.

| Class | Styles |
| --- | --- |
| `brightness-<number>` | 
`filter: brightness(<number>%);`

 |
| `brightness-(<custom-property>)` | 

`filter: brightness(var(<custom-property>));`

 |
| `brightness-[<value>]` | 

`filter: brightness(<value>);`

 |

## Examples

### Basic example

Use utilities like `brightness-50` and `brightness-100` to control an element's brightness:

brightness-50

brightness-100

brightness-125

brightness-200

    <img class="brightness-50 ..." src="/img/mountains.jpg" /><img class="brightness-100 ..." src="/img/mountains.jpg" /><img class="brightness-125 ..." src="/img/mountains.jpg" /><img class="brightness-200 ..." src="/img/mountains.jpg" />

### Using a custom value

Use the `brightness-[<value>]` syntax to set the brightness based on a completely custom value:

    <img class="brightness-[1.75] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `brightness-(<custom-property>)` syntax:

    <img class="brightness-(--my-brightness) ..." src="/img/mountains.jpg" />

This is just a shorthand for `brightness-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `filter: brightness()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="brightness-110 md:brightness-150 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/filter-contrast

Utilities for applying contrast filters to an element.

| Class | Styles |
| --- | --- |
| `contrast-<number>` | 
`filter: contrast(<number>%);`

 |
| `contrast-(<custom-property>)` | 

`filter: contrast(var(<custom-property>));`

 |
| `contrast-[<value>]` | 

`filter: contrast(<value>);`

 |

## Examples

### Basic example

Use utilities like `contrast-50` and `contrast-100` to control an element's contrast:

contrast-50

contrast-100

contrast-125

contrast-200

    <img class="contrast-50 ..." src="/img/mountains.jpg" /><img class="contrast-100 ..." src="/img/mountains.jpg" /><img class="contrast-125 ..." src="/img/mountains.jpg" /><img class="contrast-200 ..." src="/img/mountains.jpg" />

### Using a custom value

Use the `contrast-[<value>]` syntax to set the contrast based on a completely custom value:

    <img class="contrast-[.25] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `contrast-(<custom-property>)` syntax:

    <img class="contrast-(--my-contrast) ..." src="/img/mountains.jpg" />

This is just a shorthand for `contrast-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `filter: contrast()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="contrast-125 md:contrast-150 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/filter-drop-shadow

Utilities for applying drop-shadow filters to an element.

| Class | Styles |
| --- | --- |
| `drop-shadow-xs` | 
`filter: drop-shadow(var(--drop-shadow-xs)); /* 0 1px 1px rgb(0 0 0 / 0.05) */`

 |
| `drop-shadow-sm` | 

`filter: drop-shadow(var(--drop-shadow-sm)); /* 0 1px 2px rgb(0 0 0 / 0.15) */`

 |
| `drop-shadow-md` | 

`filter: drop-shadow(var(--drop-shadow-md)); /* 0 3px 3px rgb(0 0 0 / 0.12) */`

 |
| `drop-shadow-lg` | 

`filter: drop-shadow(var(--drop-shadow-lg)); /* 0 4px 4px rgb(0 0 0 / 0.15) */`

 |
| `drop-shadow-xl` | 

`filter: drop-shadow(var(--drop-shadow-xl); /* 0 9px 7px rgb(0 0 0 / 0.1) */`

 |
| `drop-shadow-2xl` | 

`filter: drop-shadow(var(--drop-shadow-2xl)); /* 0 25px 25px rgb(0 0 0 / 0.15) */`

 |
| `drop-shadow-none` | 

`filter: drop-shadow(0 0 #0000);`

 |
| `drop-shadow-(<custom-property>)` | 

`filter: drop-shadow(var(<custom-property>));`

 |
| `drop-shadow-(color:<custom-property>)` | 

`--tw-drop-shadow-color: var(<custom-property>);`

 |
| `drop-shadow-[<value>]` | 

`filter: drop-shadow(<value>);`

 |

## Examples

### Basic example

Use utilities like `drop-shadow-sm` and `drop-shadow-xl` to add a drop shadow to an element:

drop-shadow-md

drop-shadow-lg

drop-shadow-xl

    <svg class="drop-shadow-md ..."> <!-- ... --></svg><svg class="drop-shadow-lg ..."> <!-- ... --></svg><svg class="drop-shadow-xl ..."> <!-- ... --></svg>

This is useful for applying shadows to irregular shapes, like text and SVG elements. For applying shadows to regular elements, you probably want to use box shadow instead.

### Changing the opacity

Use the opacity modifier to adjust the opacity of the drop shadow:

drop-shadow-xl

drop-shadow-xl/25

drop-shadow-xl/50

    <svg class="fill-white drop-shadow-xl ...">...</svg><svg class="fill-white drop-shadow-xl/25 ...">...</svg><svg class="fill-white drop-shadow-xl/50 ...">...</svg>

The default drop shadow opacities are quite low (15% or less), so increasing the opacity (to like 50%) will make the drop shadows more pronounced.

### Setting the shadow color

Use utilities like `drop-shadow-indigo-500` and `drop-shadow-cyan-500/50` to change the color of a drop shadow:

drop-shadow-cyan-500/50

drop-shadow-indigo-500/50

    <svg class="fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50 ...">...</svg><svg class="fill-indigo-500 drop-shadow-lg drop-shadow-indigo-500/50 ...">...</svg>

By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.

### Removing a drop shadow

Use the `drop-shadow-none` utility to remove an existing drop shadow from an element:

    <svg class="drop-shadow-lg dark:drop-shadow-none"> <!-- ... --></svg>

### Using a custom value

Use the `drop-shadow-[<value>]` syntax to set the drop shadow based on a completely custom value:

    <svg class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] ..."> <!-- ... --></svg>

For CSS variables, you can also use the `drop-shadow-(<custom-property>)` syntax:

    <svg class="drop-shadow-(--my-drop-shadow) ..."> <!-- ... --></svg>

This is just a shorthand for `drop-shadow-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `filter: drop-shadow()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <svg class="drop-shadow-md md:drop-shadow-xl ..."> <!-- ... --></svg>

Learn more about using variants in the variants documentation.

## Customizing your theme

### Customizing drop shadows

Use the `--drop-shadow-*` theme variables to customize the drop shadow utilities in your project:

    @theme { --drop-shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); }

Now the `drop-shadow-3xl` utility can be used in your markup:

    <svg class="drop-shadow-3xl"> <!-- ... --></svg>

Learn more about customizing your theme in the theme documentation.

### Customizing shadow colors

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `drop-shadow-regal-blue` utility can be used in your markup:

    <svg class="drop-shadow-regal-blue"> <!-- ... --></svg>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/filter-grayscale

Utilities for applying grayscale filters to an element.

| Class | Styles |
| --- | --- |
| `grayscale` | 
`filter: grayscale(100%);`

 |
| `grayscale-<number>` | 

`filter: grayscale(<number>%);`

 |
| `grayscale-(<custom-property>)` | 

`filter: grayscale(var(<custom-property>));`

 |
| `grayscale-[<value>]` | 

`filter: grayscale(<value>);`

 |

## Examples

### Basic example

Use utilities like `grayscale` and `grayscale-75` to control the amount of grayscale effect applied to an element:

grayscale-0

grayscale-25

grayscale-50

grayscale

    <img class="grayscale-0 ..." src="/img/mountains.jpg" /><img class="grayscale-25 ..." src="/img/mountains.jpg" /><img class="grayscale-50 ..." src="/img/mountains.jpg" /><img class="grayscale ..." src="/img/mountains.jpg" />

### Using a custom value

Use the `grayscale-[<value>]` syntax to set the grayscale based on a completely custom value:

    <img class="grayscale-[0.5] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `grayscale-(<custom-property>)` syntax:

    <img class="grayscale-(--my-grayscale) ..." src="/img/mountains.jpg" />

This is just a shorthand for `grayscale-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `filter: grayscale()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="grayscale md:grayscale-0 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/filter-hue-rotate

Utilities for applying hue-rotate filters to an element.

| Class | Styles |
| --- | --- |
| `hue-rotate-<number>` | 
`filter: hue-rotate(<number>deg);`

 |
| `-hue-rotate-<number>` | 

`filter: hue-rotate(calc(<number>deg * -1));`

 |
| `hue-rotate-(<custom-property>)` | 

`filter: hue-rotate(var(<custom-property>));`

 |
| `hue-rotate-[<value>]` | 

`filter: hue-rotate(<value>);`

 |

## Examples

### Basic example

Use utilities like `hue-rotate-90` and `hue-rotate-180` to rotate the hue of an element by degrees:

hue-rotate-15

hue-rotate-90

hue-rotate-180

hue-rotate-270

    <img class="hue-rotate-15" src="/img/mountains.jpg" /><img class="hue-rotate-90" src="/img/mountains.jpg" /><img class="hue-rotate-180" src="/img/mountains.jpg" /><img class="hue-rotate-270" src="/img/mountains.jpg" />

### Using negative values

Use utilities like `-hue-rotate-15` and `-hue-rotate-45` to set a negative hue rotate value:

\-hue-rotate-15

\-hue-rotate-45

\-hue-rotate-90

    <img class="-hue-rotate-15" src="/img/mountains.jpg" /><img class="-hue-rotate-45" src="/img/mountains.jpg" /><img class="-hue-rotate-90" src="/img/mountains.jpg" />

### Using a custom value

Use the `hue-rotate-[<value>]` syntax to set the hue rotation based on a completely custom value:

    <img class="hue-rotate-[3.142rad] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `hue-rotate-(<custom-property>)` syntax:

    <img class="hue-rotate-(--my-hue-rotate) ..." src="/img/mountains.jpg" />

This is just a shorthand for `hue-rotate-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `filter: hue-rotate()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="hue-rotate-60 md:hue-rotate-0 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/filter-invert

Utilities for applying invert filters to an element.

| Class | Styles |
| --- | --- |
| `invert` | 
`filter: invert(100%);`

 |
| `invert-<number>` | 

`filter: invert(<number>%);`

 |
| `invert-(<custom-property>)` | 

`filter: invert(var(<custom-property>))`

 |
| `invert-[<value>]` | 

`filter: invert(<value>);`

 |

## Examples

### Basic example

Use utilities like `invert` and `invert-20` to control the color inversion of an element:

invert-0

invert-20

invert

    <img class="invert-0" src="/img/mountains.jpg" /><img class="invert-20" src="/img/mountains.jpg" /><img class="invert" src="/img/mountains.jpg" />

### Using a custom value

Use the `invert-[<value>]` syntax to set the color inversion based on a completely custom value:

    <img class="invert-[.25] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `invert-(<custom-property>)` syntax:

    <img class="invert-(--my-inversion) ..." src="/img/mountains.jpg" />

This is just a shorthand for `invert-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `filter: invert()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="invert md:invert-0 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/filter-saturate

Utilities for applying saturation filters to an element.

| Class | Styles |
| --- | --- |
| `saturate-<number>` | 
`filter: saturate(<number>%);`

 |
| `saturate-(<custom-property>)` | 

`filter: saturate(var(<custom-property>));`

 |
| `saturate-[<value>]` | 

`filter: saturate(<value>);`

 |

## Examples

### Basic example

Use utilities like `saturate-50` and `saturate-100` to control an element's saturation:

saturate-50

saturate-100

saturate-150

saturate-200

    <img class="saturate-50 ..." src="/img/mountains.jpg" /><img class="saturate-100 ..." src="/img/mountains.jpg" /><img class="saturate-150 ..." src="/img/mountains.jpg" /><img class="saturate-200 ..." src="/img/mountains.jpg" />

### Using a custom value

Use the `saturate-[<value>]` syntax to set the saturation based on a completely custom value:

    <img class="saturate-[.25] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `saturate-(<custom-property>)` syntax:

    <img class="saturate-(--my-saturation) ..." src="/img/mountains.jpg" />

This is just a shorthand for `saturate-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `filter: saturate()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="saturate-50 md:saturate-150 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/filter-sepia

Utilities for applying sepia filters to an element.

| Class | Styles |
| --- | --- |
| `sepia` | 
`filter: sepia(100%);`

 |
| `sepia-<number>` | 

`filter: sepia(<number>%);`

 |
| `sepia-(<custom-property>)` | 

`filter: sepia(var(<custom-property>));`

 |
| `sepia-[<value>]` | 

`filter: sepia(<value>);`

 |

## Examples

### Basic example

Use utilities like `sepia` and `sepia-50` to control the sepia effect applied to an element:

sepia-0

sepia-50

sepia

    <img class="sepia-0" src="/img/mountains.jpg" /><img class="sepia-50" src="/img/mountains.jpg" /><img class="sepia" src="/img/mountains.jpg" />

### Using a custom value

Use the `sepia-[<value>]` syntax to set the sepia amount based on a completely custom value:

    <img class="sepia-[.25] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `sepia-(<custom-property>)` syntax:

    <img class="sepia-(--my-sepia) ..." src="/img/mountains.jpg" />

This is just a shorthand for `sepia-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `filter: sepia()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="sepia md:sepia-0 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/backdrop-filter

Utilities for applying backdrop filters to an element.

| Class | Styles |
| --- | --- |
| `backdrop-filter-none` | 
`backdrop-filter: none;`

 |
| `backdrop-filter-(<custom-property>)` | 

`backdrop-filter: var(<custom-property>);`

 |
| `backdrop-filter-[<value>]` | 

`backdrop-filter: <value>;`

 |

## Examples

### Basic example

Use utilities like `backdrop-blur-xs` and `backdrop-grayscale` to apply filters to an element's backdrop:

backdrop-blur-xs

backdrop-grayscale

combined

    <div class="bg-[url(/img/mountains.jpg)] ..."> <div class="backdrop-blur-xs ..."></div></div><div class="bg-[url(/img/mountains.jpg)] ..."> <div class="backdrop-grayscale ..."></div></div><div class="bg-[url(/img/mountains.jpg)] ..."> <div class="backdrop-blur-xs backdrop-grayscale ..."></div></div>

You can combine the following backdrop filter utilities: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia.

### Removing filters

Use the `backdrop-filter-none` utility to remove all of the backdrop filters applied to an element:

    <div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>

### Using a custom value

Use the `backdrop-filter-[<value>]` syntax to set the backdrop filter based on a completely custom value:

    <div class="backdrop-filter-[url('filters.svg#filter-id')] ..."> <!-- ... --></div>

For CSS variables, you can also use the `backdrop-filter-(<custom-property>)` syntax:

    <div class="backdrop-filter-(--my-backdrop-filter) ..."> <!-- ... --></div>

This is just a shorthand for `backdrop-filter-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Applying on hover

Prefix a `backdrop-filter` utility with a variant like `hover:*` to only apply the utility in that state:

    <div class="backdrop-blur-sm hover:backdrop-filter-none ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

### Responsive design

Prefix a `backdrop-filter` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="backdrop-blur-sm md:backdrop-filter-none ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/backdrop-filter-blur

Utilities for applying backdrop blur filters to an element.

| Class | Styles |
| --- | --- |
| `backdrop-blur-xs` | 
`backdrop-filter: blur(var(--blur-xs)); /* 4px */`

 |
| `backdrop-blur-sm` | 

`backdrop-filter: blur(var(--blur-sm)); /* 8px */`

 |
| `backdrop-blur-md` | 

`backdrop-filter: blur(var(--blur-md)); /* 12px */`

 |
| `backdrop-blur-lg` | 

`backdrop-filter: blur(var(--blur-lg)); /* 16px */`

 |
| `backdrop-blur-xl` | 

`backdrop-filter: blur(var(--blur-xl)); /* 24px */`

 |
| `backdrop-blur-2xl` | 

`backdrop-filter: blur(var(--blur-2xl)); /* 40px */`

 |
| `backdrop-blur-3xl` | 

`backdrop-filter: blur(var(--blur-3xl)); /* 64px */`

 |
| `backdrop-blur-none` | 

`backdrop-filter: ;`

 |
| `backdrop-blur-(<custom-property>)` | 

`backdrop-filter: blur(var(<custom-property>));`

 |
| `backdrop-blur-[<value>]` | 

`backdrop-filter: blur(<value>);`

 |

## Examples

### Basic example

Use utilities like `backdrop-blur-sm` and `backdrop-blur-lg` to control an element’s backdrop blur:

backdrop-blur-none

backdrop-blur-sm

backdrop-blur-md

    <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-blur-none ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-blur-sm ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-blur-md ..."></div></div>

### Using a custom value

Use the `backdrop-blur-[<value>]` syntax to set the backdrop blur based on a completely custom value:

    <div class="backdrop-blur-[2px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `backdrop-blur-(<custom-property>)` syntax:

    <div class="backdrop-blur-(--my-backdrop-blur) ..."> <!-- ... --></div>

This is just a shorthand for `backdrop-blur-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `backdrop-filter: blur()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="backdrop-blur-none md:backdrop-blur-lg ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--blur-*` theme variables to customize the backdrop blur utilities in your project:

    @theme { --blur-2xs: 2px; }

Now the `backdrop-blur-2xs` utility can be used in your markup:

    <div class="backdrop-blur-2xs"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/backdrop-filter-brightness

Utilities for applying backdrop brightness filters to an element.

| Class | Styles |
| --- | --- |
| `backdrop-brightness-<number>` | 
`backdrop-filter: brightness(<number>%);`

 |
| `backdrop-brightness-(<custom-property>)` | 

`backdrop-filter: brightness(var(<custom-property>));`

 |
| `backdrop-brightness-[<value>]` | 

`backdrop-filter: brightness(<value>);`

 |

## Examples

### Basic example

Use utilities like `backdrop-brightness-50` and `backdrop-brightness-100` to control an element's backdrop brightness:

backdrop-brightness-50

backdrop-brightness-150

    <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-brightness-50 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-brightness-150 ..."></div></div>

### Using a custom value

Use the `backdrop-brightness-[<value>]` syntax to set the backdrop brightness based on a completely custom value:

    <div class="backdrop-brightness-[1.75] ..."> <!-- ... --></div>

For CSS variables, you can also use the `backdrop-brightness-(<custom-property>)` syntax:

    <div class="backdrop-brightness-(--my-backdrop-brightness) ..."> <!-- ... --></div>

This is just a shorthand for `backdrop-brightness-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `backdrop-filter: brightness()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="backdrop-brightness-110 md:backdrop-brightness-150 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/backdrop-filter-contrast

Utilities for applying backdrop contrast filters to an element.

| Class | Styles |
| --- | --- |
| `backdrop-contrast-<number>` | 
`backdrop-filter: contrast(<number>%);`

 |
| `backdrop-contrast-(<custom-property>)` | 

`backdrop-filter: contrast(var(<custom-property>));`

 |
| `backdrop-contrast-[<value>]` | 

`backdrop-filter: contrast(<value>);`

 |

## Examples

### Basic example

Use utilities like `backdrop-contrast-50` and `backdrop-contrast-100` to control an element's backdrop contrast:

backdrop-contrast-50

backdrop-contrast-200

    <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-contrast-50 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-contrast-200 ..."></div></div>

### Using a custom value

Use the `backdrop-contrast-[<value>]` syntax to set the backdrop contrast based on a completely custom value:

    <div class="backdrop-contrast-[.25] ..."> <!-- ... --></div>

For CSS variables, you can also use the `backdrop-contrast-(<custom-property>)` syntax:

    <div class="backdrop-contrast-(--my-backdrop-contrast) ..."> <!-- ... --></div>

This is just a shorthand for `backdrop-contrast-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `backdrop-filter: contrast()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="backdrop-contrast-125 md:backdrop-contrast-150 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/backdrop-filter-grayscale

Utilities for applying backdrop grayscale filters to an element.

| Class | Styles |
| --- | --- |
| `backdrop-grayscale` | 
`backdrop-filter: grayscale(100%);`

 |
| `backdrop-grayscale-<number>` | 

`backdrop-filter: grayscale(<number>%);`

 |
| `backdrop-grayscale-(<custom-property>)` | 

`backdrop-filter: grayscale(var(<custom-property>));`

 |
| `backdrop-grayscale-[<value>]` | 

`backdrop-filter: grayscale(<value>);`

 |

## Examples

### Basic example

Use utilities like `backdrop-grayscale-50` and `backdrop-grayscale` to control the grayscale effect applied to an element's backdrop:

backdrop-grayscale-0

backdrop-grayscale-50

backdrop-grayscale

    <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-grayscale-0 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-grayscale-50 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-grayscale-200 ..."></div></div>

### Using a custom value

Use the `backdrop-grayscale-[<value>]` syntax to set the backdrop grayscale based on a completely custom value:

    <div class="backdrop-grayscale-[0.5] ..."> <!-- ... --></div>

For CSS variables, you can also use the `backdrop-grayscale-(<custom-property>)` syntax:

    <div class="backdrop-grayscale-(--my-backdrop-grayscale) ..."> <!-- ... --></div>

This is just a shorthand for `backdrop-grayscale-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `backdrop-filter: grayscale()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="backdrop-grayscale md:backdrop-grayscale-0 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/backdrop-filter-hue-rotate

Utilities for applying backdrop hue-rotate filters to an element.

| Class | Styles |
| --- | --- |
| `backdrop-hue-rotate-<number>` | 
`backdrop-filter: hue-rotate(<number>deg);`

 |
| `-backdrop-hue-rotate-<number>` | 

`backdrop-filter: hue-rotate(calc(<number>deg * -1));`

 |
| `backdrop-hue-rotate-(<custom-property>)` | 

`backdrop-filter: hue-rotate(var(<custom-property>));`

 |
| `backdrop-hue-rotate-[<value>]` | 

`backdrop-filter: hue-rotate(<value>);`

 |

## Examples

### Basic example

Use utilities like `backdrop-hue-rotate-90` and `backdrop-hue-rotate-180` to rotate the hue of an element's backdrop:

backdrop-hue-rotate-90

backdrop-hue-rotate-180

backdrop-hue-rotate-270

    <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-hue-rotate-90 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-hue-rotate-180 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-hue-rotate-270 ..."></div></div>

### Using negative values

Use utilities like `-backdrop-hue-rotate-90` and `-backdrop-hue-rotate-180` to set a negative backdrop hue rotation value:

\-backdrop-hue-rotate-15

\-backdrop-hue-rotate-45

\-backdrop-hue-rotate-90

    <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 -backdrop-hue-rotate-15 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 -backdrop-hue-rotate-45 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 -backdrop-hue-rotate-90 ..."></div></div>

### Using a custom value

Use the `backdrop-hue-rotate-[<value>]` syntax to set the backdrop hue rotation based on a completely custom value:

    <div class="backdrop-hue-rotate-[3.142rad] ..."> <!-- ... --></div>

For CSS variables, you can also use the `backdrop-hue-rotate-(<custom-property>)` syntax:

    <div class="backdrop-hue-rotate-(--my-backdrop-hue-rotation) ..."> <!-- ... --></div>

This is just a shorthand for `backdrop-hue-rotate-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `backdrop-filter: hue-rotate()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="backdrop-hue-rotate-15 md:backdrop-hue-rotate-0 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/backdrop-filter-invert

Utilities for applying backdrop invert filters to an element.

| Class | Styles |
| --- | --- |
| `backdrop-invert` | 
`backdrop-filter: invert(100%);`

 |
| `backdrop-invert-<number>` | 

`backdrop-filter: invert(<number>%);`

 |
| `backdrop-invert-(<custom-property>)` | 

`backdrop-filter: invert(var(<custom-property>))`

 |
| `backdrop-invert-[<value>]` | 

`backdrop-filter: invert(<value>);`

 |

## Examples

### Basic example

Use utilities like `backdrop-invert` and `backdrop-invert-65` to control the color inversion of an element's backdrop:

backdrop-invert-0

backdrop-invert-65

backdrop-invert

    <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert-0 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert-65 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert ..."></div></div>

### Using a custom value

Use the `backdrop-invert-[<value>]` syntax to set the backdrop inversion based on a completely custom value:

    <div class="backdrop-invert-[.25] ..."> <!-- ... --></div>

For CSS variables, you can also use the `backdrop-invert-(<custom-property>)` syntax:

    <div class="backdrop-invert-(--my-backdrop-inversion) ..."> <!-- ... --></div>

This is just a shorthand for `backdrop-invert-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `backdrop-filter: invert()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="backdrop-invert-0 md:backdrop-invert ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/backdrop-filter-opacity

Utilities for applying backdrop opacity filters to an element.

| Class | Styles |
| --- | --- |
| `backdrop-opacity-<number>` | 
`backdrop-filter: opacity(<number>%);`

 |
| `backdrop-opacity-(<custom-property>)` | 

`backdrop-filter: opacity(var(<custom-property>));`

 |
| `backdrop-opacity-[<value>]` | 

`backdrop-filter: opacity(<value>);`

 |

## Examples

### Basic example

Use utilities like `backdrop-opacity-50` and `backdrop-opacity-75` to control the opacity of all the backdrop filters applied to an element:

backdrop-opacity-10

backdrop-opacity-60

backdrop-opacity-95

    <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert backdrop-opacity-10 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert backdrop-opacity-60 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert backdrop-opacity-95 ..."></div></div>

### Using a custom value

Use the `backdrop-opacity-[<value>]` syntax to set the backdrop filter opacity based on a completely custom value:

    <div class="backdrop-opacity-[.15] ..."> <!-- ... --></div>

For CSS variables, you can also use the `backdrop-opacity-(<custom-property>)` syntax:

    <div class="backdrop-opacity-(--my-backdrop-filter-opacity) ..."> <!-- ... --></div>

This is just a shorthand for `backdrop-opacity-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `backdrop-filter: opacity()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="backdrop-opacity-100 md:backdrop-opacity-60 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/backdrop-filter-saturate

Utilities for applying backdrop saturation filters to an element.

| Class | Styles |
| --- | --- |
| `backdrop-saturate-<number>` | 
`backdrop-filter: saturate(<number>%);`

 |
| `backdrop-saturate-(<custom-property>)` | 

`backdrop-filter: saturate(var(<custom-property>));`

 |
| `backdrop-saturate-[<value>]` | 

`backdrop-filter: saturate(<value>);`

 |

## Examples

### Basic example

Use utilities like `backdrop-saturate-50` and `backdrop-saturate-100` utilities to control the saturation of an element's backdrop:

backdrop-saturate-50

backdrop-saturate-125

backdrop-saturate-200

    <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-saturate-50 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-saturate-125 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-saturate-200 ..."></div></div>

### Using a custom value

Use the `backdrop-saturate-[<value>]` syntax to set the backdrop saturation based on a completely custom value:

    <div class="backdrop-saturate-[.25] ..."> <!-- ... --></div>

For CSS variables, you can also use the `backdrop-saturate-(<custom-property>)` syntax:

    <div class="backdrop-saturate-(--my-backdrop-saturation) ..."> <!-- ... --></div>

This is just a shorthand for `backdrop-saturate-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `backdrop-filter: saturate()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="backdrop-saturate-50 md:backdrop-saturate-150 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/backdrop-filter-sepia

Utilities for applying backdrop sepia filters to an element.

| Class | Styles |
| --- | --- |
| `backdrop-sepia` | 
`backdrop-filter: sepia(100%);`

 |
| `backdrop-sepia-<number>` | 

`backdrop-filter: sepia(<number>%);`

 |
| `backdrop-sepia-(<custom-property>)` | 

`backdrop-filter: sepia(var(<custom-property>));`

 |
| `backdrop-sepia-[<value>]` | 

`backdrop-filter: sepia(<value>);`

 |

## Examples

### Basic example

Use utilities like `backdrop-sepia` and `backdrop-sepia-50` to control the sepia effect applied to an element's backdrop:

backdrop-sepia-0

backdrop-sepia-50

backdrop-sepia

    <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-sepia-0 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-sepia-50 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-sepia ..."></div></div>

### Using a custom value

Use the `backdrop-sepia-[<value>]` syntax to set the backdrop sepia based on a completely custom value:

    <div class="backdrop-sepia-[.25] ..."> <!-- ... --></div>

For CSS variables, you can also use the `backdrop-sepia-(<custom-property>)` syntax:

    <div class="backdrop-sepia-(--my-backdrop-sepia) ..."> <!-- ... --></div>

This is just a shorthand for `backdrop-sepia-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `backdrop-filter: sepia()` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="backdrop-sepia md:backdrop-sepia-0 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/border-collapse

| Class | Styles |
| --- | --- |
| `border-collapse` | 
`border-collapse: collapse;`

 |
| `border-separate` | 

`border-collapse: separate;`

 |

## Examples

### Collapsing table borders

Use the `border-collapse` utility to combine adjacent cell borders into a single border when possible:

| State | City |
| --- | --- |
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |

    <table class="border-collapse border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">State</th> <th class="border border-gray-300 ...">City</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">Indiana</td> <td class="border border-gray-300 ...">Indianapolis</td> </tr> <tr> <td class="border border-gray-300 ...">Ohio</td> <td class="border border-gray-300 ...">Columbus</td> </tr> <tr> <td class="border border-gray-300 ...">Michigan</td> <td class="border border-gray-300 ...">Detroit</td> </tr> </tbody></table>

Note that this includes collapsing borders on the top-level `<table>` tag.

### Separating table borders

Use the `border-separate` utility to force each cell to display its own separate borders:

| State | City |
| --- | --- |
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |

    <table class="border-separate border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">State</th> <th class="border border-gray-300 ...">City</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">Indiana</td> <td class="border border-gray-300 ...">Indianapolis</td> </tr> <tr> <td class="border border-gray-300 ...">Ohio</td> <td class="border border-gray-300 ...">Columbus</td> </tr> <tr> <td class="border border-gray-300 ...">Michigan</td> <td class="border border-gray-300 ...">Detroit</td> </tr> </tbody></table>

### Responsive design

Prefix a `border-collapse` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <table class="border-collapse md:border-separate ..."> <!-- ... --></table>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/border-spacing

Utilities for controlling the spacing between table borders.

| Class | Styles |
| --- | --- |
| `border-spacing-<number>` | 
`border-spacing: calc(var(--spacing) * <number>);`

 |
| `border-spacing-(<custom-property>)` | 

`border-spacing: var(<custom-property>);`

 |
| `border-spacing-[<value>]` | 

`border-spacing: <value>;`

 |
| `border-spacing-x-<number>` | 

`border-spacing: calc(var(--spacing) * <number>) var(--tw-border-spacing-y);`

 |
| `border-spacing-x-(<custom-property>)` | 

`border-spacing: var(<custom-property>) var(--tw-border-spacing-y);`

 |
| `border-spacing-x-[<value>]` | 

`border-spacing: <value> var(--tw-border-spacing-y);`

 |
| `border-spacing-y-<number>` | 

`border-spacing: var(--tw-border-spacing-x) calc(var(--spacing) * <number>);`

 |
| `border-spacing-y-(<custom-property>)` | 

`border-spacing: var(--tw-border-spacing-x) var(<custom-property>);`

 |
| `border-spacing-y-[<value>]` | 

`border-spacing: var(--tw-border-spacing-x) <value>;`

 |

## Examples

### Basic example

Use `border-spacing-<number>` utilities like `border-spacing-2` and `border-spacing-x-3` to control the space between the borders of table cells with separate borders:

| State | City |
| --- | --- |
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |

    <table class="border-separate border-spacing-2 border border-gray-400 dark:border-gray-500"> <thead> <tr> <th class="border border-gray-300 dark:border-gray-600">State</th> <th class="border border-gray-300 dark:border-gray-600">City</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 dark:border-gray-700">Indiana</td> <td class="border border-gray-300 dark:border-gray-700">Indianapolis</td> </tr> <tr> <td class="border border-gray-300 dark:border-gray-700">Ohio</td> <td class="border border-gray-300 dark:border-gray-700">Columbus</td> </tr> <tr> <td class="border border-gray-300 dark:border-gray-700">Michigan</td> <td class="border border-gray-300 dark:border-gray-700">Detroit</td> </tr> </tbody></table>

### Using a custom value

Use the `border-spacing-[<value>]` syntax to set the border spacing based on a completely custom value:

    <table class="border-spacing-[7px] ..."> <!-- ... --></table>

For CSS variables, you can also use the `border-spacing-(<custom-property>)` syntax:

    <table class="border-spacing-(--my-border-spacing) ..."> <!-- ... --></table>

This is just a shorthand for `border-spacing-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `border-spacing` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <table class="border-spacing-2 md:border-spacing-4 ..."> <!-- ... --></table>

Learn more about using variants in the variants documentation.

## Customizing your theme

The `border-spacing-<number>` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme:

    @theme { --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.

---

## Page: https://tailwindcss.com/docs/table-layout

Utilities for controlling the table layout algorithm.

| Class | Styles |
| --- | --- |
| `table-auto` | 
`table-layout: auto;`

 |
| `table-fixed` | 

`table-layout: fixed;`

 |

## Examples

### Sizing columns automatically

Use the `table-auto` utility to automatically size table columns to fit the contents of its cells:

| Song | Artist | Year |
| --- | --- | --- |
| The Sliding Mr. Bones (Next Stop, Pottersville) | Malcolm Lockyer | 1961 |
| Witchy Woman | The Eagles | 1972 |
| Shining Star | Earth, Wind, and Fire | 1975 |

    <table class="table-auto"> <thead> <tr> <th>Song</th> <th>Artist</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td> <td>Malcolm Lockyer</td> <td>1961</td> </tr> <tr> <td>Witchy Woman</td> <td>The Eagles</td> <td>1972</td> </tr> <tr> <td>Shining Star</td> <td>Earth, Wind, and Fire</td> <td>1975</td> </tr> </tbody></table>

### Using fixed column widths

Use the `table-fixed` utility to ignore the content of the table cells and use fixed widths for each column:

| Song | Artist | Year |
| --- | --- | --- |
| The Sliding Mr. Bones (Next Stop, Pottersville) | Malcolm Lockyer | 1961 |
| Witchy Woman | The Eagles | 1972 |
| Shining Star | Earth, Wind, and Fire | 1975 |

    <table class="table-fixed"> <thead> <tr> <th>Song</th> <th>Artist</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td> <td>Malcolm Lockyer</td> <td>1961</td> </tr> <tr> <td>Witchy Woman</td> <td>The Eagles</td> <td>1972</td> </tr> <tr> <td>Shining Star</td> <td>Earth, Wind, and Fire</td> <td>1975</td> </tr> </tbody></table>

You can manually set the widths for some columns and the rest of the available width will be divided evenly amongst columns without an explicit width. The widths set in the first row will set the column width for the whole table.

### Responsive design

Prefix a `table-layout` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="table-auto md:table-fixed ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/caption-side

Tables

Utilities for controlling the alignment of a caption element inside of a table.

| Class | Styles |
| --- | --- |
| `caption-top` | 
`caption-side: top;`

 |
| `caption-bottom` | 

`caption-side: bottom;`

 |

## Examples

### Placing at top of table

Use the `caption-top` utility to position a caption element at the top of a table:

Table 3.1: Professional wrestlers and their signature moves.
| Wrestler | Signature Move(s) |
| --- | --- |
| "Stone Cold" Steve Austin | Stone Cold Stunner, Lou Thesz Press |
| Bret "The Hitman" Hart | The Sharpshooter |
| Razor Ramon | Razor's Edge, Fallaway Slam |

    <table> <caption class="caption-top"> Table 3.1: Professional wrestlers and their signature moves. </caption> <thead> <tr> <th>Wrestler</th> <th>Signature Move(s)</th> </tr> </thead> <tbody> <tr> <td>"Stone Cold" Steve Austin</td> <td>Stone Cold Stunner, Lou Thesz Press</td> </tr> <tr> <td>Bret "The Hitman" Hart</td> <td>The Sharpshooter</td> </tr> <tr> <td>Razor Ramon</td> <td>Razor's Edge, Fallaway Slam</td> </tr> </tbody></table>

### Placing at bottom of table

Use the `caption-bottom` utility to position a caption element at the bottom of a table:

Table 3.1: Professional wrestlers and their signature moves.
| Wrestler | Signature Move(s) |
| --- | --- |
| "Stone Cold" Steve Austin | Stone Cold Stunner, Lou Thesz Press |
| Bret "The Hitman" Hart | The Sharpshooter |
| Razor Ramon | Razor's Edge, Fallaway Slam |

    <table> <caption class="caption-bottom"> Table 3.1: Professional wrestlers and their signature moves. </caption> <thead> <tr> <th>Wrestler</th> <th>Signature Move(s)</th> </tr> </thead> <tbody> <tr> <td>"Stone Cold" Steve Austin</td> <td>Stone Cold Stunner, Lou Thesz Press</td> </tr> <tr> <td>Bret "The Hitman" Hart</td> <td>The Sharpshooter</td> </tr> <tr> <td>Razor Ramon</td> <td>Razor's Edge, Fallaway Slam</td> </tr> </tbody></table>

### Responsive design

Prefix a `caption-side` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <caption class="caption-top md:caption-bottom ..."> <!-- ... --></caption>

Learn more about using variants in the variants documentation.

### On this page

*   Quick reference
*   Examples
    *   Placing at top of table
    *   Placing at bottom of table
    *   Responsive design

5-day mini-course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course →

---

## Page: https://tailwindcss.com/docs/transition-property

`transition`

`transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */`

`transition-all`

`transition-property: all; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */`

`transition-colors`

`transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */`

`transition-opacity`

`transition-property: opacity; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */`

`transition-shadow`

`transition-property: box-shadow; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */`

`transition-transform`

`transition-property: transform, translate, scale, rotate; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */`

`transition-none`

`transition-property: none;`

`transition-(<custom-property>)`

`transition-property: var(<custom-property>); transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */`

`transition-[<value>]`

`transition-property: <value>; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */`

---

## Page: https://tailwindcss.com/docs/transition-behavior

Utilities to control the behavior of CSS transitions.

| Class | Styles |
| --- | --- |
| `transition-normal` | 
`transition-behavior: normal;`

 |
| `transition-discrete` | 

`transition-behavior: allow-discrete;`

 |

## Examples

### Basic example

Use the `transition-discrete` utility to start transitions when changing properties with a discrete set of values, such as elements that change from `hidden` to `block`:

Interact with the checkboxes to see the expected behavior

transition-normal

transition-discrete

    <label class="peer ..."> <input type="checkbox" checked /></label><button class="hidden transition-all not-peer-has-checked:opacity-0 peer-has-checked:block ..."> I hide</button><label class="peer ..."> <input type="checkbox" checked /></label><button class="hidden transition-all transition-discrete not-peer-has-checked:opacity-0 peer-has-checked:block ..."> I fade out</button>

### Responsive design

Prefix a `transition-behavior` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <button class="transition-discrete md:transition-normal ..."> <!-- ... --></button>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/transition-duration

Utilities for controlling the duration of CSS transitions.

| Class | Styles |
| --- | --- |
| `duration-<number>` | 
`transition-duration: <number>ms;`

 |
| `duration-initial` | 

`transition-duration: initial;`

 |
| `duration-(<custom-property>)` | 

`transition-duration: var(<custom-property>);`

 |
| `duration-[<value>]` | 

`transition-duration: <value>;`

 |

## Examples

### Basic example

Use utilities like `duration-150` and `duration-700` to set the transition duration of an element in milliseconds:

Hover each button to see the expected behavior

duration-150

duration-300

duration-700

    <button class="transition duration-150 ease-in-out ...">Button A</button><button class="transition duration-300 ease-in-out ...">Button B</button><button class="transition duration-700 ease-in-out ...">Button C</button>

### Using a custom value

Use the `duration-[<value>]` syntax to set the transition duration based on a completely custom value:

    <button class="duration-[1s,15s] ..."> <!-- ... --></button>

For CSS variables, you can also use the `duration-(<custom-property>)` syntax:

    <button class="duration-(--my-duration) ..."> <!-- ... --></button>

This is just a shorthand for `duration-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `transition-duration` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <button class="duration-0 md:duration-150 ..."> <!-- ... --></button>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/transition-timing-function

Utilities for controlling the easing of CSS transitions.

| Class | Styles |
| --- | --- |
| `ease-linear` | 
`transition-timing-function: linear;`

 |
| `ease-in` | 

`transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */`

 |
| `ease-out` | 

`transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */`

 |
| `ease-in-out` | 

`transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */`

 |
| `ease-initial` | 

`transition-timing-function: initial;`

 |
| `ease-(<custom-property>)` | 

`transition-timing-function: var(<custom-property>);`

 |
| `ease-[<value>]` | 

`transition-timing-function: <value>;`

 |

## Examples

### Basic example

Use utilities like `ease-in` and `ease-out` to control the easing curve of an element's transition:

Hover each button to see the expected behavior

ease-in

ease-out

ease-in-out

    <button class="duration-300 ease-in ...">Button A</button><button class="duration-300 ease-out ...">Button B</button><button class="duration-300 ease-in-out ...">Button C</button>

### Using a custom value

Use the `ease-[<value>]` syntax to set the transition timing function based on a completely custom value:

    <button class="ease-[cubic-bezier(0.95,0.05,0.795,0.035)] ..."> <!-- ... --></button>

For CSS variables, you can also use the `ease-(<custom-property>)` syntax:

    <button class="ease-(--my-ease) ..."> <!-- ... --></button>

This is just a shorthand for `ease-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `transition-timing-function` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <button class="ease-out md:ease-in ..."> <!-- ... --></button>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--ease-*` theme variables to customize the transition timing function utilities in your project:

    @theme { --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); }

Now the `ease-in-expo` utility can be used in your markup:

    <button class="ease-in-expo"> <!-- ... --></button>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/transition-delay

Utilities for controlling the delay of CSS transitions.

| Class | Styles |
| --- | --- |
| `delay-<number>` | 
`transition-delay: <number>ms;`

 |
| `delay-(<custom-property>)` | 

`transition-delay: var(<custom-property>);`

 |
| `delay-[<value>]` | 

`transition-delay: <value>;`

 |

## Examples

### Basic example

Use utilities like `delay-150` and `delay-700` to set the transition delay of an element in milliseconds:

Hover each button to see the expected behavior

delay-150

delay-300

delay-700

    <button class="transition delay-150 duration-300 ease-in-out ...">Button A</button><button class="transition delay-300 duration-300 ease-in-out ...">Button B</button><button class="transition delay-700 duration-300 ease-in-out ...">Button C</button>

### Using a custom value

Use the `delay-[<value>]` syntax to set the transition delay based on a completely custom value:

    <button class="delay-[1s,250ms] ..."> <!-- ... --></button>

For CSS variables, you can also use the `delay-(<custom-property>)` syntax:

    <button class="delay-(--my-delay) ..."> <!-- ... --></button>

This is just a shorthand for `delay-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `transition-delay` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <button class="delay-150 md:delay-300 ..."> <!-- ... --></button>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/animation

Utilities for animating elements with CSS animations.

| Class | Styles |
| --- | --- |
| `animate-spin` | 
`animation: var(--animate-spin); /* spin 1s linear infinite */ @keyframes spin { to { transform: rotate(360deg); } }`

 |
| `animate-ping` | 

`animation: var(--animate-ping); /* ping 1s cubic-bezier(0, 0, 0.2, 1) infinite */ @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }`

 |
| `animate-pulse` | 

`animation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */ @keyframes pulse { 50% { opacity: 0.5; } }`

 |
| `animate-bounce` | 

`animation: var(--animate-bounce); /* bounce 1s infinite */ @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }`

 |
| `animate-none` | 

`animation: none;`

 |
| `animate-(<custom-property>)` | 

`animation: var(<custom-property>);`

 |
| `animate-[<value>]` | 

`animation: <value>;`

 |

## Examples

### Adding a spin animation

Use the `animate-spin` utility to add a linear spin animation to elements like loading indicators:

    <button type="button" class="bg-indigo-500 ..." disabled> <svg class="mr-3 size-5 animate-spin ..." viewBox="0 0 24 24"> <!-- ... --> </svg> Processing…</button>

### Adding a ping animation

Use the `animate-ping` utility to make an element scale and fade like a radar ping or ripple of water—useful for things like notification badges:

    <span class="relative flex size-3"> <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span> <span class="relative inline-flex size-3 rounded-full bg-sky-500"></span></span>

### Adding a pulse animation

Use the `animate-pulse` utility to make an element gently fade in and out—useful for things like skeleton loaders:

    <div class="mx-auto w-full max-w-sm rounded-md border border-blue-300 p-4"> <div class="flex animate-pulse space-x-4"> <div class="size-10 rounded-full bg-gray-200"></div> <div class="flex-1 space-y-6 py-1"> <div class="h-2 rounded bg-gray-200"></div> <div class="space-y-3"> <div class="grid grid-cols-3 gap-4"> <div class="col-span-2 h-2 rounded bg-gray-200"></div> <div class="col-span-1 h-2 rounded bg-gray-200"></div> </div> <div class="h-2 rounded bg-gray-200"></div> </div> </div> </div></div>

### Adding a bounce animation

Use the `animate-bounce` utility to make an element bounce up and down—useful for things like "scroll down" indicators:

    <svg class="size-6 animate-bounce ..."> <!-- ... --></svg>

### Supporting reduced motion

For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the `motion-safe` and `motion-reduce` variants:

    <button type="button" class="bg-indigo-600 ..." disabled> <svg class="mr-3 size-5 motion-safe:animate-spin ..." viewBox="0 0 24 24"> <!-- ... --> </svg> Processing</button>

### Using a custom value

Use the `animate-[<value>]` syntax to set the animation based on a completely custom value:

    <div class="animate-[wiggle_1s_ease-in-out_infinite] ..."> <!-- ... --></div>

For CSS variables, you can also use the `animate-(<custom-property>)` syntax:

    <div class="animate-(--my-animation) ..."> <!-- ... --></div>

This is just a shorthand for `animate-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix an `animation` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="animate-none md:animate-spin ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--animate-*` theme variables to customize the animation utilities in your project:

    @theme { --animate-wiggle: wiggle 1s ease-in-out infinite; @keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }}

Now the `animate-wiggle` utility can be used in your markup:

    <div class="animate-wiggle"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/backface-visibility

Utilities for controlling if an element's backface is visible.

| Class | Styles |
| --- | --- |
| `backface-hidden` | 
`backface-visibility: hidden;`

 |
| `backface-visible` | 

`backface-visibility: visible;`

 |

## Examples

### Basic example

Use the `backface-visible` utility to show the backface of an element, like a cube, even when it's rotated away from view:

backface-hidden

1

2

3

4

5

6

backface-visible

1

2

3

4

5

6

    <div class="size-20 ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-hidden ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-hidden ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-hidden ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-hidden ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-hidden ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-hidden ...">6</div></div><div class="size-20 ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-visible ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-visible ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-visible ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-visible ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-visible ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-visible ...">6</div></div>

### Responsive design

Prefix a `backface-visibility` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="backface-visible md:backface-hidden ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/perspective

Utilities for controlling an element's perspective when placed in 3D space.

| Class | Styles |
| --- | --- |
| `perspective-dramatic` | 
`perspective: var(--perspective-dramatic); /* 100px */`

 |
| `perspective-near` | 

`perspective: var(--perspective-near); /* 300px */`

 |
| `perspective-normal` | 

`perspective: var(--perspective-normal); /* 500px */`

 |
| `perspective-midrange` | 

`perspective: var(--perspective-midrange); /* 800px */`

 |
| `perspective-distant` | 

`perspective: var(--perspective-distant); /* 1200px */`

 |
| `perspective-none` | 

`perspective: none;`

 |
| `perspective-(<custom-property>)` | 

`perspective: var(<custom-property>);`

 |
| `perspective-[<value>]` | 

`perspective: <value>;`

 |

## Examples

### Basic example

Use utilities like `perspective-normal` and `perspective-distant` to control how close or how far away the z-plane is from the screen:

perspective-dramatic

1

2

3

4

5

6

perspective-normal

1

2

3

4

5

6

    <div class="size-20 perspective-dramatic ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div><div class="size-20 perspective-normal ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div>

This is like moving a camera closer to or further away from an object.

### Removing a perspective

Use the `perspective-none` utility to remove a perspective transform from an element:

    <div class="perspective-none ..."> <!-- ... --></div>

### Using a custom value

Use the `perspective-[<value>]` syntax to set the perspective based on a completely custom value:

    <div class="perspective-[750px] ..."> <!-- ... --></div>

For CSS variables, you can also use the `perspective-(<custom-property>)` syntax:

    <div class="perspective-(--my-perspective) ..."> <!-- ... --></div>

This is just a shorthand for `perspective-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `perspective` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="perspective-midrange md:perspective-dramatic ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--perspective-*` theme variables to customize the perspective utilities in your project:

    @theme { --perspective-remote: 1800px; }

Now the `perspective-remote` utility can be used in your markup:

    <div class="perspective-remote"> <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/perspective-origin

Utilities for controlling an element's perspective origin when placed in 3D space.

| Class | Styles |
| --- | --- |
| `perspective-origin-center` | 
`perspective-origin: center;`

 |
| `perspective-origin-top` | 

`perspective-origin: top;`

 |
| `perspective-origin-top-right` | 

`perspective-origin: top right;`

 |
| `perspective-origin-right` | 

`perspective-origin: right;`

 |
| `perspective-origin-bottom-right` | 

`perspective-origin: bottom right;`

 |
| `perspective-origin-bottom` | 

`perspective-origin: bottom;`

 |
| `perspective-origin-bottom-left` | 

`perspective-origin: bottom left;`

 |
| `perspective-origin-left` | 

`perspective-origin: left;`

 |
| `perspective-origin-top-left` | 

`perspective-origin: top left;`

 |
| `perspective-origin-(<custom-property>)` | 

`perspective-origin: var(<custom-property>);`

 |
| `perspective-origin-[<value>]` | 

`perspective-origin: <value>;`

 |

## Examples

### Basic example

Use utilities like `perspective-origin-top` and `perspective-origin-bottom-left` to control where the vanishing point of a perspective is located:

perspective-origin-top-left

1

2

3

4

5

6

perspective-origin-bottom-right

1

2

3

4

5

6

    <div class="size-20 perspective-near perspective-origin-top-left ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div><div class="size-20 perspective-near perspective-origin-bottom-right …"> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div>

### Using a custom value

Use the `perspective-origin-[<value>]` syntax to set the perspective origin based on a completely custom value:

    <div class="perspective-origin-[200%_150%] ..."> <!-- ... --></div>

For CSS variables, you can also use the `perspective-origin-(<custom-property>)` syntax:

    <div class="perspective-origin-(--my-perspective-origin) ..."> <!-- ... --></div>

This is just a shorthand for `perspective-origin-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `perspective-origin` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="perspective-origin-center md:perspective-origin-bottom-left ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/rotate

Utilities for rotating elements.

| Class | Styles |
| --- | --- |
| `rotate-none` | 
`rotate: none;`

 |
| `rotate-<number>` | 

`rotate: <number>deg;`

 |
| `-rotate-<number>` | 

`rotate: calc(<number>deg * -1);`

 |
| `rotate-(<custom-property>)` | 

`rotate: var(<custom-property>);`

 |
| `rotate-[<value>]` | 

`rotate: <value>;`

 |
| `rotate-x-<number>` | 

`transform: rotateX(<number>deg) var(--tw-rotate-y);`

 |
| `-rotate-x-<number>` | 

`transform: rotateX(-<number>deg) var(--tw-rotate-y);`

 |
| `rotate-x-(<custom-property>)` | 

`transform: rotateX(var(<custom-property>)) var(--tw-rotate-y);`

 |
| `rotate-x-[<value>]` | 

`transform: rotateX(<value>) var(--tw-rotate-y);`

 |
| `rotate-y-<number>` | 

`transform: var(--tw-rotate-x) rotateY(<number>deg);`

 |

## Examples

### Basic example

Use `rotate-<number>` utilities like `rotate-45` and `rotate-90` to rotate an element by degrees:

rotate-45

rotate-90

rotate-210

    <img class="rotate-45 ..." src="/img/mountains.jpg" /><img class="rotate-90 ..." src="/img/mountains.jpg" /><img class="rotate-210 ..." src="/img/mountains.jpg" />

### Using negative values

Use `-rotate-<number>` utilities like `-rotate-45` and `-rotate-90` to rotate an element counterclockwise by degrees:

\-rotate-45

\-rotate-90

\-rotate-210

    <img class="-rotate-45 ..." src="/img/mountains.jpg" /><img class="-rotate-90 ..." src="/img/mountains.jpg" /><img class="-rotate-210 ..." src="/img/mountains.jpg" />

### Rotating in 3D space

Use `rotate-x-<number>`, `rotate-y-<number>`, and `rotate-z-<number>` utilities like `rotate-x-50`, `-rotate-y-30`, and `rotate-z-45` together to rotate an element in 3D space:

rotate-x-50

rotate-z-45

rotate-x-15

\-rotate-y-30

rotate-y-25

rotate-z-30

    <img class="rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" /><img class="rotate-x-15 -rotate-y-30 ..." src="/img/mountains.jpg" /><img class="rotate-y-25 rotate-z-30 ..." src="/img/mountains.jpg" />

### Using a custom value

Use the `rotate-[<value>]` syntax to set the rotation based on a completely custom value:

    <img class="rotate-[3.142rad] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `rotate-(<custom-property>)` syntax:

    <img class="rotate-(--my-rotation) ..." src="/img/mountains.jpg" />

This is just a shorthand for `rotate-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `rotate` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="rotate-45 md:rotate-60 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/scale

Utilities for scaling elements.

| Class | Styles |
| --- | --- |
| `scale-none` | 
`scale: none;`

 |
| `scale-<number>` | 

`scale: <number>% <number>%;`

 |
| `-scale-<number>` | 

`scale: calc(<number>% * -1) calc(<number>% * -1);`

 |
| `scale-(<custom-property>)` | 

`scale: var(<custom-property>) var(<custom-property>);`

 |
| `scale-[<value>]` | 

`scale: <value>;`

 |
| `scale-x-<number>` | 

`scale: <number>% var(--tw-scale-y);`

 |
| `-scale-x-<number>` | 

`scale: calc(<number>% * -1) var(--tw-scale-y);`

 |
| `scale-x-(<custom-property>)` | 

`scale: var(<custom-property>) var(--tw-scale-y);`

 |
| `scale-x-[<value>]` | 

`scale: <value> var(--tw-scale-y);`

 |
| `scale-y-<number>` | 

`scale: var(--tw-scale-x) <number>%;`

 |

## Examples

### Basic example

Use `scale-<number>` utilities like `scale-75` and `scale-150` to scale an element by a percentage of its original size:

scale-75

scale-100

scale-125

    <img class="scale-75 ..." src="/img/mountains.jpg" /><img class="scale-100 ..." src="/img/mountains.jpg" /><img class="scale-125 ..." src="/img/mountains.jpg" />

### Scaling on the x-axis

Use the `scale-x-<number>` utilities like `scale-x-75` and `-scale-x-150` to scale an element on the x-axis by a percentage of its original width:

scale-x-75

scale-x-100

scale-x-125

    <img class="scale-x-75 ..." src="/img/mountains.jpg" /><img class="scale-x-100 ..." src="/img/mountains.jpg" /><img class="scale-x-125 ..." src="/img/mountains.jpg" />

### Scaling on the y-axis

Use the `scale-y-<number>` utilities like `scale-y-75` and `-scale-y-150` to scale an element on the y-axis by a percentage of its original height:

scale-y-75

scale-y-100

scale-y-125

    <img class="scale-y-75 ..." src="/img/mountains.jpg" /><img class="scale-y-100 ..." src="/img/mountains.jpg" /><img class="scale-y-125 ..." src="/img/mountains.jpg" />

### Using negative values

Use `-scale-<number>`, `-scale-x-<number>` or `-scale-y-<number>` utilities like `-scale-x-75` and `-scale-125` to mirror and scale down an element by a percentage of its original size:

\-scale-x-75

\-scale-100

\-scale-y-125

    <img class="-scale-x-75 ..." src="/img/mountains.jpg" /><img class="-scale-100 ..." src="/img/mountains.jpg" /><img class="-scale-y-125 ..." src="/img/mountains.jpg" />

### Using a custom value

Use the `scale-[<value>]` syntax to set the scale based on a completely custom value:

    <img class="scale-[1.7] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `scale-(<custom-property>)` syntax:

    <img class="scale-(--my-scale) ..." src="/img/mountains.jpg" />

This is just a shorthand for `scale-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Applying on hover

Prefix a `scale` utility with a variant like `hover:*` to only apply the utility in that state:

    <img class="scale-95 hover:scale-120 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/skew

Utilities for skewing elements with transform.

| Class | Styles |
| --- | --- |
| `skew-<number>` | 
`transform: skewX(<number>deg) skewY(<number>deg);`

 |
| `-skew-<number>` | 

`transform: skewX(-<number>deg) skewY(-<number>deg);`

 |
| `skew-(<custom-property>)` | 

`transform: skewX(var(<custom-property>)) skewY(var(<custom-property>));`

 |
| `skew-[<value>]` | 

`transform: skewX(<value>) skewY(<value>);`

 |
| `skew-x-<number>` | 

`transform: skewX(<number>deg));`

 |
| `-skew-x-<number>` | 

`transform: skewX(-<number>deg));`

 |
| `skew-x-(<custom-property>)` | 

`transform: skewX(var(<custom-property>));`

 |
| `skew-x-[<value>]` | 

`transform: skewX(<value>));`

 |
| `skew-y-<number>` | 

`transform: skewY(<number>deg);`

 |
| `-skew-y-<number>` | 

`transform: skewY(-<number>deg);`

 |
| `skew-y-(<custom-property>)` | 

`transform: skewY(var(<custom-property>));`

 |
| `skew-y-[<value>]` | 

`transform: skewY(<value>);`

 |

## Examples

### Basic example

Use `skew-<number>` utilities like `skew-4` and `skew-10` to skew an element on both axes:

skew-3

skew-6

skew-12

    <img class="skew-3 ..." src="/img/mountains.jpg" /><img class="skew-6 ..." src="/img/mountains.jpg" /><img class="skew-12 ..." src="/img/mountains.jpg" />

### Using negative values

Use `-skew-<number>` utilities like `-skew-4` and `-skew-10` to skew an element on both axes:

\-skew-3

\-skew-6

\-skew-12

    <img class="-skew-3 ..." src="/img/mountains.jpg" /><img class="-skew-6 ..." src="/img/mountains.jpg" /><img class="-skew-12 ..." src="/img/mountains.jpg" />

### Skewing on the x-axis

Use `skew-x-<number>` utilities like `skew-x-4` and `-skew-x-10` to skew an element on the x-axis:

\-skew-x-12

skew-x-6

skew-x-12

    <img class="-skew-x-12 ..." src="/img/mountains.jpg" /><img class="skew-x-6 ..." src="/img/mountains.jpg" /><img class="skew-x-12 ..." src="/img/mountains.jpg" />

### Skewing on the y-axis

Use `skew-y-<number>` utilities like `skew-y-4` and `-skew-y-10` to skew an element on the y-axis:

\-skew-y-12

skew-y-6

skew-y-12

    <img class="-skew-y-12 ..." src="/img/mountains.jpg" /><img class="skew-y-6 ..." src="/img/mountains.jpg" /><img class="skew-y-12 ..." src="/img/mountains.jpg" />

### Using a custom value

Use the `skew-[<value>]` syntax to set the skew based on a completely custom value:

    <img class="skew-[3.142rad] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `skew-(<custom-property>)` syntax:

    <img class="skew-(--my-skew) ..." src="/img/mountains.jpg" />

This is just a shorthand for `skew-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix `skewX()` and `skewY()` utilities with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="skew-3 md:skew-12 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/transform

Utilities for transforming elements.

| Class | Styles |
| --- | --- |
| `transform-(<custom-property>)` | 
`transform: var(<custom-property>);`

 |
| `transform-[<value>]` | 

`transform: <value>;`

 |
| `transform-none` | 

`transform: none;`

 |
| `transform-gpu` | 

`transform: translateZ(0) var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);`

 |
| `transform-cpu` | 

`transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);`

 |

## Examples

### Hardware acceleration

If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the `transform-gpu` utility:

    <div class="scale-150 transform-gpu"> <!-- ... --></div>

Use the `transform-cpu` utility to force things back to the CPU if you need to undo this conditionally.

### Removing transforms

Use the `transform-none` utility to remove all of the transforms on an element at once:

    <div class="skew-y-3 md:transform-none"> <!-- ... --></div>

### Using a custom value

Use the `transform-[<value>]` syntax to set the transform based on a completely custom value:

    <div class="transform-[matrix(1,2,3,4,5,6)] ..."> <!-- ... --></div>

For CSS variables, you can also use the `transform-(<custom-property>)` syntax:

    <div class="transform-(--my-transform) ..."> <!-- ... --></div>

This is just a shorthand for `transform-[var(<custom-property>)]` that adds the `var()` function for you automatically.

---

## Page: https://tailwindcss.com/docs/transform-origin

Utilities for specifying the origin for an element's transformations.

| Class | Styles |
| --- | --- |
| `origin-center` | 
`transform-origin: center;`

 |
| `origin-top` | 

`transform-origin: top;`

 |
| `origin-top-right` | 

`transform-origin: top right;`

 |
| `origin-right` | 

`transform-origin: right;`

 |
| `origin-bottom-right` | 

`transform-origin: bottom right;`

 |
| `origin-bottom` | 

`transform-origin: bottom;`

 |
| `origin-bottom-left` | 

`transform-origin: bottom left;`

 |
| `origin-left` | 

`transform-origin: left;`

 |
| `origin-top-left` | 

`transform-origin: top left;`

 |
| `origin-(<custom-property>)` | 

`transform-origin: var(<custom-property>);`

 |
| `origin-[<value>]` | 

`transform-origin: <value>;`

 |

## Examples

### Basic example

Use utilities like `origin-top` and `origin-bottom-left` to set an element's transform origin:

origin-center

origin-top-left

origin-bottom

    <img class="origin-center rotate-45 ..." src="/img/mountains.jpg" /><img class="origin-top-left rotate-12 ..." src="/img/mountains.jpg" /><img class="origin-bottom -rotate-12 ..." src="/img/mountains.jpg" />

### Using a custom value

Use the `origin-[<value>]` syntax to set the transform origin based on a completely custom value:

    <img class="origin-[33%_75%] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `origin-(<custom-property>)` syntax:

    <img class="origin-(--my-transform-origin) ..." src="/img/mountains.jpg" />

This is just a shorthand for `origin-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `transform-origin` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="origin-center md:origin-top ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/transform-style

Utilities for controlling if an elements children are placed in 3D space.

| Class | Styles |
| --- | --- |
| `transform-3d` | 
`transform-style: preserve-3d;`

 |
| `transform-flat` | 

`transform-style: flat;`

 |

## Examples

### Basic example

Use `transform-3d` to position children in 3D space:

transform-flat

1

2

3

4

5

6

transform-3d

1

2

3

4

5

6

    <div class="size-20 transform-flat ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div><div class="size-20 transform-3d ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div>

Without this, any children will only be transformed in 2D space and not in 3D space.

### Responsive design

Prefix a `transform-style` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="transform-3d md:transform-flat ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/translate

Utilities for translating elements.

| Class | Styles |
| --- | --- |
| `translate-<number>` | 
`translate: calc(var(--spacing) * <number>) calc(var(--spacing) * <number>);`

 |
| `-translate-<number>` | 

`translate: calc(var(--spacing) * -<number>) calc(var(--spacing) * -<number>);`

 |
| `translate-<fraction>` | 

`translate: calc(<fraction> * 100%) calc(<fraction> * 100%);`

 |
| `-translate-<fraction>` | 

`translate: calc(<fraction> * -100%) calc(<fraction> * -100%);`

 |
| `translate-full` | 

`translate: 100% 100%;`

 |
| `-translate-full` | 

`translate: -100% -100%;`

 |
| `translate-px` | 

`translate: 1px 1px;`

 |
| `-translate-px` | 

`translate: -1px -1px;`

 |
| `translate-(<custom-property>)` | 

`translate: var(<custom-property>) var(<custom-property>);`

 |
| `translate-[<value>]` | 

`translate: <value> <value>;`

 |

## Examples

### Using the spacing scale

Use `translate-<number>` utilities like `translate-2` and `-translate-4` to translate an element on both axes based on the spacing scale:

\-translate-6

translate-2

translate-8

    <img class="-translate-6 ..." src="/img/mountains.jpg" /><img class="translate-2 ..." src="/img/mountains.jpg" /><img class="translate-8 ..." src="/img/mountains.jpg" />

### Using a percentage

Use `translate-<fraction>` utilities like `translate-1/4` and `-translate-full` to translate an element on both axes by a percentage of the element's size:

\-translate-1/4

translate-1/6

translate-1/2

    <img class="-translate-1/4 ..." src="/img/mountains.jpg" /><img class="translate-1/6 ..." src="/img/mountains.jpg" /><img class="translate-1/2 ..." src="/img/mountains.jpg" />

### Translating on the x-axis

Use `translate-x-<number>` or `translate-x-<fraction>` utilities like `translate-x-4` and `translate-x-1/4` to translate an element on the x-axis:

\-translate-x-4

translate-x-2

translate-x-1/2

    <img class="-translate-x-4 ..." src="/img/mountains.jpg" /><img class="translate-x-2 ..." src="/img/mountains.jpg" /><img class="translate-x-1/2 ..." src="/img/mountains.jpg" />

### Translating on the y-axis

Use `translate-y-<number>` or `translate-y-<fraction>` utilities like `translate-y-6` and `translate-y-1/3` to translate an element on the y-axis:

\-translate-y-4

translate-y-2

translate-y-1/2

    <img class="-translate-y-4 ..." src="/img/mountains.jpg" /><img class="translate-y-2 ..." src="/img/mountains.jpg" /><img class="translate-y-1/2 ..." src="/img/mountains.jpg" />

### Translating on the z-axis

Use `translate-z-<number>` utilities like `translate-z-6` and `-translate-z-12` to translate an element on the z-axis:

\-translate-z-8

translate-z-4

translate-z-12

    <div class="transform-3d"> <img class="-translate-z-8 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" /> <img class="translate-z-2 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" /> <img class="translate-z-1/2 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" /></div>

Note that the `translate-z-<number>` utilities require the `transform-3d` utility to be applied to the parent element.

### Using a custom value

Use the `translate-[<value>]` syntax to set the translation based on a completely custom value:

    <img class="translate-[3.142rad] ..." src="/img/mountains.jpg" />

For CSS variables, you can also use the `translate-(<custom-property>)` syntax:

    <img class="translate-(--my-translate) ..." src="/img/mountains.jpg" />

This is just a shorthand for `translate-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `translate` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <img class="translate-45 md:translate-60 ..." src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/accent-color

Utilities for controlling the accented color of a form control.

| Class | Styles |
| --- | --- |
| `accent-inherit` | 
`accent-color: inherit;`

 |
| `accent-current` | 

`accent-color: currentColor;`

 |
| `accent-transparent` | 

`accent-color: transparent;`

 |
| `accent-black` | 

`accent-color: var(--color-black); /* #000 */`

 |
| `accent-white` | 

`accent-color: var(--color-white); /* #fff */`

 |
| `accent-red-50` | 

`accent-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`

 |
| `accent-red-100` | 

`accent-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`

 |
| `accent-red-200` | 

`accent-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`

 |
| `accent-red-300` | 

`accent-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`

 |
| `accent-red-400` | 

`accent-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`

 |

## Examples

### Setting the accent color

Use utilities like `accent-rose-500` and `accent-lime-600` to change the accent color of an element:

Browser default

Customized

    <label> <input type="checkbox" checked /> Browser default</label><label> <input class="accent-pink-500" type="checkbox" checked /> Customized</label>

This is helpful for styling elements like checkboxes and radio groups by overriding the browser's default color.

### Changing the opacity

Use the color opacity modifier to control the opacity of an element's accent color:

accent-purple-500/25

accent-purple-500/75

    <input class="accent-purple-500/25" type="checkbox" checked /><input class="accent-purple-500/75" type="checkbox" checked />

Setting the accent color opacity has limited browser-support and only works in Firefox at this time.

### Using a custom value

Use the `accent-[<value>]` syntax to set the accent color based on a completely custom value:

    <input class="accent-[#50d71e] ..." type="checkbox" />

For CSS variables, you can also use the `accent-(<custom-property>)` syntax:

    <input class="accent-(--my-accent-color) ..." type="checkbox" />

This is just a shorthand for `accent-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Applying on hover

Prefix an `accent-color` utility with a variant like `hover:*` to only apply the utility in that state:

Agree to terms

    <input class="accent-black hover:accent-pink-500" type="checkbox" />

Learn more about using variants in the variants documentation.

### Responsive design

Prefix an `accent-color` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <input class="accent-black md:accent-pink-500 ..." type="checkbox" />

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `accent-regal-blue` utility can be used in your markup:

    <input class="accent-regal-blue" type="checkbox" />

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/appearance

Utilities for suppressing native form control styling.

| Class | Styles |
| --- | --- |
| `appearance-none` | 
`appearance: none;`

 |
| `appearance-auto` | 

`appearance: auto;`

 |

## Examples

### Removing default appearance

Use `appearance-none` to reset any browser specific styling on an element:

Default browser styles applied

Remove default browser styles

    <select> <option>Yes</option> <option>No</option> <option>Maybe</option></select><div class="grid"> <select class="col-start-1 row-start-1 appearance-none bg-gray-50 dark:bg-gray-800 ..."> <option>Yes</option> <option>No</option> <option>Maybe</option> </select> <svg class="pointer-events-none col-start-1 row-start-1 ..."> <!-- ... --> </svg></div>

This utility is often used when creating custom form components.

### Restoring default appearance

Use `appearance-auto` to restore the default browser specific styling on an element:

Try emulating \`forced-colors: active\` in your developer tools to see the difference

Falls back to default appearance

Keeps custom appearance

    <label> <div> <input type="checkbox" class="appearance-none forced-colors:appearance-auto ..." /> <svg class="invisible peer-checked:visible forced-colors:hidden ..."> <!-- ... --> </svg> </div> Falls back to default appearance</label><label> <div> <input type="checkbox" class="appearance-none ..." /> <svg class="invisible peer-checked:visible ..."> <!-- ... --> </svg> </div> Keeps custom appearance</label>

This is useful for reverting to the standard browser controls in certain accessibility modes.

### Responsive design

Prefix an `appearance` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <select class="appearance-auto md:appearance-none ..."> <!-- ... --></select>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/caret-color

Utilities for controlling the color of the text input cursor.

| Class | Styles |
| --- | --- |
| `caret-inherit` | 
`caret-color: inherit;`

 |
| `caret-current` | 

`caret-color: currentColor;`

 |
| `caret-transparent` | 

`caret-color: transparent;`

 |
| `caret-black` | 

`caret-color: var(--color-black); /* #000 */`

 |
| `caret-white` | 

`caret-color: var(--color-white); /* #fff */`

 |
| `caret-red-50` | 

`caret-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`

 |
| `caret-red-100` | 

`caret-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`

 |
| `caret-red-200` | 

`caret-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`

 |
| `caret-red-300` | 

`caret-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`

 |
| `caret-red-400` | 

`caret-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`

 |

## Examples

### Basic example

Use utilities like `caret-rose-500` and `caret-lime-600` to change the color of the text input cursor:

Focus the textarea to see the new caret color

    <textarea class="caret-pink-500 ..."></textarea>

### Using a custom value

Use the `caret-[<value>]` syntax to set the caret color based on a completely custom value:

    <textarea class="caret-[#50d71e] ..."></textarea>

For CSS variables, you can also use the `caret-(<custom-property>)` syntax:

    <textarea class="caret-(--my-caret-color) ..."></textarea>

This is just a shorthand for `caret-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `caret-color` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <textarea class="caret-rose-500 md:caret-lime-600 ..."></textarea>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `caret-regal-blue` utility can be used in your markup:

    <textarea class="caret-regal-blue"></textarea>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/color-scheme

Utilities for controlling the color scheme of an element.

| Class | Styles |
| --- | --- |
| `scheme-normal` | 
`color-scheme: normal;`

 |
| `scheme-dark` | 

`color-scheme: dark;`

 |
| `scheme-light` | 

`color-scheme: light;`

 |
| `scheme-light-dark` | 

`color-scheme: light dark;`

 |
| `scheme-only-dark` | 

`color-scheme: only dark;`

 |
| `scheme-only-light` | 

`color-scheme: only light;`

 |

## Examples

### Basic example

Use utilities like `scheme-light` and `scheme-light-dark` to control how element should be rendered:

Try switching your system color scheme to see the difference

scheme-light

scheme-dark

scheme-light-dark

    <div class="scheme-light ..."> <input type="date" /></div><div class="scheme-dark ..."> <input type="date" /></div><div class="scheme-light-dark ..."> <input type="date" /></div>

### Applying in dark mode

Prefix a `color-scheme` utility with a variant like `dark:*` to only apply the utility in that state:

    <html class="scheme-light dark:scheme-dark ..."> <!-- ... --></html>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/cursor

Utilities for controlling the cursor style when hovering over an element.

| Class | Styles |
| --- | --- |
| `cursor-auto` | 
`cursor: auto;`

 |
| `cursor-default` | 

`cursor: default;`

 |
| `cursor-pointer` | 

`cursor: pointer;`

 |
| `cursor-wait` | 

`cursor: wait;`

 |
| `cursor-text` | 

`cursor: text;`

 |
| `cursor-move` | 

`cursor: move;`

 |
| `cursor-help` | 

`cursor: help;`

 |
| `cursor-not-allowed` | 

`cursor: not-allowed;`

 |
| `cursor-none` | 

`cursor: none;`

 |
| `cursor-context-menu` | 

`cursor: context-menu;`

 |

## Examples

### Basic example

Use utilities like `cursor-pointer` and `cursor-grab` to control which cursor is displayed when hovering over an element:

Hover over each button to see the cursor change

    <button class="cursor-pointer ...">Submit</button><button class="cursor-progress ...">Saving...</button><button class="cursor-not-allowed ..." disabled>Confirm</button>

### Using a custom value

Use the `cursor-[<value>]` syntax to set the cursor based on a completely custom value:

    <button class="cursor-[url(hand.cur),_pointer] ..."> <!-- ... --></button>

For CSS variables, you can also use the `cursor-(<custom-property>)` syntax:

    <button class="cursor-(--my-cursor) ..."> <!-- ... --></button>

This is just a shorthand for `cursor-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `cursor` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <button class="cursor-not-allowed md:cursor-auto ..."> <!-- ... --></button>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/field-sizing

Utilities for controlling the sizing of form controls.

| Class | Styles |
| --- | --- |
| `field-sizing-fixed` | 
`field-sizing: fixed;`

 |
| `field-sizing-content` | 

`field-sizing: content;`

 |

## Examples

### Sizing based on content

Use the `field-sizing-content` utility to allow a form control to adjust it's size based on the content:

Type in the input below to see the size change

    <textarea class="field-sizing-content ..." rows="2"> Latex Salesman, Vanderlay Industries</textarea>

### Using a fixed size

Use the `field-sizing-fixed` utility to make a form control use a fixed size:

Type in the input below to see the size remain the same

    <textarea class="field-sizing-fixed w-80 ..." rows="2"> Latex Salesman, Vanderlay Industries</textarea>

### Responsive design

Prefix a `field-sizing` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <input class="field-sizing-content md:field-sizing-fixed ..." />

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/pointer-events

Utilities for controlling whether an element responds to pointer events.

| Class | Styles |
| --- | --- |
| `pointer-events-auto` | 
`pointer-events: auto;`

 |
| `pointer-events-none` | 

`pointer-events: none;`

 |

## Examples

### Ignoring pointer events

Use the `pointer-events-none` utility to make an element ignore pointer events, like `:hover` and `click` events:

Click the search icons to see the expected behavior

pointer-events-auto

pointer-events-none

    <div class="relative ..."> <div class="pointer-events-auto absolute ..."> <svg class="absolute h-5 w-5 text-gray-400"> <!-- ... --> </svg> </div> <input type="text" placeholder="Search" class="..." /></div><div class="relative ..."> <div class="pointer-events-none absolute ..."> <svg class="absolute h-5 w-5 text-gray-400"> <!-- ... --> </svg> </div> <input type="text" placeholder="Search" class="..." /></div>

The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target.

### Restoring pointer events

Use the `pointer-events-auto` utility to revert to the default browser behavior for pointer events:

    <div class="pointer-events-none md:pointer-events-auto ..."> <!-- ... --></div>

---

## Page: https://tailwindcss.com/docs/resize

Utilities for controlling how an element can be resized.

| Class | Styles |
| --- | --- |
| `resize-none` | 
`resize: none;`

 |
| `resize` | 

`resize: both;`

 |
| `resize-y` | 

`resize: vertical;`

 |
| `resize-x` | 

`resize: horizontal;`

 |

## Examples

### Resizing in all directions

Use `resize` to make an element horizontally and vertically resizable:

Drag the textarea handle in the demo to see the expected behavior

    <textarea class="resize rounded-md ..."></textarea>

### Resizing vertically

Use `resize-y` to make an element vertically resizable:

Drag the textarea handle in the demo to see the expected behavior

    <textarea class="resize-y rounded-md ..."></textarea>

### Resizing horizontally

Use `resize-x` to make an element horizontally resizable:

Drag the textarea handle in the demo to see the expected behavior

    <textarea class="resize-x rounded-md ..."></textarea>

### Prevent resizing

Use `resize-none` to prevent an element from being resizable:

Notice that the textarea handle is gone

    <textarea class="resize-none rounded-md"></textarea>

### Responsive design

Prefix a `resize` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="resize-none md:resize ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/scroll-behavior

Utilities for controlling the scroll behavior of an element.

| Class | Styles |
| --- | --- |
| `scroll-auto` | 
`scroll-behavior: auto;`

 |
| `scroll-smooth` | 

`scroll-behavior: smooth;`

 |

## Examples

### Using smooth scrolling

Use the `scroll-smooth` utility to enable smooth scrolling within an element:

    <html class="scroll-smooth"> <!-- ... --></html>

Setting the `scroll-behavior` only affects scroll events that are triggered by the browser.

### Using normal scrolling

Use the `scroll-auto` utility to revert to the default browser behavior for scrolling:

    <html class="scroll-smooth md:scroll-auto"> <!-- ... --></html>

---

## Page: https://tailwindcss.com/docs/scroll-margin

Utilities for controlling the scroll offset around items in a snap container.

| Class | Styles |
| --- | --- |
| `scroll-m-<number>` | 
`scroll-margin: calc(var(--spacing) * <number>);`

 |
| `-scroll-m-<number>` | 

`scroll-margin: calc(var(--spacing) * -<number>);`

 |
| `scroll-m-(<custom-property>)` | 

`scroll-margin: var(<custom-property>);`

 |
| `scroll-m-[<value>]` | 

`scroll-margin: <value>;`

 |
| `scroll-mx-<number>` | 

`scroll-margin-inline: calc(var(--spacing) * <number>);`

 |
| `-scroll-mx-<number>` | 

`scroll-margin-inline: calc(var(--spacing) * -<number>);`

 |
| `scroll-mx-(<custom-property>)` | 

`scroll-margin-inline: var(<custom-property>);`

 |
| `scroll-mx-[<value>]` | 

`scroll-margin-inline: <value>;`

 |
| `scroll-my-<number>` | 

`scroll-margin-block: calc(var(--spacing) * <number>);`

 |
| `-scroll-my-<number>` | 

`scroll-margin-block: calc(var(--spacing) * -<number>);`

 |

## Examples

### Basic example

Use the `scroll-mt-<number>`, `scroll-mr-<number>`, `scroll-mb-<number>`, and `scroll-ml-<number>` utilities like `scroll-ml-4` and `scroll-mt-6` to set the scroll offset around items within a snap container:

Scroll in the grid of images to see the expected behavior

    <div class="snap-x ..."> <div class="snap-start scroll-ml-6 ..."> <img src="/img/vacation-01.jpg"/> </div> <div class="snap-start scroll-ml-6 ..."> <img src="/img/vacation-02.jpg"/> </div> <div class="snap-start scroll-ml-6 ..."> <img src="/img/vacation-03.jpg"/> </div> <div class="snap-start scroll-ml-6 ..."> <img src="/img/vacation-04.jpg"/> </div> <div class="snap-start scroll-ml-6 ..."> <img src="/img/vacation-05.jpg"/> </div></div>

### Using negative values

To use a negative scroll margin value, prefix the class name with a dash to convert it to a negative value:

    <div class="snap-start -scroll-ml-6 ..."> <!-- ... --></div>

### Using logical properties

Use the `scroll-ms-<number>` and `scroll-me-<number>` utilities to set the `scroll-margin-inline-start` and `scroll-margin-inline-end` logical properties, which map to either the left or right side based on the text direction:

Scroll in the grid of images to see the expected behavior

Left-to-right

Right-to-left

    <div dir="ltr"> <div class="snap-x ..."> <div class="snap-start scroll-ms-6 ..."> <img src="/img/vacation-01.jpg"/> </div> <!-- ... --> </div></div><div dir="rtl"> <div class="snap-x ..."> <div class="snap-start scroll-ms-6 ..."> <img src="/img/vacation-01.jpg"/> </div> <!-- ... --> </div></div>

For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

### Using a custom value

Use utilities like `scroll-ml-[<value>]` and `scroll-me-[<value>]` to set the scroll margin based on a completely custom value:

    <div class="scroll-ml-[24rem] ..."> <!-- ... --></div>

For CSS variables, you can also use the `scroll-ml-(<custom-property>)` syntax:

    <div class="scroll-ml-(--my-scroll-margin) ..."> <!-- ... --></div>

This is just a shorthand for `scroll-ml-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `scroll-margin` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="scroll-m-8 md:scroll-m-0 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

The `scroll-m-<number>`,`scroll-mx-<number>`,`scroll-my-<number>`,`scroll-ms-<number>`,`scroll-me-<number>`,`scroll-mt-<number>`,`scroll-mr-<number>`,`scroll-mb-<number>`, and `scroll-ml-<number>` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme:

    @theme { --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.

---

## Page: https://tailwindcss.com/docs/scroll-padding

Utilities for controlling an element's scroll offset within a snap container.

| Class | Styles |
| --- | --- |
| `scroll-p-<number>` | 
`scroll-padding: calc(var(--spacing) * <number>);`

 |
| `-scroll-p-<number>` | 

`scroll-padding: calc(var(--spacing) * -<number>);`

 |
| `scroll-p-(<custom-property>)` | 

`scroll-padding: var(<custom-property>);`

 |
| `scroll-p-[<value>]` | 

`scroll-padding: <value>;`

 |
| `scroll-px-<number>` | 

`scroll-padding-inline: calc(var(--spacing) * <number>);`

 |
| `-scroll-px-<number>` | 

`scroll-padding-inline: calc(var(--spacing) * -<number>);`

 |
| `scroll-px-(<custom-property>)` | 

`scroll-padding-inline: var(<custom-property>);`

 |
| `scroll-px-[<value>]` | 

`scroll-padding-inline: <value>;`

 |
| `scroll-py-<number>` | 

`scroll-padding-block: calc(var(--spacing) * <number>);`

 |
| `-scroll-py-<number>` | 

`scroll-padding-block: calc(var(--spacing) * -<number>);`

 |

## Examples

### Basic example

Use the `scroll-pt-<number>`, `scroll-pr-<number>`, `scroll-pb-<number>`, and `scroll-pl-<number>` utilities like `scroll-pl-4` and `scroll-pt-6` to set the scroll offset of an element within a snap container:

Scroll in the grid of images to see the expected behavior

    <div class="snap-x scroll-pl-6 ..."> <div class="snap-start ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-05.jpg" /> </div></div>

### Using logical properties

Use the `scroll-ps-<number>` and `scroll-pe-<number>` utilities to set the `scroll-padding-inline-start` and `scroll-padding-inline-end` logical properties, which map to either the left or right side based on the text direction:

Scroll in the grid of images to see the expected behavior

Left-to-right

Right-to-left

    <div dir="ltr"> <div class="snap-x scroll-ps-6 ..."> <!-- ... --> </div></div><div dir="rtl"> <div class="snap-x scroll-ps-6 ..."> <!-- ... --> </div></div>

### Using negative values

To use a negative scroll padding value, prefix the class name with a dash to convert it to a negative value:

    <div class="-scroll-ps-6 snap-x ..."> <!-- ... --></div>

### Using a custom value

Use utilities like `scroll-pl-[<value>]` and `scroll-pe-[<value>]` to set the scroll padding based on a completely custom value:

    <div class="scroll-pl-[24rem] ..."> <!-- ... --></div>

For CSS variables, you can also use the `scroll-pl-(<custom-property>)` syntax:

    <div class="scroll-pl-(--my-scroll-padding) ..."> <!-- ... --></div>

This is just a shorthand for `scroll-pl-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `scroll-padding` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="scroll-p-8 md:scroll-p-0 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

## Customizing your theme

The `scroll-p-<number>`,`scroll-px-<number>`,`scroll-py-<number>`,`scroll-ps-<number>`,`scroll-pe-<number>`,`scroll-pt-<number>`,`scroll-pr-<number>`,`scroll-pb-<number>`, and `scroll-pl-<number>` utilities are driven by the `--spacing` theme variable, which can be customized in your own theme:

    @theme { --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.

---

## Page: https://tailwindcss.com/docs/scroll-snap-align

Utilities for controlling the scroll snap alignment of an element.

| Class | Styles |
| --- | --- |
| `snap-start` | 
`scroll-snap-align: start;`

 |
| `snap-end` | 

`scroll-snap-align: end;`

 |
| `snap-center` | 

`scroll-snap-align: center;`

 |
| `snap-align-none` | 

`scroll-snap-align: none;`

 |

## Examples

### Snapping to the center

Use the `snap-center` utility to snap an element to its center when being scrolled inside a snap container:

Scroll in the grid of images to see the expected behavior

snap point

    <div class="snap-x ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div></div>

### Snapping to the start

Use the `snap-start` utility to snap an element to its start when being scrolled inside a snap container:

Scroll in the grid of images to see the expected behavior

snap point

    <div class="snap-x ..."> <div class="snap-start ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-06.jpg" /> </div></div>

### Snapping to the end

Use the `snap-end` utility to snap an element to its end when being scrolled inside a snap container:

Scroll in the grid of images to see the expected behavior

snap point

    <div class="snap-x ..."> <div class="snap-end ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-06.jpg" /> </div></div>

### Responsive design

Prefix a `scroll-snap-align` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="snap-center md:snap-start ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/scroll-snap-stop

Utilities for controlling whether you can skip past possible snap positions.

| Class | Styles |
| --- | --- |
| `snap-normal` | 
`scroll-snap-stop: normal;`

 |
| `snap-always` | 

`scroll-snap-stop: always;`

 |

## Examples

### Forcing snap position stops

Use the `snap-always` utility together with the snap-mandatory utility to force a snap container to always stop on an element before the user can continue scrolling to the next item:

Scroll in the grid of images to see the expected behavior

snap point

    <div class="snap-x snap-mandatory ..."> <div class="snap-center snap-always ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-06.jpg" /> </div></div>

### Skipping snap position stops

Use the `snap-normal` utility to allow a snap container to skip past possible scroll snap positions:

Scroll in the grid of images to see the expected behavior

snap point

    <div class="snap-x ..."> <div class="snap-center snap-normal ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-06.jpg" /> </div></div>

### Responsive design

Prefix a `scroll-snap-stop` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="snap-always md:snap-normal ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/scroll-snap-type

Utilities for controlling how strictly snap points are enforced in a snap container.

| Class | Styles |
| --- | --- |
| `snap-none` | 
`scroll-snap-type: none;`

 |
| `snap-x` | 

`scroll-snap-type: x var(--tw-scroll-snap-strictness);`

 |
| `snap-y` | 

`scroll-snap-type: y var(--tw-scroll-snap-strictness);`

 |
| `snap-both` | 

`scroll-snap-type: both var(--tw-scroll-snap-strictness);`

 |
| `snap-mandatory` | 

`--tw-scroll-snap-strictness: mandatory;`

 |
| `snap-proximity` | 

`--tw-scroll-snap-strictness: proximity;`

 |

## Examples

### Horizontal scroll snapping

Use the `snap-x` utility to enable horizontal scroll snapping within an element:

Scroll in the grid of images to see the expected behavior

snap point

    <div class="snap-x ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div></div>

For scroll snapping to work, you need to also set the scroll snap alignment on the children.

### Mandatory scroll snapping

Use the `snap-mandatory` utility to force a snap container to always come to rest on a snap point:

Scroll in the grid of images to see the expected behavior

snap point

    <div class="snap-x snap-mandatory ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div></div>

### Proximity scroll snapping

Use the `snap-proximity` utility to make a snap container come to rest on snap points that are close in proximity:

Scroll in the grid of images to see the expected behavior

snap point

    <div class="snap-x snap-proximity ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div></div>

### Responsive design

Prefix a `scroll-snap-type` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="snap-none md:snap-x ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/touch-action

Interactivity

Utilities for controlling how an element can be scrolled and zoomed on touchscreens.

| Class | Styles |
| --- | --- |
| `touch-auto` | 
`touch-action: auto;`

 |
| `touch-none` | 

`touch-action: none;`

 |
| `touch-pan-x` | 

`touch-action: pan-x;`

 |
| `touch-pan-left` | 

`touch-action: pan-left;`

 |
| `touch-pan-right` | 

`touch-action: pan-right;`

 |
| `touch-pan-y` | 

`touch-action: pan-y;`

 |
| `touch-pan-up` | 

`touch-action: pan-up;`

 |
| `touch-pan-down` | 

`touch-action: pan-down;`

 |
| `touch-pinch-zoom` | 

`touch-action: pinch-zoom;`

 |
| `touch-manipulation` | 

`touch-action: manipulation;`

 |

## Examples

### Basic example

Use utilities like `touch-pan-y` and `touch-pinch-zoom` to control how an element can be scrolled (panned) and zoomed (pinched) on touchscreens:

Try panning these images on a touchscreen

touch-auto

touch-none

touch-pan-x

touch-pan-y

    <div class="h-48 w-full touch-auto overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-none overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-pan-x overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-pan-y overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div>

### Responsive design

Prefix a `touch-action` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="touch-pan-x md:touch-auto ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

### On this page

*   Quick reference
*   Examples
    *   Basic example
    *   Responsive design

5-day mini-course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course →

---

## Page: https://tailwindcss.com/docs/user-select

Utilities for controlling whether the user can select text in an element.

| Class | Styles |
| --- | --- |
| `select-none` | 
`user-select: none;`

 |
| `select-text` | 

`user-select: text;`

 |
| `select-all` | 

`user-select: all;`

 |
| `select-auto` | 

`user-select: auto;`

 |

## Examples

### Disabling text selection

Use the `select-none` utility to prevent selecting text in an element and its children:

Try selecting the text to see the expected behavior

The quick brown fox jumps over the lazy dog.

    <div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>

### Allowing text selection

Use the `select-text` utility to allow selecting text in an element and its children:

Try selecting the text to see the expected behavior

The quick brown fox jumps over the lazy dog.

    <div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>

### Selecting all text in one click

Use the `select-all` utility to automatically select all the text in an element when a user clicks:

Try clicking the text to see the expected behavior

The quick brown fox jumps over the lazy dog.

    <div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>

### Using auto select behavior

Use the `select-auto` utility to use the default browser behavior for selecting text:

Try selecting the text to see the expected behavior

The quick brown fox jumps over the lazy dog.

    <div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>

### Responsive design

Prefix an `user-select` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="select-none md:select-all ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/will-change

Utilities for optimizing upcoming animations of elements that are expected to change.

| Class | Styles |
| --- | --- |
| `will-change-auto` | 
`will-change: auto;`

 |
| `will-change-scroll` | 

`will-change: scroll-position;`

 |
| `will-change-contents` | 

`will-change: contents;`

 |
| `will-change-transform` | 

`will-change: transform;`

 |
| `will-change-<custom-property>` | 

`will-change: var(<custom-property>);`

 |
| `will-change-[<value>]` | 

`will-change: <value>;`

 |

## Examples

### Optimizing with will change

Use the `will-change-scroll`, `will-change-contents` and `will-change-transform` utilities to optimize an element that's expected to change in the near future by instructing the browser to prepare the necessary animation before it actually begins:

    <div class="overflow-auto will-change-scroll"> <!-- ... --></div>

It's recommended that you apply these utilities just before an element changes, and then remove it shortly after it finishes using `will-change-auto`.

The `will-change` property is intended to be used as a last resort when dealing with **known performance problems**. Avoid using these utilities too much, or simply in anticipation of performance issues, as it could actually cause the page to be less performant.

### Using a custom value

Use the `will-change-[<value>]` syntax to set the `will-change` property based on a completely custom value:

    <div class="will-change-[top,left] ..."> <!-- ... --></div>

For CSS variables, you can also use the `will-change-(<custom-property>)` syntax:

    <div class="will-change-(--my-properties) ..."> <!-- ... --></div>

This is just a shorthand for `will-change-[var(<custom-property>)]` that adds the `var()` function for you automatically.

---

## Page: https://tailwindcss.com/docs/fill

Utilities for styling the fill of SVG elements.

| Class | Styles |
| --- | --- |
| `fill-none` | 
`fill: none;`

 |
| `fill-inherit` | 

`fill: inherit;`

 |
| `fill-current` | 

`fill: currentColor;`

 |
| `fill-transparent` | 

`fill: transparent;`

 |
| `fill-black` | 

`fill: var(--color-black); /* #000 */`

 |
| `fill-white` | 

`fill: var(--color-white); /* #fff */`

 |
| `fill-red-50` | 

`fill: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`

 |
| `fill-red-100` | 

`fill: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`

 |
| `fill-red-200` | 

`fill: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`

 |
| `fill-red-300` | 

`fill: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`

 |

## Examples

### Basic example

Use utilities like `fill-indigo-500` and `fill-lime-600` to change the fill color of an SVG:

    <svg class="fill-blue-500 ..."> <!-- ... --></svg>

This can be useful for styling icon sets like Heroicons.

### Using the current color

Use the `fill-current` utility to set the fill color to the current text color:

Hover over the button to see the fill color change

    <button class="bg-white text-indigo-600 hover:bg-indigo-600 hover:text-white ..."> <svg class="size-5 fill-current ..."> <!-- ... --> </svg> Check for updates</button>

### Using a custom value

Use the `fill-[<value>]` syntax to set the fill color based on a completely custom value:

    <svg class="fill-[#243c5a] ..."> <!-- ... --></svg>

For CSS variables, you can also use the `fill-(<custom-property>)` syntax:

    <svg class="fill-(--my-fill-color) ..."> <!-- ... --></svg>

This is just a shorthand for `fill-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `fill` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <svg class="fill-cyan-500 md:fill-cyan-700 ..."> <!-- ... --></svg>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `fill-regal-blue` utility can be used in your markup:

    <svg class="fill-regal-blue"> <!-- ... --></svg>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/stroke

Utilities for styling the stroke of SVG elements.

| Class | Styles |
| --- | --- |
| `stroke-none` | 
`stroke: none;`

 |
| `stroke-inherit` | 

`stroke: inherit;`

 |
| `stroke-current` | 

`stroke: currentColor;`

 |
| `stroke-transparent` | 

`stroke: transparent;`

 |
| `stroke-black` | 

`stroke: var(--color-black); /* #000 */`

 |
| `stroke-white` | 

`stroke: var(--color-white); /* #fff */`

 |
| `stroke-red-50` | 

`stroke: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`

 |
| `stroke-red-100` | 

`stroke: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`

 |
| `stroke-red-200` | 

`stroke: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`

 |
| `stroke-red-300` | 

`stroke: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`

 |

## Examples

### Basic example

Use utilities like `stroke-indigo-500` and `stroke-lime-600` to change the stroke color of an SVG:

    <svg class="stroke-cyan-500 ..."> <!-- ... --></svg>

This can be useful for styling icon sets like Heroicons.

### Using the current color

Use the `stroke-current` utility to set the stroke color to the current text color:

Hover over the button to see the stroke color change

    <button class="bg-white text-pink-600 hover:bg-pink-600 hover:text-white ..."> <svg class="size-5 stroke-current ..." fill="none"> <!-- ... --> </svg> Download file</button>

### Using a custom value

Use the `stroke-[<value>]` syntax to set the stroke color based on a completely custom value:

    <svg class="stroke-[#243c5a] ..."> <!-- ... --></svg>

For CSS variables, you can also use the `stroke-(<custom-property>)` syntax:

    <svg class="stroke-(--my-stroke-color) ..."> <!-- ... --></svg>

This is just a shorthand for `stroke-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `stroke` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <svg class="stroke-cyan-500 md:stroke-cyan-700 ..."> <!-- ... --></svg>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `stroke-regal-blue` utility can be used in your markup:

    <svg class="stroke-regal-blue"> <!-- ... --></svg>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/stroke-width

Utilities for styling the stroke width of SVG elements.

| Class | Styles |
| --- | --- |
| `stroke-<number>` | 
`stroke-width: <number>;`

 |
| `stroke-(length:<custom-property>)` | 

`stroke-width: var(<custom-property>);`

 |
| `stroke-[<value>]` | 

`stroke-width: <value>;`

 |

## Examples

### Basic example

Use `stroke-<number>` utilities like `stroke-1` and `stroke-2` to set the stroke width of an SVG:

    <svg class="stroke-1 ..."></svg><svg class="stroke-2 ..."></svg>

This can be useful for styling icon sets like Heroicons.

### Using a custom value

Use the `stroke-[<value>]` syntax to set the stroke width based on a completely custom value:

    <div class="stroke-[1.5] ..."> <!-- ... --></div>

For CSS variables, you can also use the `stroke-(length:<custom-property>)` syntax:

    <div class="stroke-(length:--my-stroke-width) ..."> <!-- ... --></div>

This is just a shorthand for `stroke-[length:var(<custom-property>)]` that adds the `var()` function for you automatically.

### Responsive design

Prefix a `stroke-width` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="stroke-1 md:stroke-2 ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/forced-color-adjust

Utilities for opting in and out of forced colors.

| Class | Styles |
| --- | --- |
| `forced-color-adjust-auto` | 
`forced-color-adjust: auto;`

 |
| `forced-color-adjust-none` | 

`forced-color-adjust: none;`

 |

## Examples

### Opting out of forced colors

Use the `forced-color-adjust-none` utility to opt an element out of the colors enforced by forced colors mode. This is useful in situations where enforcing a limited color palette will degrade usability.

Try emulating \`forced-colors: active\` in your developer tools to see the changes

Basic Tee

$35

    <form> <img src="/img/shirt.jpg" /> <div> <h3>Basic Tee</h3> <h3>$35</h3> <fieldset> <legend class="sr-only">Choose a color</legend> <div class="forced-color-adjust-none ..."> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <span class="sr-only">White</span> <span class="size-6 rounded-full border border-black/10 bg-white"></span> </label> <!-- ... --> </div> </fieldset> </div></form>

You can also use the forced colors variant to conditionally add styles when the user has enabled a forced color mode.

### Restoring forced colors

Use the `forced-color-adjust-auto` utility to make an element adhere to colors enforced by forced colors mode:

    <form> <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ..."> <legend>Choose a color:</legend> <select class="hidden lg:block"> <option value="White">White</option> <option value="Gray">Gray</option> <option value="Black">Black</option> </select> <div class="lg:hidden"> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <!-- ... --> </label> <!-- ... --> </div> </fieldset></form>

This can be useful if you want to undo the `forced-color-adjust-none` utility, for example on a larger screen size.

### Responsive design

Prefix a `forced-color-adjust` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <div class="forced-color-adjust-none md:forced-color-adjust-auto ..."> <!-- ... --></div>

Learn more about using variants in the variants documentation.

---

## Page: https://tailwindcss.com/docs/installation/using-postcss

### Installing Tailwind CSS as a PostCSS plugin

Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with frameworks like Next.js and Angular.

01

#### Install Tailwind CSS

Install `tailwindcss`, `@tailwindcss/postcss`, and `postcss` via npm.

Terminal

    npm install tailwindcss @tailwindcss/postcss postcss

02

#### Add Tailwind to your PostCSS configuration

Add `@tailwindcss/postcss` to your `postcss.config.mjs` file, or wherever PostCSS is configured in your project.

postcss.config.mjs

    export default { plugins: { "@tailwindcss/postcss": {}, }}

03

#### Import Tailwind CSS

Add an `@import` to your CSS file that imports Tailwind CSS.

CSS

    @import "tailwindcss";

04

#### 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

05

#### Start using Tailwind in your HTML

Make sure your compiled CSS is included in the `<head>` _(your framework might handle this for you)_, then start using Tailwind’s utility classes to style your content.

HTML

    <!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/styles.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>

---

## Page: https://tailwindcss.com/docs/installation/tailwind-cli

### Installing Tailwind CLI

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

01

#### Install Tailwind CSS

Install `tailwindcss` and `@tailwindcss/cli` via npm.

Terminal

    npm install tailwindcss @tailwindcss/cli

02

#### Import Tailwind in your CSS

Add the `@import "tailwindcss";` import to your main CSS file.

src/input.css

    @import "tailwindcss";

03

#### Start the Tailwind CLI build process

Run the CLI tool to scan your source files for classes and build your CSS.

Terminal

    npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

04

#### Start using Tailwind in your HTML

Add your compiled CSS file to the `<head>` and start using Tailwind’s utility classes to style your content.

src/index.html

    <!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides

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.

*   ## Using Vite
    
*   ## Using PostCSS
    
*   ## Tailwind CLI
    
*   ## Framework Guides
    
*   ## Play CDN
    

### Framework Guides

Framework-specific guides that cover our recommended approach to installing Tailwind CSS in a number of popular environments.

*   #### Next.js
    
    Full-featured React framework with great developer experience.
    
*   #### Laravel
    
    PHP web application framework with expressive, elegant syntax.
    
*   #### Nuxt
    
    Intuitive Vue framework for building universal applications.
    
*   #### SolidJS
    
    A tool for building simple, performant, and reactive user interfaces.
    
*   #### SvelteKit
    
    The fastest way to build apps of all sizes with Svelte.js.
    
*   #### Angular
    
    Platform for building mobile and desktop web applications.
    
*   #### Ruby on Rails
    
    Full-stack framework with all the tools needed to build amazing web apps.
    
*   #### React Router
    
    A standards‑focused router you can deploy anywhere.
    
*   #### Phoenix
    
    A framework to build rich, interactive applications with Elixir.
    
*   #### Parcel
    
    The zero-configuration build tool for the web.
    
*   #### Symfony
    
    A PHP framework to create websites and web applications.
    
*   #### Meteor
    
    The full stack JavaScript framework for developing cross-platform apps.
    
*   #### AdonisJS
    
    A fully featured web framework for Node.js.
    
*   #### Ember.js
    
    A JavaScript framework for ambitious web developers.
    
*   #### Astro
    
    The all-in-one web framework designed for speed.
    
*   #### Qwik
    
    Build instantly-interactive web apps without effort.
    
*   #### Rspack
    
    A fast Rust-based web bundler.

---

## Page: https://tailwindcss.com/docs/installation/play-cdn

### Using Play CDN

Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not intended for production.

01

#### Add the Play CDN script to your HTML

Add the Play CDN script tag to the `<head>` of your HTML file, and start using Tailwind’s utility classes to style your content.

index.html

    <!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>

02

#### Try adding some custom CSS

Use `type="text/tailwindcss"` to add custom CSS that supports all of Tailwind's CSS features.

index.html

    <!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <style type="text/tailwindcss"> @theme { --color-clifford: #da373d; } </style> </head> <body> <h1 class="text-3xl font-bold underline text-clifford"> Hello world! </h1> </body></html>

---

## Page: https://tailwindcss.com/docs/text-color

Utilities for controlling the text color of an element.

| Class | Styles |
| --- | --- |
| `text-inherit` | 
`color: inherit;`

 |
| `text-current` | 

`color: currentColor;`

 |
| `text-transparent` | 

`color: transparent;`

 |
| `text-black` | 

`color: var(--color-black); /* #000 */`

 |
| `text-white` | 

`color: var(--color-white); /* #fff */`

 |
| `text-red-50` | 

`color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`

 |
| `text-red-100` | 

`color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`

 |
| `text-red-200` | 

`color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`

 |
| `text-red-300` | 

`color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`

 |
| `text-red-400` | 

`color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`

 |

## Examples

### Basic example

Use utilities like `text-blue-600` and `text-sky-400` to control the text color of an element:

The quick brown fox jumps over the lazy dog.

    <p class="text-blue-600 dark:text-sky-400">The quick brown fox...</p>

### Changing the opacity

Use the color opacity modifier to control the text color opacity of an element:

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

    <p class="text-blue-600/100 dark:text-sky-400/100">The quick brown fox...</p><p class="text-blue-600/75 dark:text-sky-400/75">The quick brown fox...</p><p class="text-blue-600/50 dark:text-sky-400/50">The quick brown fox...</p><p class="text-blue-600/25 dark:text-sky-400/25">The quick brown fox...</p>

### Using a custom value

Use the `text-[<value>]` syntax to set the text color based on a completely custom value:

    <p class="text-[#50d71e] ..."> Lorem ipsum dolor sit amet...</p>

For CSS variables, you can also use the `text-(<custom-property>)` syntax:

    <p class="text-(--my-color) ..."> Lorem ipsum dolor sit amet...</p>

This is just a shorthand for `text-[var(<custom-property>)]` that adds the `var()` function for you automatically.

### Applying on hover

Prefix a `color` utility with a variant like `hover:*` to only apply the utility in that state:

Hover over the text to see the expected behavior

Oh I gotta get on that internet, I'm late on everything!

    <p class="..."> Oh I gotta get on that <a class="underline hover:text-blue-600 dark:hover:text-blue-400" href="https://en.wikipedia.org/wiki/Internet">internet</a>, I'm late on everything!</p>

Learn more about using variants in the variants documentation.

### Responsive design

Prefix a `color` utility with a breakpoint variant like `md:` to only apply the utility at medium screen sizes and above:

    <p class="text-blue-600 md:text-green-600 ..."> Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

## Customizing your theme

Use the `--color-*` theme variables to customize the color utilities in your project:

    @theme { --color-regal-blue: #243c5a; }

Now the `text-regal-blue` utility can be used in your markup:

    <p class="text-regal-blue"> Lorem ipsum dolor sit amet...</p>

Learn more about customizing your theme in the theme documentation.

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/nextjs

Installation

## Install Tailwind CSS with Next.js

Setting up Tailwind CSS in a Next.js project.

01

#### Create your project

Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App.

Terminal

    npx create-next-app@latest my-project --typescript --eslint --appcd my-project

02

#### Install Tailwind CSS

Install `@tailwindcss/postcss` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/postcss postcss

03

#### Configure PostCSS Plugins

Create a `postcss.config.mjs` file in the root of your project and add the `@tailwindcss/postcss` plugin to your PostCSS configuration.

postcss.config.mjs

    const config = { plugins: { "@tailwindcss/postcss": {}, },};export default config;

04

#### Import Tailwind CSS

Add an `@import` to `./src/app/globals.css` that imports Tailwind CSS.

globals.css

    @import "tailwindcss";

05

#### Start your build process

Run your build process with `npm run dev`.

Terminal

    npm run dev

06

#### Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

page.tsx

    export default function Home() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> )}

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/laravel/vite

Installation

## Install Tailwind CSS with Laravel

Setting up Tailwind CSS in a Laravel project.

*   ## Using Vite
    
*   ## Using Laravel Mix
    

01

#### Create your project

Start by creating a new Laravel project if you don’t have one set up already. The most common approach is to use the Laravel installer.

Terminal

    laravel new my-projectcd my-project

02

#### Install Tailwind CSS

Install `@tailwindcss/vite` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/vite

03

#### Configure 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 `./resources/css/app.css` that imports Tailwind CSS. Additionally, tell Tailwind CSS to scan your `resources/views` directory for utilities.

app.css

    @import "tailwindcss";@source "../views";

05

#### Start your build process

Run your build process with `npm run dev`.

Terminal

    npm run dev

06

#### Start using Tailwind in your project

Make sure your compiled CSS is included in the `<head>` then start using Tailwind’s utility classes to style your content.

app.blade.php

    <!doctype html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> @vite('resources/css/app.css') </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/nuxt

Installation

## Install Tailwind CSS with Nuxt

Setting up Tailwind CSS in a Nuxt project.

01

#### Create your project

Start by creating a new Nuxt project if you don’t have one set up already. The most common approach is to use the Nuxt Command Line Interface.

Terminal

    npx nuxi init my-projectcd my-project

02

#### Install Tailwind CSS

Install `@tailwindcss/vite` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/vite

03

#### Configure Vite Plugin

Add the `@tailwindcss/vite` plugin to your Nuxt configuration as a Vite plugin.

nuxt.config.ts

    import tailwindcss from "@tailwindcss/vite";export default defineNuxtConfig({ compatibilityDate: "2024-11-01", devtools: { enabled: true }, vite: { plugins: [ tailwindcss(), ], },});

04

#### Import Tailwind CSS

Create an `./assets/css/main.css` file and add an `@import` that imports Tailwind CSS.

main.css

    @import "tailwindcss";

05

#### Add the CSS file globally

Add your newly-created `./assets/css/main.css` to the `css` array in your `nuxt.config.ts` file.

nuxt.config.ts

    import tailwindcss from "@tailwindcss/vite";export default defineNuxtConfig({ compatibilityDate: "2024-11-01", devtools: { enabled: true }, css: ['~/assets/css/main.css'], vite: { plugins: [ tailwindcss(), ], },});

06

#### Start your build process

Run your build process with `npm run dev`.

Terminal

    npm run dev

07

#### Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

app.vue

    <template> <h1 class="text-3xl font-bold underline"> Hello world! </h1></template>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/solidjs

Setting up Tailwind CSS in a SolidJS project.

01

#### Create your project

Start by creating a new SolidJS project if you don't have one set up already. The most common approach is to use the SolidJS Vite template.

Terminal

    npx degit solidjs/templates/js my-projectcd my-project

02

#### Install Tailwind CSS

Install `@tailwindcss/vite` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/vite

03

#### Configure Vite Plugin

Add the `@tailwindcss/vite` plugin to your Vite configuration.

vite.config.ts

    import { defineConfig } from 'vite';import solidPlugin from 'vite-plugin-solid';import tailwindcss from '@tailwindcss/vite';export default defineConfig({ plugins: [ tailwindcss(), solidPlugin(), ], server: { port: 3000, }, build: { target: 'esnext', },});

04

#### Import Tailwind CSS

Add an `@import` to `./src/index.css` that imports Tailwind CSS.

index.css

    @import "tailwindcss";

05

#### Start your build process

Run your build process with `npm run dev`.

Terminal

    npm run dev

06

#### Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

App.jsx

    export default function App() { return ( <h1 class="text-3xl font-bold underline"> Hello world! </h1> )}

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/sveltekit

Installation

## Install Tailwind CSS with SvelteKit

Setting up Tailwind CSS in a SvelteKit project.

01

#### Create your project

Start by creating a new SvelteKit project if you don't have one set up already. The most common approach is outlined in the SvelteKit documentation.

Terminal

    npx sv create my-projectcd my-project

02

#### Install Tailwind CSS

Install `@tailwindcss/vite` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/vite

03

#### Configure Vite Plugin

Add the `@tailwindcss/vite` plugin to your Vite configuration.

vite.config.ts

    import { sveltekit } from '@sveltejs/kit/vite';import { defineConfig } from 'vite';import tailwindcss from '@tailwindcss/vite';export default defineConfig({ plugins: [ tailwindcss(), sveltekit(), ],});

04

#### Import Tailwind CSS

Create a `./src/app.css` file and add an `@import` that imports Tailwind CSS.

app.css

    @import "tailwindcss";

05

#### Import the CSS file

Create a `./src/routes/+layout.svelte` file and import the newly-created `app.css` file.

+layout.svelte

    <script> let { children } = $props(); import "../app.css";</script>{@render children()}

06

#### Start your build process

Run your build process with `npm run dev`.

Terminal

    npm run dev

07

#### Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content, making sure to import your Tailwind CSS theme for any `<style>` blocks that need to be processed by Tailwind.

+page.svelte

    <h1 class="text-3xl font-bold underline"> Hello world!</h1><style lang="postcss"> @reference "tailwindcss"; :global(html) { background-color: theme(--color-gray-100); }</style>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/angular

Installation

## Install Tailwind CSS with Angular

Setting up Tailwind CSS in an Angular project.

01

#### Create your project

Start by creating a new Angular project if you don’t have one set up already. The most common approach is to use Angular CLI.

Terminal

    ng new my-project --style csscd my-project

02

#### Install Tailwind CSS

Install `@tailwindcss/postcss` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/postcss postcss --force

03

#### Configure PostCSS Plugins

Create a `.postcssrc.json` file in the root of your project and add the `@tailwindcss/postcss` plugin to your PostCSS configuration.

.postcssrc.json

    { "plugins": { "@tailwindcss/postcss": {} }}

04

#### Import Tailwind CSS

Add an `@import` to `./src/styles.css` that imports Tailwind CSS.

styles.css

    @import "tailwindcss";

05

#### Start your build process

Run your build process with `ng serve`.

Terminal

    ng serve

06

#### Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

app.component.html

    <h1 class="text-3xl font-bold underline"> Hello world!</h1>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails

Installation

## Install Tailwind CSS with Ruby on Rails

Setting up Tailwind CSS in Ruby on Rails v7+ project.

01

#### Create your project

Start by creating a new Rails project if you don't have one set up already. The most common approach is to use the Rails Command Line.

Terminal

    rails new my-projectcd my-project

02

#### Install Tailwind CSS

Install the `tailwindcss-ruby` and `tailwindcss-rails` gems, and then run the install command to set up Tailwind CSS in your project.

Terminal

    ./bin/bundle add tailwindcss-ruby./bin/bundle add tailwindcss-rails./bin/rails tailwindcss:install

03

#### Start your build process

Run your build process with `./bin/dev`.

Terminal

    ./bin/dev

04

#### Start using Tailwind in your project

Start using Tailwind's utility classes to style your content.

index.html.erb

    <h1 class="text-3xl font-bold underline"> Hello world!</h1>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/react-router

Installation

## Install Tailwind CSS with React Router

Setting up Tailwind CSS in a React Router project.

01

#### Create your project

Start by creating a new React Router project if you don’t have one set up already. The most common approach is to use Create React Router.

Terminal

    npx create-react-router@latest my-projectcd my-project

02

#### Install Tailwind CSS

Install `@tailwindcss/vite` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/vite

03

#### Configure Vite Plugin

Add the `@tailwindcss/vite` plugin to your Vite configuration.

vite.config.ts

    import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import tsconfigPaths from "vite-tsconfig-paths";import tailwindcss from "@tailwindcss/vite";export default defineConfig({ plugins: [ tailwindcss(), reactRouter(), tsconfigPaths(), ],});

04

#### Import Tailwind CSS

Add an `@import` to `./app/app.css` that imports Tailwind CSS.

tailwind.css

    @import "tailwindcss";

05

#### Start your build process

Run your build process with `npm run dev`.

Terminal

    npm run dev

06

#### Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

home.tsx

    export default function Home() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> )}

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/phoenix

Installation

## Install Tailwind CSS with Phoenix

Setting up Tailwind CSS in a Phoenix project.

01

#### Create your project

Start by creating a new Phoenix project if you don't have one set up already. You can follow their installation guide to get up and running.

Terminal

    mix phx.new myprojectcd myproject

02

#### Install the Tailwind plugin

Add the Tailwind plugin to your dependencies and run `mix deps.get` to install it.

mix.exs

    defp deps do [ # … {:tailwind, "~> 0.3", runtime: Mix.env() == :dev}, ]end

03

#### Configure the Tailwind plugin

In your `config/config.exs` file you can set which version of Tailwind CSS you want to use and customize your asset paths.

config.exs

    config :tailwind, version: "4.1.10", myproject: [ args: ~w( --input=assets/css/app.css --output=priv/static/assets/app.css ), cd: Path.expand("..", __DIR__) ]

04

#### Update your deployment script

Configure your `assets.deploy` alias to build your CSS on deployment.

mix.exs

    defp aliases do [ # … "assets.deploy": [ "tailwind myproject --minify", "esbuild myproject --minify", "phx.digest" ] ]end

05

#### Enable watcher in development

Add Tailwind to your list of watchers in your `./config/dev.exs` file.

dev.exs

    watchers: [ # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args) esbuild: {Esbuild, :install_and_run, [:myproject, ~w(--sourcemap=inline --watch)]}, tailwind: {Tailwind, :install_and_run, [:myproject, ~w(--watch)]}]

06

#### Install Tailwind CSS

Run the install command to download the standalone Tailwind CLI.

Terminal

    mix tailwind.install

07

#### Import Tailwind CSS

Add an `@import` to `./assets/css/app.css` that imports Tailwind CSS.

app.css

    @import "tailwindcss";

08

#### Remove the default CSS import

Remove the CSS import from `./assets/js/app.js`, as Tailwind is now handling this for you.

app.js

    // Remove this line if you add your own CSS build pipeline (e.g postcss).import "../css/app.css"

09

#### Start your build process

Run your build process with `mix phx.server`.

Terminal

    mix phx.server

10

#### Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

index.html.heex

    <h1 class="text-3xl font-bold underline"> Hello world!</h1>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/parcel

Installation

## Install Tailwind CSS with Parcel

Setting up Tailwind CSS in a Parcel project.

01

#### Create your project

Start by creating a new Parcel project if you don’t have one set up already. The most common approach is to add Parcel as a dev-dependency to your project as outlined in their getting started guide.

Terminal

    mkdir my-projectcd my-projectnpm init -ynpm install parcelmkdir srctouch src/index.html

02

#### Install Tailwind CSS

Install `@tailwindcss/postcss` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/postcss

03

#### Configure PostCSS

Create a `.postcssrc` file in your project root, and enable the `@tailwindcss/postcss` plugin.

.postcssrc

    { "plugins": { "@tailwindcss/postcss": {} }}

04

#### Import Tailwind CSS

Create a `./src/index.css` file and add an `@import` for Tailwind CSS.

index.css

    @import "tailwindcss";

05

#### Start your build process

Run your build process with `npx parcel src/index.html`.

Terminal

    npx parcel src/index.html

06

#### Start using Tailwind in your project

Add your CSS file to the `<head>` and start using Tailwind’s utility classes to style your content.

index.html

    <!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="./index.css" type="text/css" rel="stylesheet" /> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/symfony

Installation

## Install Tailwind CSS with Symfony

Setting up Tailwind CSS in a Symfony project.

01

#### Create your project

Start by creating a new Symfony project if you don’t have one set up already. The most common approach is to use the Symfony Installer.

Terminal

    symfony new --webapp my-projectcd my-project

02

#### Install Webpack Encore

Install Webpack Encore, which handles building your assets. See the documentation for more information.

Terminal

    composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundlecomposer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle

03

#### Install Tailwind CSS

Using npm, install `@tailwindcss/postcss` and its peer dependencies, as well as `postcss-loader`.

Terminal

    npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

04

#### Enable PostCSS support

In your `webpack.config.js` file, enable the PostCSS Loader. See the documentation for more information.

webpack.config.js

    Encore .enablePostCssLoader();

05

#### Configure PostCSS Plugins

Create a `postcss.config.mjs` file in the root of your project and add the `@tailwindcss/postcss` plugin to your PostCSS configuration.

postcss.config.mjs

    export default { plugins: { "@tailwindcss/postcss": {}, },};

06

#### Import Tailwind CSS

Add an `@import` to `./assets/styles/app.css` that imports Tailwind CSS.

app.css

    @import "tailwindcss";

07

#### Start your build process

Run your build process with `npm run watch`.

Terminal

    npm run watch

08

#### Start using Tailwind in your project

Make sure your compiled CSS is included in the `<head>` then start using Tailwind’s utility classes to style your content.

base.html.twig

    <!doctype html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/meteor

Installation

## Install Tailwind CSS with Meteor

Setting up Tailwind CSS in a Meteor project.

01

#### Create your project

Start by creating a new Meteor project if you don't have one set up already. The most common approach is to use the Meteor CLI.

Terminal

    npx meteor create my-projectcd my-project

02

#### Install Tailwind CSS

Install `@tailwindcss/postcss` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/postcss postcss postcss-load-config

03

#### Configure PostCSS Plugins

Create a `postcss.config.mjs` file in the root of your project and add the `@tailwindcss/postcss` plugin to your PostCSS configuration.

postcss.config.mjs

    export default { plugins: { "@tailwindcss/postcss": {}, },};

04

#### Import Tailwind CSS

Add an `@import` for Tailwind CSS to your `./client/main.css` file.

main.css

    @import "tailwindcss";

05

#### Start your build process

Run your build process with `npm run start`.

Terminal

    npm run start

06

#### Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

App.jsx

    export const App = () => ( <h1 className="text-3xl font-bold underline"> Hello world! </h1>)

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/adonisjs

Installation

## Install Tailwind CSS with AdonisJS

Setting up Tailwind CSS in an AdonisJS project.

01

#### Create your project

Start by creating a new AdonisJS project if you don’t have one set up already. The most common approach is to use Create AdonisJS.

Terminal

    npm init adonisjs@latest my-project -- --kit=webcd my-project

02

#### Install Tailwind CSS

Install `@tailwindcss/vite` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/vite

03

#### Configure Vite Plugin

Add the `@tailwindcss/vite` plugin to your Vite configuration.

vite.config.ts

    import { defineConfig } from 'vite'import adonisjs from '@adonisjs/vite/client'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), adonisjs({ // … }), ],})

04

#### Import Tailwind CSS

Add an `@import` to `./resources/css/app.css` that imports Tailwind CSS's styles. Additionally, tell Tailwind CSS to scan your `resources/views` directory for utilities.

app.css

    @import "tailwindcss";@source "../views";

05

#### Start your build process

Run your build process with `npm run dev`.

Terminal

    npm run dev

06

#### Start using Tailwind in your project

Make sure your compiled CSS is included in the `<head>` then start using Tailwind’s utility classes to style your content.

home.edge

    <!doctype html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> @vite(['resources/css/app.css', 'resources/js/app.js']) </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/emberjs

    'use strict';const EmberApp = require('ember-cli/lib/broccoli/ember-app');module.exports = function (defaults) { const app = new EmberApp(defaults, { // Add options here }); const { Webpack } = require('@embroider/webpack'); return require('@embroider/compat').compatBuild(app, Webpack, { skipBabel: [ { package: 'qunit', }, ], packagerOptions: { webpackConfig: { module: { rules: [ { test: /\.css$/i, use: ['postcss-loader'], }, ], }, }, }, });};

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/astro

Installation

## Install Tailwind CSS with Astro

Setting up Tailwind CSS in an Astro project.

01

#### Create your project

Start by creating a new Astro project if you don't have one set up already. The most common approach is to use create astro.

Terminal

    npm create astro@latest my-projectcd my-project

02

#### Install Tailwind CSS

Install `@tailwindcss/vite` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/vite

03

#### Configure Vite Plugin

Add the `@tailwindcss/vite` plugin to your Vite plugins in your Astro config file.

astro.config.mjs

    // @ts-checkimport { defineConfig } from "astro/config";import tailwindcss from "@tailwindcss/vite";// https://astro.build/configexport default defineConfig({ vite: { plugins: [tailwindcss()], },});

04

#### Import Tailwind CSS

Create a `./src/styles/global.css` file and add an `@import` for Tailwind CSS.

global.css

    @import "tailwindcss";

05

#### Start your build process

Run your build process with `npm run dev`.

Terminal

    npm run dev

06

#### Start using Tailwind in your project

Start using Tailwind's utility classes to style your content while making sure to import the newly created CSS file.

index.astro

    ---import "../styles/global.css";---<h1 class="text-3xl font-bold underline"> Hello world!</h1>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/qwik

Setting up Tailwind CSS in an Qwik project.

01

#### Create your project

Start by creating a new Qwik project if you don't have one set up already. The most common approach is to use Create Qwik.

Terminal

    npm create qwik@latest empty my-projectcd my-project

02

#### Install Tailwind CSS

Install `@tailwindcss/vite` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/vite

03

#### Configure Vite Plugin

Add the `@tailwindcss/vite` plugin to your Vite configuration.

vite.config.ts

    import { defineConfig } from 'vite'import { qwikVite } from "@builder.io/qwik/optimizer";import { qwikCity } from "@builder.io/qwik-city/vite";// …import tailwindcss from '@tailwindcss/vite'export default defineConfig(({ command, mode }): UserConfig => { return { plugins: [ tailwindcss(), qwikCity(), qwikVite(), tsconfigPaths(), ], // … }})

04

#### Import Tailwind CSS

Add an `@import` to `./src/global.css` that imports Tailwind CSS.

app.css

    @import "tailwindcss";

05

#### Start your build process

Run your build process with `npm run dev`.

Terminal

    npm run dev

06

#### Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

index.tsx

    import { component$ } from '@builder.io/qwik'export default component$(() => { return ( <h1 class="text-3xl font-bold underline"> Hello World! </h1> )})

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/rspack/react

Installation

## Install Tailwind CSS with Rspack

Setting up Tailwind CSS in a Rspack project.

*   ## Using React
    
*   ## Using Vue
    

01

#### Create your project

Start by creating a new Rspack project if you don’t have one set up already. The most common approach is to use Rspack CLI.

Terminal

    npm create rspack@latest

02

#### Install Tailwind CSS

Install `@tailwindcss/postcss` and its peer dependencies.

Terminal

    npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

03

#### Enable PostCSS support

In your `rspack.config.js` file, enable the PostCSS loader. See the documentation for more information.

rspack.config.ts

    export default defineConfig({ // ... module: { rules: [ { test: /\.css$/, use: ["postcss-loader"], type: "css", }, // ... ], },}

04

#### Configure PostCSS Plugins

Create a `postcss.config.mjs` file in the root of your project and add the `@tailwindcss/postcss` plugin to your PostCSS configuration.

postcss.config.mjs

    export default { plugins: { "@tailwindcss/postcss": {}, },};

05

#### Import Tailwind CSS

Add an `@import` to `./src/index.css` that imports Tailwind CSS.

index.css

    @import "tailwindcss";

06

#### Start your build process

Run your build process with `npm run dev`.

Terminal

    npm run dev

07

#### Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

App.jsx

    export default function App() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> )}

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/laravel/mix

Installation

## Install Tailwind CSS with Laravel

Setting up Tailwind CSS in a Laravel project.

*   ## Using Vite
    
*   ## Using Laravel Mix
    

01

#### Install Tailwind CSS

Install `@tailwindcss/postcss` and its peer dependencies via npm.

Terminal

    npm install tailwindcss @tailwindcss/postcss postcss

02

#### Add Tailwind to your Laravel Mix configuration

In your `webpack.mix.js` file, add `tailwindcss` as a PostCSS plugin.

webpack.mix.js

    mix .js("resources/js/app.js", "public/js") .postCss("resources/css/app.css", "public/css", [ require("@tailwindcss/postcss"), ]);

03

#### Import Tailwind CSS

Add an `@import` to `./resources/css/app.css` that imports Tailwind CSS. Additionally, tell Tailwind CSS to scan your `resources/views` directory for utilities.

app.css

    @import "tailwindcss";@source "../views";

04

#### Start your build process

Run your build process with `npm run watch`.

Terminal

    npm run watch

05

#### Start using Tailwind in your project

Make sure your compiled CSS is included in the `<head>` then start using Tailwind’s utility classes to style your content.

app.blade.php

    <!doctype html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="{{ asset('css/app.css') }}" rel="stylesheet" /> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>

---

## Page: https://tailwindcss.com/docs/installation/framework-guides/rspack/vue

Installation

## Install Tailwind CSS with Rspack

Setting up Tailwind CSS in a Rspack project.

*   ## Using React
    
*   ## Using Vue
    

01

#### Create your project

Start by creating a new Rspack project if you don’t have one set up already. The most common approach is to use Rspack CLI.

Terminal

    npm create rspack@latest

02

#### Install Tailwind CSS

Install `@tailwindcss/postcss` and its peer dependencies.

Terminal

    npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

03

#### Enable PostCSS support

In your `rspack.config.js` file, enable the PostCSS loader. See the documentation for more information.

rspack.config.ts

    export default defineConfig({ // ... module: { rules: [ { test: /\.css$/, use: ["postcss-loader"], type: "css", }, // ... ], },}

04

#### Configure PostCSS Plugins

Create a `postcss.config.mjs` file in the root of your project and add the `@tailwindcss/postcss` plugin to your PostCSS configuration.

postcss.config.mjs

    export default { plugins: { "@tailwindcss/postcss": {}, },};

05

#### Import Tailwind CSS

Add an `@import` to `./src/style.css` that imports Tailwind CSS.

style.css

    @import "tailwindcss";

06

#### Start your build process

Run your build process with `npm run dev`.

Terminal

    npm run dev

07

#### Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

App.vue

    <template> <h1 class="text-3xl font-bold underline"> Hello world! </h1></template>