# Tailwindcss > import { ApiTable } from "@/components/api-table.tsx"; --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/accent-color.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates, UsingACustomValue, } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; export const title = "accent-color"; export const description = "Utilities for controlling the accented color of a form control."; [ `accent-${name}`, `accent-color: var(--color-${name}); /* ${value} */`, ]), ["accent-", "accent-color: var();"], ["accent-[]", "accent-color: ;"], ]} /> ## Examples ### Setting the accent color Use utilities like `accent-rose-500` and `accent-lime-600` to change the accent color of an element:
{
} ```html ```
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:
{
} ```html ```
Setting the accent color opacity has limited browser-support and only works in Firefox at this time. ### Using a custom value ### Applying on hover
{
} ```html ```
### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/adding-custom-styles.mdx import { CodeExampleStack } from "@/components/code-example"; export const title = "Adding custom styles"; export const description = "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 /* [!code filename: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](/docs/theme). ## 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
``` 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
``` This works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more: ```html
``` If you're referencing a CSS variable as an arbitrary value, you can use the custom property syntax: ```html
``` 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
``` This is _really_ like inline styles, but again with the benefit that you can use modifiers: ```html
``` This can be useful for things like CSS variables as well, especially when they need to change under different conditions: ```html
``` ### 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
    {#each items as item}
  • {item}
    • {/each}
``` Learn more in the [arbitrary variants](/docs/hover-focus-and-other-states#using-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
``` 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
``` 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
``` If you're using something like JSX where the backslash is stripped from the rendered HTML, use [String.raw()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw) so the backslash isn't treated as a JavaScript escape character: ```jsx
``` ### 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
...
...
``` Sometimes it really is ambiguous though, for example when using CSS variables: ```html
...
``` In these situations, you can "hint" the underlying type to Tailwind by adding a [CSS data type](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types) before the value: ```html
...
...
``` ## 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 /* [!code filename:CSS] */ @import "tailwindcss"; /* [!code highlight:4] */ .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 ``` 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 /* [!code filename:CSS] */ /* [!code highlight:2] */ @layer base { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } /* [!code highlight:2] */ } ``` ### 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 /* [!code filename:CSS] */ /* [!code highlight:2] */ @layer components { .card { background-color: var(--color-white); border-radius: var(--radius-lg); padding: --spacing(6); box-shadow: var(--shadow-xl); } /* [!code highlight:2] */ } ``` By defining component classes in the `components` layer, you can still use utility classes to override them when necessary: ```html
``` Using Tailwind you probably don't need these types of classes as often as you think. Read our guide on [managing duplication](/docs/styling-with-utility-classes#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 /* [!code filename:CSS] */ @layer components { .select2-dropdown { /* ... */ } } ``` ### Using variants Use the `@variant` directive to apply a Tailwind variant within custom CSS: ```css /* [!code filename:app.css] */ .my-element { background: white; /* [!code highlight:4] */ @variant dark { background: black; } } ``` ```css /* [!code filename:Compiled CSS] */ .my-element { background: white; /* [!code highlight:4] */ @media (prefers-color-scheme: dark) { background: black; } } ``` If you need to apply multiple variants at the same time, use nesting: ```css /* [!code filename:app.css] */ .my-element { background: white; /* [!code highlight:6] */ @variant dark { @variant hover { background: black; } } } ``` ```css /* [!code filename:Compiled CSS] */ .my-element { background: white; /* [!code highlight:7] */ @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 /* [!code filename:CSS] */ @utility content-auto { content-visibility: auto; } ``` You can now use this utility in your HTML: ```html
``` It will also work with variants like `hover`, `focus` and `lg`: ```html
``` 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 /* [!code filename: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 /* [!code filename:CSS] */ @utility tab-* { /* prettier-ignore */ 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 /* [!code filename:CSS] */ @theme { --tab-size-2: 2; --tab-size-4: 4; --tab-size-github: 8; } @utility tab-* { /* [!code highlight:2] */ /* prettier-ignore */ 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 /* [!code filename:CSS] */ @utility tab-* { tab-size: --value(integer); } ``` This will match utilities like `tab-1` and `tab-76`. Available bare value data types are: `number`, `integer`, `ratio`, and `percentage`. #### Literal values To support literal values, use the `--value('literal')` syntax (notice the quotes): ```css /* [!code filename: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 /* [!code filename:CSS] */ @utility tab-* { tab-size: --value([integer]); } ``` This will match utilities like `tab-[1]` and `tab-[76]`. Available arbitrary value data types are: `absolute-size`, `angle`, `bg-size`, `color`, `family-name`, `generic-name`, `image`, `integer`, `length`, `line-width`, `number`, `percentage`, `position`, `ratio`, `relative-size`, `url`, `vector`, and `*`. #### 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 /* [!code filename:CSS] */ @theme { --tab-size-github: 8; } @utility tab-* { tab-size: --value([integer]); tab-size: --value(integer); /* prettier-ignore */ 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 /* [!code filename:CSS] */ @utility opacity-* { opacity: --value([percentage]); /* [!code highlight:2] */ opacity: calc(--value(integer) * 1%); /* prettier-ignore */ 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 /* [!code filename:CSS] */ @theme { --tab-size-github: 8; } @utility tab-* { /* [!code highlight:2] */ /* prettier-ignore */ tab-size: --value(--tab-size-*, integer, [integer]); } @utility opacity-* { opacity: calc(--value(integer) * 1%); /* [!code highlight:2] */ /* prettier-ignore */ opacity: --value(--opacity-*, [percentage]); } ``` #### Negative values To support negative values, register separate positive and negative utilities into separate declarations: ```css /* [!code filename:CSS] */ @utility inset-* { inset: --spacing(--value(integer)); inset: --value([percentage], [length]); } /* [!code highlight:4] */ @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 /* [!code filename:CSS] */ @utility text-* { /* prettier-ignore */ font-size: --value(--text-*, [length]); /* [!code highlight:2] */ /* prettier-ignore */ 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 /* [!code filename:CSS] */ @utility aspect-* { /* [!code word:ratio, \[ratio\]] */ /* prettier-ignore */ 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: ```css @custom-variant theme-midnight { &:where([data-theme="midnight"] *) { @slot; } } ``` Now you can use the `theme-midnight:` variant in your HTML: ```html ``` You can create variants using the shorthand syntax when nesting isn't required: ```css @custom-variant theme-midnight (&:where([data-theme="midnight"] *)); ``` When a custom variant has multiple rules, they can be nested within each other: ```css @custom-variant any-hover { @media (any-hover: hover) { &:hover { @slot; } } } ``` --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/align-content.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "align-content"; export const description = "Utilities for controlling how rows are positioned in multi-row flex and grid containers."; ## Examples ### Start Use `content-start` to pack rows in a container against the start of the cross axis:
{
01
02
03
04
05
} ```html
01
02
03
04
05
```
### Center Use `content-center` to pack rows in a container in the center of the cross axis:
{
01
02
03
04
05
} ```html
01
02
03
04
05
```
### End Use `content-end` to pack rows in a container against the end of the cross axis:
{
01
02
03
04
05
} ```html
01
02
03
04
05
```
### 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
} ```html
01
02
03
04
05
```
### 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
} ```html
01
02
03
04
05
```
### 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
} ```html
01
02
03
04
05
```
### Stretch Use `content-stretch` to allow content items to fill the available space along the container’s cross axis:
{
01
02
03
04
05
} ```html
01
02
03
04
05
```
### 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
} ```html
01
02
03
04
05
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/align-items.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "align-items"; export const description = "Utilities for controlling how flex and grid items are positioned along a container's cross axis."; ## Examples ### Stretch Use the `items-stretch` utility to stretch items to fill the container's cross axis:
{
01
02
03
} ```html
01
02
03
```
### Start Use the `items-start` utility to align items to the start of the container's cross axis:
{
01
02
03
} ```html
01
02
03
```
### Center Use the `items-center` utility to align items along the center of the container's cross axis:
{
01
02
03
} ```html
01
02
03
```
### End Use the `items-end` utility to align items to the end of the container's cross axis:
{
01
02
03
} ```html
01
02
03
```
### 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
} ```html
01
02
03
```
### 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
Alex Reed

A multidisciplinary designer.

alex-reed.com
} ```html

Spencer Sharp

Working on the future of astronaut recruitment at Space Recruit.

spacerecruit.com

```
This is useful for ensuring that text items align with each other, even if they have different heights. ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/align-self.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "align-self"; export const description = "Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis."; ## 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
} ```html
01
02
03
```
### 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
} ```html
01
02
03
```
### 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
} ```html
01
02
03
```
### 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
} ```html
01
02
03
```
### 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
} ```html
01
02
03
```
### 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
} ```html
01
02
03
```
### 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
Alex Reed

A multidisciplinary designer.

alex-reed.com
} ```html

Spencer Sharp

Working on the future of astronaut recruitment at Space Recruit.

spacerecruit.com

```
This is useful for ensuring that text items align with each other, even if they have different heights. ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/animation.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import dedent from "dedent"; export const title = "animation"; export const description = "Utilities for animating elements with CSS animations."; )", "animation: var();"], ["animate-[]", "animation: ;"], ]} /> ## Examples ### Adding a spin animation Use the `animate-spin` utility to add a linear spin animation to elements like loading indicators:
{
} ```html ```
### 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:
{
} ```html ```
### Adding a pulse animation Use the `animate-pulse` utility to make an element gently fade in and out—useful for things like skeleton loaders:
{
} ```html
```
### Adding a bounce animation Use the `animate-bounce` utility to make an element bounce up and down—useful for things like "scroll down" indicators:
{
} ```html ```
### 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: ```html ``` ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/appearance.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "appearance"; export const description = "Utilities for suppressing native form control styling."; ## Examples ### Removing default appearance Use `appearance-none` to reset any browser specific styling on an element:
{
Default browser styles applied
Remove default browser styles
} ```html
```
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:
{
} ```html ```
This is useful for reverting to the standard browser controls in certain accessibility modes. ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/aspect-ratio.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { UsingACustomValue, ResponsiveDesign, CustomizingYourTheme } from "@/components/content.tsx"; export const title = "aspect-ratio"; export const description = "Utilities for controlling the aspect ratio of an element."; ", "aspect-ratio: ;"], ["aspect-square", "aspect-ratio: 1 / 1;"], ["aspect-video", "aspect-ratio: var(--aspect-video); /* 16 / 9 */"], ["aspect-auto", "aspect-ratio: auto;"], ["aspect-()", "aspect-ratio: var();"], ["aspect-[]", "aspect-ratio: ;"], ]} /> ## Examples ### Basic example Use aspect-<ratio> utilities like `aspect-3/2` to give an element a specific aspect ratio:
{ } ```html ```
### Using a video aspect ratio Use the `aspect-video` utility to give a video element a 16 / 9 aspect ratio:
{ } ```html ```
### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/backdrop-filter-blur.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "backdrop-filter: blur()"; export const description = "Utilities for applying backdrop blur filters to an element."; )", "backdrop-filter: blur(var());"], ["backdrop-blur-[]", "backdrop-filter: blur();"], ]} /> ## 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

} ```html
```
### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/backdrop-filter-brightness.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "backdrop-filter: brightness()"; export const description = "Utilities for applying backdrop brightness filters to an element."; ", "backdrop-filter: brightness(%);"], ["backdrop-brightness-()", "backdrop-filter: brightness(var());"], ["backdrop-brightness-[]", "backdrop-filter: brightness();"], ]} /> ## 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

} ```html
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/backdrop-filter-contrast.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "backdrop-filter: contrast()"; export const description = "Utilities for applying backdrop contrast filters to an element."; ", "backdrop-filter: contrast(%);"], ["backdrop-contrast-()", "backdrop-filter: contrast(var());"], ["backdrop-contrast-[]", "backdrop-filter: contrast();"], ]} /> ## 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

} ```html
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/backdrop-filter-grayscale.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "backdrop-filter: grayscale()"; export const description = "Utilities for applying backdrop grayscale filters to an element."; ", "backdrop-filter: grayscale(%);"], ["backdrop-grayscale-()", "backdrop-filter: grayscale(var());"], ["backdrop-grayscale-[]", "backdrop-filter: grayscale();"], ]} /> ## 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

} ```html
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/backdrop-filter-hue-rotate.mdx import { ApiTable } from "@/components/api-table"; import { Example } from "@/components/example"; import { Figure } from "@/components/figure"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content"; export const title = "backdrop-filter: hue-rotate()"; export const description = "Utilities for applying backdrop hue-rotate filters to an element."; ", "backdrop-filter: hue-rotate(deg);"], ["-backdrop-hue-rotate-", "backdrop-filter: hue-rotate(calc(deg * -1));"], ["backdrop-hue-rotate-()", "backdrop-filter: hue-rotate(var());"], ["backdrop-hue-rotate-[]", "backdrop-filter: hue-rotate();"], ]} /> ## 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

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

} ```html
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/backdrop-filter-invert.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "backdrop-filter: invert()"; export const description = "Utilities for applying backdrop invert filters to an element."; ", "backdrop-filter: invert(%);"], ["backdrop-invert-()", "backdrop-filter: invert(var())"], ["backdrop-invert-[]", "backdrop-filter: invert();"], ]} /> ## 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

} ```html
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/backdrop-filter-opacity.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "backdrop-filter: opacity()"; export const description = "Utilities for applying backdrop opacity filters to an element."; ", "backdrop-filter: opacity(%);"], ["backdrop-opacity-()", "backdrop-filter: opacity(var());"], ["backdrop-opacity-[]", "backdrop-filter: opacity();"], ]} /> ## 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

} ```html
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/backdrop-filter-saturate.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "backdrop-filter: saturate()"; export const description = "Utilities for applying backdrop saturation filters to an element."; ", "backdrop-filter: saturate(%);"], ["backdrop-saturate-()", "backdrop-filter: saturate(var());"], ["backdrop-saturate-[]", "backdrop-filter: saturate();"], ]} /> ## 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

} ```html
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/backdrop-filter-sepia.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "backdrop-filter: sepia()"; export const description = "Utilities for applying backdrop sepia filters to an element."; ", "backdrop-filter: sepia(%);"], ["backdrop-sepia-()", "backdrop-filter: sepia(var());"], ["backdrop-sepia-[]", "backdrop-filter: sepia();"], ]} /> ## 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

} ```html
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/backdrop-filter.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, TargetingSpecificStates, UsingACustomValue } from "@/components/content.tsx"; export const title = "backdrop-filter"; export const description = "Utilities for applying backdrop filters to an element."; )", "backdrop-filter: var();"], ["backdrop-filter-[]", "backdrop-filter: ;"], ]} /> ## 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

} ```html
```
You can combine the following backdrop filter utilities: [blur](/docs/backdrop-filter-blur), [brightness](/docs/backdrop-filter-brightness), [contrast](/docs/backdrop-filter-contrast), [grayscale](/docs/backdrop-filter-grayscale), [hue-rotate](/docs/backdrop-filter-hue-rotate), [invert](/docs/backdrop-filter-invert), [opacity](/docs/backdrop-filter-opacity), [saturate](/docs/backdrop-filter-saturate), and [sepia](/docs/backdrop-filter-sepia). ### Removing filters Use the `backdrop-filter-none` utility to remove all of the backdrop filters applied to an element: ```html
``` ### Using a custom value ### Applying on hover ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/backface-visibility.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "backface-visibility"; export const description = "Utilities for controlling if an element's backface is 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
} ```html
1
2
3
4
5
6
1
2
3
4
5
6
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/background-attachment.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "background-attachment"; export const description = "Utilities for controlling how a background image behaves when scrolling."; ## Examples ### Fixing the background image Use the `bg-fixed` utility to fix the background image relative to the viewport:
{
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.

} ```html
```
### Scrolling with the container Use the `bg-local` utility to scroll the background image with the container and the viewport:
{

Because the mail never stops. It just keeps coming and coming and coming, there's never a let-up. It's relentless. Every day it piles up more and more and more. And you gotta get it out but the more you get it out the more it keeps coming in. And then the barcode reader breaks and it's Publisher's Clearing House day.

— Newman
} ```html
```
### Scrolling with the viewport Use the `bg-scroll` utility to scroll the background image with the viewport, but not with the container:
{

Because the mail never stops. It just keeps coming and coming and coming, there's never a let-up. It's relentless. Every day it piles up more and more and more. And you gotta get it out but the more you get it out the more it keeps coming in. And then the barcode reader breaks and it's Publisher's Clearing House day.

— Newman
} ```html
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/background-blend-mode.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "background-blend-mode"; export const description = "Utilities for controlling how an element's background image should blend with its background color."; ## 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

} ```html
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/background-clip.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "background-clip"; export const description = "Utilities for controlling the bounding box of an element's background."; ## 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

} ```html
```
### Cropping to text Use the `bg-clip-text` utility to crop an element's background to match the shape of the text:
{

Hello world

} ```html

Hello world

```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/background-color.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates, UsingACustomValue, } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; export const title = "background-color"; export const description = "Utilities for controlling an element's background color."; [ `bg-${name}`, `background-color: var(--color-${name}); /* ${value} */`, ]), ["bg-()", "background-color: var();"], ["bg-[]", "background-color: ;"], ]} /> ## 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

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

} ```html ```
### Using a custom value ### Applying on hover
{ } ```html ```
### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/background-image.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "background-image"; export const description = "Utilities for controlling an element's background image."; ]", "background-image: ;"], ["bg-(image:)", "background-image: var();"], ["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));"], ["bg-linear-to-tl", "background-image: linear-gradient(to top left, var(--tw-gradient-stops));"], ["bg-linear-", "background-image: linear-gradient( in oklab, var(--tw-gradient-stops));"], ["-bg-linear-", "background-image: linear-gradient(- in oklab, var(--tw-gradient-stops));"], [ "bg-linear-()", "background-image: linear-gradient(var(--tw-gradient-stops, var()));", ], ["bg-linear-[]", "background-image: linear-gradient(var(--tw-gradient-stops, ));"], ["bg-radial", "background-image: radial-gradient(in oklab, var(--tw-gradient-stops));"], [ "bg-radial-()", "background-image: radial-gradient(var(--tw-gradient-stops, var()));", ], ["bg-radial-[]", "background-image: radial-gradient(var(--tw-gradient-stops, ));"], ["bg-conic-", "background-image: conic-gradient(from in oklab, var(--tw-gradient-stops));"], ["-bg-conic-", "background-image: conic-gradient(from - in oklab, var(--tw-gradient-stops));"], ["bg-conic-()", "background-image: var();"], ["bg-conic-[]", "background-image: ;"], ["from-", "--tw-gradient-from: ;"], ["from-", "--tw-gradient-from-position: ;"], ["from-()", "--tw-gradient-from: var();"], ["from-[]", "--tw-gradient-from: ;"], ["via-", "--tw-gradient-via: ;"], ["via-", "--tw-gradient-via-position: ;"], ["via-()", "--tw-gradient-via: var();"], ["via-[]", "--tw-gradient-via: ;"], ["to-", "--tw-gradient-to: ;"], ["to-", "--tw-gradient-to-position: ;"], ["to-()", "--tw-gradient-to: var();"], ["to-[]", "--tw-gradient-to: ;"], ]} /> ## Examples ### Basic example Use the `bg-[]` syntax to set the background image of an element:
{
} ```html
```
### Adding a linear gradient Use utilities like `bg-linear-to-r` and `bg-linear-` with the [color stop utilities](#setting-gradient-color-stops) to add a linear gradient to an element:
{
} ```html
```
### Adding a radial gradient Use the `bg-radial` and `bg-radial-[]` utilities with the [color stop utilities](#setting-gradient-color-stops) to add a radial gradient to an element:
{
} ```html
```
### Adding a conic gradient Use the `bg-conic` and `bg-conic-` utilities with the [color stop utilities](#setting-gradient-color-stops) to add a conic gradient to an element:
{
} ```html
```
### 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:
{
} ```html
```
### 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%
} ```html
```
### Changing interpolation mode Use the interpolation modifier to control the interpolation mode of a gradient:
{

srgb

hsl

oklab

oklch

longer

shorter

increasing

decreasing

} ```html
```
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: ```html
``` ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/background-origin.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "background-origin"; export const description = "Utilities for controlling how an element's background is positioned relative to borders, padding, and content."; ## 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

} ```html
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/background-position.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "background-position"; export const description = "Utilities for controlling the position of an element's background image."; )", "background-position: var();"], ["bg-position-[]", "background-position: ;"], ]} /> ## Examples ### Basic example Use utilities like `bg-center`, `bg-right`, and `bg-top-left` to control the position of an element's background image:
{

bg-top-left

bg-top

bg-top-right

bg-left

bg-center

bg-right

bg-bottom-left

bg-bottom

bg-bottom-right

} ```html
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/background-repeat.mdx import cloudsImg from "@/docs/img/clouds.svg"; import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "background-repeat"; export const description = "Utilities for controlling the repetition of an element's background image."; ## Examples ### Basic example Use the `bg-repeat` utility to repeat the background image both vertically and horizontally:
{
} ```html
```
### Repeating horizontally Use the `bg-repeat-x` utility to only repeat the background image horizontally:
{
} ```html
```
### Repeating vertically Use the `bg-repeat-y` utility to only repeat the background image vertically:
{
} ```html
```
### Preventing clipping Use the `bg-repeat-space` utility to repeat the background image without clipping:
{
} ```html
```
### Preventing clipping and gaps Use the `bg-repeat-round` utility to repeat the background image without clipping, stretching if needed to avoid gaps:
{
} ```html
```
### Disabling repeating Use the `bg-no-repeat` utility to prevent a background image from repeating:
{
} ```html
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/background-size.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "background-size"; export const description = "Utilities for controlling the background size of an element's background image."; )", "background-size: var();"], ["bg-size-[]", "background-size: ;"], ]} /> ## 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:
{
} ```html
```
### Filling without cropping Use the `bg-contain` utility to scale the background image to the outer edges without cropping or stretching:
{
} ```html
```
### Using the default size Use the `bg-auto` utility to display the background image at its default size:
{
} ```html
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/border-collapse.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "border-collapse"; export const description = "Utilities for controlling whether table borders should collapse or be separated."; ## 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
} ```html
State City
Indiana Indianapolis
Ohio Columbus
Michigan Detroit
```
Note that this includes collapsing borders on the top-level `` 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
} ```html
State City
Indiana Indianapolis
Ohio Columbus
Michigan Detroit
``` ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/border-color.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates, UsingACustomValue, } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; import dedent from "dedent"; export const title = "border-color"; export const description = "Utilities for controlling the color of an element's borders."; `border-color: ${value}`], ["border-x", (value) => `border-inline-color: ${value}`], ["border-y", (value) => `border-block-color: ${value}`], ["border-s", (value) => `border-inline-start-color: ${value}`], ["border-e", (value) => `border-inline-end-color: ${value}`], ["border-t", (value) => `border-top-color: ${value}`], ["border-r", (value) => `border-right-color: ${value}`], ["border-b", (value) => `border-bottom-color: ${value}`], ["border-l", (value) => `border-left-color: ${value}`], ["divide", (value) => `& > :not(:last-child) {\n border-color: ${value}\n}`], ].flatMap(([utility, css]) => [ [`${utility}-inherit`, css("inherit;")], [`${utility}-current`, css("currentColor;")], [`${utility}-transparent`, css("transparent;")], ...Object.entries(colors).map(([name, value]) => [ `${utility}-${name}`, css(`var(--color-${name}); /* ${value} */`), ]), [`${utility}-()`, css("var();")], [`${utility}-[]`, css(";")], ]), ]} /> ## 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

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

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

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

} ```html
```
### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right border based on the text direction:
{

Left-to-right

Right-to-left

} ```html
```
### Divider between children Use utilities like `divide-indigo-500` and `divide-lime-100` to control the border color between child elements:
{
01
02
03
} ```html
01
02
03
```
### Using a custom value ### Applying on focus
{ } ```html ```
### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/border-radius.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "border-radius"; export const description = "Utilities for controlling the border radius of an element."; [ [`${className}-xs`, properties.map((property) => `${property}: var(--radius-xs); /* 0.125rem (2px) */`).join("\n")], [`${className}-sm`, properties.map((property) => `${property}: var(--radius-sm); /* 0.25rem (4px) */`).join("\n")], [`${className}-md`, properties.map((property) => `${property}: var(--radius-md); /* 0.375rem (6px) */`).join("\n")], [`${className}-lg`, properties.map((property) => `${property}: var(--radius-lg); /* 0.5rem (8px) */`).join("\n")], [`${className}-xl`, properties.map((property) => `${property}: var(--radius-xl); /* 0.75rem (12px) */`).join("\n")], [`${className}-2xl`, properties.map((property) => `${property}: var(--radius-2xl); /* 1rem (16px) */`).join("\n")], [ `${className}-3xl`, properties.map((property) => `${property}: var(--radius-3xl); /* 1.5rem (24px) */`).join("\n"), ], [`${className}-4xl`, properties.map((property) => `${property}: var(--radius-4xl); /* 2rem (32px) */`).join("\n")], [`${className}-none`, properties.map((property) => `${property}: 0;`).join("\n")], [`${className}-full`, properties.map((property) => `${property}: calc(infinity * 1px);`).join("\n")], [ `${className}-()`, properties.map((property) => `${property}: var();`).join("\n"), ], [`${className}-[]`, properties.map((property) => `${property}: ;`).join("\n")], ])} /> ## 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

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

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

} ```html
```
### Using logical properties Use utilities like `rounded-s-md` and `rounded-se-xl` to set the border radius using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to the appropriate corners based on the text direction:
{

Left-to-right

Right-to-left

} ```html
```
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](/docs/hover-focus-and-other-states#rtl-support) 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

} ```html ```
### Removing the border radius Use the `rounded-none` utility to remove an existing border radius from an element:
{

rounded-none

} ```html ```
### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/border-spacing.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "border-spacing"; export const description = "Utilities for controlling the spacing between table borders."; ", "border-spacing: calc(var(--spacing) * );"], ["border-spacing-()", "border-spacing: var();"], ["border-spacing-[]", "border-spacing: ;"], ["border-spacing-x-", "border-spacing: calc(var(--spacing) * ) var(--tw-border-spacing-y);"], ["border-spacing-x-()", "border-spacing: var() var(--tw-border-spacing-y);"], ["border-spacing-x-[]", "border-spacing: var(--tw-border-spacing-y);"], ["border-spacing-y-", "border-spacing: var(--tw-border-spacing-x) calc(var(--spacing) * );"], ["border-spacing-y-()", "border-spacing: var(--tw-border-spacing-x) var();"], ["border-spacing-y-[]", "border-spacing: var(--tw-border-spacing-x) ;"], ]} /> ## Examples ### Basic example Use `border-spacing-` utilities like `border-spacing-2` and `border-spacing-x-3` to control the space between the borders of table cells with [separate borders](/docs/border-collapse#separating-table-borders):
{
State City
Indiana Indianapolis
Ohio Columbus
Michigan Detroit
} ```html
State City
Indiana Indianapolis
Ohio Columbus
Michigan Detroit
```
### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/border-style.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "border-style"; export const description = "Utilities for controlling the style of an element's borders."; :not(:last-child) {\n border-style: solid;\n}"], ["divide-dashed", "& > :not(:last-child) {\n border-style: dashed;\n}"], ["divide-dotted", "& > :not(:last-child) {\n border-style: dotted;\n}"], ["divide-double", "& > :not(:last-child) {\n border-style: double;\n}"], ["divide-hidden", "& > :not(:last-child) {\n border-style: hidden;\n}"], ["divide-none", "& > :not(:last-child) {\n border-style: none;\n}"], ]} /> ## 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

} ```html
```
### Removing a border Use the `border-none` utility to remove an existing border from an element:
{
} ```html ```
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
} ```html
01
02
03
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/border-width.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import dedent from "dedent"; export const title = "border-width"; export const description = "Utilities for controlling the width of an element's borders."; ", "border-width: px;"], ["border-(length:)", "border-width: var();"], ["border-[]", "border-width: ;"], ["border-x", "border-inline-width: 1px;"], ["border-x-", "border-inline-width: px;"], ["border-x-(length:)", "border-inline-width: var();"], ["border-x-[]", "border-inline-width: ;"], ["border-y", "border-block-width: 1px;"], ["border-y-", "border-block-width: px;"], ["border-y-(length:)", "border-block-width: var();"], ["border-y-[]", "border-block-width: ;"], ["border-s", "border-inline-start-width: 1px;"], ["border-s-", "border-inline-start-width: px;"], ["border-s-(length:)", "border-inline-start-width: var();"], ["border-s-[]", "border-inline-start-width: ;"], ["border-e", "border-inline-end-width: 1px;"], ["border-e-", "border-inline-end-width: px;"], ["border-e-(length:)", "border-inline-end-width: var();"], ["border-e-[]", "border-inline-end-width: ;"], ["border-t", "border-top-width: 1px;"], ["border-t-", "border-top-width: px;"], ["border-t-(length:)", "border-top-width: var();"], ["border-t-[]", "border-top-width: ;"], ["border-r", "border-right-width: 1px;"], ["border-r-", "border-right-width: px;"], ["border-r-(length:)", "border-right-width: var();"], ["border-r-[]", "border-right-width: ;"], ["border-b", "border-bottom-width: 1px;"], ["border-b-", "border-bottom-width: px;"], ["border-b-(length:)", "border-bottom-width: var();"], ["border-b-[]", "border-bottom-width: ;"], ["border-l", "border-left-width: 1px;"], ["border-l-", "border-left-width: px;"], ["border-l-(length:)", "border-left-width: var();"], ["border-l-[]", "border-left-width: ;"], [ "divide-x", dedent` & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: 1px; } `, ], [ "divide-x-", dedent` & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: px; } `, ], [ "divide-x-(length:)", dedent` & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: var(); } `, ], [ "divide-x-[]", dedent` & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: ; } `, ], [ "divide-y", dedent` & > :not(:last-child) { border-top-width: 0px; border-bottom-width: 1px; } `, ], [ "divide-y-", dedent` & > :not(:last-child) { border-top-width: 0px; border-bottom-width: px; } `, ], [ "divide-y-(length:)", dedent` & > :not(:last-child) { border-top-width: 0px; border-bottom-width: var(); } `, ], [ "divide-y-[]", dedent` & > :not(:last-child) { border-top-width: 0px; border-bottom-width: ; } `, ], ["divide-x-reverse", "--tw-divide-x-reverse: 1;"], ["divide-y-reverse", "--tw-divide-y-reverse: 1;"], ]} /> ## Examples ### Basic example Use `border` or `border-` 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

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

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

} ```html
```
### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right border based on the text direction:
{

Left-to-right

Right-to-left

} ```html
```
### Between children Use utilities like `divide-x` and `divide-y-4` to add borders between child elements:
{
01
02
03
} ```html
01
02
03
```
#### 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
} ```html
01
02
03
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/box-decoration-break.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "box-decoration-break"; export const description = "Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages."; ## 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
} {/* prettier-ignore */} ```html Hello
World Hello
World ```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/box-shadow.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue, } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; export const title = "box-shadow"; export const description = "Utilities for controlling the box shadow of an element."; )", "box-shadow: var();"], ["shadow-(color:)", "--tw-shadow-color: var();"], ["shadow-[]", "box-shadow: ;"], // Shadow colors ["shadow-inherit", "--tw-shadow-color: inherit;"], ["shadow-current", "--tw-shadow-color: currentColor;"], ["shadow-transparent", "--tw-shadow-color: transparent;"], ...Object.entries(colors).map(([name, value]) => [ `shadow-${name}`, `--tw-shadow-color: var(--color-${name}); /* ${value} */`, ]), // Inset shadows ["inset-shadow-2xs", "box-shadow: var(--inset-shadow-2xs); /* inset 0 1px rgb(0 0 0 / 0.05) */"], ["inset-shadow-xs", "box-shadow: var(--inset-shadow-xs); /* inset 0 1px 1px rgb(0 0 0 / 0.05) */"], ["inset-shadow-sm", "box-shadow: var(--inset-shadow-sm); /* inset 0 2px 4px rgb(0 0 0 / 0.05) */"], ["inset-shadow-none", "box-shadow: inset 0 0 #0000;"], ["inset-shadow-()", "box-shadow: var();"], ["inset-shadow-[]", "box-shadow: ;"], // Inset shadow colors ["inset-shadow-inherit", "--tw-inset-shadow-color: inherit;"], ["inset-shadow-current", "--tw-inset-shadow-color: currentColor;"], ["inset-shadow-transparent", "--tw-inset-shadow-color: transparent;"], ...Object.entries(colors).map(([name, value]) => [ `inset-shadow-${name}`, `--tw-inset-shadow-color: var(--color-${name}); /* ${value} */`, ]), // Rings ["ring", "--tw-ring-shadow: 0 0 0 1px;"], ["ring-", "--tw-ring-shadow: 0 0 0 px;"], ["ring-()", "--tw-ring-shadow: 0 0 0 var();"], ["ring-[]", "--tw-ring-shadow: 0 0 0 ;"], // Ring colors ["ring-inherit", "--tw-ring-color: inherit;"], ["ring-current", "--tw-ring-color: currentColor;"], ["ring-transparent", "--tw-ring-color: transparent;"], ...Object.entries(colors).map(([name, value]) => [ `ring-${name}`, `--tw-ring-color: var(--color-${name}); /* ${value} */`, ]), // Inset rings ["inset-ring", "--tw-inset-ring-shadow: inset 0 0 0 1px"], ["inset-ring-", "--tw-inset-ring-shadow: inset 0 0 0 px"], ["inset-ring-()", "--tw-inset-ring-shadow: inset 0 0 0 var();"], ["inset-ring-[]", "--tw-inset-ring-shadow: inset 0 0 0 ;"], // Inset ring colors ["inset-ring-inherit", "--tw-inset-ring-color: inherit;"], ["inset-ring-current", "--tw-inset-ring-color: currentColor;"], ["inset-ring-transparent", "--tw-inset-ring-color: transparent;"], ...Object.entries(colors).map(([name, value]) => [ `inset-ring-${name}`, `--tw-inset-ring-color: var(--color-${name}); /* ${value} */`, ]), ]} /> ## 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

} ```html
```
### Changing the opacity Use the opacity modifier to adjust the opacity of the box shadow:
{

shadow-xl

shadow-xl/20

shadow-xl/30

} ```html
```
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

} ```html ```
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

} ```html
```
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

} ```html
```
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-` utilities like `ring-2` and `ring-4` to apply a solid box-shadow to an element:
{

ring

ring-2

ring-4

} ```html ```
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

} ```html ```
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-` 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

} ```html ```
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

} ```html ```
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

} ```html
```
### Using a custom value ### Responsive design ## Customizing your theme ### Customizing shadows ### Customizing inset shadows ### Customizing shadow colors --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/box-sizing.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "box-sizing"; export const description = "Utilities for controlling how the browser should calculate an element's total size."; ## 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:
{
{/* w-measure indicator */}
{/* Horizontal line */}
{/* Left chip */}
{/* Badge */}
128px
{/* Right chip */}
{/* h-measure indicator */}
{/* Vertical line */}
{/* Top chip */}
{/* Badge */}
128px
{/* Bottom chip */}
} ```html
```
Tailwind makes this the default for all elements in our [preflight base styles](/docs/preflight). ### 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:
{
{/* w-measure indicator */}
{/* Horizontal line */}
{/* Left chip */}
{/* Badge */}
128px
{/* Right chip */}
{/* h-measure indicator */}
{/* Vertical line */}
{/* Top chip */}
{/* Badge */}
128px
{/* Bottom chip */}
} ```html
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/break-after.mdx import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "break-after"; export const description = "Utilities for controlling how a column or page should break after an element."; ## 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: ```html

Well, let me tell you something, ...

Sure, go ahead, laugh...

Maybe we can live without...

Look. If you think this is...

``` ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/break-before.mdx import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "break-before"; export const description = "Utilities for controlling how a column or page should break before an element."; ## 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: ```html

Well, let me tell you something, ...

Sure, go ahead, laugh...

Maybe we can live without...

Look. If you think this is...

``` ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/break-inside.mdx import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "break-inside"; export const description = "Utilities for controlling how a column or page should break within an element."; ## 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: ```html

Well, let me tell you something, ...

Sure, go ahead, laugh...

Maybe we can live without...

Look. If you think this is...

``` ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/caption-side.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "caption-side"; export const description = "Utilities for controlling the alignment of a caption element inside of a table."; ## 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
} ```html
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
```
### 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
} ```html
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
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/caret-color.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors } from "@/components/content.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { UsingACustomValue } from "@/components/content.tsx"; import colors from "./utils/colors"; export const title = "caret-color"; export const description = "Utilities for controlling the color of the text input cursor."; [ `caret-${name}`, `caret-color: var(--color-${name}); /* ${value} */`, ]), ["caret-", "caret-color: var();"], ["caret-[]", "caret-color: ;"], ]} /> ## Examples ### Basic example Use utilities like `caret-rose-500` and `caret-lime-600` to change the color of the text input cursor:
{
```
### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/clear.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "clear"; export const description = "Utilities for controlling the wrapping of content around an element."; ## 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.

} ```html

Maybe we can live without libraries...

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

} ```html

Maybe we can live without libraries...

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

} ```html

Maybe we can live without libraries...

```
### Using logical properties Use the `clear-start` and `clear-end` utilities, which use [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts) to map to either the left or right side based on the text direction:
{

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

} ```html

...ربما يمكننا العيش بدون مكتبات،

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

} ```html

Maybe we can live without libraries...

```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/color-scheme.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { TargetingSpecificStates } from "@/components/content.tsx"; export const title = "color-scheme"; export const description = "Utilities for controlling the color scheme of an element."; ## Examples ### Basic example Use utilities like `scheme-light` and `scheme-light-dark` to control how element should be rendered:
{

scheme-light

scheme-dark

scheme-light-dark

} ```html
```
### Applying in dark mode --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/color.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates, UsingACustomValue, } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; export const title = "color"; export const description = "Utilities for controlling the text color of an element."; [`text-${name}`, `color: var(--color-${name}); /* ${value} */`]), ["text-()", "color: var();"], ["text-[]", "color: ;"], ]} /> ## 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.

} ```html

The quick brown fox...

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

} ```html

The quick brown fox...

The quick brown fox...

The quick brown fox...

The quick brown fox...

```
### Using a custom value ### Applying on hover
{

Oh I gotta get on that{" "} internet , I'm late on everything!

} ```html

Oh I gotta get on that internet, I'm late on everything!

```
### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/colors.mdx import { Example } from "@/components/example"; import { Figure } from "@/components/figure"; import { ColorPalette } from "../components/color-palette.tsx"; import { Stripes } from "@/components/stripes.tsx"; import { TipGood, TipBad, TipCompat, TipInfo } from "@/components/tips"; export const title = "Colors"; export const description = "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.
{/* {<>Click to copy OKLCH, shift+click to copy nearest hex} */} {/*
*/} {/*
*/}
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

 ```html
```
The entire color palette is available across all color related utilities, including things like [background color](/docs/background-color), [border color](/docs/border-color), [fill](/docs/fill), [caret color](/docs/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

} ```html

Tom Watson mentioned you in Logo redesign

```
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%:
```html
```
This syntax also supports arbitrary values and the CSS variable shorthand: ```html
``` ### 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

Dark mode

Writes upside-down

} ```html

Writes upside-down

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

```
Learn more about styling for dark mode in the [dark mode documentation](/docs/dark-mode). ### 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 /* [!code filename:CSS] */ /* [!code word:var(--color-gray-950)] */ /* [!code word:var(--color-blue-500)] */ /* [!code word:var(--color-blue-800)] */ @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
``` To quickly adjust the opacity of a color when referencing it as a variable in CSS, Tailwind includes a special --alpha() function: ```css /* [!code filename:CSS] */ /* [!code word:--alpha(var(--color-gray-950) / 10%)] */ @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 /* [!code filename:CSS] */ @import "tailwindcss"; /* [!code highlight:6] */ @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](/docs/theme). ### Overriding default colors Override any of the default colors by defining new theme variables with the same name: ```css /* [!code filename:CSS] */ @import "tailwindcss"; /* [!code highlight:14] */ @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 /* [!code filename:CSS] */ @import "tailwindcss"; /* [!code highlight:5] */ @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 /* [!code filename:CSS] */ @import "tailwindcss"; @theme { /* [!code highlight:7] */ --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 /* [!code filename: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); } /* [!code highlight:4] */ @theme inline { --color-canvas: var(--acme-canvas-color); } ``` Learn more in the theme documentation on [referencing other variables](/docs/theme#referencing-other-variables). ## Default color palette reference Here's a complete list of the default colors and their values for reference: ```css /* [!code filename: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. --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/columns.mdx import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { CustomizingYourTheme } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx"; import { UsingACustomValue } from "@/components/content.tsx"; export const title = "columns"; export const description = "Utilities for controlling the number of columns within an element."; ", "columns: ;"], ["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) */"], ["columns-4xl", "columns: var(--container-4xl); /* 56rem (896px) */"], ["columns-5xl", "columns: var(--container-5xl); /* 64rem (1024px) */"], ["columns-6xl", "columns: var(--container-6xl); /* 72rem (1152px) */"], ["columns-7xl", "columns: var(--container-7xl); /* 80rem (1280px) */"], ["columns-auto", "columns: auto;"], ["columns-()", "columns: var();"], ["columns-[]", "columns: ;"], ]} /> ## Examples ### Setting by number Use `columns-` utilities like `columns-3` to set the number of columns that should be created for the content within an element:
{
} ```html
```
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:
{
} ```html
```
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-` utilities to specify the width between columns:
{
} ```html
```
Learn more about the gap utilities in the [gap documentation](/docs/gap). ### Using a custom value ### Responsive design
{
} ```html
```
## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/compatibility.mdx import { TipGood, TipBad, TipCompat, TipInfo } from "@/components/tips"; export const title = "Compatibility"; export const description = "Learn about browser support and compatibility with other tooling."; ## Browser support Tailwind CSS v4.0 is designed for and tested on modern browsers, and the core functionality of the framework specifically depends on these browser versions: - **Chrome 111** _(released March 2023)_ - **Safari 16.4** _(released March 2023)_ - **Firefox 128** _(released July 2024)_ Tailwind also includes support for many bleeding-edge platform features like `field-sizing: content`, `@starting-style`, and `text-wrap: balance` that have limited browser support. It's up to you if you want to use these modern features in your projects — if the browsers you're targeting don't support them, simply don't use those utilities and variants. If you're unsure about the support for a modern platform feature, the [Can I use](https://caniuse.com/mdn-css_at-rules_starting-style) database is a great resource. ## Sass, Less, and Stylus Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus. **Think of Tailwind CSS itself as your preprocessor** — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus. Since Tailwind is designed for modern browsers, you actually don't need a preprocessor for things like nesting or variables, and Tailwind itself will do things like bundle your imports and add vendor prefixes. ### Build-time imports Tailwind will automatically bundle other CSS files you include with `@import`, without the need for a separate preprocessing tool. ```css /* [!code filename:app.css] */ @import "tailwindcss"; @import "./typography.css"; ``` In this example, the `typography.css` file will be bundled into your compiled CSS for you by Tailwind, without any other tooling like Sass or `postcss-import`. ### Variables All modern browsers support [native CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) without the need for any sort of preprocessor: ```css /* [!code filename:typography.css] */ /* [!code word:var(--text-base)] */ .typography { font-size: var(--text-base); color: var(--color-gray-700); } ``` Tailwind relies on CSS variables heavily internally, so if you can use Tailwind in your project, you can use native CSS variables. ### Nesting Under the hood Tailwind uses [Lightning CSS](https://lightningcss.dev/) to process nested CSS like this: ```css /* [!code filename:typography.css] */ .typography { p { font-size: var(--text-base); } img { border-radius: var(--radius-lg); } } ``` Tailwind flattens that nested CSS for you so it can be understood by all modern browsers: ```css [!code filename:output.css] /* prettier-ignore */ .typography p { font-size: var(--text-base); } .typography img { border-radius: var(--radius-lg); } ``` Native CSS nesting support is also very good these days, so you don't really need a preprocessor for nesting even if you aren't using Tailwind. ### Loops In Tailwind, the sorts of classes you may have used loops for in the past (like `col-span-1`, `col-span-2`, etc.) are generated for you on-demand by Tailwind whenever you use them instead of having to be predefined. On top of that, when you're building things with Tailwind CSS, you do the vast majority of your styling in your HTML, not in CSS files. Since you're not writing tons of CSS in the first place, you just don't need features like loops that are designed for programmatically generating lots of custom CSS rules. ### Color and math functions When using preprocessors like Sass or Less, you may have used functions like `darken` or `lighten` to adjust colors. When using Tailwind, the recommended workflow is to use a predefined color palette that includes light and dark shades of each color, like the expertly designed [default color palette](/docs/colors) included with the framework. ```html ``` You can also use modern CSS features like [color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) to adjust colors at run-time directly in the browser. This even lets you adjust colors defined using CSS variables or the `currentcolor` keyword, which isn't possible with preprocessors. Similarly, browsers support math functions like `min()`, `max()`, and `round()` natively now, so there's no need to rely on a preprocessor for these features anymore either. ## CSS modules Tailwind is compatible with CSS modules and can co-exist with them if you are introducing Tailwind into a project that already uses them, but **we don't recommend using CSS modules and Tailwind together** if you can avoid it. ### Scoping concerns CSS modules are designed to solve scoping problems that just don't exist when composing utility classes in your HTML instead of writing custom CSS. Styles are naturally scoped with Tailwind because each utility class always does the same thing, no matter where it's used — there's no risk that adding a utility class to one part of your UI creates some unexpected side effect somewhere else. ### Performance When using CSS modules, build tools like Vite, Parcel, and Turbopack process each CSS module separately. That means if you have 50 CSS modules in a project, **Tailwind needs to run 50 separate times**, which leads to much slower build times and a worse developer experience. ### Explicit context sharing Since CSS modules are each processed separately, they have no `@theme` unless you import one. This means features like `@apply` won't work the way you expect unless you explicitly import your global styles as reference: {<>Import your global styles as reference to make sure your theme variables are defined} ```css /* [!code filename:Button.module.css] */ /* [!code highlight:2] */ @reference "../app.css"; button { @apply bg-blue-500; } ``` Alternatively, you can also just use CSS variables instead of `@apply` which has the added benefit of letting Tailwind skip processing those files and will improve your build performance: ```css /* [!code filename:Button.module.css] */ button { /* [!code highlight:2] */ background: var(--color-blue-500); } ``` ## Vue, Svelte, and Astro Vue, Svelte, and Astro support ` ``` Or just use your globally defined CSS variables instead of features like `@apply`, which don't require Tailwind to process your component CSS at all: ```html ``` --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/content.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "content"; export const description = "Utilities for controlling the content of the before and after pseudo-elements."; ]", "content: ;"], ["content-()", "content: var();"], ["content-none", "content: none;"], ]} /> ## Examples ### Basic example Use the `content-[]` 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.
} ```html

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.

```
### Referencing an attribute value Use the `content-[attr()]` syntax to reference a value stored in an attribute using the `attr()` CSS function:
{

} ```html

```
### Using spaces and underscores Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore:
{

} ```html

```
If you need to include an actual underscore, you can do this by escaping it with a backslash:
{

} ```html

```
### Using a CSS variable Use the content-{'()'} syntax to control the contents of the `::before` and `::after` pseudo-elements using a CSS variable: ```html

``` This is just a shorthand for content-{'[var()]'} that adds the `var()` function for you automatically. ### Responsive design ```html

``` --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/cursor.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "cursor"; export const description = "Utilities for controlling the cursor style when hovering over an element."; )", "cursor: var();"], ["cursor-[]", "cursor: ;"], ]} /> ## Examples ### Basic example Use utilities like `cursor-pointer` and `cursor-grab` to control which cursor is displayed when hovering over an element:
{
} ```html ```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/dark-mode.mdx import { TipGood, TipBad, TipInfo } from "@/components/tips"; import { Iframe } from "@/components/iframe"; import { Example } from "@/components/example"; import { Figure } from "@/components/figure"; export const title = "Dark mode"; export const description = "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

Dark mode

Writes upside-down

} ```html

Writes upside-down

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

```
By default this uses the `prefers-color-scheme` CSS media feature, but you can also build sites that support [toggling dark mode manually](#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: ```css /* [!code filename:app.css] */ @import "tailwindcss"; /* [!code highlight:2] */ @custom-variant dark (&:where(.dark, .dark *)); ``` Now instead of `dark:*` utilities being applied based on `prefers-color-scheme`, they will be applied whenever the `dark` class is present earlier in the HTML tree: ```html
``` How you add the `dark` class to the `html` element is up to you, but a common approach is to use a bit of JavaScript that updates the `class` attribute and syncs that preference to somewhere like `localStorage`. ### Using a data attribute To use a data attribute instead of a class to activate dark mode, just override the `dark` variant with an attribute selector instead: ```css /* [!code filename:app.css] */ @import "tailwindcss"; /* [!code highlight:2] */ @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); ``` Now dark mode utilities will be applied whenever the `data-theme` attribute is set to `dark` somewhere up the tree: ```html
``` ### With system theme support To build three-way theme toggles that support light mode, dark mode, and your system theme, use a custom dark mode selector and the [`window.matchMedia()` API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to detect the system theme and update the `html` element when needed. Here's a simple example of how you can support light mode, dark mode, as well as respecting the operating system preference: ```js // [!code filename:spaghetti.js] // On page load or when changing themes, best to add inline in `head` to avoid FOUC document.documentElement.classList.toggle( "dark", localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches), ); // Whenever the user explicitly chooses light mode localStorage.theme = "light"; // Whenever the user explicitly chooses dark mode localStorage.theme = "dark"; // Whenever the user explicitly chooses to respect the OS preference localStorage.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. --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/detecting-classes-in-source-files.mdx import { TipGood, TipBad, TipInfo } from "@/components/tips"; import { Iframe } from "@/components/iframe"; import { Example } from "@/components/example"; import { Figure } from "@/components/figure"; import { CodeExampleStack } from "@/components/code-example"; export const title = "Detecting classes in source files"; export const description = "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](/docs/adding-custom-styles#using-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 // [!code filename:JSX] // [!code word:bg-blue-500] // [!code word:rounded-full] // [!code word:text-white] // [!code word:text-black] // [!code word:font-medium] // [!code word:text-sm\/6] // [!code word:font-sans] // [!code word:bg-black] // [!code word:bg-white] // [!code word:className] // [!code word:function] // [!code word:children] // [!code word:button] // [!code word:shadow] // [!code word:export] // [!code word:colors] // [!code word:color] // [!code word:black] // [!code word:white] // [!code word:const] // [!code word:blue] // [!code word:return] // [!code word:py-1.5] // [!code word:px-2] export function Button({ color, children }) { const colors = { black: "bg-black text-white", blue: "bg-blue-500 text-white", white: "bg-white text-black", }; return ( ); } ``` 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
``` 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
``` 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 // [!code filename:JSX] function Button({ color, children }) { return ; } ``` Instead, map props to complete class names that are statically detectable at build-time: Always map props to static class names ```jsx // [!code filename:JSX] function Button({ color, children }) { const colorVariants = { blue: "bg-blue-600 hover:bg-blue-500", red: "bg-red-600 hover:bg-red-500", }; return ; } ``` This has the added benefit of letting you map different prop values to different color shades for example: ```jsx // [!code filename: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 ; } ``` 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 - Files in the `node_modules` directory - 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](#explicitly-registering-sources) those sources. ## Explicitly registering sources Use `@source` to explicitly register source paths relative to the stylesheet: ```css /* [!code filename:CSS] */ @import "tailwindcss"; /* [!code highlight:2] */ @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 /* [!code filename:CSS] */ /* [!code word:source("../src")] */ @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 /* [!code filename:CSS] */ @import "tailwindcss"; /* [!code highlight:2] */ @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 /* [!code filename:CSS] */ /* [!code word:source("../src")] */ @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 /* [!code filename:CSS] */ @import "tailwindcss"; /* [!code highlight:2] */ @source inline("underline"); ``` ```css /* [!code filename:Generated CSS] */ .underline { text-decoration-line: 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 /* [!code filename:CSS] */ @import "tailwindcss"; /* [!code highlight:2] */ @source inline("{hover:,focus:,}underline"); ``` ```css /* [!code filename:Generated CSS] */ .underline { text-decoration-line: underline; } @media (hover: hover) { .hover\:underline:hover { text-decoration-line: underline; } } @media (focus: focus) { .focus\:underline:focus { text-decoration-line: underline; } } ``` ### Safelisting with ranges The source input is [brace expanded](https://www.gnu.org/software/bash/manual/html_node/Brace-Expansion.html), so you can generate multiple classes at once. For example, to generate all the red background colors with hover variants, use a range: ```css /* [!code filename:CSS] */ @import "tailwindcss"; /* [!code highlight:2] */ @source inline("{hover:,}bg-red-{50,{100..900..100},950}"); ``` ```css /* [!code filename: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 /* [!code filename:CSS] */ @import "tailwindcss"; /* [!code highlight:2] */ @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. --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/display.mdx import dedent from "dedent"; import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "display"; export const description = "Utilities for controlling the display box type of an element."; ## 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.
} ```html

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.

```
### Flow Root Use the `flow-root` utility to create a block-level element with its own [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/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.
} ```html
Well, let me tell you something, ...
Sure, go ahead, laugh if you want...
```
### Flex Use the `flex` utility to create a block-level flex container:
{
Andrew Alfred Technical advisor
} ```html
Andrew Alfred Technical advisor
```
### 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.

} ```html

Today I spent most of the day researching ways to ... Kramer keeps telling me there is no way to make it work, that ...

```
### Grid Use the `grid` utility to create a grid container:
{
01
02
03
04
05
06
07
08
09
} ```html
```
### 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
} ```html 01 02 03 04 05 06 01 02 03 04 05 06 ```
### Contents Use the `contents` utility to create a "phantom" container whose children act like direct children of the parent:
{
01
02
03
04
} ```html
01
02
03
04
```
### 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
} ```html
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
```
### Hidden Use the `hidden` utility to remove an element from the document:
{
01
02
03
} ```html
02
03
```
To visually hide an element but keep it in the document, use the [visibility](/docs/visibility#making-elements-invisible) property instead. ### Screen-reader only Use `sr-only` to hide an element visually without hiding it from screen readers: ```html Settings ``` Use `not-sr-only` to undo `sr-only`, making an element visible to sighted users as well as screen readers: ```html Settings ``` This can be useful when you want to visually hide something on small screens but show it on larger screens for example. ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/editor-setup.mdx import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { CustomizingYourTheme } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { UsingACustomValue } from "@/components/content.tsx"; export const title = "Editor setup"; export const description = "Tooling to improve the developer experience when working with Tailwind CSS."; ## Syntax support Tailwind CSS uses custom CSS syntax like `@theme`, `@variant`, and `@source`, and in some editors this can trigger warnings or errors where these rules aren't recognized. If you're using VS Code, our official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) plugin includes a dedicated Tailwind CSS language mode that has support for all of the custom at-rules and functions Tailwind uses. In some cases, you may need to disable native CSS linting/validations if your editor is very strict about the syntax it expects in your CSS files. ## Zed [Zed](https://zed.dev/?utm_source=tailwind) is a fast, modern code editor, designed from the ground-up for cutting-edge development workflows, including agentic editing with AI. It has built-in support for Tailwind CSS autocompletions, linting, and hover previews, without the need to install and configure a separate extension. It also integrates tightly with Prettier, so our official [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) works seamlessly with Zed when installed. Built-in support for Tailwind CSS in Zed via Tailwind CSS IntelliSense Check out [Zed](https://zed.dev/?utm_source=tailwind) and learn more about [how it works with Tailwind CSS](https://zed.dev/docs/languages/tailwindcss?utm_source=tailwind). ## IntelliSense for VS Code The official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for Visual Studio Code enhances the Tailwind development experience by providing users with advanced features such as autocomplete, syntax highlighting, and linting. Tailwind CSS IntelliSense extension for Visual Studio Code - **Autocomplete** — providing intelligent suggestions for utility classes, as well as [CSS functions and directives](/docs/functions-and-directives). - **Linting** — highlighting errors and potential bugs in both your CSS and your markup. - **Hover previews** — revealing the complete CSS for utility classes when you hover over them. - **Syntax highlighting** — so that Tailwind features that use custom CSS syntax are highlighted correctly. Check out the project [on GitHub](https://github.com/tailwindcss/intellisense) to learn more, or [add it to Visual Studio Code](vscode:extension/bradlc.vscode-tailwindcss) to get started now. ## Class sorting with Prettier We maintain an official [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) for Tailwind CSS that automatically sorts your classes following our [recommended class order](/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted). It works seamlessly with custom Tailwind configurations, and because it’s just a Prettier plugin, it works anywhere Prettier works—including every popular editor and IDE, and of course on the command line. {/* prettier-ignore */} ```html ``` Check out the plugin [on GitHub](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) to learn more and get started. ## JetBrains IDEs JetBrains IDEs like WebStorm, PhpStorm, and others include support for intelligent Tailwind CSS completions in your HTML. [Learn more about Tailwind CSS support in JetBrains IDEs →](https://www.jetbrains.com/help/webstorm/tailwind-css.html) --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/field-sizing.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "field-sizing"; export const description = "Utilities for controlling the sizing of form controls."; ## 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:
{ ```
### Using a fixed size Use the `field-sizing-fixed` utility to make a form control use a fixed size:
{ ```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/fill.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; export const title = "fill"; export const description = "Utilities for styling the fill of SVG elements."; [`fill-${name}`, `fill: var(--color-${name}); /* ${value} */`]), ["fill-()", "fill: var();"], ["fill-[]", "fill: ;"], ]} /> ## Examples ### Basic example Use utilities like `fill-indigo-500` and `fill-lime-600` to change the fill color of an SVG:
{
} ```html ```
This can be useful for styling icon sets like [Heroicons](https://heroicons.com). ### Using the current color Use the `fill-current` utility to set the fill color to the current text color:
{
} ```html ```
### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-blur.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "filter: blur()"; export const description = "Utilities for applying blur filters to an element."; )", "filter: blur(var());"], ["blur-[]", "filter: blur();"], ]} /> ## Examples ### Basic example Use utilities like `blur-sm` and `blur-lg` to blur an element:
{

blur-none

blur-sm

blur-lg

blur-2xl

} ```html ```
### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-brightness.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "filter: brightness()"; export const description = "Utilities for applying brightness filters to an element."; ", "filter: brightness(%);"], ["brightness-()", "filter: brightness(var());"], ["brightness-[]", "filter: brightness();"], ]} /> ## 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

}
```html ``` ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-contrast.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { UsingACustomValue, ResponsiveDesign } from "@/components/content.tsx"; export const title = "filter: contrast()"; export const description = "Utilities for applying contrast filters to an element."; ", "filter: contrast(%);"], ["contrast-()", "filter: contrast(var());"], ["contrast-[]", "filter: contrast();"], ]} /> ## 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

} ```html ```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-drop-shadow.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue, CustomizingYourThemeColors, } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; export const title = "filter: drop-shadow()"; export const description = "Utilities for applying drop-shadow filters to an element."; )", "filter: drop-shadow(var());"], ["drop-shadow-(color:)", "--tw-drop-shadow-color: var();"], ["drop-shadow-[]", "filter: drop-shadow();"], ["drop-shadow-inherit", "--tw-drop-shadow-color: inherit;"], ["drop-shadow-current", "--tw-drop-shadow-color: currentColor;"], ["drop-shadow-transparent", "--tw-drop-shadow-color: transparent;"], ...Object.entries(colors).map(([name, value]) => [ `drop-shadow-${name}`, `--tw-drop-shadow-color: var(--color-${name}); /* ${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

} ```html ```
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](/docs/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

} ```html ... ... ... ```
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

} ```html ... ... ```
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:
```html ```
### Using a custom value ### Responsive design ## Customizing your theme ### Customizing drop shadows ### Customizing shadow colors --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-grayscale.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "filter: grayscale()"; export const description = "Utilities for applying grayscale filters to an element."; ", "filter: grayscale(%);"], ["grayscale-()", "filter: grayscale(var());"], ["grayscale-[]", "filter: grayscale();"], ]} /> ## 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

} ```html ```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-hue-rotate.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "filter: hue-rotate()"; export const description = "Utilities for applying hue-rotate filters to an element."; ", "filter: hue-rotate(deg);"], ["-hue-rotate-", "filter: hue-rotate(calc(deg * -1));"], ["hue-rotate-()", "filter: hue-rotate(var());"], ["hue-rotate-[]", "filter: hue-rotate();"], ]} /> ## 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

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

} ```html ```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-invert.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { UsingACustomValue, ResponsiveDesign } from "@/components/content.tsx"; export const title = "filter: invert()"; export const description = "Utilities for applying invert filters to an element."; ", "filter: invert(%);"], ["invert-()", "filter: invert(var());"], ["invert-[]", "filter: invert();"], ]} /> ## Examples ### Basic example Use utilities like `invert` and `invert-20` to control the color inversion of an element:
{

invert-0

invert-20

invert

} ```html ```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-saturate.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { UsingACustomValue, ResponsiveDesign } from "@/components/content.tsx"; export const title = "filter: saturate()"; export const description = "Utilities for applying saturation filters to an element."; ", "filter: saturate(%);"], ["saturate-()", "filter: saturate(var());"], ["saturate-[]", "filter: saturate();"], ]} /> ## 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

} ```html ```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter-sepia.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "filter: sepia()"; export const description = "Utilities for applying sepia filters to an element."; ", "filter: sepia(%);"], ["sepia-()", "filter: sepia(var());"], ["sepia-[]", "filter: sepia();"], ]} /> ## Examples ### Basic example Use utilities like `sepia` and `sepia-50` to control the sepia effect applied to an element:
{

sepia-0

sepia-50

sepia

} ```html ```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/filter.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, TargetingSpecificStates, UsingACustomValue } from "@/components/content.tsx"; export const title = "filter"; export const description = "Utilities for applying filters to an element."; )", "filter: var();"], ["filter-[]", "filter: ;"], ]} /> ## Examples ### Basic example Use utilities like `blur-xs` and `grayscale` to apply filters to an element:
{

blur-xs

grayscale

combined

} ```html ```
You can combine the following filter utilities: [blur](/docs/filter-blur), [brightness](/docs/filter-brightness), [contrast](/docs/filter-contrast), [drop-shadow](/docs/filter-drop-shadow), [grayscale](/docs/filter-grayscale), [hue-rotate](/docs/filter-hue-rotate), [invert](/docs/filter-invert), [saturate](/docs/filter-saturate), and [sepia](/docs/filter-sepia). ### Removing filters Use the `filter-none` utility to remove all of the filters applied to an element: ```html ``` ### Using a custom value ### Applying on hover ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/flex-basis.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "flex-basis"; export const description = "Utilities for controlling the initial size of flex items."; ", "flex-basis: calc(var(--spacing) * );"], ["basis-", "flex-basis: calc( * 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) */"], ["basis-xl", "flex-basis: var(--container-xl); /* 36rem (576px) */"], ["basis-2xl", "flex-basis: var(--container-2xl); /* 42rem (672px) */"], ["basis-3xl", "flex-basis: var(--container-3xl); /* 48rem (768px) */"], ["basis-4xl", "flex-basis: var(--container-4xl); /* 56rem (896px) */"], ["basis-5xl", "flex-basis: var(--container-5xl); /* 64rem (1024px) */"], ["basis-6xl", "flex-basis: var(--container-6xl); /* 72rem (1152px) */"], ["basis-7xl", "flex-basis: var(--container-7xl); /* 80rem (1280px) */"], ["basis-()", "flex-basis: var();"], ["basis-[]", "flex-basis: ;"], ]} /> ## Examples ### Using the spacing scale Use `basis-` utilities like `basis-64` and `basis-128` to set the initial size of flex items based on the spacing scale:
{
01
02
03
} ```html
01
02
03
```
### 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
} ```html
01
02
03
04
```
### Using percentages Use `basis-` utilities like `basis-1/2` and `basis-2/3` to set the initial size of flex items:
{
01
02
} ```html
01
02
```
### Using a custom value ### Responsive design ```html
01
02
03
``` ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/flex-direction.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "flex-direction"; export const description = "Utilities for controlling the direction of flex items."; ## Examples ### Row Use `flex-row` to position flex items horizontally in the same direction as text:
{
01
02
03
} ```html
01
02
03
```
### Row reversed Use `flex-row-reverse` to position flex items horizontally in the opposite direction:
{
01
02
03
} ```html
01
02
03
```
### Column Use `flex-col` to position flex items vertically:
{
01
02
03
} ```html
01
02
03
```
### Column reversed Use `flex-col-reverse` to position flex items vertically in the opposite direction:
{
01
02
03
} ```html
01
02
03
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/flex-grow.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "flex-grow"; export const description = "Utilities for controlling how flex items grow."; ", "flex-grow: ;"], ["grow-[]", "flex-grow: ;"], ["grow-()", "flex-grow: var();"], ]} /> ## Examples ### Allowing items to grow Use `grow` to allow a flex item to grow to fill any available space:
{
01
02
03
} ```html
01
02
03
```
### Growing items based on factor Use `grow-` 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
} ```html
01
02
03
```
### Preventing items from growing Use `grow-0` to prevent a flex item from growing:
{
01
02
03
} ```html
01
02
03
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/flex-shrink.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "flex-shrink"; export const description = "Utilities for controlling how flex items shrink."; ", "flex-shrink: ;"], ["shrink-[]", "flex-shrink: ;"], ["shrink-()", "flex-shrink: var();"], ]} /> ## Examples ### Allowing flex items to shrink Use `shrink` to allow a flex item to shrink if needed:
{
01
02
03
} ```html
01
02
03
```
### Preventing items from shrinking Use `shrink-0` to prevent a flex item from shrinking:
{
01
02
03
} ```html
01
02
03
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/flex-wrap.mdx import { Stripes } from "@/components/stripes.tsx"; import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "flex-wrap"; export const description = "Utilities for controlling how flex items wrap."; ## 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
} ```html
01
02
03
```
### Wrap normally Use `flex-wrap` to allow flex items to wrap:
{
01
02
03
} ```html
01
02
03
```
### Wrap reversed Use `flex-wrap-reverse` to wrap flex items in the reverse direction:
{
01
02
03
} ```html
01
02
03
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/flex.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "flex"; export const description = "Utilities for controlling how flex items both grow and shrink."; ", "flex: ;"], ["flex-", "flex: calc( * 100%);"], ["flex-auto", "flex: auto;"], ["flex-initial", "flex: 0 auto;"], ["flex-none", "flex: none;"], ["flex-()", "flex: var();"], ["flex-[]", "flex: ;"], ]} /> ## Examples ### Basic example Use `flex-` utilities like `flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size:
{
01
02
03
} ```html
01
02
03
```
### Initial Use `flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size:
{
01
02
03
} ```html
01
02
03
```
### Auto Use `flex-auto` to allow a flex item to grow and shrink, taking into account its initial size:
{
01
02
03
} ```html
01
02
03
```
### None Use `flex-none` to prevent a flex item from growing or shrinking:
{
01
02
03
} ```html
01
02
03
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/float.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "float"; export const description = "Utilities for controlling the wrapping of content around an element."; ## 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.

} ```html

Maybe we can live without libraries, people like you and me. ...

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

} ```html

Maybe we can live without libraries, people like you and me. ...

```
### Using logical properties Use the `float-start` and `float-end` utilities, which use [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts) 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

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

} ```html

Maybe we can live without libraries, people like you and me. ...

... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد

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

} ```html

Maybe we can live without libraries, people like you and me. ...

```
### Responsive design ```html ``` --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/font-family.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "font-family"; export const description = "Utilities for controlling the font family of an element."; )", "font-family: var();"], ["font-[]", "font-family: ;"], ]} /> ## Examples ### Basic example Use utilities like `font-sans` and `font-mono` to set the font family of an element:
{
font-sans

The quick brown fox jumps over the lazy dog.

font-serif

The quick brown fox jumps over the lazy dog.

font-mono

The quick brown fox jumps over the lazy dog.

} ```html

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

```
### Using a custom value ### Responsive design ## Customizing your theme You can also provide default `font-feature-settings` and `font-variation-settings` values for a font family: ```css @theme { --font-display: "Oswald", sans-serif; --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* [!code highlight] */ --font-display--font-variation-settings: "opsz" 32; /* [!code highlight] */ } ``` If needed, use the [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) at-rule to load custom fonts: ```css @font-face { font-family: Oswald; font-style: normal; font-weight: 200 700; font-display: swap; src: url("/fonts/Oswald.woff2") format("woff2"); } ``` If you're loading a font from a service like [Google Fonts](https://fonts.google.com/), make sure to put the `@import` at the very top of your CSS file: ```css @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); /* [!code highlight] */ @import "tailwindcss"; @theme { --font-roboto: "Roboto", sans-serif; /* [!code highlight] */ } ``` Browsers require that `@import` statements come before any other rules, so URL imports need to be above imports like `@import "tailwindcss"` which are inlined in the compiled CSS. --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/font-size.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "font-size"; export const description = "Utilities for controlling the font size of an element."; )", "font-size: var();"], ["text-[]", "font-size: ;"], ]} /> ## Examples ### Basic example Use utilities like `text-sm` and `text-lg` to set the font size of an element:
{
text-sm

The quick brown fox jumps over the lazy dog.

text-base

The quick brown fox jumps over the lazy dog.

text-lg

The quick brown fox jumps over the lazy dog.

text-xl

The quick brown fox jumps over the lazy dog.

text-2xl

The quick brown fox jumps over the lazy dog.

} ```html

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

```
### Setting the line-height Use utilities like `text-sm/6` and `text-lg/7` to set the font size and line-height of an element at the same time:
{
text-sm/6

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.

text-sm/7

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.

text-sm/8

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.

} ```html

So I started to walk into the water...

So I started to walk into the water...

So I started to walk into the water...

```
### Using a custom value ### Responsive design ## Customizing your theme You can also provide default `line-height`, `letter-spacing`, and `font-weight` values for a font size: ```css @theme { --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; /* [!code highlight] */ --text-tiny--letter-spacing: 0.125rem; /* [!code highlight] */ --text-tiny--font-weight: 500; /* [!code highlight] */ } ``` --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/font-smoothing.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "font-smoothing"; export const description = "Utilities for controlling the font smoothing of an element."; ## Examples ### Grayscale antialiasing Use the `antialiased` utility to render text using grayscale antialiasing:
{

The quick brown fox jumps over the lazy dog.

} ```html

The quick brown fox ...

```
### Subpixel antialiasing Use the `subpixel-antialiased` utility to render text using subpixel antialiasing:
{

The quick brown fox jumps over the lazy dog.

} ```html

The quick brown fox ...

```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/font-stretch.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "font-stretch"; export const description = "Utilities for selecting the width of a font face."; ", "font-stretch: ;"], ["font-stretch-()", "font-stretch: var();"], ["font-stretch-[]", "font-stretch: ;"], ]} /> ## Examples ### Basic example Use utilities like `font-stretch-condensed` and `font-stretch-expanded` to set the width of a font face:
{
font-stretch-extra-condensed

The quick brown fox jumps over the lazy dog.

font-stretch-condensed

The quick brown fox jumps over the lazy dog.

font-stretch-normal

The quick brown fox jumps over the lazy dog.

font-stretch-expanded

The quick brown fox jumps over the lazy dog.

font-stretch-extra-expanded

The quick brown fox jumps over the lazy dog.

} ```html

The quick brown fox...

The quick brown fox...

The quick brown fox...

The quick brown fox...

The quick brown fox...

```
This only applies to fonts that have multiple width variations available, otherwise the browser selects the closest match. ### Using percentages Use `font-stretch-` utilities like `font-stretch-50%` and `font-stretch-125%` to set the width of a font face using a percentage:
{
font-stretch-50%

The quick brown fox jumps over the lazy dog.

font-stretch-100%

The quick brown fox jumps over the lazy dog.

font-stretch-150%

The quick brown fox jumps over the lazy dog.

} ```html

The quick brown fox...

The quick brown fox...

The quick brown fox...

```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/font-style.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "font-style"; export const description = "Utilities for controlling the style of text."; ## Examples ### Italicizing text Use the `italic` utility to make text italic:
{

The quick brown fox jumps over the lazy dog.

} ```html

The quick brown fox ...

```
### Displaying text normally Use the `not-italic` utility to display text normally:
{

The quick brown fox jumps over the lazy dog.

} ```html

The quick brown fox ...

```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/font-variant-numeric.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "font-variant-numeric"; export const description = "Utilities for controlling the variant of numbers."; ## Examples ### Using ordinal glyphs Use the `ordinal` utility to enable special glyphs for the ordinal markers in fonts that support them:
{

1st

} ```html

1st

```
### Using slashed zeroes Use the `slashed-zero` utility to force a zero with a slash in fonts that support them:
{

0

} ```html

0

```
### Using lining figures Use the `lining-nums` utility to use numeric glyphs that are aligned by their baseline in fonts that support them:
{

1234567890

} ```html

1234567890

```
### Using oldstyle figures Use the `oldstyle-nums` utility to use numeric glyphs where some numbers have descenders in fonts that support them:
{

1234567890

} ```html

1234567890

```
### Using proportional figures Use the `proportional-nums` utility to use numeric glyphs that have proportional widths in fonts that support them:
{

12121

90909

} ```html

12121

90909

```
### Using tabular figures Use the `tabular-nums` utility to use numeric glyphs that have uniform/tabular widths in fonts that support them:
{

12121

90909

} ```html

12121

90909

```
### Using diagonal fractions Use the `diagonal-fractions` utility to replace numbers separated by a slash with common diagonal fractions in fonts that support them:
{

1/2 3/4 5/6

} ```html

1/2 3/4 5/6

```
### Using stacked fractions Use the `stacked-fractions` utility to replace numbers separated by a slash with common stacked fractions in fonts that support them:
{

1/2 3/4 5/6

} ```html

1/2 3/4 5/6

```
### Stacking multiple utilities The `font-variant-numeric` utilities are composable so you can enable multiple variants by combining them:
{
Subtotal
$100.00
Tax
$14.50
Total
$114.50
} ```html
Subtotal
$100.00
Tax
$14.50
Total
$114.50
```
### Resetting numeric font variants Use the `normal-nums` property to reset numeric font variants: ```html

``` ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/font-weight.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { CodeExample } from "@/components/code-example.tsx"; export const title = "font-weight"; export const description = "Utilities for controlling the font weight of an element."; )", "font-weight: var();"], ["font-[]", "font-weight: ;"], ]} /> ## Examples ### Basic example Use utilities like `font-thin` and `font-bold` to set the font weight of an element:
{
font-light

The quick brown fox jumps over the lazy dog.

font-normal

The quick brown fox jumps over the lazy dog.

font-medium

The quick brown fox jumps over the lazy dog.

font-semibold

The quick brown fox jumps over the lazy dog.

font-bold

The quick brown fox jumps over the lazy dog.

} ```html

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

```
### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/forced-color-adjust.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import Image from "next/image"; import tshirtImage from "./img/t-shirt.jpg"; export const title = "forced-color-adjust"; export const description = "Utilities for opting in and out of forced colors."; ## 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.
{
Two each of gray, white, and black shirts laying flat.

Basic Tee

$35

Choose a color
} ```html

Basic Tee

$35

Choose a color
```
You can also use the [forced colors variant](/docs/hover-focus-and-other-states#forced-colors) 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: ```html
Choose a color:
``` This can be useful if you want to undo the `forced-color-adjust-none` utility, for example on a larger screen size. ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/functions-and-directives.mdx import { CodeExampleStack } from "@/components/code-example"; export const title = "Functions and directives"; export const description = "A reference for the custom functions and directives Tailwind exposes to your CSS."; ## Directives Directives are custom Tailwind-specific [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) 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 /* [!code filename:CSS] */ @import "tailwindcss"; ```

@theme

Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints: ```css /* [!code filename: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](/docs/theme).

@source

Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection: ```css /* [!code filename:CSS] */ @source "../node_modules/@my-company/ui-lib"; ``` Learn more about automatic content detection in the [detecting classes in source files documentation](/docs/detecting-classes-in-source-files).

@utility

Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`: ```css /* [!code filename:CSS] */ @utility tab-4 { tab-size: 4; } ``` Learn more about registering custom utilities in the [adding custom utilities documentation](/docs/adding-custom-styles#adding-custom-utilities).

@variant

Use the `@variant` directive to apply a Tailwind variant to styles in your CSS: ```css /* [!code filename:CSS] */ .my-element { background: white; /* [!code highlight:4] */ @variant dark { background: black; } } ``` Learn more using variants in the [using variants documentation](/docs/adding-custom-styles#using-variants).

@custom-variant

Use the `@custom-variant` directive to add a custom variant in your project: ```css /* [!code filename: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](/docs/adding-custom-styles#adding-custom-variants).

@apply

Use the `@apply` directive to inline any existing utility classes into your own custom CSS: ```css /* [!code filename:CSS] */ .select2-dropdown { /* [!code highlight:2] */ @apply rounded-b-lg shadow-md; } .select2-search { /* [!code highlight:2] */ @apply rounded border border-gray-300; } .select2-results__group { /* [!code highlight:2] */ @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 ` ``` If you’re just using the default theme with no customizations (e.g. by using things like `@theme`, `@custom-variant`, `@plugin`, etc…), you can import `tailwindcss` directly: ```html ``` ### Subpath Imports When using the CLI, Vite, or PostCSS the directives `@import`, `@reference`, `@plugin`, and `@config` all support [subpath imports](https://nodejs.org/api/packages.html#subpath-imports) which work similarly to bundler and TypeScript path aliases: ```json // [!code filename:package.json] { // ... "imports": { /* [!code highlight:2] */ "#app.css": "./src/css/app.css" } } ``` ```html ``` ## 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: ```css /* [!code filename:Input CSS] */ .my-element { /* [!code highlight:2] */ color: --alpha(var(--color-lime-300) / 50%); } ``` ```css /* [!code filename: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: ```css /* [!code filename:Input CSS] */ .my-element { /* [!code highlight:2] */ margin: --spacing(4); } ``` ```css /* [!code filename:Compiled CSS] */ .my-element { margin: calc(var(--spacing) * 4); } ``` This can also be useful in arbitrary values, especially in combination with `calc()`: ```html
``` ## Compatibility The following directives and functions exist solely for compatibility with Tailwind CSS v3.x. The `@config` and `@plugin` directives may be used in conjunction with `@theme`, `@utility`, and other CSS-driven features. This can be used to incrementally move over your theme, custom configuration, utilities, variants, and presets to CSS. Things defined in CSS will be merged where possible and otherwise take precedence over those defined in configs, presets, and plugins.

@config

Use the `@config` directive to load a legacy JavaScript-based configuration file: ```css /* [!code filename:CSS] */ @config "../../tailwind.config.js"; ``` The `corePlugins`, `safelist`, and `separator` options from the JavaScript-based config are not supported in v4.0. To safelist utilities in v4 use [`@source inline()`](/docs/detecting-classes-in-source-files#safelisting-specific-utilities).

@plugin

Use the `@plugin` directive to load a legacy JavaScript-based plugin: ```css /* [!code filename: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 /* [!code filename:CSS] */ .my-element { /* [!code highlight:2] */ margin: theme(spacing.12); } ``` This function is deprecated, and we recommend [using CSS theme variables](/docs/theme#using-your-theme-variables) instead. --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/gap.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "gap"; export const description = "Utilities for controlling gutters between grid and flexbox items."; ", "gap: calc(var(--spacing) * );"], ["gap-()", "gap: var();"], ["gap-[]", "gap: ;"], ["gap-x-", "column-gap: calc(var(--spacing) * );"], ["gap-x-()", "column-gap: var();"], ["gap-x-[]", "column-gap: ;"], ["gap-y-", "row-gap: calc(var(--spacing) * );"], ["gap-y-()", "row-gap: var();"], ["gap-y-[]", "row-gap: ;"], ]} /> ## Examples ### Basic example Use `gap-` 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
} ```html
01
02
03
04
```
### Changing row and column gaps independently Use `gap-x-` or `gap-y-` utilities like `gap-x-8` and `gap-y-4` to change the gap between columns and rows independently:
{
01
02
03
04
05
06
} ```html
01
02
03
04
05
06
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/grid-auto-columns.mdx import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "grid-auto-columns"; export const description = "Utilities for controlling the size of implicitly-created grid columns."; )", "grid-auto-columns: var();"], ["auto-cols-[]", "grid-auto-columns: ;"], ]} /> ## Examples ### Basic example Use utilities like `auto-cols-min` and `auto-cols-max` to control the size of implicitly-created grid columns: ```html
01
02
03
``` ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/grid-auto-flow.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "grid-auto-flow"; export const description = "Utilities for controlling how elements in a grid are auto-placed."; ## 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
} ```html
01
02
03
04
05
```
### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/grid-auto-rows.mdx import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "grid-auto-rows"; export const description = "Utilities for controlling the size of implicitly-created grid rows."; )", "grid-auto-rows: var();"], ["auto-rows-[]", "grid-auto-rows: ;"], ]} /> ## Examples ### Basic example Use utilities like `auto-rows-min` and `auto-rows-max` to control the size of implicitly-created grid rows: ```html
01
02
03
``` ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/grid-column.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "grid-column"; export const description = "Utilities for controlling how elements are sized and placed across grid columns."; ", "grid-column: span / span ;"], ["col-span-full", "grid-column: 1 / -1;"], ["col-span-()", "grid-column: span var() / span var();"], ["col-span-[]", "grid-column: span / span ;"], ["col-start-", "grid-column-start: ;"], ["-col-start-", "grid-column-start: calc( * -1);"], ["col-start-auto", "grid-column-start: auto;"], ["col-start-()", "grid-column-start: var();"], ["col-start-[]", "grid-column-start: ;"], ["col-end-", "grid-column-end: ;"], ["-col-end-", "grid-column-end: calc( * -1);"], ["col-end-auto", "grid-column-end: auto;"], ["col-end-()", "grid-column-end: var();"], ["col-end-[]", "grid-column-end: ;"], ["col-auto", "grid-column: auto;"], ["col-", "grid-column: ;"], ["-col-", "grid-column: calc( * -1);"], ["col-()", "grid-column: var();"], ["col-[]", "grid-column: ;"], ]} /> ## Examples ### Spanning columns Use `col-span-` utilities like `col-span-2` and `col-span-4` to make an element span _n_ columns:
{
01
02
03
04
05
06
07
} ```html
01
02
03
04
05
06
07
```
### Starting and ending lines Use `col-start-` or `col-end-` 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
} ```html
01
02
03
04
```
These can also be combined with the `col-span-` utilities to span a specific number of columns. ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/grid-row.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "grid-row"; export const description = "Utilities for controlling how elements are sized and placed across grid rows."; ", "grid-row: span / span ;"], ["row-span-full", "grid-row: 1 / -1;"], ["row-span-()", "grid-row: span var() / span var();"], ["row-span-[]", "grid-row: span / span ;"], ["row-start-", "grid-row-start: ;"], ["-row-start-", "grid-row-start: calc( * -1);"], ["row-start-auto", "grid-row-start: auto;"], ["row-start-()", "grid-row-start: var();"], ["row-start-[]", "grid-row-start: ;"], ["row-end-", "grid-row-end: ;"], ["-row-end-", "grid-row-end: calc( * -1);"], ["row-end-auto", "grid-row-end: auto;"], ["row-end-()", "grid-row-end: var();"], ["row-end-[]", "grid-row-end: ;"], ["row-auto", "grid-row: auto;"], ["row-", "grid-row: ;"], ["-row-", "grid-row: calc( * -1);"], ["row-()", "grid-row: var();"], ["row-[]", "grid-row: ;"], ]} /> ## Examples ### Spanning rows Use `row-span-` utilities like `row-span-2` and `row-span-4` to make an element span _n_ rows:
{
01
02
03
} ```html
01
02
03
```
### Starting and ending lines Use `row-start-` or `row-end-` utilities like `row-start-2` and `row-end-3` to make an element start or end at the _nth_ grid line:
{
01
02
03
} ```html
01
02
03
```
These can also be combined with the `row-span-` utilities to span a specific number of rows. ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/grid-template-columns.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "grid-template-columns"; export const description = "Utilities for specifying the columns in a grid layout."; ", "grid-template-columns: repeat(, minmax(0, 1fr));"], ["grid-cols-none", "grid-template-columns: none;"], ["grid-cols-subgrid", "grid-template-columns: subgrid;"], ["grid-cols-[]", "grid-template-columns: ;"], ["grid-cols-()", "grid-template-columns: var();"], ]} /> ## Examples ### Specifying the grid columns Use `grid-cols-` 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
} ```html
01
09
```
### 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
} ```html
01
05
06
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/grid-template-rows.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "grid-template-rows"; export const description = "Utilities for specifying the rows in a grid layout."; ", "grid-template-rows: repeat(, minmax(0, 1fr));"], ["grid-rows-none", "grid-template-rows: none;"], ["grid-rows-subgrid", "grid-template-rows: subgrid;"], ["grid-rows-[]", "grid-template-rows: ;"], ["grid-rows-()", "grid-template-rows: var();"], ]} /> ## Examples ### Specifying the grid rows Use `grid-rows-` 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
} ```html
01
09
```
### 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
} ```html
01
05
06
07
10
```
### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/height.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { DynamicViewportExample } from "@/components/dynamic-viewport-example.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "height"; export const description = "Utilities for setting the height of an element."; ", "height: calc(var(--spacing) * );"], ["h-", "height: calc( * 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;"], ["h-svh", "height: 100svh;"], ["h-svw", "height: 100svw;"], ["h-min", "height: min-content;"], ["h-max", "height: max-content;"], ["h-fit", "height: fit-content;"], ["h-lh", "height: 1lh;"], ["h-()", "height: var();"], ["h-[]", "height: ;"], ["size-", "width: calc(var(--spacing) * );\nheight: calc(var(--spacing) * );"], ["size-", "width: calc( * 100%);\nheight: calc( * 100%);"], ["size-auto", "width: auto;\nheight: auto;"], ["size-px", "width: 1px;\nheight: 1px;"], ["size-full", "width: 100%;\nheight: 100%;"], ["size-dvw", "width: 100dvw;\nheight: 100dvw;"], ["size-dvh", "width: 100dvh;\nheight: 100dvh;"], ["size-lvw", "width: 100lvw;\nheight: 100lvw;"], ["size-lvh", "width: 100lvh;\nheight: 100lvh;"], ["size-svw", "width: 100svw;\nheight: 100svw;"], ["size-svh", "width: 100svh;\nheight: 100svh;"], ["size-min", "width: min-content;\nheight: min-content;"], ["size-max", "width: max-content;\nheight: max-content;"], ["size-fit", "width: fit-content;\nheight: fit-content;"], ["size-()", "width: var();\nheight: var();"], ["size-[]", "width: ;\nheight: ;"], ]} /> ## Examples ### Basic example Use `h-` 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
} ```html
h-96
h-80
h-64
h-48
h-40
h-32
h-24
```
### Using a percentage Use `h-full` or `h-` 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
} ```html
h-full
h-9/10
h-3/4
h-1/2
h-1/3
```
### Matching viewport Use the `h-screen` utility to make an element span the entire height of the viewport: ```html
``` ### 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:
{} ```html
```
### Matching large viewport Use the `h-lvh` utility to set an element's height to the largest possible height of the viewport:
{} ```html
```
### Matching small viewport Use the `h-svh` utility to set an element's height to the smallest possible height of the viewport:
{} ```html
```
### 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
} ```html
size-16
size-20
size-24
size-32
size-40
```
### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/hover-focus-and-other-states.mdx import dedent from "dedent"; import { CodeExample, CodeExampleGroup, CodeBlock, svelte, html, css } from "@/components/code-example.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Iframe } from "@/components/iframe.tsx"; import { TipGood, TipBad, TipInfo } from "@/components/tips"; export const title = "Hover, focus, and other states"; export const description = "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:
{
} ```html ```
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} ```css .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} ```css .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](#pseudo-classes), like `:hover`, `:focus`, `:first-child`, and `:required` - [Pseudo-elements](#pseudo-elements), like `::before`, `::after`, `::placeholder`, and `::selection` - [Media and feature queries](#media-and-feature-queries), like responsive breakpoints, dark mode, and `prefers-reduced-motion` - [Attribute selectors](#attribute-selectors), like `[dir="rtl"]` and `[open]` - [Child selectors](#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: ```html ``` 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:
{
} ```html ```
Tailwind also includes variants for other interactive states like `:visited`, `:focus-within`, `:focus-visible`, and more. See the [pseudo-class reference](#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

} ```svelte
    {#each people as person}

  • {person.name}

    {person.email}

    • {/each}
```
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
} ```svelte {#each people as person} {/each}
{person.name} {person.title} {person.email}
```
Use the `nth-*` and `nth-last-*` variants to style children based on their position in the list: ```html
``` 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](#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`:
{
} ```html ```
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](#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:
{
Payment method
} ```html ```
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:
{
{/* This is not an h4 because we're converting h4's to links in MDX files */}
Spencer Sharp

Product Designer at{" "} planeteria.tech

{/* This is not an h4 because we're converting h4's to links in MDX files */}
Casey Jordan

Just happy to be here.

{/* This is not an h4 because we're converting h4's to links in MDX files */}
Alex Reed

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

alex-reed.com

{/* This is not an h4 because we're converting h4's to links in MDX files */}
Taylor Bailey

Pushing pixels. Slinging divs.

} ```html

Spencer Sharp

Product Designer at planeteria.tech

```
#### Styling based on the descendants of a peer If you need to style an element based on the descendants of a sibling element, you can mark the sibling with the `peer` class and use the `peer-has-*` variant to style the target element:
{
Today
} ```html
```
### :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:
{
} ```html ```
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: ```html
``` ### 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:
{
{/* This is not an h3 because we're converting h3's to links in MDX files */}
New project

Create a new project from a variety of starting templates.

} ```html

New project

Create a new project from a variety of starting templates.

 ```
This pattern works with every pseudo-class variant, for example `group-focus`, `group-active`, or even `group-odd`. #### Differentiating nested groups 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}`:
{
} ```svelte
    {#each people as person}
    • {/each}
```
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](/docs/adding-custom-styles#using-arbitrary-values) between square brackets:
`} /> 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:
`} /> #### Implicit groups The `in-*` variant works similarly to `group` except you don't need to add `group` to the parent element: {/* prettier-ignore */} ```html
``` 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:
{

Please provide a valid email address.

} ```html
```
This makes it possible to do all sorts of neat tricks, like [floating labels](https://www.youtube.com/watch?v=nJzKi6oIvBA) for example without any JS. This pattern works with every pseudo-class variant, for example `peer-focus`, `peer-required`, and `peer-disabled`. It's important to note that the `peer` marker can only be used on _previous_ siblings because of how the [subsequent-sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator) works in CSS: {<>Won't work, only previous siblings can be marked as peers} ```html ``` #### Differentiating peers When using multiple peers, you can style something on the state of a _specific_ peer by giving that peer a unique name using a `peer/{name}` class, and including that name in variants using classes like `peer-checked/{name}`:
{
Published status
Drafts are only visible to administrators.
Your post will be publicly visible on your site.
} ```html
Published status
```
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](/docs/adding-custom-styles#using-arbitrary-values) between square brackets:
`} /> 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:
`} /> ## Pseudo-elements ### ::before and ::after Style the `::before` and `::after` pseudo-elements using the `before` and `after` variants:
{
} ```html ```
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.
} ```html
When you look annoyed all the time, people think that you're busy.
```
It's worth noting that you don't really need `::before` and `::after` pseudo-elements for most things in Tailwind projects — it's usually simpler to just use a real HTML element. For example, here's the same design from above but using a `` instead of the `::before` pseudo-element, which is a little easier to read and is actually less code: ```html
When you look annoyed all the time, people think that you're busy.
``` Save `before` and `after` for situations where it's important that the content of the pseudo-element is not actually in the DOM and can't be selected by the user. ### ::placeholder Style the placeholder text of any input or textarea using the `placeholder` variant:
{
} ```html ```
### ::file Style the button in file inputs using the `file` variant:
{
Current profile photo
} ```html ```
### ::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
} ```html
  • 5 cups chopped Porcini mushrooms
  • 1/2 cup of olive oil
  • 3lb of celery
```
We've designed the `marker` variant to be inheritable, so although you can use it directly on an `
  • ` element, you can also use it on a parent to avoid repeating yourself. ### ::selection Style the active text selection using the `selection` variant:
    {

    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.

    }     ```html

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

    ```
    We've designed the `selection` variant to be inheritable, so you can add it anywhere in the tree and it will be applied to all descendant elements. This makes it easy to set the selection color to match your brand across your entire site: ```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:
    {

    }     ```html

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

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

    ```
    ### ::backdrop Style the backdrop of a [native `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) using the `backdrop` variant: ```html
    ``` If you're using native `` elements in your project, you may also want to read about [styling open/closed states](/docs/hover-focus-and-other-states#openclosed-state) using the `open` variant. ## Media and feature queries ### 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: ```html
    ``` To style an element based on the width of a parent element instead of the viewport, use variants like `@md` and `@lg`: ```html
    ``` Check out the [Responsive design](/docs/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

    {/* This is not an h3 because we're converting h3's to links in MDX files */}
    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

    {/* This is not an h3 because we're converting h3's to links in MDX files */}
    Writes upside-down

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

    }     ```html

    Writes upside-down

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

    ```
    Check out the [Dark Mode](/docs/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:
    {
    }     ```html ```
    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: ```html ``` ### 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:
    {

    We need this to steal your identity.

    }     ```html ```
    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:
    {
    Choose a theme:
    }     ```html ```
    Use the `not-forced-colors` variant to apply styles based when the user is _not_ using a forced colors mode: ```html
    ``` Tailwind also includes a [forced color adjust](/docs/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: ```html
    ``` ### 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:
    {
    }     ```html
    RAM
    See performance specs
    ```
    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: ```html

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

    ``` ### scripting Use the `noscript` variant to conditionally add styles based on whether the user has scripting, such as JavaScript, enabled: ```html ``` ### print Use the `print` variant to conditionally add styles that only apply when the document is being printed: ```html

    My Secret Pizza Recipe

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

    ``` ### @supports Use the `supports-[...]` variant to style things based on whether a certain feature is supported in the user's browser: ```html
    ``` Under the hood the `supports-[...]` variant generates [`@supports rules`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) and takes anything you’d use with `@supports (...)` between the square brackets, like a property/value pair, and even expressions using `and` and `or`. For terseness, if you only need to check if a property is supported (and not a specific value), you can just specify the property name: ```html
    ``` Use the `not-supports-[...]` variant to style things based on whether a certain feature is not supported in the user's browser: ```html
    ``` You can configure shortcuts for common `@supports` rules you're using in your project by creating a new variant in the `supports-*` namespace: ```css @custom-variant supports-grid { @supports (display: grid) { @slot; } } ``` You can then use these custom `supports-*` variants in your project: ```html
    ``` ### @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:
    { } ```html
    ```
    ## Attribute selectors ### ARIA states Use the `aria-*` variant to conditionally style things based on [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes). For example, to apply the `bg-sky-700` class when the `aria-checked` attribute is set to `true`, use the `aria-checked:bg-sky-700` class: ```html
    ``` 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: ```css @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
    }
    Invoice #
    `} />
    ARIA state variants can also target parent and sibling elements using the `group-aria-*` and `peer-aria-*` variants:
    Invoice #
    `} />     ### Data attributes Use the `data-*` variant to conditionally apply styles based on [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). To check if a data attribute exists (and not a specific value), you can just specify the attribute name: ```html
    ``` If you need to check for a specific value you may use an arbitrary value: ```html
    ``` Alternatively, you can configure shortcuts for common data attributes you're using in your project by creating a new variant in the `data-*` namespace: ```css @import "tailwindcss"; @custom-variant data-checked (&[data-ui~="checked"]); ``` You can then use these custom `data-*` variants in your project: ```html
    ``` ### 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

    تامر كرم

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

    }     ```html

    ...

    ...

    ```
    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 `
    ` or `` element is in an open state:
    {
    Why do they call it Ovaltine?

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

    }     ```html
    Why do they call it Ovaltine?

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

    ```
    This variant also targets the `:popover-open` pseudo-class for popovers: ```html
    ``` ### Styling inert elements The `inert` variant lets you style elements marked with the `inert` attribute:
    {
    Notification preferences

    Get notified when someones posts a comment on a post.

    Get notified when someones mentions you.

    }     ```html
    Notification preferences
    ```
    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
    }     ```html

    Categories

    • Sales
    • Marketing
    • SEO

    ```
    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.} ```html
    • Sales
    • Marketing
    • SEO
    ``` ### 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:
    {
    }     ```svelte
      {#each items as item}

    • {item.name}

      • {/each}
    ```
    ## Custom variants ### Using arbitrary variants Just like [arbitrary values](/docs/adding-custom-styles#using-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:
      {#each items as item}
    • {item}
      • {/each}
    `} />     Arbitrary variants can be stacked with built-in variants or with each other, just like the rest of the variants in Tailwind:
      {#each items as item}
    • {item}
      • {/each}
    `} />     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:

    Lorem ipsum...

    • Lorem ipsum...

    `} />     You can also use at-rules like `@media` or `@supports` in arbitrary variants:
    `} />     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: ```css @custom-variant theme-midnight (&:where([data-theme="midnight"] *)); ``` Now you can use the `theme-midnight:` variant in your HTML: ```html ``` Learn more about adding custom variants in the [adding custom variants documentation](/docs/adding-custom-styles#adding-custom-variants). ## 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](/docs/hover-focus-and-other-states#pseudo-classes) at the beginning of this guide. #### :hover Style an element when the user hovers over it with the mouse cursor using the `hover` variant: ```html
    ``` #### :focus Style an element when it has focus using the `focus` variant: ```html ``` #### :focus-within Style an element when it or one of its descendants has focus using the `focus-within` variant: ```html
    ``` #### :focus-visible Style an element when it has been focused using the keyboard using the `focus-visible` variant: ```html ``` #### :active Style an element when it is being pressed using the `active` variant: ```html ``` #### :visited Style a link when it has already been visited using the `visited` variant: ```html Inspiration ``` #### :target Style an element if its ID matches the current URL fragment using the `target` variant: ```html
    ``` #### :first-child Style an element if it's the first child using the `first` variant: ```svelte
      {#each people as person}
      • {/each}
    ``` #### :last-child Style an element if it's the last child using the `last` variant: ```svelte
      {#each people as person}
      • {/each}
    ``` #### :only-child Style an element if it's the only child using the `only` variant: ```svelte
      {#each people as person}
      • {/each}
    ``` #### :nth-child(odd) Style an element if it's an oddly numbered child using the `odd` variant: ```svelte {#each people as person} {/each}
    ``` #### :nth-child(even) Style an element if it's an evenly numbered child using the `even` variant: ```svelte {#each people as person} {/each}
    ``` #### :first-of-type Style an element if it's the first child of its type using the `first-of-type` variant: ```svelte ``` #### :last-of-type Style an element if it's the last child of its type using the `last-of-type` variant: ```svelte ``` #### :only-of-type Style an element if it's the only child of its type using the `only-of-type` variant: ```svelte ``` #### :nth-child() Style an element at a specific position using the `nth` variant: ```svelte ``` #### :nth-last-child() Style an element at a specific position from the end using the `nth-last` variant: ```svelte ``` #### :nth-of-type() Style an element at a specific position, of the same type using the `nth-of-type` variant: ```svelte ``` #### :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: ```svelte ``` #### :empty Style an element if it has no content using the `empty` variant: ```svelte
      {#each people as person}
    • {person.hobby}
      • {/each}
    ``` #### :disabled Style an input when it's disabled using the `disabled` variant: ```html ``` #### :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: ```html ``` #### :checked Style a checkbox or radio button when it's checked using the `checked` variant: ```html ``` #### :indeterminate Style a checkbox or radio button in an indeterminate state using the `indeterminate` variant: ```html ``` #### :default Style an option, checkbox or radio button that was the default value when the page initially loaded using the `default` variant: ```html ``` #### :optional Style an input when it's optional using the `optional` variant: ```html ``` #### :required Style an input when it's required using the `required` variant: ```html ``` #### :valid Style an input when it's valid using the `valid` variant: ```html ``` #### :invalid Style an input when it's invalid using the `invalid` variant: ```html ``` #### :user-valid Style an input when it's valid and the user has interacted with it, using the `user-valid` variant: ```html ``` #### :user-invalid Style an input when it's invalid and the user has interacted with it, using the `user-invalid` variant: ```html ``` #### :in-range Style an input when its value is within a specified range limit using the `in-range` variant: ```html ``` #### :out-of-range Style an input when its value is outside of a specified range limit using the `out-of-range` variant: ```html ``` #### :placeholder-shown Style an input when the placeholder is shown using the `placeholder-shown` variant: ```html ``` #### :details-content Style the content of a `
    ` element using the `details-content` variant: ```html
    Details This is a secret.
    ``` #### :autofill Style an input when it has been autofilled by the browser using the `autofill` variant: ```html ``` #### :read-only Style an input when it is read-only using the `read-only` variant: ```html ``` --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/hyphens.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "hyphens"; export const description = "Utilities for controlling how words should be hyphenated."; ## Examples ### Preventing hyphenation Use the `hyphens-none` utility to prevent words from being hyphenated even if the line break suggestion `­` is used:
    {

    Officially recognized by the Duden dictionary as the longest word in German,{" "} Kraftfahrzeug­haftpflichtversicherung {" "} is a 36 letter word for motor vehicle liability insurance.

    }     ```html

    ... Kraftfahrzeug­haftpflichtversicherung is a ...

    ```
    ### Manual hyphenation Use the `hyphens-manual` utility to only set hyphenation points where the line break suggestion `­` is used:
    {

    Officially recognized by the Duden dictionary as the longest word in German,{" "} Kraftfahrzeug­haftpflichtversicherung {" "} is a 36 letter word for motor vehicle liability insurance.

    }     ```html

    ... Kraftfahrzeug­haftpflichtversicherung is a ...

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

    }     ```html

    ... Kraftfahrzeughaftpflichtversicherung is a ...

    ```
    The line break suggestion `­` will be preferred over automatic hyphenation points. ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/isolation.mdx import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "isolation"; export const description = "Utilities for controlling whether an element should explicitly create a new stacking context."; ## Examples ### Basic example Use the `isolate` and `isolation-auto` utilities to control whether an element should explicitly create a new stacking context: ```html
    ``` ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/justify-content.mdx import { CodeExampleStack } from "@/components/code-example"; import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "justify-content"; export const description = "Utilities for controlling how flex and grid items are positioned along a container's main axis."; ## Examples ### Start Use the `justify-start` utility to justify items against the start of the container's main axis:
    {
    01
    02
    03
    }     ```html
    01
    02
    03
    ```
    ### Center Use the `justify-center` or `justify-center-safe` utilities to justify items along the center of the container's main axis:
    {

    justify-center

    01
    02
    03
    04

    justify-center-safe

    01
    02
    03
    04
    }     ```html
    01
    02
    03
    04
    ``` ```html
    01
    02
    03
    04
    ```
    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:
    {

    justify-end

    01
    02
    03
    04

    justify-end-safe

    01
    02
    03
    04
    }     ```html
    01
    02
    03
    03
    ``` ```html
    01
    02
    03
    03
    ```
    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
    }     ```html
    01
    02
    03
    ```
    ### 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
    }     ```html
    01
    02
    03
    ```
    ### 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
    }     ```html
    01
    02
    03
    ```
    ### Stretch Use the `justify-stretch` utility to allow auto-sized content items to fill the available space along the container's main axis:
    {
    01
    02
    03
    }     ```html
    01
    02
    03
    ```
    ### 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
    }     ```html
    01
    02
    03
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/justify-items.mdx import { CodeExampleStack } from "@/components/code-example"; import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "justify-items"; export const description = "Utilities for controlling how grid items are aligned along their inline axis."; ## 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
    }     ```html
    01
    02
    03
    04
    05
    06
    ```
    ### End Use the `justify-items-end` or `justify-items-end-safe` utilities to justify grid items against the end of their inline axis:
    {

    justify-items-end

    01
    02
    03

    justify-items-end-safe

    01
    02
    03
    }     ```html
    01
    02
    03
    ``` ```html
    01
    02
    03
    ```
    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:
    {

    justify-items-center

    01
    02
    03

    justify-items-center-safe

    01
    02
    03
    }     ```html
    01
    02
    03
    ``` ```html
    01
    02
    03
    ```
    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
    }     ```html
    01
    02
    03
    04
    05
    06
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/justify-self.mdx import { CodeExampleStack } from "@/components/code-example"; import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "justify-self"; export const description = "Utilities for controlling how an individual grid item is aligned along its inline axis."; ## 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
    }     ```html
    02
    ```
    ### 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
    }     ```html
    02
    ```
    ### Center Use the `justify-self-center` or `justify-self-center-safe` utilities to align a grid item along the center of its inline axis:
    {

    justify-self-center

    01
    02
    03

    justify-self-center-safe

    01
    02
    03
    }     ```html
    02
    ``` ```html
    02
    ```
    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:
    {

    justify-self-end

    01
    02
    03

    justify-self-end-safe

    01
    02
    03
    }     ```html
    02
    ``` ```html
    02
    ```
    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
    }     ```html
    02
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/letter-spacing.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "letter-spacing"; export const description = "Utilities for controlling the tracking, or letter spacing, of an element."; )", "letter-spacing: var();"], ["tracking-[]", "letter-spacing: ;"], ]} /> ## Examples ### Basic example Use utilities like `tracking-tight` and `tracking-wide` to set the letter spacing of an element:
    {
    tracking-tight

    The quick brown fox jumps over the lazy dog.

    tracking-normal

    The quick brown fox jumps over the lazy dog.

    tracking-wide

    The quick brown fox jumps over the lazy dog.

    }     ```html

    The quick brown fox ...

    The quick brown fox ...

    The quick brown fox ...

    ```
    ### Using negative values Using negative values doesn't make a ton of sense with the named letter spacing scale Tailwind includes out of the box, but if you've customized your scale to use numbers it can be useful: ```css @theme { --tracking-1: 0em; --tracking-2: 0.025em; --tracking-3: 0.05em; --tracking-4: 0.1em; } ``` To use a negative letter spacing value, prefix the class name with a dash to convert it to a negative value: ```html

    The quick brown fox ...

    ``` ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/line-clamp.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "line-clamp"; export const description = "Utilities for clamping text to a specific number of lines."; ", "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: ;", ], [ "line-clamp-none", "overflow: visible;\ndisplay: block;\n-webkit-box-orient: horizontal;\n-webkit-line-clamp: unset;", ], [ "line-clamp-()", "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: var();", ], [ "line-clamp-[]", "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: ;", ], ]} /> ## Examples ### Basic example Use `line-clamp-` utilities like `line-clamp-2` and `line-clamp-3` to truncate multi-line text after a specific number of lines:
    {
    Boost your conversion rate

    Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

    Lindsay Walton
    }     ```html

    Boost your conversion rate

    Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

    Lindsay Walton
    ```
    ### Undoing line clamping Use `line-clamp-none` to undo a previously applied line clamp utility: ```html

    ``` ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/line-height.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "line-height"; export const description = "Utilities for controlling the leading, or line height, of an element."; /", "font-size: ;\nline-height: calc(var(--spacing) * );"], ["text-/()", "font-size: ;\nline-height: var();"], ["text-/[]", "font-size: ;\nline-height: ;"], ["leading-none", "line-height: 1;"], ["leading-", "line-height: calc(var(--spacing) * );"], ["leading-()", "line-height: var();"], ["leading-[]", "line-height: ;"], ]} /> ## Examples ### Basic example Use font size utilities like `text-sm/6` and `text-lg/7` to set the font size and line-height of an element at the same time:
    {
    text-sm/6

    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.

    text-sm/7

    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.

    text-sm/8

    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.

    }     ```html

    So I started to walk into the water...

    So I started to walk into the water...

    So I started to walk into the water...

    ```
    Each font size utility also sets a default line height when one isn't provided. You can learn more about these values and how to customize them in the [font-size documentation](/docs/font-size). ### Setting independently Use `leading-` utilities like `leading-6` and `leading-7` to set the line height of an element independent of the font-size:
    {
    leading-6

    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.

    leading-7

    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.

    leading-8

    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.

    }     ```html

    So I started to walk into the water...

    So I started to walk into the water...

    So I started to walk into the water...

    ```
    ### Removing the leading Use the `leading-none` utility to set the line height of an element equal to its font size:
    {

    The quick brown fox jumps over the lazy dog.

    }     ```html

    The quick brown fox...

    ```
    ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/list-style-image.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "list-style-image"; export const description = "Utilities for controlling the marker images for list items."; ]", "list-style-image: ;"], ["list-image-()", "list-style-image: var();"], ["list-image-none", "list-style-image: none;"], ]} /> ## Examples ### Basic example Use the `list-image-[]` syntax to control the marker image for list items:
    {
    • 5 cups chopped Porcini mushrooms
    • 1/2 cup of olive oil
    • 3lb of celery
    }     ```html
    • 5 cups chopped Porcini mushrooms
    ```
    ### Using a CSS variable Use the list-image-{'()'} syntax to control the marker image for list items using a CSS variable: ```html
    ``` This is just a shorthand for list-image-{'[var()]'} that adds the `var()` function for you automatically. ### Removing a marker image Use the `list-image-none` utility to remove an existing marker image from list items: ```html
    ``` ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/list-style-position.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "list-style-position"; export const description = "Utilities for controlling the position of bullets and numbers in lists."; ## Examples ### Basic example Use utilities like `list-inside` and `list-outside` to control the position of the markers and text indentation in a list:
    {

    list-inside

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

    list-outside

    • 5 cups chopped Porcini mushrooms
    • 1/2 cup of olive oil
    • 3lb of celery
    }     ```html
    • 5 cups chopped Porcini mushrooms
    • 5 cups chopped Porcini mushrooms
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/list-style-type.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "list-style-type"; export const description = "Utilities for controlling the marker style of a list."; )", "list-style-type: var();"], ["list-[]", "list-style-type: ;"], ]} /> ## Examples ### Basic example Use utilities like `list-disc` and `list-decimal` to control the style of the markers in a list:
    {
    list-disc
    • Now this is a story all about how, my life got flipped-turned upside down
    • And I'd like to take a minute just sit right there
    • I'll tell you how I became the prince of a town called Bel-Air
    list-decimal
    • Now this is a story all about how, my life got flipped-turned upside down
    • And I'd like to take a minute just sit right there
    • I'll tell you how I became the prince of a town called Bel-Air
    list-none
    • Now this is a story all about how, my life got flipped-turned upside down
    • And I'd like to take a minute just sit right there
    • I'll tell you how I became the prince of a town called Bel-Air
    }     ```html
    • Now this is a story all about how, my life got flipped-turned upside down
    1. Now this is a story all about how, my life got flipped-turned upside down
    • Now this is a story all about how, my life got flipped-turned upside down
    ```
    ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/margin.mdx import dedent from "dedent"; import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "margin"; export const description = "Utilities for controlling an element's margin."; [ [`${prefix}-`, `${property}: calc(var(--spacing) * );`], [`-${prefix}-`, `${property}: calc(var(--spacing) * -);`], [`${prefix}-auto`, `${property}: auto;`], [`${prefix}-px`, `${property}: 1px;`], [`-${prefix}-px`, `${property}: -1px;`], [`${prefix}-()`, `${property}: var();`], [`${prefix}-[]`, `${property}: ;`], ]), ...[ ["space-x", "margin-inline"], ["space-y", "margin-block"], ].flatMap(([prefix, property]) => [ [ `${prefix}-`, dedent`& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc(calc(var(--spacing) * ) * var(--tw-${prefix}-reverse)); ${property}-end: calc(calc(var(--spacing) * ) * calc(1 - var(--tw-${prefix}-reverse))); };`, ], [ `-${prefix}-`, dedent`& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc(calc(var(--spacing) * -) * var(--tw-${prefix}-reverse)); ${property}-end: calc(calc(var(--spacing) * -) * calc(1 - var(--tw-${prefix}-reverse))); };`, ], [ `${prefix}-px`, dedent`& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc(1px * var(--tw-${prefix}-reverse)); ${property}-end: calc(1px * calc(1 - var(--tw-${prefix}-reverse))); };`, ], [ `-${prefix}-px`, dedent`& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc(-1px * var(--tw-${prefix}-reverse)); ${property}-end: calc(-1px * calc(1 - var(--tw-${prefix}-reverse))); };`, ], [ `${prefix}-()`, dedent`& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc(var() * var(--tw-${prefix}-reverse)); ${property}-end: calc(var() * calc(1 - var(--tw-${prefix}-reverse))); };`, ], [ `${prefix}-[]`, dedent`& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc( * var(--tw-${prefix}-reverse)); ${property}-end: calc( * calc(1 - var(--tw-${prefix}-reverse))); };`, ], ]), [ "space-x-reverse", dedent`& > :not(:last-child)) { --tw-space-x-reverse: 1; }`, ], [ "space-y-reverse", dedent`& > :not(:last-child)) { --tw-space-y-reverse: 1; }`, ], ]} /> ## Examples ### Basic example Use `m-` utilities like `m-4` and `m-8` to control the margin on all sides of an element:
    {
    m-8
    }     ```html
    m-8
    ```
    ### Adding margin to a single side Use `mt-`, `mr-`, `mb-`, and `ml-` 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
    }     ```html
    mt-6
    mr-4
    mb-8
    ml-2
    ```
    ### Adding horizontal margin Use `mx-` utilities like `mx-4` and `mx-8` to control the horizontal margin of an element:
    {
    mx-8
    }     ```html
    mx-8
    ```
    ### Adding vertical margin Use `my-` utilities like `my-4` and `my-8` to control the vertical margin of an element:
    {
    my-8
    }     ```html
    my-8
    ```
    ### 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
    }     ```html
    -mt-8
    ```
    ### Using logical properties Use `ms-` or `me-` 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
    }     ```html
    ms-8
    me-8
    ms-8
    me-8
    ```
    ### Adding space between children Use `space-x-` or `space-y-` utilities like `space-x-4` and `space-y-8` to control the space between elements:
    {
    01
    02
    03
    }     ```html
    01
    02
    03
    ```
    #### 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
    }     ```html
    01
    02
    03
    ```
    #### 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](/docs/gap) 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](/docs/border-width#between-children). For those situations, consider adding margin/padding utilities to the children instead. ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mask-clip.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "mask-clip"; export const description = "Utilities for controlling the bounding box of an element's mask."; ## 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

    }     {/* prettier-ignore */} ```html
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mask-composite.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "mask-composite"; export const description = "Utilities for controlling how multiple masks are combined together."; ## Examples ### Basic example Use utilities like `mask-add` and `mask-intersect` to control how an element's masks are combined together:
    {

    mask-add

    mask-subtract

    mask-intersect

    mask-exclude

    } {/* prettier-ignore */} ```html
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mask-image.mdx import KeyboardLight from "@/docs/img/keyboard-light.png"; import KeyboardDark from "@/docs/img/keyboard-dark.png"; import maskImg from "@/docs/img/mask.png"; import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx"; import dedent from "dedent"; export const title = "mask-image"; export const description = "Utilities for controlling an element's mask image."; ]", "mask-image: ;"], ["mask-()", "mask-image: var();"], ["mask-none", "mask-image: none;"], [ "mask-linear-", "mask-image: linear-gradient(deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));", ], [ "-mask-linear-", "mask-image: linear-gradient(calc(deg * -1), black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));", ], [ "mask-linear-from-", "mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing) * ), transparent var(--tw-mask-linear-to));", ], [ "mask-linear-from-", "mask-image: linear-gradient(var(--tw-mask-linear-position), black , transparent var(--tw-mask-linear-to));", ], [ "mask-linear-from-", "mask-image: linear-gradient(var(--tw-mask-linear-position), var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to));", ], [ "mask-linear-from-()", "mask-image: linear-gradient(var(--tw-mask-linear-position), black , transparent var(--tw-mask-linear-to));", ], [ "mask-linear-from-[]", "mask-image: linear-gradient(var(--tw-mask-linear-position), black , transparent var(--tw-mask-linear-to));", ], [ "mask-linear-to-", "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent calc(var(--spacing) * ));", ], [ "mask-linear-to-", "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent );", ], [ "mask-linear-to-", "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), var(--tw-mask-linear-to));", ], [ "mask-linear-to-()", "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent var());", ], [ "mask-linear-to-[]", "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent );", ], [ "mask-t-from-", "mask-image: linear-gradient(to top, black calc(var(--spacing) * ), transparent var(--tw-mask-top-to));", ], [ "mask-t-from-", "mask-image: linear-gradient(to top, black , transparent var(--tw-mask-top-to));", ], [ "mask-t-from-", "mask-image: linear-gradient(to top, var(--tw-mask-top-from), transparent var(--tw-mask-top-to));", ], [ "mask-t-from-()", "mask-image: linear-gradient(to top, black var(), transparent var(--tw-mask-top-to));", ], ["mask-t-from-[]", "mask-image: linear-gradient(to top, black , transparent var(--tw-mask-top-to));"], [ "mask-t-to-", "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing) * ));", ], [ "mask-t-to-", "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent );", ], [ "mask-t-to-", "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), var(--tw-mask-top-to));", ], [ "mask-t-to-()", "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var());", ], ["mask-t-to-[]", "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent );"], [ "mask-r-from-", "mask-image: linear-gradient(to right, black calc(var(--spacing) * ), transparent var(--tw-mask-right-to));", ], [ "mask-r-from-", "mask-image: linear-gradient(to right, black , transparent var(--tw-mask-right-to));", ], [ "mask-r-from-", "mask-image: linear-gradient(to right, var(--tw-mask-right-from), transparent var(--tw-mask-right-to));", ], [ "mask-r-from-()", "mask-image: linear-gradient(to right, black var(), transparent var(--tw-mask-right-to));", ], [ "mask-r-from-[]", "mask-image: linear-gradient(to right, black , transparent var(--tw-mask-right-to));", ], [ "mask-r-to-", "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing) * ));", ], [ "mask-r-to-", "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent );", ], [ "mask-r-to-", "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), var(--tw-mask-right-to));", ], [ "mask-r-to-()", "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var());", ], [ "mask-r-to-[]", "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent );", ], [ "mask-b-from-", "mask-image: linear-gradient(to bottom, black calc(var(--spacing) * ), transparent var(--tw-mask-bottom-to));", ], [ "mask-b-from-", "mask-image: linear-gradient(to bottom, black , transparent var(--tw-mask-bottom-to));", ], [ "mask-b-from-", "mask-image: linear-gradient(to bottom, var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to));", ], [ "mask-b-from-()", "mask-image: linear-gradient(to bottom, black var(), transparent var(--tw-mask-bottom-to));", ], [ "mask-b-from-[]", "mask-image: linear-gradient(to bottom, black , transparent var(--tw-mask-bottom-to));", ], [ "mask-b-to-", "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing) * ));", ], [ "mask-b-to-", "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent );", ], [ "mask-b-to-", "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), var(--tw-mask-bottom-to));", ], [ "mask-b-to-()", "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var());", ], [ "mask-b-to-[]", "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent );", ], [ "mask-l-from-", "mask-image: linear-gradient(to left, black calc(var(--spacing) * ), transparent var(--tw-mask-left-to));", ], [ "mask-l-from-", "mask-image: linear-gradient(to left, black , transparent var(--tw-mask-left-to));", ], [ "mask-l-from-", "mask-image: linear-gradient(to left, var(--tw-mask-left-from), transparent var(--tw-mask-left-to));", ], [ "mask-l-from-()", "mask-image: linear-gradient(to left, black var(), transparent var(--tw-mask-left-to));", ], [ "mask-l-from-[]", "mask-image: linear-gradient(to left, black , transparent var(--tw-mask-left-to));", ], [ "mask-l-to-", "mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing) * ));", ], [ "mask-l-to-", "mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), transparent );", ], [ "mask-l-to-", "mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), var(--tw-mask-left-to));", ], [ "mask-l-to-()", "mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent var());", ], [ "mask-l-to-[]", "mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent );", ], [ "mask-y-from-", dedent` mask-image: linear-gradient(to top, black calc(var(--spacing) * ), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black calc(var(--spacing) * ), transparent var(--tw-mask-bottom-to)); mask-composite: intersect;`, ], [ "mask-y-from-", dedent` mask-image: linear-gradient(to top, black , transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black , transparent var(--tw-mask-bottom-to)); mask-composite: intersect;`, ], [ "mask-y-from-", dedent` mask-image: linear-gradient(to top, var(--tw-mask-top-from), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to)); mask-composite: intersect;`, ], [ "mask-y-from-()", dedent` mask-image: linear-gradient(to top, black var(), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black var(), transparent var(--tw-mask-bottom-to)); mask-composite: intersect;`, ], [ "mask-y-from-[]", dedent` mask-image: linear-gradient(to top, black , transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black , transparent var(--tw-mask-bottom-to)); mask-composite: intersect;`, ], [ "mask-y-to-", dedent` mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing) * )), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing) * )); mask-composite: intersect;`, ], [ "mask-y-to-", dedent` mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), transparent ), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent ); mask-composite: intersect;`, ], [ "mask-y-to-", dedent` mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), var(--tw-mask-top-to)), linear-gradient(to bottom, black var(--tw-mask-bottom-from), var(--tw-mask-bottom-to)); mask-composite: intersect;`, ], [ "mask-y-to-()", dedent` mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var()),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var()); mask-composite: intersect;`, ], [ "mask-y-to-[]", dedent` mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent ),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent ); mask-composite: intersect;`, ], [ "mask-x-from-", dedent` mask-image: linear-gradient(to right, black calc(var(--spacing) * ), transparent var(--tw-mask-right-to)), linear-gradient(to left, black calc(var(--spacing) * ), transparent var(--tw-mask-left-to)); mask-composite: intersect;`, ], [ "mask-x-from-", dedent` mask-image: linear-gradient(to right, black , transparent var(--tw-mask-right-to)), linear-gradient(to left, black , transparent var(--tw-mask-left-to)); mask-composite: intersect;`, ], [ "mask-x-from-", dedent` mask-image: linear-gradient(to right, var(--tw-mask-right-from), transparent var(--tw-mask-right-to)), linear-gradient(to left, var(--tw-mask-left-from), transparent var(--tw-mask-left-to)); mask-composite: intersect;`, ], [ "mask-x-from-()", dedent` mask-image: linear-gradient(to right, black var(), transparent var(--tw-mask-right-to)), linear-gradient(to left, black var(), transparent var(--tw-mask-left-to)); mask-composite: intersect;`, ], [ "mask-x-from-[]", dedent` mask-image: linear-gradient(to right, black , transparent var(--tw-mask-right-to)), linear-gradient(to left, black , transparent var(--tw-mask-left-to)); mask-composite: intersect;`, ], [ "mask-x-to-", dedent` mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing) * )), linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing) * )); mask-composite: intersect;`, ], [ "mask-x-to-", dedent` mask-image: linear-gradient(to left, black var(--tw-mask-right-from), transparent ), linear-gradient(to left, black var(--tw-mask-left-from), transparent ); mask-composite: intersect;`, ], [ "mask-x-to-", dedent` mask-image: linear-gradient(to left, black var(--tw-mask-right-from), var(--tw-mask-right-to)), linear-gradient(to left, black var(--tw-mask-left-from), var(--tw-mask-left-to)); mask-composite: intersect;`, ], [ "mask-x-to-()", dedent` mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var()),linear-gradient(to left, black var(--tw-mask-left-from), transparent var()); mask-composite: intersect;`, ], [ "mask-x-to-[]", dedent` mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent ),linear-gradient(to left, black var(--tw-mask-left-from), transparent ); mask-composite: intersect;`, ], ["mask-radial-[]", "mask-image: radial-gradient();"], ["mask-radial-[]", "--tw-mask-radial-size: ;"], ["mask-radial-[_]", "--tw-mask-radial-size: ;"], [ "mask-radial-from-", "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black calc(var(--spacing) * ), transparent var(--tw-mask-radial-to));", ], [ "mask-radial-from-", "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black , transparent var(--tw-mask-radial-to));", ], [ "mask-radial-from-", "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from), transparent var(--tw-mask-radial-to));", ], [ "mask-radial-from-()", "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(), transparent var(--tw-mask-radial-to));", ], [ "mask-radial-from-[]", "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black , transparent var(--tw-mask-radial-to));", ], [ "mask-radial-to-", "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent calc(var(--spacing) * ));", ], [ "mask-radial-to-", "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent );", ], [ "mask-radial-to-", "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), var(--tw-mask-radial-to));", ], [ "mask-radial-to-()", "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent var());", ], [ "mask-radial-to-[]", "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent );", ], ["mask-circle", "--tw-mask-radial-shape: circle;"], ["mask-ellipse", "--tw-mask-radial-shape: ellipse;"], ["mask-radial-closest-corner", "--tw-mask-radial-size: closest-corner;"], ["mask-radial-closest-side", "--tw-mask-radial-size: closest-side;"], ["mask-radial-farthest-corner", "--tw-mask-radial-size: farthest-corner;"], ["mask-radial-farthest-side", "--tw-mask-radial-size: farthest-side;"], ["mask-radial-at-top-left", "--tw-mask-radial-position: top left;"], ["mask-radial-at-top", "--tw-mask-radial-position: top;"], ["mask-radial-at-top-right", "--tw-mask-radial-position: top right;"], ["mask-radial-at-left", "--tw-mask-radial-position: left;"], ["mask-radial-at-center", "--tw-mask-radial-position: center;"], ["mask-radial-at-right", "--tw-mask-radial-position: right;"], ["mask-radial-at-bottom-left", "--tw-mask-radial-position: bottom left;"], ["mask-radial-at-bottom", "--tw-mask-radial-position: bottom;"], ["mask-radial-at-bottom-right", "--tw-mask-radial-position: bottom right;"], [ "mask-conic-", "mask-image: conic-gradient(from deg, black var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));", ], [ "-mask-conic-", "mask-image: conic-gradient(from calc(deg * -1), black var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));", ], [ "mask-conic-from-", "mask-image: conic-gradient(from var(--tw-mask-conic-position), black calc(var(--spacing) * ), transparent var(--tw-mask-conic-to));", ], [ "mask-conic-from-", "mask-image: conic-gradient(from var(--tw-mask-conic-position), black , transparent var(--tw-mask-conic-to));", ], [ "mask-conic-from-", "mask-image: conic-gradient(from var(--tw-mask-conic-position), var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));", ], [ "mask-conic-from-()", "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(), transparent var(--tw-mask-conic-to));", ], [ "mask-conic-from-[]", "mask-image: conic-gradient(from var(--tw-mask-conic-position), black , transparent var(--tw-mask-conic-to));", ], [ "mask-conic-to-", "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent calc(var(--spacing) * ));", ], [ "mask-conic-to-", "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent );", ], [ "mask-conic-to-", "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), var(--tw-mask-conic-to);", ], [ "mask-conic-to-()", "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent var();", ], [ "mask-conic-to-[]", "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent );", ], ]} /> ## Examples ### Using an image mask Use the `mask-[]` syntax to set the mask image of an element:
    {
    }     {/* prettier-ignore */} ```html
    ```
    ### Masking edges Use utilities like `mask-b-from-` and `mask-t-to-` 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%

    }     {/* prettier-ignore */} ```html
    ```
    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%

    }     {/* prettier-ignore */} ```html
    ```
    By default, linear gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask--from-` and `mask--to-` utilities. ### Adding an angled linear mask Use utilities like `mask-linear-`, `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

    }     {/* prettier-ignore */} ```html
    ```
    ### Adding a radial mask Use the `mask-radial-from-` and `mask-radial-to-` utilities to add a radial gradient mask to an element:
    {

    Speed

    Built for power users

    Work faster than ever with our keyboard shortcuts

    }     ```html

    Speed

    Built for power users

    Work faster than ever with customizable keyboard shortcuts

    ```
    By default, radial gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask-radial-from-` and `mask-radial-to-` 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

    }     {/* prettier-ignore */} ```html
    ```
    This is different from [`mask-position`](/docs/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

    }     {/* prettier-ignore */} ```html
    ```
    When setting a custom radial gradient size, the units you can use depend on the `` 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-`, `mask-conic-to-` and `mask-conic-` utilities to add a conic gradient mask to an element:
    {

    Storage used: 75%

    0.48 GB out of 2 GB remaining

    } ```html

    Storage used: 75%

    0.48 GB out of 2 GB remaining

    ```
    By default, conic gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask-conic-from-` and `mask-conic-to-` utilities. ### Combining masks Gradient mask utilities, like `mask-radial-from-`, `mask-conic-to-`, and `mask-l-from-` can be combined to create more complex gradient masks:
    {
    }     {/* prettier-ignore */} ```html
    ```
    This behavior relies on the fact that Tailwind sets the [`mask-composite` property](/docs/mask-composite) 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: ```html
    ``` ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mask-mode.mdx import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "mask-mode"; export const description = "Utilities for controlling an element's mask mode."; ## 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

    }     {/* prettier-ignore */} ```html
    ```
    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 --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mask-origin.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "mask-origin"; export const description = "Utilities for controlling how an element's mask image is positioned relative to borders, padding, and content."; ## 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

    }     {/* prettier-ignore */} ```html
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mask-position.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "mask-position"; export const description = "Utilities for controlling the position of an element's mask image."; )", "mask-position: var();"], ["mask-position-[]", "mask-position: ;"], ]} /> ## 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
    }     {/* prettier-ignore */} ```html
    ```
    ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mask-repeat.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "mask-repeat"; export const description = "Utilities for controlling the repetition of an element's mask image."; ## Examples ### Basic example Use the `mask-repeat` utility to repeat the mask image both vertically and horizontally:
    {
    }     {/* prettier-ignore */} ```html
    ```
    ### Repeating horizontally Use the `mask-repeat-x` utility to only repeat the mask image horizontally:
    {
    }     {/* prettier-ignore */} ```html
    ```
    ### Repeating vertically Use the `mask-repeat-y` utility to only repeat the mask image vertically:
    {
    }     {/* prettier-ignore */} ```html
    ```
    ### Preventing clipping Use the `mask-repeat-space` utility to repeat the mask image without clipping:
    {
    }     {/* prettier-ignore */} ```html
    ```
    ### Preventing clipping and gaps Use the `mask-repeat-round` utility to repeat the mask image without clipping, stretching if needed to avoid gaps:
    {
    }     {/* prettier-ignore */} ```html
    ```
    ### Disabling repeating Use the `mask-no-repeat` utility to prevent a mask image from repeating:
    {
    }     {/* prettier-ignore */} ```html
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mask-size.mdx import maskImg from "@/docs/img/mask.png"; import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "mask-size"; export const description = "Utilities for controlling the size of an element's mask image."; )", "mask-size: var();"], ["mask-size-[]", "mask-size: ;"], ]} /> ## 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:
    {
    }     {/* prettier-ignore */} ```html
    ```
    ### Filling without cropping Use the `mask-contain` utility to scale the mask image to the outer edges without cropping or stretching:
    {
    }     {/* prettier-ignore */} ```html
    ```
    ### Using the default size Use the `mask-auto` utility to display the mask image at its default size:
    {
    }     {/* prettier-ignore */} ```html
    ```
    ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mask-type.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "mask-type"; export const description = "Utilities for controlling how an SVG mask is interpreted."; ## 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

    }     ```html ```
    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 --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/max-height.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "max-height"; export const description = "Utilities for setting the maximum height of an element."; ", "max-height: calc(var(--spacing) * );"], ["max-h-", "max-height: calc( * 100%);"], ["max-h-none", "max-height: none;"], ["max-h-px", "max-height: 1px;"], ["max-h-full", "max-height: 100%;"], ["max-h-screen", "max-height: 100vh;"], ["max-h-dvh", "max-height: 100dvh;"], ["max-h-dvw", "max-height: 100dvw;"], ["max-h-lvh", "max-height: 100lvh;"], ["max-h-lvw", "max-height: 100lvw;"], ["max-h-svh", "max-height: 100svh;"], ["max-h-svw", "max-height: 100svw;"], ["max-h-min", "max-height: min-content;"], ["max-h-max", "max-height: max-content;"], ["max-h-fit", "max-height: fit-content;"], ["max-h-lh", "max-height: 1lh;"], ["max-h-()", "max-height: var();"], ["max-h-[]", "max-height: ;"], ]} /> ## Examples ### Basic example Use `max-h-` utilities like `max-h-24` and `max-h-64` to set an element to a fixed maximum height based on the spacing scale:
    {
    max-h-80
    max-h-64
    max-h-48
    max-h-40
    max-h-32
    max-h-24
    }     ```html
    max-h-80
    max-h-64
    max-h-48
    max-h-40
    max-h-32
    max-h-24
    ```
    ### Using a percentage Use `max-h-full` or `max-h-` utilities like `max-h-1/2` and `max-h-2/5` to give an element a percentage-based maximum height:
    {
    max-h-9/10
    max-h-3/4
    max-h-1/2
    max-h-1/4
    max-h-full
    }     ```html
    max-h-9/10
    max-h-3/4
    max-h-1/2
    max-h-1/4
    max-h-full
    ```
    ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/max-width.mdx import dedent from "dedent"; import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "max-width"; export const description = "Utilities for setting the maximum width of an element."; ", "max-width: calc(var(--spacing) * );"], ["max-w-", "max-width: calc( * 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) */"], ["max-w-3xl", "max-width: var(--container-3xl); /* 48rem (768px) */"], ["max-w-4xl", "max-width: var(--container-4xl); /* 56rem (896px) */"], ["max-w-5xl", "max-width: var(--container-5xl); /* 64rem (1024px) */"], ["max-w-6xl", "max-width: var(--container-6xl); /* 72rem (1152px) */"], ["max-w-7xl", "max-width: var(--container-7xl); /* 80rem (1280px) */"], ["max-w-none", "max-width: none;"], ["max-w-px", "max-width: 1px;"], ["max-w-full", "max-width: 100%;"], ["max-w-dvw", "max-width: 100dvw;"], ["max-w-dvh", "max-width: 100dvh;"], ["max-w-lvw", "max-width: 100lvw;"], ["max-w-lvh", "max-width: 100lvh;"], ["max-w-svw", "max-width: 100svw;"], ["max-w-svh", "max-width: 100svh;"], ["max-w-screen", "max-width: 100vw;"], ["max-w-min", "max-width: min-content;"], ["max-w-max", "max-width: max-content;"], ["max-w-fit", "max-width: fit-content;"], [ "container", dedent` width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } `, ], ["max-w-()", "max-width: var();"], ["max-w-[]", "max-width: ;"], ]} /> ## Examples ### Basic example Use `max-w-` utilities like `max-w-24` and `max-w-64` to set an element to a fixed maximum width based on the spacing scale:
    {
    max-w-96
    max-w-80
    max-w-64
    max-w-48
    max-w-40
    max-w-32
    max-w-24
    }     ```html
    max-w-96
    max-w-80
    max-w-64
    max-w-48
    max-w-40
    max-w-32
    max-w-24
    ```
    ### Using a percentage Use `max-w-full` or `max-w-` utilities like `max-w-1/2` and `max-w-2/5` to give an element a percentage-based maximum width:
    {
    max-w-9/10
    max-w-3/4
    max-w-1/2
    max-w-1/3
    }     ```html
    max-w-9/10
    max-w-3/4
    max-w-1/2
    max-w-1/3
    ```
    ### 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:
    {
    Andrew Alfred
    Assistant to the Traveling Secretary
    }     ```html
    ```
    ### 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: ```html
    ``` 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-` utilities to add these: ```html
    ``` ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/min-height.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "min-height"; export const description = "Utilities for setting the minimum height of an element."; ", "min-height: calc(var(--spacing) * );"], ["min-h-", "min-height: calc( * 100%);"], ["min-h-px", "min-height: 1px;"], ["min-h-full", "min-height: 100%;"], ["min-h-screen", "min-height: 100vh;"], ["min-h-dvh", "min-height: 100dvh;"], ["min-h-dvw", "min-height: 100dvw;"], ["min-h-lvh", "min-height: 100lvh;"], ["min-h-lvw", "min-height: 100lvw;"], ["min-h-svw", "min-height: 100svw;"], ["min-h-svh", "min-height: 100svh;"], ["min-h-auto", "min-height: auto;"], ["min-h-min", "min-height: min-content;"], ["min-h-max", "min-height: max-content;"], ["min-h-fit", "min-height: fit-content;"], ["min-h-lh", "min-height: 1lh;"], ["min-h-()", "min-height: var();"], ["min-h-[]", "min-height: ;"], ]} /> ## Examples ### Basic example Use `min-h-` utilities like `min-h-24` and `min-h-64` to set an element to a fixed minimum height based on the spacing scale:
    {
    min-h-96
    min-h-80
    min-h-64
    min-h-48
    min-h-40
    min-h-32
    min-h-24
    }     ```html
    min-h-80
    min-h-64
    min-h-48
    min-h-40
    min-h-32
    min-h-24
    ```
    ### Using a percentage Use `min-h-full` or `min-h-` utilities like `min-h-1/2`, and `min-h-2/5` to give an element a percentage-based minimum height:
    {
    min-h-full
    min-h-9/10
    min-h-3/4
    min-h-1/2
    min-h-1/3
    }     ```html
    min-h-full
    min-h-9/10
    min-h-3/4
    min-h-1/2
    min-h-1/3
    ```
    ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/min-width.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Stripes } from "@/components/stripes.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "min-width"; export const description = "Utilities for setting the minimum width of an element."; ", "min-width: calc(var(--spacing) * );"], ["min-w-", "min-width: calc( * 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) */"], ["min-w-3xl", "min-width: var(--container-3xl); /* 48rem (768px) */"], ["min-w-4xl", "min-width: var(--container-4xl); /* 56rem (896px) */"], ["min-w-5xl", "min-width: var(--container-5xl); /* 64rem (1024px) */"], ["min-w-6xl", "min-width: var(--container-6xl); /* 72rem (1152px) */"], ["min-w-7xl", "min-width: var(--container-7xl); /* 80rem (1280px) */"], ["min-w-auto", "min-width: auto;"], ["min-w-px", "min-width: 1px;"], ["min-w-full", "min-width: 100%;"], ["min-w-screen", "min-width: 100vw;"], ["min-w-dvw", "min-width: 100dvw;"], ["min-w-dvh", "min-width: 100dvh;"], ["min-w-lvw", "min-width: 100lvw;"], ["min-w-lvh", "min-width: 100lvh;"], ["min-w-svw", "min-width: 100svw;"], ["min-w-svh", "min-width: 100svh;"], ["min-w-min", "min-width: min-content;"], ["min-w-max", "min-width: max-content;"], ["min-w-fit", "min-width: fit-content;"], ["min-w-()", "min-width: var();"], ["min-w-[]", "min-width: ;"], ]} /> ## Examples ### Basic example Use `min-w-` 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
    }     ```html
    min-w-80
    min-w-64
    min-w-48
    min-w-40
    min-w-32
    min-w-24
    ```
    ### Using a percentage Use `min-w-full` or `min-w-` 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
    }     ```html
    min-w-3/4
    w-full
    ```
    ### 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
    }     ```html
    min-w-lg
    min-w-md
    min-w-sm
    min-w-xs
    min-w-2xs
    min-w-3xs
    ```
    ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mix-blend-mode.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "mix-blend-mode"; export const description = "Utilities for controlling how an element should blend with the background."; ## 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:
    {
    }     ```html
    ```
    ### Isolating blending Use the `isolate` utility on the parent element to create a new stacking context and prevent blending with content behind it:
    {
    }     ```html
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/object-fit.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "object-fit"; export const description = "Utilities for controlling how a replaced element's content should be resized."; ## Examples ### Resizing to cover Use the `object-cover` utility to resize an element's content to cover its container:
    { } ```html ```
    ### Containing within Use the `object-contain` utility to resize an element's content to stay contained within its container:
    {
    }     ```html ```
    ### Stretching to fit Use the `object-fill` utility to stretch an element's content to fit its container:
    { } ```html ```
    ### 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:
    {
    }     ```html ```
    ### Using the original size Use the `object-none` utility to display an element's content at its original size ignoring the container size:
    { } ```html ```
    ### Responsive design ```html ``` --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/object-position.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { UsingACustomValue, ResponsiveDesign } from "@/components/content.tsx"; export const title = "object-position"; export const description = "Utilities for controlling how a replaced element's content should be positioned within its container."; )", "object-position: var();"], ["object-[]", "object-position: ;"], ]} /> ## 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:
    {

    object-top-left

    object-top

    object-top-right

    object-left

    object-center

    object-right

    object-bottom-left

    object-bottom

    object-bottom-right

    }     ```html ```
    ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/opacity.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { TargetingSpecificStates } from "@/components/content.tsx"; export const title = "opacity"; export const description = "Utilities for controlling the opacity of an element."; ", "opacity: %;"], ["opacity-()", "opacity: var();"], ["opacity-[]", "opacity: ;"], ]} /> ## Examples ### Basic example Use `opacity-` utilities like `opacity-25` and `opacity-100` to set the opacity of an element:
    {

    opacity-100

    opacity-75

    opacity-50

    opacity-25

    }     ```html ```
    ### Applying conditionally ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/order.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "order"; export const description = "Utilities for controlling the order of flex and grid items."; ", "order: ;"], ["-order-", "order: calc( * -1);"], ["order-first", "order: -9999;"], ["order-last", "order: 9999;"], ["order-none", "order: 0;"], ["order-()", "order: var();"], ["order-[]", "order: ;"], ]} /> ## Examples ### Explicitly setting a sort order Use `order-` 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
    }     ```html
    01
    02
    03
    ```
    ### 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
    }     ```html
    01
    02
    03
    ```
    ### Using negative values To use a negative order value, prefix the class name with a dash to convert it to a negative value: ```html
    ``` ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/outline-color.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; export const title = "outline-color"; export const description = "Utilities for controlling the color of an element's outline."; [ `outline-${name}`, `outline-color: var(--color-${name}); /* ${value} */`, ]), ["outline-()", "outline-color: var();"], ["outline-[]", "outline-color: ;"], ]} /> ## 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

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

    }     ```html ```
    ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/outline-offset.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "outline-offset"; export const description = "Utilities for controlling the offset of an element's outline."; ", "outline-offset: px;"], ["-outline-offset-", "outline-offset: calc(px * -1);"], ["outline-offset-()", "outline-offset: var();"], ["outline-offset-[]", "outline-offset: ;"], ]} /> ## 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

    }     ```html ```
    ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/outline-style.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "outline-style"; export const description = "Utilities for controlling the style of an element's outline."; ## 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

    }     ```html ```
    ### 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:
    { } ```html ```
    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:
    {
    } ```html ```
    ### Resizing vertically Use `resize-y` to make an element vertically resizable:
    { } ```html ```
    ### Resizing horizontally Use `resize-x` to make an element horizontally resizable:
    { } ```html ```
    ### Prevent resizing Use `resize-none` to prevent an element from being resizable:
    { } ```html ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/responsive-design.mdx import { TipGood, TipBad } from "@/components/tips"; import { Iframe } from "@/components/iframe"; import { Example } from "@/components/example"; import { Figure } from "@/components/figure"; export const title = "Responsive design"; export const description = "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](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) to the `` of your document: ```html ``` Then to add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the `:` character: ```html ``` There are five breakpoints by default, inspired by common device resolutions: {
    Breakpoint prefix Minimum width CSS
    sm 40rem (640px) @media (width >= 40rem) { ... }
    md 48rem (768px) @media (width >= 48rem) { ... }
    lg 64rem (1024px) @media (width >= 64rem) { ... }
    xl 80rem (1280px) @media (width >= 80rem) { ... }
    2xl 96rem (1536px) @media (width >= 96rem) { ... }
    } This works for **every utility class in the framework**, which means you can change literally anything at a given breakpoint — even things like letter spacing or cursor styles. Here's a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens:
    { } ```html
    Modern building architecture
    Company retreats
    Incredible accommodation for your team

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

    ```
    Here's how the example above works: - By default, the outer `div` is `display: block`, but by adding the `md:flex` utility, it becomes `display: flex` on medium screens and larger. - When the parent is a flex container, we want to make sure the image never shrinks, so we've added `md:shrink-0` to prevent shrinking on medium screens and larger. Technically we could have just used `shrink-0` since it would do nothing on smaller screens, but since it only matters on `md` screens, it's a good idea to make that clear in the class name. - On small screens the image is automatically full width by default. On medium screens and up, we've constrained the width to a fixed size and ensured the image is full height using `md:h-full md:w-48`. We've only used one breakpoint in this example, but you could easily customize this component at other sizes using the `sm`, `lg`, `xl`, or `2xl` responsive prefixes as well. ## Working mobile-first 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
    ``` {<>Use unprefixed utilities to target mobile, and override them at larger breakpoints} ```html
    ``` For this reason, it's often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for `sm` screens, followed by `md` screens, etc. ### Targeting a breakpoint range By default, styles applied by rules like `md:flex` will apply at that breakpoint and stay applied at larger breakpoints. If you'd like to apply a utility _only_ when a specific breakpoint range is active, stack a responsive variant like `md` with a `max-*` variant to limit that style to a specific range: ```html
    ``` Tailwind generates a corresponding `max-*` variant for each breakpoint, so out of the box the following variants are available: {
    Variant Media query
    max-sm @media (width < 40rem) { ... }
    max-md @media (width < 48rem) { ... }
    max-lg @media (width < 64rem) { ... }
    max-xl @media (width < 80rem) { ... }
    max-2xl @media (width < 96rem) { ... }
    } ### Targeting a single breakpoint To target a single breakpoint, target the range for that breakpoint by stacking a responsive variant like `md` with the `max-*` variant for the next breakpoint: ```html
    ``` Read about [targeting breakpoint ranges](#targeting-a-breakpoint-range) to learn more. ## Using custom breakpoints ### Customizing your theme Use the `--breakpoint-*` theme variables to customize your breakpoints: ```css /* [!code filename:app.css] */ @import "tailwindcss"; @theme { /* [!code highlight:4] */ --breakpoint-xs: 30rem; --breakpoint-2xl: 100rem; --breakpoint-3xl: 120rem; } ``` This updates the `2xl` breakpoint to use `100rem` instead of the default `96rem`, and creates new `xs` and `3xl` breakpoints that can be used in your markup: ```html
    ``` Note that it's important to always use the same unit for defining your breakpoints or the generated utilities may be sorted in an unexpected order, causing breakpoint classes to override each other in unexpected ways. Tailwind uses `rem` for the default breakpoints, so if you are adding additional breakpoints to the defaults, make sure you use `rem` as well. Learn more about customizing your theme in the [theme documentation](/docs/theme). ### Removing default breakpoints To remove a default breakpoint, reset its value to the `initial` keyword: ```css /* [!code filename:app.css] */ @import "tailwindcss"; @theme { /* [!code highlight:2] */ --breakpoint-2xl: initial; } ``` You can also reset all of the default breakpoints using `--breakpoint-*: initial`, then define all of your breakpoints from scratch: ```css /* [!code filename:app.css] */ @import "tailwindcss"; @theme { /* [!code highlight:5] */ --breakpoint-*: initial; --breakpoint-tablet: 40rem; --breakpoint-laptop: 64rem; --breakpoint-desktop: 80rem; } ``` Learn more removing default theme values in the [theme documentation](/docs/theme). ### 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. ```html
    ``` Learn more about arbitrary value support in the [arbitrary values](/docs/adding-custom-styles#using-arbitrary-values) documentation. ## Container queries ### What are container queries? [Container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) are a modern CSS feature that let you style something based on the size of a parent element instead of the size of the entire viewport. They let you build components that are a lot more portable and reusable because they can change based on the actual space available for that component. ### Basic example Use the `@container` class to mark an element as a container, then use variants like `@sm` and `@md` to style child elements based on the size of the container: ```html
    ``` Just like breakpoint variants, container queries are mobile-first in Tailwind CSS and apply at the target container size and up. ### Max-width container queries Use variants like `@max-sm` and `@max-md` to apply a style below a specific container size: ```html
    ``` ### Container query ranges Stack a regular container query variant with a max-width container query variant to target a specific range: ```html
    ``` ### Named containers For complex designs that use multiple nested containers, you can name containers using `@container/{name}` and target specific containers with variants like `@sm/{name}` and `@md/{name}`: ```html
    ``` This makes it possible to style something based on the size of a distant container, rather than just the nearest container. ### Using custom container sizes Use the `--container-*` theme variables to customize your container sizes: ```css /* [!code filename:app.css] */ @import "tailwindcss"; @theme { /* [!code highlight:2] */ --container-8xl: 96rem; } ``` This adds a new `8xl` container query variant that can be used in your markup: ```html
    ``` Learn more about customizing your theme in the [theme documentation](/docs/theme).

    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
    ``` ### Using container query units Use [container query length units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries#container_query_length_units) like `cqw` as arbitrary values in other utility classes to reference the container size: ```html
    ``` ### Container size reference 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) { … }
    } --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/rotate.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "rotate"; export const description = "Utilities for rotating elements."; [ [`${prefix}-`, `rotate: deg;`], [`-${prefix}-`, `rotate: calc(deg * -1);`], [`${prefix}-()`, `rotate: var();`], [`${prefix}-[]`, `rotate: ;`], ]), ...[ ["rotate-x", (value) => `rotateX(${value}) var(--tw-rotate-y)`], ["rotate-y", (value) => `var(--tw-rotate-x) rotateY(${value})`], ["rotate-z", (value) => `var(--tw-rotate-x) var(--tw-rotate-y) rotateZ(${value})`], ].flatMap(([prefix, getTransform]) => [ [`${prefix}-`, `transform: ${getTransform("deg")};`], [`-${prefix}-`, `transform: ${getTransform("-deg")};`], [`${prefix}-()`, `transform: ${getTransform("var()")};`], [`${prefix}-[]`, `transform: ${getTransform("")};`], ]), ]} /> ## Examples ### Basic example Use `rotate-` utilities like `rotate-45` and `rotate-90` to rotate an element by degrees:
    {

    rotate-45

    rotate-90

    rotate-210

    }     ```html ```
    ### Using negative values Use `-rotate-` utilities like `-rotate-45` and `-rotate-90` to rotate an element counterclockwise by degrees:
    {

    -rotate-45

    -rotate-90

    -rotate-210

    }     ```html ```
    ### Rotating in 3D space Use `rotate-x-`, `rotate-y-`, and `rotate-z-` 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

    }     ```html ```
    ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/scale.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { TargetingSpecificStates, UsingACustomValue } from "@/components/content.tsx"; export const title = "scale"; export const description = "Utilities for scaling elements."; [ [`${prefix}-`, `scale: % %;`], [`-${prefix}-`, `scale: calc(% * -1) calc(% * -1);`], [`${prefix}-()`, `scale: var() var();`], [`${prefix}-[]`, `scale: ;`], ]), ...[ ["scale-x", (value) => `${value} var(--tw-scale-y)`], ["scale-y", (value) => `var(--tw-scale-x) ${value}`], ["scale-z", (value) => `var(--tw-scale-x) var(--tw-scale-y) ${value}`], ].flatMap(([prefix, getScale]) => [ [`${prefix}-`, `scale: ${getScale("%")};`], [`-${prefix}-`, `scale: ${getScale("calc(% * -1)")};`], [`${prefix}-()`, `scale: ${getScale("var()")};`], [`${prefix}-[]`, `scale: ${getScale("")};`], ]), ["scale-3d", "scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);"], ]} /> ## Examples ### Basic example Use `scale-` utilities like `scale-75` and `scale-150` to scale an element by a percentage of its original size:
    {

    scale-75

    scale-100

    scale-125

    }     ```html ```
    ### Scaling on the x-axis Use the `scale-x-` 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

    }     ```html ```
    ### Scaling on the y-axis Use the `scale-y-` 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

    }     ```html ```
    ### Using negative values Use `-scale-`, `-scale-x-` or `-scale-y-` 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

    }     ```html ```
    ### Using a custom value ### Applying on hover --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/scroll-margin.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "scroll-margin"; export const description = "Utilities for controlling the scroll offset around items in a snap container."; [ [`${prefix}-`, `${property}: calc(var(--spacing) * );`], [`-${prefix}-`, `${property}: calc(var(--spacing) * -);`], [`${prefix}-()`, `${property}: var();`], [`${prefix}-[]`, `${property}: ;`], ])} /> ## Examples ### Basic example Use the `scroll-mt-`, `scroll-mr-`, `scroll-mb-`, and `scroll-ml-` utilities like `scroll-ml-4` and `scroll-mt-6` to set the scroll offset around items within a snap container:
    {
    }     {/* prettier-ignore */} ```html
    ```
    ### Using negative values To use a negative scroll margin value, prefix the class name with a dash to convert it to a negative value: ```html
    ``` ### Using logical properties Use the `scroll-ms-` and `scroll-me-` utilities to set the `scroll-margin-inline-start` and `scroll-margin-inline-end` [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right side based on the text direction:
    { <>

    Left-to-right

    Right-to-left

    }     {/* prettier-ignore */} ```html
    ```
    For more control, you can also use the [LTR and RTL modifiers](/docs/hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction. ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/scroll-padding.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "scroll-padding"; export const description = "Utilities for controlling an element's scroll offset within a snap container."; [ [`${prefix}-`, `${property}: calc(var(--spacing) * );`], [`-${prefix}-`, `${property}: calc(var(--spacing) * -);`], [`${prefix}-()`, `${property}: var();`], [`${prefix}-[]`, `${property}: ;`], ])} /> ## Examples ### Basic example Use the `scroll-pt-`, `scroll-pr-`, `scroll-pb-`, and `scroll-pl-` utilities like `scroll-pl-4` and `scroll-pt-6` to set the scroll offset of an element within a snap container:
    {
    }     ```html
    ```
    ### Using logical properties Use the `scroll-ps-` and `scroll-pe-` 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:
    { <>

    Left-to-right

    Right-to-left

    }     ```html
    ```
    ### Using negative values To use a negative scroll padding value, prefix the class name with a dash to convert it to a negative value: ```html
    ``` ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/scroll-snap-align.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "scroll-snap-align"; export const description = "Utilities for controlling the scroll snap alignment of an element."; ## Examples ### Snapping to the center Use the `snap-center` utility to snap an element to its center when being scrolled inside a snap container:
    {
    snap point
    }     ```html
    ```
    ### Snapping to the start Use the `snap-start` utility to snap an element to its start when being scrolled inside a snap container:
    {
    snap point
    }     ```html
    ```
    ### Snapping to the end Use the `snap-end` utility to snap an element to its end when being scrolled inside a snap container:
    {
    snap point
    }     ```html
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/scroll-snap-stop.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "scroll-snap-stop"; export const description = "Utilities for controlling whether you can skip past possible snap positions."; ## Examples ### Forcing snap position stops Use the `snap-always` utility together with the [snap-mandatory](/docs/scroll-snap-type#mandatory-scroll-snapping) utility to force a snap container to always stop on an element before the user can continue scrolling to the next item:
    {
    snap point
    }     ```html
    ```
    ### Skipping snap position stops Use the `snap-normal` utility to allow a snap container to skip past possible scroll snap positions:
    {
    snap point
    }     ```html
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/scroll-snap-type.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "scroll-snap-type"; export const description = "Utilities for controlling how strictly snap points are enforced in a snap container."; ## Examples ### Horizontal scroll snapping Use the `snap-x` utility to enable horizontal scroll snapping within an element:
    {
    snap point
    }     ```html
    ```
    For scroll snapping to work, you need to also set the [scroll snap alignment](/docs/scroll-snap-align) 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:
    {
    snap point
    }     ```html
    ```
    ### Proximity scroll snapping Use the `snap-proximity` utility to make a snap container come to rest on snap points that are close in proximity:
    {
    snap point
    }     ```html
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/skew.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "skew"; export const description = "Utilities for skewing elements with transform."; ", "transform: skewX(deg) skewY(deg);"], ["-skew-", "transform: skewX(-deg) skewY(-deg);"], ["skew-()", "transform: skewX(var()) skewY(var());"], ["skew-[]", "transform: skewX() skewY();"], ["skew-x-", "transform: skewX(deg));"], ["-skew-x-", "transform: skewX(-deg));"], ["skew-x-()", "transform: skewX(var());"], ["skew-x-[]", "transform: skewX());"], ["skew-y-", "transform: skewY(deg);"], ["-skew-y-", "transform: skewY(-deg);"], ["skew-y-()", "transform: skewY(var());"], ["skew-y-[]", "transform: skewY();"], ]} /> ## Examples ### Basic example Use `skew-` utilities like `skew-4` and `skew-10` to skew an element on both axes:
    {

    skew-3

    skew-6

    skew-12

    }     ```html ```
    ### Using negative values Use `-skew-` utilities like `-skew-4` and `-skew-10` to skew an element on both axes:
    {

    -skew-3

    -skew-6

    -skew-12

    }     ```html ```
    ### Skewing on the x-axis Use `skew-x-` 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

    }     ```html ```
    ### Skewing on the y-axis Use `skew-y-` 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

    }     ```html ```
    ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/stroke-width.mdx import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "stroke-width"; export const description = "Utilities for styling the stroke width of SVG elements."; ", "stroke-width: ;"], ["stroke-(length:)", "stroke-width: var();"], ["stroke-[]", "stroke-width: ;"], ]} /> ## Examples ### Basic example Use `stroke-` utilities like `stroke-1` and `stroke-2` to set the stroke width of an SVG:
    {
    }     ```html ```
    This can be useful for styling icon sets like [Heroicons](https://heroicons.com). ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/stroke.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; export const title = "stroke"; export const description = "Utilities for styling the stroke of SVG elements."; [ `stroke-${name}`, `stroke: var(--color-${name}); /* ${value} */`, ]), ["stroke-()", "stroke: var();"], ["stroke-[]", "stroke: ;"], ]} /> ## Examples ### Basic example Use utilities like `stroke-indigo-500` and `stroke-lime-600` to change the stroke color of an SVG:
    {
    }     ```html ```
    This can be useful for styling icon sets like [Heroicons](https://heroicons.com). ### Using the current color Use the `stroke-current` utility to set the stroke color to the current text color:
    {
    }     ```html ```
    ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/styling-with-utility-classes.mdx import { Example } from "@/components/example"; import { CodeExampleWrapper, CodeExampleStack } from "@/components/code-example"; import { Iframe } from "@/components/iframe.tsx"; import { Figure } from "@/components/figure"; import { TipGood, TipBad, TipCompat, TipInfo } from "@/components/tips"; import { MultiCursorAnimation, MultiCursorPreview } from "@/components/multi-cursor/animation.tsx"; import { MultiCursorCode } from "@/components/multi-cursor/example.tsx"; import erinLindford from "./img/erin-lindford.jpg"; export const title = "Styling with utility classes"; export const description = "Building complex components from a constrained set of primitive utilities."; ## Overview You style things with Tailwind by combining many single-purpose presentational classes _(utility classes)_ directly in your markup:
    {
    ChitChat

    You have a new message!

    }     ```html
    ChitChat Logo
    ChitChat

    You have a new message!

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

    Erin Lindford

    Product Engineer

    }     ```html

    Erin Lindford

    Product Engineer

    ```
    ## Thinking in utility classes ### Styling hover and focus states To style an element on states like hover or focus, prefix any utility with the state you want to target, for example `hover:bg-sky-700`:
    {
    }     ```html ```
    These prefixes are called [variants](/docs/hover-focus-and-other-states) in Tailwind, and they only apply the styles from a utility class when the condition for that variant matches. Here's what the generated CSS looks like for the `hover:bg-sky-700` class: ```css /* [!code filename: Generated CSS] */ .hover\:bg-sky-700 { &:hover { background-color: var(--color-sky-700); } } ``` Notice how this class does nothing _unless_ the element is hovered? Its _only_ job is to provide hover styles — nothing else. This is different from how you'd write traditional CSS, where a single class would usually provide the styles for many states: ```html /* [!code filename:HTML] */ ``` You can even stack variants in Tailwind to apply a utility when multiple conditions match, like combining `hover:` and `disabled:` ```html ``` Learn more in the documentation styling elements on [hover, focus, and other states](/docs/hover-focus-and-other-states). ### Media queries and breakpoints Just like hover and focus states, you can style elements at different breakpoints by prefixing any utility with the breakpoint where you want that style to apply:
    {
    01
    02
    03
    04
    05
    06
    }     ```html
    ```
    In the example above, the `sm:` prefix makes sure that `grid-cols-3` only triggers at the `sm` breakpoint and above, which is 40rem out of the box: ```css /* [!code filename: Generated CSS] */ .sm\:grid-cols-3 { @media (width >= 40rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } ``` Learn more in the [responsive design](/docs/responsive-design) documentation. ### Targeting dark mode Styling an element in dark mode is just a matter of adding the `dark:` prefix to any utility you want to apply when dark mode is active:
    {

    Light mode

    Writes upside-down

    Dark mode

    Writes upside-down

    }     ```html

    Writes upside-down

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

    ```
    Just like with hover states or media queries, the important thing to understand is that a single utility class will never include _both_ the light and dark styles — you style things in dark mode by using multiple classes, one for the light mode styles and another for the dark mode styles. ```css /* [!code filename: Generated CSS] */ .dark\:bg-gray-800 { @media (prefers-color-scheme: dark) { background-color: var(--color-gray-800); } } ``` Learn more in the [dark mode](/docs/dark-mode) documentation. ### Using class composition A lot of the time with Tailwind you'll even use multiple classes to build up the value for a single CSS property, for example adding multiple filters to an element: ```html
    ``` Both of these effects rely on the `filter` property in CSS, so Tailwind uses CSS variables to make it possible to compose these effects together: ```css /* [!code filename:Generated CSS] */ .blur-sm { --tw-blur: blur(var(--blur-sm)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,); } .grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,); } ``` The generated CSS above is slightly simplified, but the trick here is that each utility sets a CSS variable just for the effect it's meant to apply. Then the `filter` property looks at all of these variables, falling back to nothing if the variable hasn't been set. Tailwind uses this same approach for [gradients](/docs/background-image#adding-a-linear-gradient), [shadow colors](/docs/box-shadow#setting-the-shadow-color), [transforms](/docs/translate), and more. ### Using arbitrary values Many utilities in Tailwind are driven by [theme variables](/docs/theme), like `bg-blue-500`, `text-xl`, and `shadow-md`, which map to your underlying color palette, type scale, and shadows. When you need to use a one-off value outside of your theme, use the special square bracket syntax for specifying arbitrary values: ```html ``` This can be useful for one-off colors outside of your color palette _(like the Facebook blue above)_, but also when you need a complex custom value like a very specific grid: ```html
    ``` It's also useful when you need to use CSS features like `calc()`, even if you are using your theme values: ```html
    ``` There's even a syntax for generating completely arbitrary CSS including an arbitrary property name, which can be useful for setting CSS variables: ```html
    ``` Learn more in the documentation on [using arbitrary values](/docs/adding-custom-styles#using-arbitrary-values). #### How does this even work? Tailwind CSS isn't one big static stylesheet like you might be used to with other CSS frameworks — it generates the CSS needed based on the classes you're actually using when you compile your CSS. It does this by scanning all of the files in your project looking for any symbol that looks like it could be a class name: ```jsx // [!code filename:Button.jsx] // [!code word:px-4] // [!code word:py-2] // [!code word:rounded-md] // [!code word:text-base] // [!code word:px-5] // [!code word:py-3] // [!code word:rounded-lg] // [!code word:text-lg] // [!code word:font-bold] export default function Button({ size, children }) { let sizeClasses = { md: "px-4 py-2 rounded-md text-base", lg: "px-5 py-3 rounded-lg text-lg", }[size]; return ( ); } ``` After it's found all of the potential classes, Tailwind generates the CSS for each one and compiles it all into one stylesheet of just the styles you actually need. Since the CSS is generated based on the class name, Tailwind can recognize classes using arbitrary values like `bg-[#316ff6]` and generate the necessary CSS, even when the value isn't part of your theme. Learn more about how this works in [detecting classes in source files](/docs/detecting-classes-in-source-files). ### Complex selectors Sometimes you need to style an element under a combination of conditions, for example in dark mode, at a specific breakpoint, when hovered, and when the element has a specific data attribute. Here's an example of what that looks like with Tailwind: ```html ``` ```css /* [!code filename:Simplified CSS] */ @media (prefers-color-scheme: dark) and (width >= 64rem) { button[data-current]:hover { background-color: var(--color-indigo-600); } } ``` Tailwind also supports things like `group-hover`, which let you style an element when a specific parent is hovered: ```html Read more… ``` ```css /* [!code filename:Simplified CSS] */ @media (hover: hover) { a:hover span { text-decoration-line: underline; } } ``` This `group-*` syntax works with other variants too, like `group-focus`, `group-active`, and [many more](/docs/hover-focus-and-other-states#styling-based-on-parent-state). For really complex scenarios _(especially when styling HTML you don't control)_, Tailwind supports [arbitrary variants](/docs/adding-custom-styles#arbitrary-variants) which let you write any selector you want, directly in a class name: ```html
    This text will be blue
    ``` ```css /* [!code filename:Simplified CSS] */ div > [data-active] + span { color: var(--color-blue-600); } ```     ### When to use inline styles Inline styles are still very useful in Tailwind CSS projects, particularly when a value is coming from a dynamic source like a database or API: ```jsx // [!code filename:branded-button.jsx] export function BrandedButton({ buttonColor, textColor, children }) { return ( ); } ``` You might also reach for an inline style for very complicated arbitrary values that are difficult to read when formatted as a class name: ```html
    ``` Another useful pattern is setting CSS variables based on dynamic sources using inline styles, then referencing those variables with utility classes: ```jsx // [!code filename:branded-button.jsx] export function BrandedButton({ buttonColor, buttonColorHover, textColor, children }) { return ( ); } ``` ## Managing duplication When you build entire projects with just utility classes, you'll inevitably find yourself repeating certain patterns to recreate the same design in different places. For example, here the utility classes for each avatar image are repeated five separate times:

    Contributors

    204
    ```html

    Contributors

    204
    + 198 others
    ```
    Don't panic! In practice this isn't the problem you might be worried it is, and the strategies for dealing with it are things you already do every day. ### Using loops A lot of the time a design element that shows up more than once in the rendered page is only actually authored once because the actual markup is rendered in a loop. For example, the duplicate avatars at the beginning of this guide would almost certainly be rendered in a loop in a real project:

    Contributors

    204
    ```svelte

    Contributors

    204
    {#each contributors as user} {user.handle} {/each}
    + 198 others
    ```
    When elements are rendered in a loop like this, the actual class list is only written once so there's no actual duplication problem to solve. ### Using multi-cursor editing When duplication is localized to a group of elements in a single file, the easiest way to deal with it is to use [multi-cursor editing](https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor) to quickly select and edit the class list for each element at once:
    You'd be surprised at how often this ends up being the best solution. If you can quickly edit all of the duplicated class lists simultaneously, there's no benefit to introducing any additional abstraction. ### Using components If you need to reuse some styles across multiple files, the best strategy is to create a _component_ if you're using a front-end framework like React, Svelte, or Vue, or a _template partial_ if you're using a templating language like Blade, ERB, Twig, or Nunjucks.
    Beach
    Private Villa
    $299 USD per night
     ```jsx {{ filename: 'VacationCard.jsx' }} export function VacationCard({ img, imgAlt, eyebrow, title, pricing, url }) { return (
    {imgAlt}
    {eyebrow}
    {pricing}
    ); } ```
    Now you can use this component in as many places as you like, while still having a single source of truth for the styles so they can easily be updated together in one place. ### Using custom CSS If you're using a templating language like ERB or Twig instead of something like React or Vue, creating a template partial for something as small as a button can feel like overkill compared to a simple CSS class like `btn`. While it's highly recommended that you create proper template partials for more complex components, writing some custom CSS is totally fine when a template partial feels heavy-handed. Here's what a `btn-primary` class might look like, using [theme variables](/docs/theme#with-custom-css) to keep the design consistent:
    ```html ``` ```css /* [!code filename:CSS] */ @import "tailwindcss"; @layer components { .btn-primary { border-radius: calc(infinity * 1px); background-color: var(--color-violet-500); padding-inline: --spacing(5); padding-block: --spacing(2); font-weight: var(--font-weight-semibold); color: var(--color-white); box-shadow: var(--shadow-md); &:hover { @media (hover: hover) { background-color: var(--color-violet-700); } } } } ```
    Again though, for anything that's more complicated than just a single HTML element, we highly recommend using template partials so the styles and structure can be encapsulated in one place. ## Managing style conflicts ### Conflicting utility classes When you add two classes that target the same CSS property, the class that appears later in the stylesheet wins. So in this example, the element will receive `display: grid` even though `flex` comes last in the actual `class` attribute: ```html
    ``` ```css /* [!code filename: CSS] */ .flex { display: flex; } .grid { display: grid; } ```     In general, you should just never add two conflicting classes to the same element — only ever add the one you actually want to take effect: ```jsx // [!code filename:example.jsx] // [!code word:gridLayout\ \?\ \"grid\"\ \:\ \"flex\"] export function Example({ gridLayout }) { return
    {/* ... */}
    ; } ``` Using component-based libraries like React or Vue, this often means exposing specific props for styling customizations instead of letting consumers add extra classes from outside of a component, since those styles will often conflict. ### Using the important modifier When you really need to force a specific utility class to take effect and have no other means of managing the specificity, you can add `!` to the end of the class name to make all of the declarations `!important`: ```html
    ``` ```css /* [!code filename: Generated CSS] */ /* [!code word:!important] */ .bg-red-500\! { background-color: var(--color-red-500) !important; } .bg-teal-500 { background-color: var(--color-teal-500); } ```     ### Using the important flag If you're adding Tailwind to a project that has existing complex CSS with high specificity rules, you can use the `important` flag when importing Tailwind to mark _all_ utilities as `!important`: ```css /* [!code filename:app.css] */ /* [!code word:important] */ @import "tailwindcss" important; ``` ```css /* [!code filename:Compiled CSS] */ /* [!code word:!important] */ @layer utilities { .flex { display: flex !important; } .gap-4 { gap: 1rem !important; } .underline { text-decoration-line: underline !important; } } ``` ### Using the prefix option If your project has class names that conflict with Tailwind CSS utilities, you can prefix all Tailwind-generated classes and CSS variables using the `prefix` option: ```css /* [!code filename:app.css] */ /* [!code word:important] */ @import "tailwindcss" prefix(tw); ``` ```css /* [!code filename:Compiled CSS] */ /* [!code word:tw\:] */ @layer theme { :root { --tw-color-red-500: oklch(0.637 0.237 25.331); } } @layer utilities { .tw\:text-red-500 { color: var(--tw-color-red-500); } } ``` --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/table-layout.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "table-layout"; export const description = "Utilities for controlling the table layout algorithm."; ## 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
    }     ```html
    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
    ```
    ### 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
    }     ```html
    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
    ```
    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 --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-align.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "text-align"; export const description = "Utilities for controlling the alignment of text."; ## Examples ### Left aligning text Use the `text-left` utility to left align the text of an element:
    {

    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.

    }     ```html

    So I started to walk into the water...

    ```
    ### Right aligning text Use the `text-right` utility to right align the text of an element:
    {

    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.

    }     ```html

    So I started to walk into the water...

    ```
    ### Centering text Use the `text-center` utility to center the text of an element:
    {

    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.

    }     ```html

    So I started to walk into the water...

    ```
    ### Justifying text Use the `text-justify` utility to justify the text of an element:
    {

    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.

    }     ```html

    So I started to walk into the water...

    ```
    ### Using logical properties Use the `text-start` and `text-end` utilities, which use [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts) to map to either the left or right side based on the text direction:
    {

    بدأتُ أسير نحو الماء. لن أكذب عليكم يا رفاق، كنتُ مرعوبًا. لكنني واصلتُ المسير، وبينما كنتُ أشق طريقي عبر الأمواج، غمرني هدوءٌ غريب. لا أعلم إن كان ذلك تدخّلًا إلهيًا أم صلة قرابة بين جميع الكائنات الحية، لكنني أقول لك يا جيري، في تلك اللحظة، كنتُ عالم أحياء بحرية.

    }     ```html

    فبدأت بالسير نحو الماء...

    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-decoration-color.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates, UsingACustomValue, } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; export const title = "text-decoration-color"; export const description = "Utilities for controlling the color of text decorations."; [ `decoration-${name}`, `text-decoration-color: var(--color-${name}); /* ${value} */`, ]), ["decoration-()", "text-decoration-color: var();"], ["decoration-[]", "text-decoration-color: ;"], ]} /> ## Examples ### Basic example Use utilities like `decoration-sky-500` and `decoration-pink-500` to change the [text decoration](/docs/text-decoration-line) color of an element:
    {

    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at{" "} My Company, Inc . Outside of work, I like to{" "} watch pod-racing {" "} and have{" "} light-saber {" "} fights.

    }     ```html

    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

    ```
    ### Changing the opacity Use the color opacity modifier to control the text decoration color opacity of an element:
    {

    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at{" "} My Company, Inc . Outside of work, I like to{" "} watch pod-racing {" "} and have{" "} light-saber {" "} fights.

    }     ```html

    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

    ```
    ### Using a custom value ### Applying on hover
    {
    The{" "} quick brown fox {" "} jumps over the lazy dog.
    }     ```html

    The quick brown fox jumps over the lazy dog.

    ```
    ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-decoration-line.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, TargetingSpecificStates } from "@/components/content.tsx"; export const title = "text-decoration-line"; export const description = "Utilities for controlling the decoration of text."; ## 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.

    }     ```html

    The quick brown fox...

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

    }     ```html

    The quick brown fox...

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

    }     ```html

    The quick brown fox...

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

    }     ```html

    The quick brown fox...

    ```
    ### Applying on hover
    {
    The{" "} quick brown fox {" "} jumps over the lazy dog.
    }     ```html

    The quick brown fox jumps over the lazy dog.

    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-decoration-style.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "text-decoration-style"; export const description = "Utilities for controlling the style of text decorations."; ## Examples ### Basic example Use utilities like `decoration-dotted` and `decoration-dashed` to change the [text decoration](/docs/text-decoration-line) style of an element:
    {
    decoration-solid

    The quick brown fox jumps over the lazy dog.

    decoration-double

    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.

    }     ```html

    The quick brown fox...

    The quick brown fox...

    The quick brown fox...

    The quick brown fox...

    The quick brown fox...

    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-decoration-thickness.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "text-decoration-thickness"; export const description = "Utilities for controlling the thickness of text decorations."; ", "text-decoration-thickness: px;"], ["decoration-from-font", "text-decoration-thickness: from-font;"], ["decoration-auto", "text-decoration-thickness: auto;"], ["decoration-(length:)", "text-decoration-thickness: var();"], ["decoration-[]", "text-decoration-thickness: ;"], ]} /> ## Examples ### Basic example Use `decoration-` utilities like `decoration-2` and `decoration-4` to change the [text decoration](/docs/text-decoration-line) 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.

    }     ```html

    The quick brown fox...

    The quick brown fox...

    The quick brown fox...

    ```
    ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-indent.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "text-indent"; export const description = "Utilities for controlling the amount of empty space shown before text in a block."; ", "text-indent: calc(var(--spacing) * );"], ["-indent-", "text-indent: calc(var(--spacing) * -);"], ["indent-px", "text-indent: 1px;"], ["-indent-px", "text-indent: -1px;"], ["indent-()", "text-indent: var();"], ["indent-[]", "text-indent: ;"], ]} /> ## Examples ### Basic example Use `indent-` 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.

    }     ```html

    So I started to walk into the water...

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

    }     ```html

    So I started to walk into the water...

    ```
    ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-overflow.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import dedent from "dedent"; export const title = "text-overflow"; export const description = "Utilities for controlling how the text of an element overflows."; ## 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.

    }     ```html

    The longest word in any of the major...

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

    }     ```html

    The longest word in any of the major...

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

    }     ```html

    The longest word in any of the major...

    ```
    This is the default browser behavior. ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-shadow.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue, } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; export const title = "text-shadow"; export const description = "Utilities for controlling the shadow of a text element."; )", "text-shadow: var();"], ["text-shadow-(color:)", "--tw-shadow-color var();"], ["text-shadow-[]", "text-shadow: ;"], ["text-shadow-inherit", "--tw-shadow-color inherit;"], ["text-shadow-current", "--tw-shadow-color currentColor;"], ["text-shadow-transparent", "--tw-shadow-color transparent;"], ...Object.entries(colors).map(([name, value]) => [ `text-shadow-${name}`, `--tw-text-shadow-color var(--color-${name}); /* ${value} */`, ]), ]} /> ## 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.

    }     ```html

    The quick brown fox...

    The quick brown fox...

    The quick brown fox...

    The quick brown fox...

    The quick brown fox...

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

    }     ```html

    The quick brown fox...

    The quick brown fox...

    The quick brown fox...

    ```
    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:
    {
    }     ```html ```
    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:
    ```html

    ```
    ### Using a custom value ### Responsive design ## Customizing your theme ### Customizing text shadows ### Customizing shadow colors --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-transform.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "text-transform"; export const description = "Utilities for controlling the capitalization of text."; ## Examples ### Uppercasing text Use the `uppercase` utility to uppercase the text of an element:
    {

    The quick brown fox jumps over the lazy dog.

    }     ```html

    The quick brown fox ...

    ```
    ### Lowercasing text Use the `lowercase` utility to lowercase the text of an element:
    {

    The quick brown fox jumps over the lazy dog.

    }     ```html

    The quick brown fox ...

    ```
    ### Capitalizing text Use the `capitalize` utility to capitalize text of an element:
    {

    The quick brown fox jumps over the lazy dog.

    }     ```html

    The quick brown fox ...

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

    }     ```html

    The quick brown fox ...

    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-underline-offset.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "text-underline-offset"; export const description = "Utilities for controlling the offset of a text underline."; ", "text-underline-offset: px;"], ["-underline-offset-", "text-underline-offset: calc(px * -1);"], ["underline-offset-auto", "text-underline-offset: auto;"], ["underline-offset-()", "text-underline-offset: var();"], ["underline-offset-[]", "text-underline-offset: ;"], ]} /> ## Examples ### Basic example Use `underline-offset-` 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.

    }     ```html

    The quick brown fox...

    The quick brown fox...

    The quick brown fox...

    The quick brown fox...

    ```
    ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-wrap.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "text-wrap"; export const description = "Utilities for controlling how text wraps within an element."; ## 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.

    }     ```html

    Beloved Manhattan soup stand closes

    New Yorkers are facing the winter chill...

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

    }     ```html

    Beloved Manhattan soup stand closes

    New Yorkers are facing the winter chill...

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

    }     ```html

    Beloved Manhattan soup stand closes

    New Yorkers are facing the winter chill...

    ```
    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 prefer better text wrapping and layout at the expense of speed. Behavior varies across browsers but often involves approaches like preventing 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.

    }     ```html

    Beloved Manhattan soup stand closes

    New Yorkers are facing the winter chill...

    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/theme.mdx import { CodeExampleStack } from "@/components/code-example"; import { TipGood, TipBad, TipInfo } from "@/components/tips"; import { Iframe } from "@/components/iframe"; import { Example } from "@/components/example"; import { Figure } from "@/components/figure"; export const title = "Theme variables"; export const description = "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`: ```css /* [!code filename:app.css] */ @import "tailwindcss"; /* [!code highlight:4] */ @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
    ``` Tailwind also generates regular CSS variables for your theme variables so you can reference your design tokens in arbitrary values or inline styles: ```html
    ``` Learn more about how theme variables map to different utility classes in the [theme variable namespaces](#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: ```css /* [!code filename:./node_modules/tailwindcss/theme.css] */ @theme { /* [!code highlight:4] */ /* prettier-ignore */ --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; /* prettier-ignore */ --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: ```css /* [!code filename:app.css] */ @import "tailwindcss"; @theme { /* [!code highlight:2] */ --font-poppins: Poppins, sans-serif; } ``` ```html

    This headline will use Poppins.

    ``` 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: ```css /* [!code filename:app.css] */ @import "tailwindcss"; @theme { /* [!code highlight:2] */ --breakpoint-3xl: 120rem; } ``` Now you can use the `3xl:*` variant to only trigger a utility when the viewport is 120rem or wider: ```html
    ``` Learn more about how theme variables map to different utility classes and variants in the [theme variable namespaces](#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-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`: ```css /* [!code filename:node_modules/tailwindcss/index.css] */ @layer theme, base, components, utilities; /* [!code highlight:2] */ @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: ```css /* [!code filename:node_modules/tailwindcss/theme.css] */ @theme { /* prettier-ignore */ --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](#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: ```css /* [!code filename:app.css] */ @import "tailwindcss"; @theme { /* [!code highlight:2] */ --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

    This will use the Great Vibes font family.

    ``` Learn more about how theme variables map to different utility classes and variants in the [theme variable namespaces](#theme-variable-namespaces) documentation. ### Overriding the default theme Override a default theme variable value by redefining it within `@theme`: ```css /* [!code filename:app.css] */ @import "tailwindcss"; @theme { /* [!code highlight:2] */ --breakpoint-sm: 30rem; } ``` Now the `sm:*` variant will trigger at 30rem instead of the default 40rem viewport size: ```html
    ``` To completely override an entire namespace in the default theme, set the entire namespace to `initial` using the special asterisk syntax: ```css /* [!code filename:app.css] */ @import "tailwindcss"; @theme { /* [!code highlight:2] */ --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](#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`: ```css /* [!code filename:app.css] */ @import "tailwindcss"; @theme { /* [!code highlight:2] */ --*: 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: ```css /* [!code filename: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: ```css /* [!code filename:app.css] */ @import "tailwindcss"; /* [!code word:inline] */ @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: ```css /* [!code filename: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
    This text will use the sans-serif font, not Inter.
    ``` 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: ```css /* [!code filename:app.css] */ /* [!code word:static] */ @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: ```css /* [!code filename:./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: ```css /* [!code filename:./packages/admin/app.css] */ @import "tailwindcss"; /* [!code highlight:2] */ @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: ```css /* [!code filename:dist.css] */ :root { /* prettier-ignore */ --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: ```css /* [!code filename:app.css] */ /* [!code word:var(--text-base)] */ /* [!code word:var(--color-gray-700)] */ /* [!code word:var(--text-2xl)] */ /* [!code word:var(--font-weight-semibold)] */ /* [!code word:var(--color-gray-950)] */ /* [!code word:var(--text-xl)] */ @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
    ``` 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](https://motion.dev/docs/react-quick-start) library for React lets you animate to and from CSS variable values: ```jsx // [!code filename:JSX] // [!code word: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: ```js // [!code filename: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: ```css /* [!code filename:tailwindcss/theme.css] */ @theme { /* prettier-ignore */ --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(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-red-950: oklch(25.8% 0.092 26.042); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.195 38.402); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); --color-orange-950: oklch(26.6% 0.079 36.259); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904); --color-amber-950: oklch(27.9% 0.077 45.635); --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-300: oklch(90.5% 0.182 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-700: oklch(55.4% 0.135 66.442); --color-yellow-800: oklch(47.6% 0.114 61.907); --color-yellow-900: oklch(42.1% 0.095 57.708); --color-yellow-950: oklch(28.6% 0.066 53.813); --color-lime-50: oklch(98.6% 0.031 120.757); --color-lime-100: oklch(96.7% 0.067 122.328); --color-lime-200: oklch(93.8% 0.127 124.321); --color-lime-300: oklch(89.7% 0.196 126.665); --color-lime-400: oklch(84.1% 0.238 128.85); --color-lime-500: oklch(76.8% 0.233 130.85); --color-lime-600: oklch(64.8% 0.2 131.684); --color-lime-700: oklch(53.2% 0.157 131.589); --color-lime-800: oklch(45.3% 0.124 130.933); --color-lime-900: oklch(40.5% 0.101 131.063); --color-lime-950: oklch(27.4% 0.072 132.109); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328); --color-green-900: oklch(39.3% 0.095 152.535); --color-green-950: oklch(26.6% 0.065 152.934); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-emerald-900: oklch(37.8% 0.077 168.94); --color-emerald-950: oklch(26.2% 0.051 172.552); --color-teal-50: oklch(98.4% 0.014 180.72); --color-teal-100: oklch(95.3% 0.051 180.801); --color-teal-200: oklch(91% 0.096 180.426); --color-teal-300: oklch(85.5% 0.138 181.071); --color-teal-400: oklch(77.7% 0.152 181.912); --color-teal-500: oklch(70.4% 0.14 182.503); --color-teal-600: oklch(60% 0.118 184.704); --color-teal-700: oklch(51.1% 0.096 186.391); --color-teal-800: oklch(43.7% 0.078 188.216); --color-teal-900: oklch(38.6% 0.063 188.416); --color-teal-950: oklch(27.7% 0.046 192.524); --color-cyan-50: oklch(98.4% 0.019 200.873); --color-cyan-100: oklch(95.6% 0.045 203.388); --color-cyan-200: oklch(91.7% 0.08 205.041); --color-cyan-300: oklch(86.5% 0.127 207.078); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-cyan-500: oklch(71.5% 0.143 215.221); --color-cyan-600: oklch(60.9% 0.126 221.723); --color-cyan-700: oklch(52% 0.105 223.128); --color-cyan-800: oklch(45% 0.085 224.283); --color-cyan-900: oklch(39.8% 0.07 227.392); --color-cyan-950: oklch(30.2% 0.056 229.695); --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-sky-700: oklch(50% 0.134 242.749); --color-sky-800: oklch(44.3% 0.11 240.79); --color-sky-900: oklch(39.1% 0.09 240.876); --color-sky-950: oklch(29.3% 0.066 243.157); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-200: oklch(87% 0.065 274.039); --color-indigo-300: oklch(78.5% 0.115 274.713); --color-indigo-400: oklch(67.3% 0.182 276.935); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-indigo-800: oklch(39.8% 0.195 277.366); --color-indigo-900: oklch(35.9% 0.144 278.697); --color-indigo-950: oklch(25.7% 0.09 281.288); --color-violet-50: oklch(96.9% 0.016 293.756); --color-violet-100: oklch(94.3% 0.029 294.588); --color-violet-200: oklch(89.4% 0.057 293.283); --color-violet-300: oklch(81.1% 0.111 293.571); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-violet-600: oklch(54.1% 0.281 293.009); --color-violet-700: oklch(49.1% 0.27 292.581); --color-violet-800: oklch(43.2% 0.232 292.759); --color-violet-900: oklch(38% 0.189 293.745); --color-violet-950: oklch(28.3% 0.141 291.089); --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.265 301.924); --color-purple-800: oklch(43.8% 0.218 303.724); --color-purple-900: oklch(38.1% 0.176 304.987); --color-purple-950: oklch(29.1% 0.149 302.717); --color-fuchsia-50: oklch(97.7% 0.017 320.058); --color-fuchsia-100: oklch(95.2% 0.037 318.852); --color-fuchsia-200: oklch(90.3% 0.076 319.62); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-400: oklch(74% 0.238 322.16); --color-fuchsia-500: oklch(66.7% 0.295 322.15); --color-fuchsia-600: oklch(59.1% 0.293 322.896); --color-fuchsia-700: oklch(51.8% 0.253 323.949); --color-fuchsia-800: oklch(45.2% 0.211 324.591); --color-fuchsia-900: oklch(40.1% 0.17 325.612); --color-fuchsia-950: oklch(29.3% 0.136 325.661); --color-pink-50: oklch(97.1% 0.014 343.198); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-200: oklch(89.9% 0.061 343.231); --color-pink-300: oklch(82.3% 0.12 346.018); --color-pink-400: oklch(71.8% 0.202 349.761); --color-pink-500: oklch(65.6% 0.241 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-pink-700: oklch(52.5% 0.223 3.958); --color-pink-800: oklch(45.9% 0.187 3.815); --color-pink-900: oklch(40.8% 0.153 2.432); --color-pink-950: oklch(28.4% 0.109 3.907); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-200: oklch(89.2% 0.058 10.001); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.222 16.935); --color-rose-800: oklch(45.5% 0.188 13.697); --color-rose-900: oklch(41% 0.159 10.272); --color-rose-950: oklch(27.1% 0.105 12.094); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-gray-950: oklch(13% 0.028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-200: oklch(92% 0.004 286.32); --color-zinc-300: oklch(87.1% 0.006 286.286); --color-zinc-400: oklch(70.5% 0.015 286.067); --color-zinc-500: oklch(55.2% 0.016 285.938); --color-zinc-600: oklch(44.2% 0.017 285.786); --color-zinc-700: oklch(37% 0.013 285.805); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% 0.001 106.423); --color-stone-100: oklch(97% 0.001 106.424); --color-stone-200: oklch(92.3% 0.003 48.717); --color-stone-300: oklch(86.9% 0.005 56.366); --color-stone-400: oklch(70.9% 0.01 56.259); --color-stone-500: oklch(55.3% 0.013 58.071); --color-stone-600: oklch(44.4% 0.011 73.639); --color-stone-700: oklch(37.4% 0.01 67.558); --color-stone-800: oklch(26.8% 0.007 34.298); --color-stone-900: oklch(21.6% 0.006 56.043); --color-stone-950: oklch(14.7% 0.004 49.25); --color-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); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2); --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: 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: 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); --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); } } } ``` --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/top-right-bottom-left.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { CustomizingYourSpacingScale } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx"; export const title = "top / right / bottom / left"; export const description = "Utilities for controlling the placement of positioned elements."; [ ["", "calc(var(--spacing) * )"], ["", "calc(var(--spacing) * -)", true], ["", "calc( * 100%)"], ["", "calc( * -100%)", true], ["px", "1px"], ["px", "-1px", true], ["full", "100%"], ["full", "-100%", true], ["auto", "auto"], ["()", "var()"], ["[]", ""], ].map(([suffix, value, negative]) => [`${negative ? "-" : ""}${prefix}-${suffix}`, `${property}: ${value};`]), )} /> ## Examples ### Basic example Use `top-`, `right-`, `bottom-`, `left-`, and `inset-` utilities like `top-0` and `bottom-4` to set the horizontal or vertical position of a [positioned element](/docs/position):
    {
    01
    02
    03
    04
    05
    06
    07
    08
    09
    }     ```html
    01
    02
    03
    04
    05
    06
    07
    08
    09
    ```
    ### 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:
    {
    }     ```html
    ```
    ### Using logical properties Use `start-` or `end-` utilities like `start-0` and `end-4` to set the `inset-inline-start` and `inset-inline-end` [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right side based on the text direction:
    {

    Left-to-right

    Right-to-left

    }     ```html
    ```
    For more control, you can also use the [LTR and RTL modifiers](/docs/hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction. ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/touch-action.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "touch-action"; export const description = "Utilities for controlling how an element can be scrolled and zoomed on touchscreens."; ## 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:
    {

    touch-auto

    touch-none

    touch-pan-x

    touch-pan-y

    }     ```html
    ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/transform-origin.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "transform-origin"; export const description = "Utilities for specifying the origin for an element's transformations."; )", "transform-origin: var();"], ["origin-[]", "transform-origin: ;"], ]} /> ## 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

    }     ```html ```
    ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/transform-style.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "transform-style"; export const description = "Utilities for controlling if an elements children are placed in 3D space."; ## 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
    }     ```html
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    ```
    Without this, any children will only be transformed in 2D space and not in 3D space. ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/transform.mdx import { ApiTable } from "@/components/api-table.tsx"; import { UsingACustomValue } from "@/components/content.tsx"; export const title = "transform"; export const description = "Utilities for transforming elements."; )", "transform: var();"], ["transform-[]", "transform: ;"], ["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: ```html
    ``` 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: ```html
    ``` ### Using a custom value --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/transition-behavior.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "transition-behavior"; export const description = "Utilities to control the behavior of CSS transitions."; ## 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`:
    {
    }     ```html ```
    ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/transition-delay.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "transition-delay"; export const description = "Utilities for controlling the delay of CSS transitions."; ", "transition-delay: ms;"], ["delay-()", "transition-delay: var();"], ["delay-[]", "transition-delay: ;"], ]} /> ## Examples ### Basic example Use utilities like `delay-150` and `delay-700` to set the transition delay of an element in milliseconds:
    {

    delay-150

    delay-300

    delay-700

    }     ```html ```
    ### 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: ```html ``` ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/transition-duration.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "transition-duration"; export const description = "Utilities for controlling the duration of CSS transitions."; ", "transition-duration: ms;"], ["duration-initial", "transition-duration: initial;"], ["duration-()", "transition-duration: var();"], ["duration-[]", "transition-duration: ;"], ]} /> ## Examples ### Basic example Use utilities like `duration-150` and `duration-700` to set the transition duration of an element in milliseconds:
    {

    duration-150

    duration-300

    duration-700

    }     ```html ```
    ### 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: ```html ``` ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/transition-property.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import dedent from "dedent"; export const title = "transition-property"; export const description = "Utilities for controlling which CSS properties transition."; )", dedent` transition-property: var(); transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ `, ], [ "transition-[]", dedent` transition-property: ; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ `, ], ]} /> ## Examples ### Basic example Use utilities like `transition` and `transition-colors` to specify which properties should transition when they change:
    {
    }     {/* prettier-ignore */} ```html ```
    ### 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: ```html ``` ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/transition-timing-function.mdx import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "transition-timing-function"; export const description = "Utilities for controlling the easing of CSS transitions."; )", "transition-timing-function: var();"], ["ease-[]", "transition-timing-function: ;"], ]} /> ## Examples ### Basic example Use utilities like `ease-in` and `ease-out` to control the easing curve of an element's transition:
    {

    ease-in

    ease-out

    ease-in-out

    }     ```html ```
    ### Using a custom value ### Responsive design ## Customizing your theme --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/translate.mdx import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "translate"; export const description = "Utilities for translating elements."; { const css = (value) => ["translate:", x ? value : "var(--tw-translate-x)", y ? value : "var(--tw-translate-y)"].join(" ").concat(";"); return [ [`${prefix}-`, css("calc(var(--spacing) * )")], [`-${prefix}-`, css("calc(var(--spacing) * -)")], [`${prefix}-`, css("calc( * 100%)")], [`-${prefix}-`, css("calc( * -100%)")], [`${prefix}-full`, css("100%")], [`-${prefix}-full`, css("-100%")], [`${prefix}-px`, css("1px")], [`-${prefix}-px`, css("-1px")], [`${prefix}-()`, css("var()")], [`${prefix}-[]`, css("")], ]; }), [`translate-z-`, `translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * );`], [ `-translate-z-`, `translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * -);`, ], [`translate-z-px`, `translate: var(--tw-translate-x) var(--tw-translate-y) 1px;`], [`-translate-z-px`, `translate: var(--tw-translate-x) var(--tw-translate-y) -1px;`], [ `translate-z-()`, `translate: var(--tw-translate-x) var(--tw-translate-y) var();`, ], [`translate-z-[]`, `translate: var(--tw-translate-x) var(--tw-translate-y) ;`], ["translate-none", "translate: none;"], ]} /> ## Examples ### Using the spacing scale Use `translate-` 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

    }     ```html ```
    ### Using a percentage Use `translate-` 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

    }     ```html ```
    ### Translating on the x-axis Use `translate-x-` or `translate-x-` 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

    }     ```html ```
    ### Translating on the y-axis Use `translate-y-` or `translate-y-` 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

    }     ```html ```
    ### Translating on the z-axis Use `translate-z-` 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

    }     ```html
    ```
    Note that the `translate-z-` utilities require the `transform-3d` utility to be applied to the parent element. ### Using a custom value ### Responsive design --- # Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/upgrade-guide.mdx export const title = "Upgrade guide"; export const description = "Upgrading your Tailwind CSS projects from v3 to v4."; Tailwind CSS v4.0 is a new major version of the framework, so while we've worked really hard to minimize breaking changes, some updates are necessary. This guide outlines all the steps required to upgrade your projects from v3 to v4. **Tailwind CSS v4.0 is designed for Safari 16.4+, Chrome 111+, and Firefox 128+.** If you need to support older browsers, stick with v3.4 until your browser support requirements change. ## Using the upgrade tool If you'd like to upgrade a project from v3 to v4, you can use our upgrade tool to do the vast majority of the heavy lifting for you: ```sh # [!code filename:Terminal] $ npx @tailwindcss/upgrade ``` For most projects, the upgrade tool will automate the entire migration process including updating your dependencies, migrating your configuration file to CSS, and handling any changes to your template files. The upgrade tool requires Node.js 20 or higher, so ensure your environment is updated before running it. **We recommend running the upgrade tool in a new branch**, then carefully reviewing the diff and testing your project in the browser to make sure all of the changes look correct. You may need to tweak a few things by hand in complex projects, but the tool will save you a ton of time either way. It's also a good idea to go over all of the [breaking changes](#changes-from-v3) in v4 and get a good understanding of what's changed, in case there are other things you need to update in your project that the upgrade tool doesn't catch. ## Upgrading manually ### Using PostCSS In v3, the `tailwindcss` package was a PostCSS plugin, but in v4 the PostCSS plugin lives in a dedicated `@tailwindcss/postcss` package. Additionally, in v4 imports and vendor prefixing is now handled for you automatically, so you can remove `postcss-import` and `autoprefixer` if they are in your project: ```js // [!code filename:postcss.config.mjs] export default { plugins: { // [!code --:4] "postcss-import": {}, tailwindcss: {}, autoprefixer: {}, // [!code ++:2] "@tailwindcss/postcss": {}, }, }; ``` ### Using Vite If you're using Vite, we recommend migrating from the PostCSS plugin to our new dedicated Vite plugin for improved performance and the best developer experience: ```ts // [!code filename:vite.config.ts] import { defineConfig } from "vite"; // [!code highlight:2] import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ plugins: [ // [!code highlight:2] tailwindcss(), ], }); ``` ### Using Tailwind CLI In v4, Tailwind CLI lives in a dedicated `@tailwindcss/cli` package. Update any of your build commands to use the new package instead: ```sh /* [!code filename:Terminal] */ # [!code --:2] npx tailwindcss -i input.css -o output.css # [!code ++:2] npx @tailwindcss/cli -i input.css -o output.css ``` ## Changes from v3 Here's a comprehensive list of all the breaking changes in Tailwind CSS v4.0. Our [upgrade tool](#using-the-upgrade-tool) will handle most of these changes for you automatically, so we highly recommend using it if you can. ### Browser requirements Tailwind CSS v4.0 is designed for modern browsers and targets Safari 16.4, Chrome 111, and Firefox 128. We depend on modern CSS features like `@property` and `color-mix()` for core framework features, and Tailwind CSS v4.0 will not work in older browsers. If you need to support older browsers, we recommend sticking with v3.4 for now. We're actively exploring a compatibility mode to help people upgrade sooner that we hope to share more news on in the future. ### Removed @tailwind directives In v4 you import Tailwind using a regular CSS `@import` statement, not using the `@tailwind` directives you used in v3: ```css /* [!code filename:CSS] */ /* [!code --:4] */ @tailwind base; @tailwind components; @tailwind utilities; /* [!code ++:2] */ @import "tailwindcss"; ``` ### Removed deprecated utilities We've removed any utilities that were deprecated in v3 and have been undocumented for several years. Here's a list of what's been removed along with the modern alternative: {
    Deprecated Replacement
    bg-opacity-* Use opacity modifiers like bg-black/50
    text-opacity-* Use opacity modifiers like text-black/50
    border-opacity-* Use opacity modifiers like border-black/50
    divide-opacity-* Use opacity modifiers like divide-black/50
    ring-opacity-* Use opacity modifiers like ring-black/50
    placeholder-opacity-* Use opacity modifiers like placeholder-black/50
    flex-shrink-* shrink-*
    flex-grow-* grow-*
    overflow-ellipsis text-ellipsis
    decoration-slice box-decoration-slice
    decoration-clone box-decoration-clone
    } ### Renamed utilities We've renamed the following utilities in v4 to make them more consistent and predictable: {
    v3 v4
    shadow-sm shadow-xs
    shadow shadow-sm
    drop-shadow-sm drop-shadow-xs
    drop-shadow drop-shadow-sm
    blur-sm blur-xs
    blur blur-sm
    backdrop-blur-sm backdrop-blur-xs
    backdrop-blur backdrop-blur-sm
    rounded-sm rounded-xs
    rounded rounded-sm
    outline-none outline-hidden
    ring ring-3
    } #### Updated shadow, radius, and blur scales We've renamed the default shadow, radius and blur scales to make sure every utility has a named value. The "bare" versions still work for backward compatibility, but the {''}-sm utilities will look different unless updated to their respective {''}-xs versions. To update your project for these changes, replace all the v3 utilities with their v4 versions: ```html ``` #### Renamed outline utility The `outline` utility now sets `outline-width: 1px` by default to be more consistent with border and ring utilities. Furthermore all `outline-` utilities default `outline-style` to `solid`, omitting the need to combine them with `outline`: ```html ``` The `outline-none` utility previously didn't actually set `outline-style: none`, and instead set an invisible outline that would still show up in forced colors mode for accessibility reasons. To make this more clear we've renamed this utility to `outline-hidden` and added a new `outline-none` utility that actually sets `outline-style: none`. To update your project for this change, replace any usage of `outline-none` with `outline-hidden`: ```html ``` #### Default ring width change In v3, the `ring` utility added a `3px` ring. We've changed this in v4 to be `1px` to make it consistent with borders and outlines. To update your project for this change, replace any usage of `ring` with `ring-3`: ```html ``` ### Space-between selector We've changed the selector used by the [`space-x-*` and `space-y-*` utilities](/docs/margin#adding-space-between-children) to address serious performance issues on large pages: ```css /* [!code filename:CSS] */ /* Before */ .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; } /* Now */ .space-y-4 > :not(:last-child) { margin-bottom: 1rem; } ``` You might see changes in your project if you were ever using these utilities with inline elements, or if you were adding other margins to child elements to tweak their spacing. If this change causes any issues in your project, we recommend migrating to a flex or grid layout and using `gap` instead: {/* prettier-ignore */} ```html
    ``` ### Divide selector We've changed the selector used by the [`divide-x-*` and `divide-y-*` utilities](/docs/border-width#between-children) to address serious performance issues on large pages: ```css /* [!code filename:CSS] */ /* Before */ .divide-y-4 > :not([hidden]) ~ :not([hidden]) { border-top-width: 4px; } /* Now */ .divide-y-4 > :not(:last-child) { border-bottom-width: 4px; } ``` You might see changes in your project if you were ever using these utilities with inline elements, if you were adding other margins/padding to child elements to tweak their spacing, or adjusting the borders of specific child elements. ### Using variants with gradients In v3, overriding part of a gradient with a variant would "reset" the entire gradient, so in this example the `to-*` color would be transparent in dark mode instead of yellow: ```html
    ``` In v4, these values are preserved which is more consistent with how other utilities in Tailwind work. This means you may need to explicitly use `via-none` if you want to "unset" a three-stop gradient back to a two-stop gradient in a specific state: ```html
    ``` ### Container configuration In v3, the `container` utility had several configuration options like `center` and `padding` that no longer exist in v4. To customize the `container` utility in v4, extend it using the `@utility` directive: ```css /* [!code filename:CSS] */ @utility container { margin-inline: auto; padding-inline: 2rem; } ``` ### Default border color In v3, the `border-*` and `divide-*` utilities used your configured `gray-200` color by default. We've changed this to `currentColor` in v4 to make Tailwind less opinionated and match browser defaults. To update your project for this change, make sure you specify a color anywhere you're using a `border-*` or `divide-*` utility: ```html
    ``` Alternatively, add these base styles to your project to preserve the v3 behavior: ```css /* [!code filename:CSS] */ @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentColor); } } ``` ### Default ring width and color We've changed the width of the `ring` utility from 3px to 1px and changed the default color from `blue-500` to `currentColor` to make things more consistent the `border-*`, `divide-*`, and `outline-*` utilities. To update your project for these changes, replace any use of `ring` with `ring-3`: ```html ``` Then make sure to add `ring-blue-500` anywhere you were depending on the default ring color: ```html ``` Alternatively, add these theme variables to your CSS to preserve the v3 behavior: ```css /* [!code filename:CSS] */ @theme { --default-ring-width: 3px; --default-ring-color: var(--color-blue-500); } ``` Note though that these variables are only supported for compatibility reasons, and are not considered idiomatic usage of Tailwind CSS v4.0. ### Preflight changes We've made a couple small changes to the base styles in Preflight in v4: #### New default placeholder color In v3, placeholder text used your configured `gray-400` color by default. We've simplified this in v4 to just use the current text color at 50% opacity. You probably won't even notice this change (it might even make your project look better), but if you want to preserve the v3 behavior, add this CSS to your project: ```css /* [!code filename:CSS] */ @layer base { input::placeholder, textarea::placeholder { color: var(--color-gray-400); } } ``` #### Buttons use the default cursor Buttons now use `cursor: default` instead of `cursor: pointer` to match the default browser behavior. If you'd like to continue using `cursor: pointer` by default, add these base styles to your CSS: ```css /* [!code filename:CSS] */ @layer base { button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; } } ``` #### Dialog margins removed Preflight now resets margins on `` elements to be consistent with how other elements are reset. If you still want dialogs to be centered by default, add this CSS to your project: ```css /* [!code filename:CSS] */ @layer base { dialog { margin: auto; } } ``` #### Hidden attribute takes priority Display classes like `block` or `flex` no longer take priority over the `hidden` attribute on an element. Remove the `hidden` attribute if you want an element to be visible to the user. Note that this does not apply to `hidden="until-found"`. ### Using a prefix Prefixes now look like variants and are always at the beginning of the class name: ```html
    ``` When using a prefix, you should still configure your theme variables as if you aren't using a prefix: ```css {{ filename: "app.css" }} @import "tailwindcss" prefix(tw); @theme { --font-display: "Satoshi", "sans-serif"; --breakpoint-3xl: 120rem; --color-avocado-100: oklch(0.99 0 0); --color-avocado-200: oklch(0.98 0.04 113.22); --color-avocado-300: oklch(0.94 0.11 115.03); /* ... */ } ``` The generated CSS variables _will_ include a prefix to avoid conflicts with any existing variables in your project: ```css {{ filename: "dist.css" }} :root { --tw-font-display: "Satoshi", "sans-serif"; --tw-breakpoint-3xl: 120rem; --tw-color-avocado-100: oklch(0.99 0 0); --tw-color-avocado-200: oklch(0.98 0.04 113.22); --tw-color-avocado-300: oklch(0.94 0.11 115.03); /* ... */ } ``` ### The important modifier In v3 you could mark a utility as important by placing an `!` at the beginning of the utility name (but after any variants). In v4 you should place the `!` at the very end of the class name instead: ```html
    ``` The old way is still supported for compatibility but is deprecated. ### Adding custom utilities In v3, any custom classes you defined within `@layer utilities` or `@layer components` would get picked up by Tailwind as a true utility class and would automatically work with variants like `hover`, `focus`, or `lg` with the difference being that `@layer components` would always come first in the generated stylesheet. In v4 we are using native cascade layers and no longer hijacking the `@layer` at-rule, so we've introduced the `@utility` API as a replacement: ```css /* [!code filename:CSS] */ /* [!code --:6] */ @layer utilities { .tab-4 { tab-size: 4; } } /* [!code ++:4] */ @utility tab-4 { tab-size: 4; } ``` Custom utilities are now also sorted based on the amount of properties they define. This means that component utilities like this `.btn` can be overwritten by other Tailwind utilities without additional configuration: ```css /* [!code filename:CSS] */ /* [!code --:8] */ @layer components { .btn { border-radius: 0.5rem; padding: 0.5rem 1rem; background-color: ButtonFace; } } /* [!code ++:6] */ @utility btn { border-radius: 0.5rem; padding: 0.5rem 1rem; background-color: ButtonFace; } ``` Learn more about registering custom utilities in the [adding custom utilities documentation](/docs/adding-custom-styles#adding-custom-utilities). ### Variant stacking order In v3, stacked variants were applied from right to left, but in v4 we've updated them to apply left to right to look more like CSS syntax. To update your project for this change, reverse the order of any order-sensitive stacked variants in your project: ```html
      • One
      • Two
      • Three
      ``` You likely have very few of these if any—the direct child variant (`*`) and any typography plugin variants (`prose-headings`) are the most likely ones you might be using, and even then it's only if you've stacked them with other variants. ### Variables in arbitrary values In v3 you were able to use CSS variables as arbitrary values without `var()`, but recent updates to CSS mean that this can often be ambiguous, so we've changed the syntax for this in v4 to use parentheses instead of square brackets. To update your project for this change, replace usage of the old variable shorthand syntax with the new variable shorthand syntax: ```html
      ``` ### Arbitrary values in grid and object-position utilities Commas were previously replaced with spaces in the `grid-cols-*`, `grid-rows-*`, and `object-*` utilities inside arbitrary values. This special behavior existed in Tailwind CSS v3 for compatibility with v2. This compatibility no longer exists in v4.0 and underscores must be used to represent spaces. To update your project for this change, replace usage of commas that were intended to be spaces with underscores: ```html
      ``` ### Hover styles on mobile In v4 we've updated the `hover` variant to only apply when the primary input device supports hover: ```css /* [!code filename:CSS] */ @media (hover: hover) { .hover\:underline:hover { text-decoration: underline; } } ``` This can create problems if you've built your site in a way that depends on touch devices triggering hover on tap. If this is an issue for you, you can override the `hover` variant with your own variant that uses the old implementation: ```css /* [!code filename:CSS] */ @custom-variant hover (&:hover); ``` Generally though we recommend treating hover functionality as an enhancement, and not depending on it for your site to work since touch devices don't truly have the ability to hover. ### Transitioning outline-color The `transition` and `transition-colors` utilities now include the `outline-color` property. This means if you were adding an outline with a custom color on focus, you will see the color transition from the default color. To avoid this, make sure you set the outline color unconditionally, or explicitly set it for both states: ```html ``` ### Individual transform properties The `rotate-*`, `scale-*`, and `translate-*` utilities are now based on the individual `rotate`, `scale`, and `translate` properties in CSS. Normally this shouldn't affect the behavior but there's a couple of cases to look out for: #### Resetting Transforms You previously would've been able to "reset" your rotate, scale, and translate utilities via `transform-none`. This no longer works and you will need to reset the individual properties instead: ```html ``` #### Transitions If you customize the list of transitioned properties and include `transform` (e.g. by writing `transition-[opacity,transform]`) then these utilities will no longer transition. To fix this, include the individual properties in the list. For example, if you want to transition changes when using `opacity-*` and `scale-*` utilities you should use `transition-[opacity,scale]` instead. ```html ``` ### Disabling core plugins In v3 there was a `corePlugins` option you could use to completely disable certain utilities in the framework. This is no longer supported in v4. ### Using the theme() function Since v4 includes CSS variables for all of your theme values, we recommend using those variables instead of the `theme()` function whenever possible: ```css /* [!code filename:CSS] */ .my-class { /* [!code --:2] */ background-color: theme(colors.red.500); /* [!code ++:2] */ background-color: var(--color-red-500); } ``` For cases where you still need to use the `theme()` function (like in media queries where CSS variables aren't supported), you should use the CSS variable name instead of the old dot notation: ```css /* [!code filename:CSS] */ @media (width >= theme(screens.xl)) { /* [!code --] */ @media (width >= theme(--breakpoint-xl)) { /* [!code ++] */ /* ... */ } ``` ### Using a JavaScript config file JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4. If you still need to use a JavaScript config file, you can load it explicitly using the `@config` directive: ```css /* [!code filename:CSS] */ @config "../../tailwind.config.js"; ``` The `corePlugins`, `safelist`, and `separator` options from the JavaScript-based config are not supported in v4.0. To safelist utilities in v4 use [`@source inline()`](/docs/detecting-classes-in-source-files#safelisting-specific-utilities). ### Theme values in JavaScript In v3 we exported a `resolveConfig` function that you could use to turn your JavaScript-based config into a flat object that you could use in your other JavaScript. We've removed this in v4 in hopes that people can use the CSS variables we generate directly instead, which is much simpler and will significantly reduce your bundle size. For example, the popular [Motion](https://motion.dev/docs/react-quick-start) library for React lets you animate to and from CSS variable values: ```jsx // [!code filename:JSX] // [!code word: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: ```js // [!code filename:spaghetti.js] let styles = getComputedStyle(document.documentElement); let shadow = styles.getPropertyValue("--shadow-xl"); ``` ### Using @apply with Vue, Svelte, or CSS modules In v4, stylesheets that are bundled separately from your main CSS file (e.g. CSS modules files, ` ``` Alternatively, you can use your CSS theme variables directly instead of using `@apply` at all, which will also improve performance since Tailwind won't need to process these styles: ```html ``` You can find more documentation on [using Tailwind with CSS modules](/docs/compatibility#css-modules). ### Using Sass, Less, and Stylus Tailwind CSS v4.0 is not designed to be used with CSS preprocessors like Sass, Less, or Stylus. Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus. Because of this it is not possible to use Sass, Less, or Stylus for your stylesheets or `