Tailwind 4.1 docs llms.txt

llms.txt

Directory Structure:

└── ./
    └── src
        └── docs
            ├── accent-color.mdx
            ├── adding-custom-styles.mdx
            ├── align-content.mdx
            ├── align-items.mdx
            ├── align-self.mdx
            ├── animation.mdx
            ├── appearance.mdx
            ├── aspect-ratio.mdx
            ├── backdrop-filter-blur.mdx
            ├── backdrop-filter-brightness.mdx
            ├── backdrop-filter-contrast.mdx
            ├── backdrop-filter-grayscale.mdx
            ├── backdrop-filter-hue-rotate.mdx
            ├── backdrop-filter-invert.mdx
            ├── backdrop-filter-opacity.mdx
            ├── backdrop-filter-saturate.mdx
            ├── backdrop-filter-sepia.mdx
            ├── backdrop-filter.mdx
            ├── backface-visibility.mdx
            ├── background-attachment.mdx
            ├── background-blend-mode.mdx
            ├── background-clip.mdx
            ├── background-color.mdx
            ├── background-image.mdx
            ├── background-origin.mdx
            ├── background-position.mdx
            ├── background-repeat.mdx
            ├── background-size.mdx
            ├── border-collapse.mdx
            ├── border-color.mdx
            ├── border-radius.mdx
            ├── border-spacing.mdx
            ├── border-style.mdx
            ├── border-width.mdx
            ├── box-decoration-break.mdx
            ├── box-shadow.mdx
            ├── box-sizing.mdx
            ├── break-after.mdx
            ├── break-before.mdx
            ├── break-inside.mdx
            ├── caption-side.mdx
            ├── caret-color.mdx
            ├── clear.mdx
            ├── color-scheme.mdx
            ├── color.mdx
            ├── colors.mdx
            ├── columns.mdx
            ├── compatibility.mdx
            ├── content.mdx
            ├── cursor.mdx
            ├── dark-mode.mdx
            ├── detecting-classes-in-source-files.mdx
            ├── display.mdx
            ├── editor-setup.mdx
            ├── field-sizing.mdx
            ├── fill.mdx
            ├── filter-blur.mdx
            ├── filter-brightness.mdx
            ├── filter-contrast.mdx
            ├── filter-drop-shadow.mdx
            ├── filter-grayscale.mdx
            ├── filter-hue-rotate.mdx
            ├── filter-invert.mdx
            ├── filter-saturate.mdx
            ├── filter-sepia.mdx
            ├── filter.mdx
            ├── flex-basis.mdx
            ├── flex-direction.mdx
            ├── flex-grow.mdx
            ├── flex-shrink.mdx
            ├── flex-wrap.mdx
            ├── flex.mdx
            ├── float.mdx
            ├── font-family.mdx
            ├── font-size.mdx
            ├── font-smoothing.mdx
            ├── font-stretch.mdx
            ├── font-style.mdx
            ├── font-variant-numeric.mdx
            ├── font-weight.mdx
            ├── forced-color-adjust.mdx
            ├── functions-and-directives.mdx
            ├── gap.mdx
            ├── grid-auto-columns.mdx
            ├── grid-auto-flow.mdx
            ├── grid-auto-rows.mdx
            ├── grid-column.mdx
            ├── grid-row.mdx
            ├── grid-template-columns.mdx
            ├── grid-template-rows.mdx
            ├── height.mdx
            ├── hover-focus-and-other-states.mdx
            ├── hyphens.mdx
            ├── isolation.mdx
            ├── justify-content.mdx
            ├── justify-items.mdx
            ├── justify-self.mdx
            ├── letter-spacing.mdx
            ├── line-clamp.mdx
            ├── line-height.mdx
            ├── list-style-image.mdx
            ├── list-style-position.mdx
            ├── list-style-type.mdx
            ├── margin.mdx
            ├── mask-clip.mdx
            ├── mask-composite.mdx
            ├── mask-image.mdx
            ├── mask-mode.mdx
            ├── mask-origin.mdx
            ├── mask-position.mdx
            ├── mask-repeat.mdx
            ├── mask-size.mdx
            ├── mask-type.mdx
            ├── max-height.mdx
            ├── max-width.mdx
            ├── min-height.mdx
            ├── min-width.mdx
            ├── mix-blend-mode.mdx
            ├── object-fit.mdx
            ├── object-position.mdx
            ├── opacity.mdx
            ├── order.mdx
            ├── outline-color.mdx
            ├── outline-offset.mdx
            ├── outline-style.mdx
            ├── outline-width.mdx
            ├── overflow-wrap.mdx
            ├── overflow.mdx
            ├── overscroll-behavior.mdx
            ├── padding.mdx
            ├── perspective-origin.mdx
            ├── perspective.mdx
            ├── place-content.mdx
            ├── place-items.mdx
            ├── place-self.mdx
            ├── pointer-events.mdx
            ├── position.mdx
            ├── preflight.mdx
            ├── resize.mdx
            ├── responsive-design.mdx
            ├── rotate.mdx
            ├── scale.mdx
            ├── scroll-behavior.mdx
            ├── scroll-margin.mdx
            ├── scroll-padding.mdx
            ├── scroll-snap-align.mdx
            ├── scroll-snap-stop.mdx
            ├── scroll-snap-type.mdx
            ├── skew.mdx
            ├── stroke-width.mdx
            ├── stroke.mdx
            ├── styling-with-utility-classes.mdx
            ├── table-layout.mdx
            ├── text-align.mdx
            ├── text-decoration-color.mdx
            ├── text-decoration-line.mdx
            ├── text-decoration-style.mdx
            ├── text-decoration-thickness.mdx
            ├── text-indent.mdx
            ├── text-overflow.mdx
            ├── text-shadow.mdx
            ├── text-transform.mdx
            ├── text-underline-offset.mdx
            ├── text-wrap.mdx
            ├── theme.mdx
            ├── top-right-bottom-left.mdx
            ├── touch-action.mdx
            ├── transform-origin.mdx
            ├── transform-style.mdx
            ├── transform.mdx
            ├── transition-behavior.mdx
            ├── transition-delay.mdx
            ├── transition-duration.mdx
            ├── transition-property.mdx
            ├── transition-timing-function.mdx
            ├── translate.mdx
            ├── upgrade-guide.mdx
            ├── user-select.mdx
            ├── vertical-align.mdx
            ├── visibility.mdx
            ├── white-space.mdx
            ├── width.mdx
            ├── will-change.mdx
            ├── word-break.mdx
            └── z-index.mdx



---
File: /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.";

<ApiTable
  rows={[
    ["accent-inherit", "accent-color: inherit;"],
    ["accent-current", "accent-color: currentColor;"],
    ["accent-transparent", "accent-color: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [
      `accent-${name}`,
      `accent-color: var(--color-${name}); /* ${value} */`,
    ]),
    ["accent-<custom-property>", "accent-color: var(<custom-property>);"],
    ["accent-[<value>]", "accent-color: <value>;"],
  ]}
/>

## Examples

### Setting the accent color

Use utilities like `accent-rose-500` and `accent-lime-600` to change the accent color of an element:

<Figure>

<Example>
  {
    <div className="flex flex-wrap justify-center gap-6">
      <label className="flex items-center space-x-2">
        <input type="checkbox" defaultChecked />
        <div className="text-sm font-semibold text-gray-900 dark:text-gray-200">Browser default</div>
      </label>
      <label className="flex items-center space-x-2">
        <input type="checkbox" className="accent-pink-500" defaultChecked />
        <div className="text-sm font-semibold text-gray-900 dark:text-gray-200">Customized</div>
      </label>
    </div>
  }
</Example>

```html
<!-- [!code classes:accent-pink-500] -->
<label>
  <input type="checkbox" checked />
  Browser default
</label>
<label>
  <input class="accent-pink-500" type="checkbox" checked />
  Customized
</label>
```

</Figure>

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:

<Figure>

<Example>
  {
    <div className="flex flex-wrap justify-center gap-6">
      <label className="flex items-center space-x-2">
        <input type="checkbox" defaultChecked className="accent-purple-500/25" />
        <div className="text-sm font-semibold text-gray-900 dark:text-gray-200">accent-purple-500/25</div>
      </label>
      <label className="flex items-center space-x-2">
        <input type="checkbox" className="accent-purple-500/75" defaultChecked />
        <div className="text-sm font-semibold text-gray-900 dark:text-gray-200">accent-purple-500/75</div>
      </label>
    </div>
  }
</Example>

```html
<!-- [!code word:/25] -->
<!-- [!code word:/75] -->
<input class="accent-purple-500/25" type="checkbox" checked />
<input class="accent-purple-500/75" type="checkbox" checked />
```

</Figure>

Setting the accent color opacity has limited browser-support and only works in Firefox at this time.

### Using a custom value

<UsingACustomValue
  element="input"
  elementAttributes={{ type: "checkbox" }}
  utility="accent"
  value="#50d71e"
  name="accent color"
  variable="accent-color"
/>

### Applying on hover

<TargetingSpecificStates property="accent-color">

<Figure>

<Example>
  {
    <div className="flex flex-wrap justify-center gap-6">
      <label className="flex items-center space-x-2">
        <input type="checkbox" className="accent-black hover:accent-pink-500" defaultChecked />
        <div className="text-sm font-semibold text-gray-900 dark:text-gray-200">Agree to terms</div>
      </label>
    </div>
  }
</Example>

```html
<!-- [!code classes:hover:accent-pink-500] -->
<input class="accent-black hover:accent-pink-500" type="checkbox" />
```

</Figure>

</TargetingSpecificStates>

### Responsive design

<ResponsiveDesign
  element="input"
  elementAttributes={{ type: "checkbox" }}
  property="accent-color"
  defaultClass="accent-black"
  featuredClass="accent-pink-500"
/>

## Customizing your theme

<CustomizingYourThemeColors element="input" elementAttributes={{ type: "checkbox" }} utility="accent" />



---
File: /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
<!-- [!code filename:HTML] -->
<!-- [!code classes:top-[117px]] -->
<div class="top-[117px]">
  <!-- ... -->
</div>
```

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:top-[117px],lg:top-[344px]] -->
<div class="top-[117px] lg:top-[344px]">
  <!-- ... -->
</div>
```

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:bg-[#bada55],text-[22px],before:content-['Festivus']] -->
<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
  <!-- ... -->
</div>
```

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:fill-(--my-brand-color)] -->
<div class="fill-(--my-brand-color) ...">
  <!-- ... -->
</div>
```

This is just a shorthand for <code>fill-{'[var(--my-brand-color)]'}</code> 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
<!-- [!code filename:HTML] -->
<!-- [!code classes:[mask-type:luminance]] -->
<div class="[mask-type:luminance]">
  <!-- ... -->
</div>
```

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:[mask-type:luminance],hover:[mask-type:alpha]] -->
<div class="[mask-type:luminance] hover:[mask-type:alpha]">
  <!-- ... -->
</div>
```

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:[--scroll-offset:56px],lg:[--scroll-offset:44px]] -->
<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
  <!-- ... -->
</div>
```

### Arbitrary variants

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

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

Learn more in the [arbitrary variants](/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
<!-- [!code filename:HTML] -->
<!-- [!code classes:grid-cols-[1fr_500px_2fr]] -->
<div class="grid grid-cols-[1fr_500px_2fr]">
  <!-- ... -->
</div>
```

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:bg-[url('/what_a_rush.png')]] -->
<div class="bg-[url('/what_a_rush.png')]">
  <!-- ... -->
</div>
```

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:before:content-['hello\_world']] -->
<div class="before:content-['hello\_world']">
  <!-- ... -->
</div>
```

If you're using something like JSX where the backslash is stripped from the rendered HTML, use [String.raw()](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
<div className={String.raw`before:content-['hello\_world']`}>
  <!-- ... -->
</div>
```

### Resolving ambiguities

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

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:text-[22px],text-[#bada55]] -->
<!-- Will generate a font-size utility -->
<div class="text-[22px]">...</div>

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

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:text-(--my-var)] -->
<div class="text-(--my-var)">...</div>
```

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
<!-- [!code filename:HTML] -->
<!-- [!code classes:text-(length:--my-var),text-(color:--my-var)] -->
<!-- Will generate a font-size utility -->
<div class="text-(length:--my-var)">...</div>

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

## Using custom CSS

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

```css
/* [!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
<!-- [!code filename:HTML] -->
<!-- [!code classes:bg-gray-100,font-serif,text-gray-900] -->
<!doctype html>
<html lang="en" class="bg-gray-100 font-serif text-gray-900">
  <!-- ... -->
</html>
```

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

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

```css
/* [!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(--rounded-lg);
    padding: var(--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
<!-- [!code filename:HTML] -->
<!-- [!code classes:card,rounded-none] -->
<!-- Will look like a card, but with square corners -->
<div class="card rounded-none">
  <!-- ... -->
</div>
```

Using Tailwind you probably don't need these types of classes as often as you think. Read our guide on [managing duplication](/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:

<CodeExampleStack>

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

</CodeExampleStack>

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

<CodeExampleStack>

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

</CodeExampleStack>

## 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
<!-- [!code filename:HTML] -->
<!-- [!code classes:content-auto] -->
<div class="content-auto">
  <!-- ... -->
</div>
```

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:hover:content-auto] -->
<div class="hover:content-auto">
  <!-- ... -->
</div>
```

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

### Complex utilities

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

```css
/* [!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`.

#### 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]`. If you want to support any data type, you can use `--value([*])`.

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

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

```css
/* [!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: calc(var(--spacing) * --value([percentage], [length]));
}

/* [!code highlight:4] */
@utility -inset-* {
  inset: calc(var(--spacing) * --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:<utility>` variant in your HTML:

```html
<!-- [!code classes:theme-midnight:bg-black] -->
<html data-theme="midnight">
  <button class="theme-midnight:bg-black ..."></button>
</html>
```

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

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



---
File: /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.";

<ApiTable
  rows={[
    ["content-normal", "align-content: normal;"],
    ["content-center", "align-content: center;"],
    ["content-start", "align-content: flex-start;"],
    ["content-end", "align-content: flex-end;"],
    ["content-between", "align-content: space-between;"],
    ["content-around", "align-content: space-around;"],
    ["content-evenly", "align-content: space-evenly;"],
    ["content-baseline", "align-content: baseline;"],
    ["content-stretch", "align-content: stretch;"],
  ]}
/>

## Examples

### Start

Use `content-start` to pack rows in a container against the start of the cross axis:

<Figure>

<Example>
  {
    <div className="grid h-56 grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-cols-3 content-start gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-purple-500 p-4">01</div>
        <div className="rounded-lg bg-purple-500 p-4">02</div>
        <div className="rounded-lg bg-purple-500 p-4">03</div>
        <div className="rounded-lg bg-purple-500 p-4">04</div>
        <div className="rounded-lg bg-purple-500 p-4">05</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:content-start] -->
<div class="grid h-56 grid-cols-3 content-start gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```

</Figure>

### Center

Use `content-center` to pack rows in a container in the center of the cross axis:

<Figure>

<Example>
  {
    <div className="grid h-56 grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-center gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-sky-500 p-4">01</div>
        <div className="rounded-lg bg-sky-500 p-4">02</div>
        <div className="rounded-lg bg-sky-500 p-4">03</div>
        <div className="rounded-lg bg-sky-500 p-4">04</div>
        <div className="rounded-lg bg-sky-500 p-4">05</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:content-center] -->
<div class="grid h-56 grid-cols-3 content-center gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```

</Figure>

### End

Use `content-end` to pack rows in a container against the end of the cross axis:

<Figure>

<Example>
  {
    <div className="grid h-56 grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-end gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-pink-500 p-4">01</div>
        <div className="rounded-lg bg-pink-500 p-4">02</div>
        <div className="rounded-lg bg-pink-500 p-4">03</div>
        <div className="rounded-lg bg-pink-500 p-4">04</div>
        <div className="rounded-lg bg-pink-500 p-4">05</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:content-end] -->
<div class="grid h-56 grid-cols-3 content-end gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```

</Figure>

### Space between

Use `content-between` to distribute rows in a container such that there is an equal amount of space between each line:

<Figure>

<Example>
  {
    <div className="grid h-56 grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-between gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-violet-500 p-4">01</div>
        <div className="rounded-lg bg-violet-500 p-4">02</div>
        <div className="rounded-lg bg-violet-500 p-4">03</div>
        <div className="rounded-lg bg-violet-500 p-4">04</div>
        <div className="rounded-lg bg-violet-500 p-4">05</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:content-between] -->
<div class="grid h-56 grid-cols-3 content-between gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```

</Figure>

### Space around

Use `content-around` to distribute rows in a container such that there is an equal amount of space around each line:

<Figure>

<Example>
  {
    <div className="grid h-56 grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-around gap-x-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-blue-500 p-4">01</div>
        <div className="rounded-lg bg-blue-500 p-4">02</div>
        <div className="rounded-lg bg-blue-500 p-4">03</div>
        <div className="rounded-lg bg-blue-500 p-4">04</div>
        <div className="rounded-lg bg-blue-500 p-4">05</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:content-around] -->
<div class="grid h-56 grid-cols-3 content-around gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid h-56 grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-evenly gap-x-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-indigo-500 p-4">01</div>
        <div className="rounded-lg bg-indigo-500 p-4">02</div>
        <div className="rounded-lg bg-indigo-500 p-4">03</div>
        <div className="rounded-lg bg-indigo-500 p-4">04</div>
        <div className="rounded-lg bg-indigo-500 p-4">05</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:content-evenly] -->
<div class="grid h-56 grid-cols-3 content-evenly gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```

</Figure>

### Stretch

Use `content-stretch` to allow content items to fill the available space along the container’s cross axis:

<Figure>

<Example>
  {
    <div className="grid h-56 grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-stretch gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">01</div>
        <div className="flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">02</div>
        <div className="flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">03</div>
        <div className="flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">04</div>
        <div className="flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">05</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:content-stretch] -->
<div class="grid h-56 grid-cols-3 content-stretch gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```

</Figure>

### Normal

Use `content-normal` to pack content items in their default position as if no `align-content` value was set:

<Figure>

<Example>
  {
    <div className="grid h-56 grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">01</div>
        <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
        <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">03</div>
        <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">04</div>
        <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">05</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:content-normal] -->
<div class="grid h-56 grid-cols-3 content-normal gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="align-content" defaultClass="grid content-start" featuredClass="content-around" />



---
File: /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.";

<ApiTable
  rows={[
    ["items-start", "align-items: flex-start;"],
    ["items-end", "align-items: flex-end;"],
    ["items-end-safe", "align-items: safe flex-end;"],
    ["items-center", "align-items: center;"],
    ["items-center-safe", "align-items: safe center;"],
    ["items-baseline", "align-items: baseline;"],
    ["items-baseline-last", "align-items: last baseline;"],
    ["items-stretch", "align-items: stretch;"],
  ]}
/>

## Examples

### Stretch

Use the `items-stretch` utility to stretch items to fill the container's cross axis:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex w-full items-stretch gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-cyan-500 py-4">01</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-cyan-500 py-12">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-cyan-500 py-8">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:items-stretch] -->
<div class="flex items-stretch ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>
```

</Figure>

### Start

Use the `items-start` utility to align items to the start of the container's cross axis:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex w-full items-start gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-500 py-4">01</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-500 py-12">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-500 py-8">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:items-start] -->
<div class="flex items-start ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>
```

</Figure>

### Center

Use the `items-center` utility to align items along the center of the container's cross axis:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex w-full items-center gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-violet-500 py-4">01</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-violet-500 py-12">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-violet-500 py-8">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:items-center] -->
<div class="flex items-center ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>
```

</Figure>

### End

Use the `items-end` utility to align items to the end of the container's cross axis:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex w-full items-end gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-500 py-4">01</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-500 py-12">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-500 py-8">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:items-end] -->
<div class="flex items-end ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>
```

</Figure>

### Baseline

Use the `items-baseline` utility to align items along the container's cross axis such that all of their baselines align:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex w-full items-baseline gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-blue-500 pt-2 pb-6">01</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-blue-500 pt-8 pb-12">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-blue-500 pt-12 pb-4">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:items-baseline] -->
<div class="flex items-baseline ...">
  <div class="pt-2 pb-6">01</div>
  <div class="pt-8 pb-12">02</div>
  <div class="pt-12 pb-4">03</div>
</div>
```

</Figure>

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

<Figure>

<Example padding={false}>
  {
    <div className="mx-auto grid max-w-md divide-y divide-gray-100 border-x border-x-gray-200 text-gray-700 dark:divide-gray-800 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300">
      <div className="grid grid-cols-[1fr_auto] items-baseline-last gap-x-4 px-4 py-6">
        <div className="grid grid-cols-[auto_1fr] gap-x-4 max-sm:grid-cols-1">
          <img
            className="size-[2rem] rounded-full"
            src="https://spotlight.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Favatar.51a13c67.jpg&w=128&q=80"
            alt=""
          />
          <div className="font-semibold text-gray-900 sm:col-start-2 dark:text-white">Spencer Sharp</div>
          <p className="text-sm sm:col-start-2">Working on the future of astronaut recruitment at Space Recruit.</p>
        </div>
        <a
          href="#"
          className="font-mono text-xs font-medium text-gray-400 underline hover:text-blue-500 dark:text-gray-500"
        >
          spacerecruit.com
        </a>
      </div>
      <div className="grid grid-cols-[1fr_auto] items-baseline-last gap-x-4 px-4 py-6">
        <div className="grid grid-cols-[auto_1fr] gap-x-4 max-sm:grid-cols-1">
          <img
            className="size-[2rem] rounded-full"
            src="https://images.unsplash.com/photo-1590895340509-793cb98788c9?q=80&w=256&h=256&&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt=""
          />
          <div className="font-semibold text-gray-900 sm:col-start-2 dark:text-white">Alex Reed</div>
          <p className="text-sm sm:col-start-2">A multidisciplinary designer.</p>
        </div>
        <a
          href="#"
          className="font-mono text-xs font-medium text-gray-400 underline hover:text-blue-500 dark:text-gray-500"
        >
          alex-reed.com
        </a>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:items-baseline-last] -->
<div class="grid grid-cols-[1fr_auto] items-baseline-last">
  <div>
    <img src="img/spencer-sharp.jpg" />
    <h4>Spencer Sharp</h4>
    <p>Working on the future of astronaut recruitment at Space Recruit.</p>
  </div>
  <p>spacerecruit.com</p>
</div>
```

</Figure>

This is useful for ensuring that text items align with each other, even if they have different heights.

### Responsive design

<ResponsiveDesign property="align-items" defaultClass="flex items-stretch" featuredClass="items-center" />



---
File: /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.";

<ApiTable
  rows={[
    ["self-auto", "align-self: auto;"],
    ["self-start", "align-self: flex-start;"],
    ["self-end", "align-self: flex-end;"],
    ["self-end-safe", "align-self: safe flex-end;"],
    ["self-center", "align-self: center;"],
    ["self-center-safe", "align-self: safe center;"],
    ["self-stretch", "align-self: stretch;"],
    ["self-baseline", "align-self: baseline;"],
    ["self-baseline", "align-self: last baseline;"],
  ]}
/>

## Examples

### Auto

Use the `self-auto` utility to align an item based on the value of the container's `align-items` property:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">
          01
        </div>
        <div className="flex flex-1 items-center justify-center self-auto rounded-lg bg-sky-500 p-4">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-auto] -->
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-auto ...">02</div>
  <div>03</div>
</div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
          01
        </div>
        <div className="flex flex-1 items-center justify-center self-start rounded-lg bg-pink-500 p-4">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-start] -->
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-start ...">02</div>
  <div>03</div>
</div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">
          01
        </div>
        <div className="flex flex-1 items-center justify-center self-center rounded-lg bg-purple-500 p-4">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-center] -->
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-center ...">02</div>
  <div>03</div>
</div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">
          01
        </div>
        <div className="flex flex-1 items-center justify-center self-end rounded-lg bg-indigo-500 p-4">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-end] -->
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-end ...">02</div>
  <div>03</div>
</div>
```

</Figure>

### Stretch

Use the `self-stretch` utility to stretch an item to fill the container's cross axis, despite the container's `align-items` value:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
          01
        </div>
        <div className="flex flex-1 items-center justify-center self-stretch rounded-lg bg-fuchsia-500 p-4">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-stretch] -->
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-stretch ...">02</div>
  <div>03</div>
</div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex w-full gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center self-baseline rounded-lg bg-blue-500 pt-2 pb-6">01</div>
        <div className="flex flex-1 items-center justify-center self-baseline rounded-lg bg-blue-500 pt-8 pb-12">
          02
        </div>
        <div className="flex flex-1 items-center justify-center self-baseline rounded-lg bg-blue-500 pt-12 pb-4">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-baseline] -->
<div class="flex ...">
  <div class="self-baseline pt-2 pb-6">01</div>
  <div class="self-baseline pt-8 pb-12">02</div>
  <div class="self-baseline pt-12 pb-4">03</div>
</div>
```

</Figure>

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

<Figure>

<Example padding={false}>
  {
    <div className="mx-auto grid max-w-md divide-y divide-gray-100 border-x border-x-gray-200 text-gray-700 dark:divide-gray-800 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300">
      <div className="grid grid-cols-[auto_1fr_auto] gap-x-4 px-4 py-6">
        <img
          className="size-[2rem] rounded-full"
          src="https://spotlight.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Favatar.51a13c67.jpg&w=128&q=80"
          alt=""
        />
        <div className="font-semibold text-gray-900 sm:col-start-2 dark:text-white">Spencer Sharp</div>
        <p className="self-baseline-last text-sm sm:col-start-2">
          Working on the future of astronaut recruitment at Space Recruit.
        </p>
        <a
          href="#"
          className="self-baseline-last font-mono text-xs font-medium text-gray-400 underline hover:text-blue-500 dark:text-gray-500"
        >
          spacerecruit.com
        </a>
      </div>
      <div className="grid grid-cols-[auto_1fr_auto] gap-x-4 px-4 py-6">
        <img
          className="size-[2rem] rounded-full"
          src="https://images.unsplash.com/photo-1590895340509-793cb98788c9?q=80&w=256&h=256&&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt=""
        />
        <div className="font-semibold text-gray-900 sm:col-start-2 dark:text-white">Alex Reed</div>
        <p className="self-baseline-last text-sm sm:col-start-2">A multidisciplinary designer.</p>
        <a
          href="#"
          className="self-baseline-last font-mono text-xs font-medium text-gray-400 underline hover:text-blue-500 dark:text-gray-500"
        >
          alex-reed.com
        </a>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-baseline-last] -->
<div class="grid grid-cols-[1fr_auto]">
  <div>
    <img src="img/spencer-sharp.jpg" />
    <h4>Spencer Sharp</h4>
    <p class="self-baseline-last">Working on the future of astronaut recruitment at Space Recruit.</p>
  </div>
  <p class="self-baseline-last">spacerecruit.com</p>
</div>
```

</Figure>

This is useful for ensuring that text items align with each other, even if they have different heights.

### Responsive design

<ResponsiveDesign property="align-self" defaultClass="self-auto" featuredClass="self-end" />



---
File: /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.";

<ApiTable
  rows={[
    [
      "animate-spin",
      dedent`
        animation: var(--animate-spin); /* spin 1s linear infinite */

        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }
      `,
    ],
    [
      "animate-ping",
      dedent`
        animation: var(--animate-ping); /* ping 1s cubic-bezier(0, 0, 0.2, 1) infinite */

        @keyframes ping {
          75%, 100% {
            transform: scale(2);
            opacity: 0;
          }
        }
      `,
    ],
    [
      "animate-pulse",
      dedent`
        animation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */

        @keyframes pulse {
          50% {
            opacity: 0.5;
          }
        }
      `,
    ],
    [
      "animate-bounce",
      dedent`
        animation: var(--animate-bounce); /* bounce 1s infinite */

        @keyframes bounce {
          0%, 100% {
            transform: translateY(-25%);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
          }
          50% {
            transform: none;
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          }
        }
      `,
    ],
    ["animate-none", "animation: none;"],
    ["animate-(<custom-property>)", "animation: var(<custom-property>);"],
    ["animate-[<value>]", "animation: <value>;"],

]}
/>

## Examples

### Adding a spin animation

Use the `animate-spin` utility to add a linear spin animation to elements like loading indicators:

<Figure>

<Example>
  {
    <div className="flex items-center justify-center">
      <button
        type="button"
        className="inline-flex cursor-not-allowed items-center rounded-md bg-indigo-500 px-4 py-2 text-sm leading-6 font-semibold text-white transition duration-150 ease-in-out hover:bg-indigo-400"
        disabled
      >
        <svg
          className="mr-3 -ml-1 size-5 animate-spin text-white"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
        >
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
          <path
            className="opacity-75"
            fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
          ></path>
        </svg>
        Processing…
      </button>
    </div>
  }
</Example>

```html
<!-- [!code classes:animate-spin] -->
<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="mr-3 size-5 animate-spin ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing…
</button>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="flex items-center justify-center">
      <span className="relative inline-flex">
        <button
          type="button"
          className="inline-flex cursor-not-allowed items-center rounded-md bg-white px-4 py-2 text-sm leading-6 font-semibold text-sky-500 ring-1 ring-gray-900/10 transition duration-150 ease-in-out dark:bg-white/5 dark:ring-white/20"
          disabled
        >
          Transactions
        </button>
        <span className="absolute top-0 right-0 -mt-1 -mr-1 flex size-3">
          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span>
          <span className="relative inline-flex size-3 rounded-full bg-sky-500"></span>
        </span>
      </span>
    </div>
  }
</Example>

```html
<!-- [!code classes:animate-ping] -->
<span class="relative flex size-3">
  <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span>
  <span class="relative inline-flex size-3 rounded-full bg-sky-500"></span>
</span>
```

</Figure>

### Adding a pulse animation

Use the `animate-pulse` utility to make an element gently fade in and out—useful for things like skeleton loaders:

<Figure>

<Example>
  {
    <div className="flex items-center justify-center">
      <div className="-lg h-28 w-full max-w-xs rounded-lg bg-white p-4 ring-1 ring-gray-900/5 dark:bg-gray-800">
        <div className="flex animate-pulse space-x-4">
          <div className="size-10 rounded-full bg-gray-200 dark:bg-gray-700"></div>
          <div className="flex-1 space-y-6 py-1">
            <div className="h-2 rounded bg-gray-200 dark:bg-gray-700"></div>
            <div className="space-y-3">
              <div className="grid grid-cols-3 gap-4">
                <div className="col-span-2 h-2 rounded bg-gray-200 dark:bg-gray-700"></div>
                <div className="col-span-1 h-2 rounded bg-gray-200 dark:bg-gray-700"></div>
              </div>
              <div className="h-2 rounded bg-gray-200 dark:bg-gray-700"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:animate-pulse] -->
<div class="mx-auto w-full max-w-sm rounded-md border border-blue-300 p-4">
  <div class="flex animate-pulse space-x-4">
    <div class="size-10 rounded-full bg-gray-200"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 rounded bg-gray-200"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="col-span-2 h-2 rounded bg-gray-200"></div>
          <div class="col-span-1 h-2 rounded bg-gray-200"></div>
        </div>
        <div class="h-2 rounded bg-gray-200"></div>
      </div>
    </div>
  </div>
</div>
```

</Figure>

### Adding a bounce animation

Use the `animate-bounce` utility to make an element bounce up and down—useful for things like "scroll down" indicators:

<Figure>

<Example>
  {
    <div className="flex justify-center">
      <div className="-lg flex size-10 animate-bounce items-center justify-center rounded-full bg-white p-2 ring-1 ring-gray-900/5 dark:bg-white/5 dark:ring-white/20">
        <svg
          className="size-6 text-violet-500"
          fill="none"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
        </svg>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:animate-bounce] -->
<svg class="size-6 animate-bounce ...">
  <!-- ... -->
</svg>
```

</Figure>

### 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
<!-- [!code classes:motion-safe:animate-spin] -->
<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="mr-3 size-5 motion-safe:animate-spin ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>
```

### Using a custom value

<UsingACustomValue utility="animate" name="animation" value="wiggle_1s_ease-in-out_infinite" variable="animation" />

### Responsive design

<ResponsiveDesign property="animation" defaultClass="animate-none" featuredClass="animate-spin" />

## Customizing your theme

<CustomizingYourTheme
  utility="animate"
  name="animation"
  customName="wiggle"
  customCSS={
    dedent`
      @theme {
        /* [!code highlight:12] */
        --animate-wiggle: wiggle 1s ease-in-out infinite;

        @keyframes wiggle {
          0%,
          100% {
            transform: rotate(-3deg);
          }
          50% {
            transform: rotate(3deg);
          }
        }
      }
    `}

/>



---
File: /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.";

<ApiTable
  rows={[
    ["appearance-none", "appearance: none;"],
    ["appearance-auto", "appearance: auto;"],
  ]}
/>

## Examples

### Removing default appearance

Use `appearance-none` to reset any browser specific styling on an element:

<Figure>

<Example>
  {
    <div className="mx-auto max-w-sm items-center">
      <div className="my-6 flex">
        <select className="w-20">
          <option>Yes</option>
          <option>No</option>
          <option>Maybe</option>
        </select>
        <div className="mx-6 text-sm font-semibold text-gray-900 dark:text-gray-200">
          Default browser styles applied
        </div>
      </div>
      <div className="my-6 flex items-center">
        <div className="grid">
          <svg
            className="pointer-events-none relative right-1 z-10 col-start-1 row-start-1 h-4 w-4 self-center justify-self-end forced-colors:hidden"
            viewBox="0 0 16 16"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fillRule="evenodd"
              d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
              clipRule="evenodd"
            />
          </svg>
          <select className="col-start-1 row-start-1 w-20 appearance-none rounded-lg border border-gray-300 bg-gray-50 px-2 text-gray-700 hover:border-cyan-500 hover:bg-white dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-cyan-700 dark:hover:bg-gray-700 forced-colors:appearance-auto">
            <option>Yes</option>
            <option>No</option>
            <option>Maybe</option>
          </select>
        </div>
        <div className="mx-6 text-sm font-semibold text-gray-900 dark:text-gray-200">Remove default browser styles</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:appearance-none] -->
<select>
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

<div class="grid">
  <select class="col-start-1 row-start-1 appearance-none bg-gray-50 dark:bg-gray-800 ...">
    <option>Yes</option>
    <option>No</option>
    <option>Maybe</option>
  </select>
  <svg class="pointer-events-none col-start-1 row-start-1 ...">
    <!-- ... -->
  </svg>
</div>
```

</Figure>

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:

<Figure hint="Try emulating `forced-colors: active` in your developer tools to see the difference">

<Example>
  {
    <div className="mx-auto my-6 grid max-w-sm items-center justify-center gap-8">
      <div className="flex items-center">
        <label
          htmlFor="checkbox_2"
          className="mx-6 grid grid-flow-col items-center gap-3 text-sm font-semibold text-gray-900 select-none dark:text-gray-200"
        >
          <div className="grid items-center justify-center">
            <input
              type="checkbox"
              id="checkbox_2"
              defaultChecked
              className="peer col-start-1 row-start-1 h-4 w-4 appearance-none rounded border border-gray-300 ring-transparent checked:border-violet-600 checked:bg-violet-600 dark:border-gray-600 dark:checked:border-violet-600 forced-colors:appearance-auto"
            />
            <svg
              viewBox="0 0 14 14"
              fill="none"
              className="invisible col-start-1 row-start-1 stroke-white peer-checked:visible dark:text-violet-300 forced-colors:hidden"
            >
              <path d="M3 8L6 11L11 3.5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
            </svg>
          </div>
          Falls back to default appearance
        </label>
      </div>
      <div className="flex items-center">
        <label
          htmlFor="checkbox_1"
          className="mx-6 grid grid-flow-col items-center gap-3 text-sm font-semibold text-gray-900 select-none dark:text-gray-200"
        >
          <div className="grid items-center justify-center">
            <input
              type="checkbox"
              id="checkbox_1"
              defaultChecked
              className="peer col-start-1 row-start-1 h-4 w-4 appearance-none rounded border border-gray-300 ring-transparent checked:border-violet-600 checked:bg-violet-600 dark:border-gray-600 dark:checked:border-violet-600"
            />
            <svg
              viewBox="0 0 14 14"
              fill="none"
              className="invisible col-start-1 row-start-1 stroke-white peer-checked:visible dark:text-violet-300"
            >
              <path d="M3 8L6 11L11 3.5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
            </svg>
          </div>
          Keeps custom appearance
        </label>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:forced-colors:appearance-auto,forced-colors:hidden] -->
<label>
  <div>
    <input type="checkbox" class="appearance-none forced-colors:appearance-auto ..." />
    <svg class="invisible peer-checked:visible forced-colors:hidden ...">
      <!-- ... -->
    </svg>
  </div>
  Falls back to default appearance
</label>

<label>
  <div>
    <input type="checkbox" class="appearance-none ..." />
    <svg class="invisible peer-checked:visible ...">
      <!-- ... -->
    </svg>
  </div>
  Keeps custom appearance
</label>
```

</Figure>

This is useful for reverting to the standard browser controls in certain accessibility modes.

### Responsive design

<ResponsiveDesign
  element="select"
  property="appearance"
  defaultClass="appearance-auto"
  featuredClass="appearance-none"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["aspect-<ratio>", "aspect-ratio: <ratio>;"],
    ["aspect-square", "aspect-ratio: 1 / 1;"],
    ["aspect-video", "aspect-ratio: var(--aspect-ratio-video); /* 16 / 9 */"],
    ["aspect-auto", "aspect-ratio: auto;"],
    ["aspect-(<custom-property>)", "aspect-ratio: var(<custom-property>);"],
    ["aspect-[<value>]", "aspect-ratio: <value>;"],
  ]}
/>

## Examples

### Basic example

Use <code>aspect-<var>&lt;ratio&gt;</var></code> utilities like `aspect-3/2` to give an element a specific aspect ratio:

<Figure desktopHint="Resize the example to see the expected behavior">

<Example resizable>
  {
    <img
      className="mx-auto aspect-3/2 w-full max-w-sm rounded-lg object-cover"
      src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"
    />
  }
</Example>

```html
<!-- [!code classes:aspect-3/2] -->
<img class="aspect-3/2 object-cover ..." src="/img/villas.jpg" />
```

</Figure>

### Using a video aspect ratio

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

<Figure desktopHint="Resize the example to see the expected behavior">

<Example resizable>
  {
    <iframe
      className="aspect-video w-full rounded-lg"
      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowFullScreen
    ></iframe>
  }
</Example>

```html
<!-- [!code classes:aspect-video] -->
<iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
```

</Figure>

### Using a custom value

<UsingACustomValue
  element="img"
  elementAttributes={{ src: "/img/villas.jpg" }}
  utility="aspect"
  name="aspect ratio"
  value="calc(4*3+1)/3"
  variable="aspect-ratio"
/>

### Responsive design

<ResponsiveDesign
  element="iframe"
  elementAttributes={{ src: "https://www.youtube.com/embed/dQw4w9WgXcQ" }}
  property="aspect-ratio"
  defaultClass="aspect-video"
  featuredClass="aspect-square"
/>

## Customizing your theme

<CustomizingYourTheme
  element="iframe"
  elementAttributes={{ src: "https://www.youtube.com/embed/dQw4w9WgXcQ" }}
  utility="aspect"
  name="aspect ratio"
  customName="retro"
  customValue="4 / 3"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["backdrop-blur-xs", "backdrop-filter: blur(var(--blur-xs)); /* 4px */"],
    ["backdrop-blur-sm", "backdrop-filter: blur(var(--blur-sm)); /* 8px */"],
    ["backdrop-blur-md", "backdrop-filter: blur(var(--blur-md)); /* 12px */"],
    ["backdrop-blur-lg", "backdrop-filter: blur(var(--blur-lg)); /* 16px */"],
    ["backdrop-blur-xl", "backdrop-filter: blur(var(--blur-xl)); /* 24px */"],
    ["backdrop-blur-2xl", "backdrop-filter: blur(var(--blur-2xl)); /* 40px */"],
    ["backdrop-blur-3xl", "backdrop-filter: blur(var(--blur-3xl)); /* 64px */"],
    ["backdrop-blur-none", "backdrop-filter: ;"],
    ["backdrop-blur-(<custom-property>)", "backdrop-filter: blur(var(<custom-property>));"],
    ["backdrop-blur-[<value>]", "backdrop-filter: blur(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `backdrop-blur-sm` and `backdrop-blur-lg` to control an element’s backdrop blur:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-blur-none
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-blur-none"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-blur-sm
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-blur-sm"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-blur-md
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-blur-md"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:backdrop-blur-none,backdrop-blur-sm,backdrop-blur-md] -->
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-none ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-sm ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-md ..."></div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="backdrop-blur" value="2px" name="backdrop blur" />

### Responsive design

<ResponsiveDesign
  property="backdrop-filter: blur()"
  defaultClass="backdrop-blur-none"
  featuredClass="backdrop-blur-lg"
/>

## Customizing your theme

<CustomizingYourTheme utility="backdrop-blur" themeKey="blur" name="backdrop blur" customName="2xs" customValue="2px" />



---
File: /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.";

<ApiTable
  rows={[
    ["backdrop-brightness-<number>", "backdrop-filter: brightness(<number>%);"],
    ["backdrop-brightness-(<custom-property>)", "backdrop-filter: brightness(var(<custom-property>));"],
    ["backdrop-brightness-[<value>]", "backdrop-filter: brightness(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `backdrop-brightness-50` and `backdrop-brightness-100` to control an element's backdrop brightness:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-brightness-50
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-brightness-50"></div>
            <img
              className="h-32 w-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-brightness-150
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-brightness-150"></div>
            <img
              className="h-32 w-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:backdrop-brightness-50,backdrop-brightness-150] -->
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-brightness-50 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-brightness-150 ..."></div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="backdrop-brightness" value="1.75" name="backdrop brightness" />

### Responsive design

<ResponsiveDesign
  property="backdrop-filter: brightness()"
  defaultClass="backdrop-brightness-110"
  featuredClass="backdrop-brightness-150"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["backdrop-contrast-<number>", "backdrop-filter: contrast(<number>%);"],
    ["backdrop-contrast-(<custom-property>)", "backdrop-filter: contrast(var(<custom-property>));"],
    ["backdrop-contrast-[<value>]", "backdrop-filter: contrast(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `backdrop-contrast-50` and `backdrop-contrast-100` to control an element's backdrop contrast:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-contrast-50
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-contrast-50"></div>
            <img
              className="h-32 w-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-contrast-200
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-contrast-200"></div>
            <img
              className="h-32 w-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:backdrop-contrast-50,backdrop-contrast-200] -->
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-contrast-50 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-contrast-200 ..."></div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="backdrop-contrast" value=".25" name="backdrop contrast" />

### Responsive design

<ResponsiveDesign
  property="backdrop-filter: contrast()"
  defaultClass="backdrop-contrast-125"
  featuredClass="backdrop-contrast-150"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["backdrop-grayscale", "backdrop-filter: grayscale(100%);"],
    ["backdrop-grayscale-<number>", "backdrop-filter: grayscale(<number>%);"],
    ["backdrop-grayscale-(<custom-property>)", "backdrop-filter: grayscale(var(<custom-property>));"],
    ["backdrop-grayscale-[<value>]", "backdrop-filter: grayscale(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `backdrop-grayscale-50` and `backdrop-grayscale` to control the grayscale effect applied to an element's backdrop:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-grayscale-0
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-grayscale-0"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-grayscale-50
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-grayscale-50"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-grayscale
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-grayscale"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:backdrop-grayscale-0,backdrop-grayscale-50,backdrop-grayscale] -->
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-grayscale-0 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-grayscale-50 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-grayscale-200 ..."></div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="backdrop-grayscale" value="0.5" name="backdrop grayscale" />

### Responsive design

<ResponsiveDesign
  property="backdrop-filter: grayscale()"
  defaultClass="backdrop-grayscale"
  featuredClass="backdrop-grayscale-0"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["backdrop-hue-rotate-<number>", "backdrop-filter: hue-rotate(<number>deg);"],
    ["-backdrop-hue-rotate-<number>", "backdrop-filter: hue-rotate(calc(<number>deg * -1));"],
    ["backdrop-hue-rotate-(<custom-property>)", "backdrop-filter: hue-rotate(var(<custom-property>));"],
    ["backdrop-hue-rotate-[<value>]", "backdrop-filter: hue-rotate(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `backdrop-hue-rotate-90` and `backdrop-hue-rotate-180` to rotate the hue of an element's backdrop:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-hue-rotate-90
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-hue-rotate-90"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-hue-rotate-180
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-hue-rotate-180"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-hue-rotate-270
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-hue-rotate-270"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:backdrop-hue-rotate-90,backdrop-hue-rotate-180,backdrop-hue-rotate-270] -->
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-hue-rotate-90 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-hue-rotate-180 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-hue-rotate-270 ..."></div>
</div>
```

</Figure>

### Using negative values

Use utilities like `-backdrop-hue-rotate-90` and `-backdrop-hue-rotate-180` to set a negative backdrop hue rotation value:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            -backdrop-hue-rotate-15
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 -backdrop-hue-rotate-15"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            -backdrop-hue-rotate-45
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 -backdrop-hue-rotate-45"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            -backdrop-hue-rotate-90
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 -backdrop-hue-rotate-90"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:-backdrop-hue-rotate-15,-backdrop-hue-rotate-45,-backdrop-hue-rotate-90] -->
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 -backdrop-hue-rotate-15 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 -backdrop-hue-rotate-45 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 -backdrop-hue-rotate-90 ..."></div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue
  utility="backdrop-hue-rotate"
  value="3.142rad"
  name="backdrop hue rotation"
  variable="backdrop-hue-rotation"
/>

### Responsive design

<ResponsiveDesign
  property="backdrop-filter: hue-rotate()"
  defaultClass="backdrop-hue-rotate-15"
  featuredClass="backdrop-hue-rotate-0"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["backdrop-invert", "backdrop-filter: invert(100%);"],
    ["backdrop-invert-<number>", "backdrop-filter: invert(<number>%);"],
    ["backdrop-invert-(<custom-property>)", "backdrop-filter: invert(var(<custom-property>))"],
    ["backdrop-invert-[<value>]", "backdrop-filter: invert(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `backdrop-invert` and `backdrop-invert-65` to control the color inversion of an element's backdrop:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-invert-0
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert-0"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-invert-65
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert-65"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-invert
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:backdrop-invert-0,backdrop-invert-65,backdrop-invert] -->
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-invert-0 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-invert-65 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-invert ..."></div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="backdrop-invert" value=".25" name="backdrop inversion" variable="backdrop-inversion" />

### Responsive design

<ResponsiveDesign
  property="backdrop-filter: invert()"
  defaultClass="backdrop-invert-0"
  featuredClass="backdrop-invert"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["backdrop-opacity-<number>", "backdrop-filter: opacity(<number>%);"],
    ["backdrop-opacity-(<custom-property>)", "backdrop-filter: opacity(var(<custom-property>));"],
    ["backdrop-opacity-[<value>]", "backdrop-filter: opacity(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `backdrop-opacity-50` and `backdrop-opacity-75` to control the opacity of all the backdrop filters applied to an element:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-opacity-10
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert backdrop-opacity-10"></div>
            <img
              className="object-coveryea size-32 rounded-lg"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-opacity-60
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert backdrop-opacity-60"></div>
            <img
              className="object-coveryea size-32 rounded-lg"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-opacity-95
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert backdrop-opacity-95"></div>
            <img
              className="object-coveryea size-32 rounded-lg"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:backdrop-opacity-10,backdrop-opacity-60,backdrop-opacity-95] -->
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-invert backdrop-opacity-10 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-invert backdrop-opacity-60 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-invert backdrop-opacity-95 ..."></div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue
  utility="backdrop-opacity"
  value=".15"
  name="backdrop filter opacity"
  variable="backdrop-filter-opacity"
/>

### Responsive design

<ResponsiveDesign
  property="backdrop-filter: opacity()"
  defaultClass="backdrop-opacity-100"
  featuredClass="backdrop-opacity-60"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["backdrop-saturate-<number>", "backdrop-filter: saturate(<number>%);"],
    ["backdrop-saturate-(<custom-property>)", "backdrop-filter: saturate(var(<custom-property>));"],
    ["backdrop-saturate-[<value>]", "backdrop-filter: saturate(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `backdrop-saturate-50` and `backdrop-saturate-100` utilities to control the saturation of an element's backdrop:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-saturate-50
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-saturate-50"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-saturate-125
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-saturate-125"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-saturate-200
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-saturate-200"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:backdrop-saturate-50,backdrop-saturate-125,backdrop-saturate-200] -->
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-saturate-50 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-saturate-125 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-saturate-200 ..."></div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="backdrop-saturate" value=".25" name="backdrop saturation" variable="backdrop-saturation" />

### Responsive design

<ResponsiveDesign
  property="backdrop-filter: saturate()"
  defaultClass="backdrop-saturate-50"
  featuredClass="backdrop-saturate-150"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["backdrop-sepia", "backdrop-filter: sepia(100%);"],
    ["backdrop-sepia-<number>", "backdrop-filter: sepia(<number>%);"],
    ["backdrop-sepia-(<custom-property>)", "backdrop-filter: sepia(var(<custom-property>));"],
    ["backdrop-sepia-[<value>]", "backdrop-filter: sepia(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `backdrop-sepia` and `backdrop-sepia-50` to control the sepia effect applied to an element's backdrop:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-sepia-0
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-sepia-0"></div>
            <img
              className="size-32 rounded-lg object-cover shadow-xl"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-sepia-50
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-sepia-50"></div>
            <img
              className="size-32 rounded-lg object-cover shadow-xl"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-sepia
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-sepia"></div>
            <img
              className="size-32 rounded-lg object-cover shadow-xl"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:backdrop-sepia-0,backdrop-sepia-50,backdrop-sepia] -->
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-sepia-0 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-sepia-50 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-sepia ..."></div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="backdrop-sepia" value=".25" name="backdrop sepia" />

### Responsive design

<ResponsiveDesign property="backdrop-filter: sepia()" defaultClass="backdrop-sepia" featuredClass="backdrop-sepia-0" />



---
File: /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.";

<ApiTable
  rows={[
    ["backdrop-filter-none", "backdrop-filter: none;"],
    ["backdrop-filter-(<custom-property>)", "backdrop-filter: var(<custom-property>);"],
    ["backdrop-filter-[<value>]", "backdrop-filter: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `backdrop-blur-xs` and `backdrop-grayscale` to apply filters to an element's backdrop:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-blur-xs
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-blur-xs"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            backdrop-grayscale
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-grayscale"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 italic dark:text-gray-400">
            combined
          </p>
          <div className="relative">
            <div className="absolute inset-6 size-20 bg-white/30 backdrop-blur-xs backdrop-grayscale"></div>
            <img
              className="size-32 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:backdrop-blur-xs,backdrop-grayscale] -->
<div class="bg-[url(/img/mountains.jpg)] ...">
  <div class="backdrop-blur-xs ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)] ...">
  <div class="backdrop-grayscale ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)] ...">
  <div class="backdrop-blur-xs backdrop-grayscale ..."></div>
</div>
```

</Figure>

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
<!-- [!code classes:md:backdrop-filter-none] -->
<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>
```

### Using a custom value

<UsingACustomValue utility="backdrop-filter" value="url('filters.svg#filter-id')" name="backdrop filter" />

### Applying on hover

<TargetingSpecificStates
  property="backdrop-filter"
  defaultClass="backdrop-blur-sm"
  featuredClass="backdrop-filter-none"
/>

### Responsive design

<ResponsiveDesign property="backdrop-filter" defaultClass="backdrop-blur-sm" featuredClass="backdrop-filter-none" />



---
File: /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.";

<ApiTable
  rows={[
    ["backface-hidden", "backface-visibility: hidden;"],
    ["backface-visible", "backface-visibility: visible;"],
  ]}
/>

## Examples

### Basic example

Use the `backface-visible` utility to show the backface of an element, like a cube, even when it's rotated away from view:

<Figure>

<Example>
  {
    <div className="flex flex-col justify-around gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          backface-hidden
        </p>
        <div className="size-40 p-10">
          <div className="size-20 rotate-[0.75_1_0.75_45deg] transform-3d">
            <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-hidden dark:bg-sky-400/85 dark:text-white">
              1
            </div>
            <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-hidden dark:bg-sky-400/85 dark:text-white">
              2
            </div>
            <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-hidden dark:bg-sky-400/85 dark:text-white">
              3
            </div>
            <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-hidden dark:bg-sky-400/85 dark:text-white">
              4
            </div>
            <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-hidden dark:bg-sky-400/85 dark:text-white">
              5
            </div>
            <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-hidden dark:bg-sky-400/85 dark:text-white">
              6
            </div>
          </div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          backface-visible
        </p>
        <div className="size-40 p-10">
          <div className="size-20 rotate-[0.75_1_0.75_45deg] transform-3d">
            <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-visible dark:bg-sky-400/85 dark:text-white">
              1
            </div>
            <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-visible dark:bg-sky-400/85 dark:text-white">
              2
            </div>
            <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-visible dark:bg-sky-400/85 dark:text-white">
              3
            </div>
            <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-visible dark:bg-sky-400/85 dark:text-white">
              4
            </div>
            <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-visible dark:bg-sky-400/85 dark:text-white">
              5
            </div>
            <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-visible dark:bg-sky-400/85 dark:text-white">
              6
            </div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:backface-hidden,backface-visible] -->
<div class="size-20 ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-hidden ...">1</div>
  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-hidden ...">2</div>
  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-hidden ...">3</div>
  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-hidden ...">4</div>
  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-hidden ...">5</div>
  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-hidden ...">6</div>
</div>

<div class="size-20 ...">
  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-visible ...">1</div>
  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-visible ...">2</div>
  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-visible ...">3</div>
  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-visible ...">4</div>
  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-visible ...">5</div>
  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-visible ...">6</div>
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="backface-visibility" defaultClass="backface-visible" featuredClass="backface-hidden" />



---
File: /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.";

<ApiTable
  rows={[
    ["bg-fixed", "background-attachment: fixed;"],
    ["bg-local", "background-attachment: local;"],
    ["bg-scroll", "background-attachment: scroll;"],
  ]}
/>

## Examples

### Fixing the background image

Use the `bg-fixed` utility to fix the background image relative to the viewport:

<Figure hint="Scroll the content to see the background image fixed in place">

<Example padding={false}>
  {
    <div className="mx-auto h-80 overflow-y-scroll border-x border-x-gray-200 bg-[url('https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800&q=80')] bg-cover bg-[center_-100px] dark:border-gray-800">
      <div className="mt-45">
        <div className="border-x border-x-gray-200 bg-white p-4 text-gray-500 sm:p-8 dark:border-x-gray-800 dark:bg-gray-900 dark:text-gray-400">
          <div className="font-inter text-2xl font-extrabold tracking-tight text-black dark:text-white">
            My trip to the summit
          </div>
          <div className="mt-1 text-sm font-medium text-gray-500">November 16, 2021 · 4 min read</div>
          <p className="mt-4 leading-7">
            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?
          </p>
          <p className="mt-4 leading-7">
            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.
          </p>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-fixed] -->
<div class="bg-[url(/img/mountains.jpg)] bg-fixed ...">
  <!-- ... -->
</div>
```

</Figure>

### Scrolling with the container

Use the `bg-local` utility to scroll the background image with the container and the viewport:

<Figure hint="Scroll the content to see the background image scroll with the container">

<Example padding={false}>
  {
    <div>
      <div className="h-64 overflow-y-scroll bg-[url('https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=666&q=80')] bg-cover bg-local">
        <div className="min-h-full bg-black/40 p-8 sm:px-16 sm:py-12">
          <p className="text-center font-serif text-xl leading-6 text-white italic sm:text-2xl sm:leading-8">
            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.
          </p>
          <div className="font-inter mt-6 text-center text-sm font-bold text-white sm:text-base">&mdash; Newman</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-local] -->
<div class="bg-[url(/img/mountains.jpg)] bg-local ...">
  <!-- ... -->
</div>
```

</Figure>

### Scrolling with the viewport

Use the `bg-scroll` utility to scroll the background image with the viewport, but not with the container:

<Figure hint="Scroll the content to see the background image fixed in the container">

<Example padding={false}>
  {
    <div>
      <div className="h-64 overflow-y-scroll bg-[url('https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=666&q=80')] bg-cover bg-scroll">
        <div className="min-h-full bg-black/40 p-8 sm:px-16 sm:py-12">
          <p className="text-center font-serif text-xl leading-6 text-white italic sm:text-2xl sm:leading-8">
            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.
          </p>
          <div className="font-inter mt-6 text-center text-sm font-bold text-white sm:text-base">&mdash; Newman</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-scroll] -->
<div class="bg-[url(/img/mountains.jpg)] bg-scroll ...">
  <!-- ... -->
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="background-attachment" defaultClass="bg-local" featuredClass="bg-fixed" />



---
File: /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.";

<ApiTable
  rows={[
    ["bg-blend-normal", "background-blend-mode: normal;"],
    ["bg-blend-multiply", "background-blend-mode: multiply;"],
    ["bg-blend-screen", "background-blend-mode: screen;"],
    ["bg-blend-overlay", "background-blend-mode: overlay;"],
    ["bg-blend-darken", "background-blend-mode: darken;"],
    ["bg-blend-lighten", "background-blend-mode: lighten;"],
    ["bg-blend-color-dodge", "background-blend-mode: color-dodge;"],
    ["bg-blend-color-burn", "background-blend-mode: color-burn;"],
    ["bg-blend-hard-light", "background-blend-mode: hard-light;"],
    ["bg-blend-soft-light", "background-blend-mode: soft-light;"],
    ["bg-blend-difference", "background-blend-mode: difference;"],
    ["bg-blend-exclusion", "background-blend-mode: exclusion;"],
    ["bg-blend-hue", "background-blend-mode: hue;"],
    ["bg-blend-saturation", "background-blend-mode: saturation;"],
    ["bg-blend-color", "background-blend-mode: color;"],
    ["bg-blend-luminosity", "background-blend-mode: luminosity;"],
  ]}
/>

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

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-between gap-y-6 px-1 sm:flex-row md:px-4">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          bg-blend-multiply
        </p>
        <div className="size-24 bg-blue-500 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat bg-blend-multiply md:size-32"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          bg-blend-soft-light
        </p>
        <div className="size-24 bg-blue-500 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat bg-blend-soft-light md:size-32"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          bg-blend-overlay
        </p>
        <div className="size-24 bg-blue-500 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat bg-blend-overlay md:size-32"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-blend-multiply,bg-blend-soft-light,bg-blend-overlay] -->
<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-multiply ..."></div>
<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-soft-light ..."></div>
<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-overlay ..."></div>
```

</Figure>

### Responsive design

<ResponsiveDesign
  property="background-blend-mode"
  defaultClass="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-lighten"
  featuredClass="bg-blend-darken"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["bg-clip-border", "background-clip: border-box;"],
    ["bg-clip-padding", "background-clip: padding-box;"],
    ["bg-clip-content", "background-clip: content-box;"],
    ["bg-clip-text", "background-clip: text;"],
  ]}
/>

## Examples

### Basic example

Use the `bg-clip-border`, `bg-clip-padding`, and `bg-clip-content` utilities to control the bounding box of an element's background:

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-center space-y-10 sm:flex-row sm:space-y-0 sm:space-x-10">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          bg-clip-border
        </p>
        <div className="flex h-24 w-24 items-center justify-center rounded-lg border-3 border-dashed border-white/50 bg-indigo-500 bg-clip-border p-3 font-mono text-sm font-extrabold text-white"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          bg-clip-padding
        </p>
        <div className="flex h-24 w-24 items-center justify-center rounded-lg border-3 border-dashed border-indigo-500/50 bg-indigo-500 bg-clip-padding p-3 font-mono text-sm font-extrabold text-white"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          bg-clip-content
        </p>
        <div className="flex h-24 w-24 items-center justify-center rounded-lg border-3 border-dashed border-indigo-500/50 bg-indigo-500 bg-clip-content p-3 font-mono text-sm font-extrabold text-white"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-clip-border,bg-clip-padding,bg-clip-content] -->
<div class="border-4 bg-indigo-500 bg-clip-border p-3"></div>
<div class="border-4 bg-indigo-500 bg-clip-padding p-3"></div>
<div class="border-4 bg-indigo-500 bg-clip-content p-3"></div>
```

</Figure>

### Cropping to text

Use the `bg-clip-text` utility to crop an element's background to match the shape of the text:

<Figure>

<Example>
  {
    <p className="bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-center text-4xl leading-none font-extrabold tracking-tight text-transparent sm:text-5xl">
      Hello world
    </p>
  }
</Example>

```html
<!-- [!code classes:bg-clip-text] -->
<p class="bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-5xl font-extrabold text-transparent ...">
  Hello world
</p>
```

</Figure>

### Responsive design

<ResponsiveDesign property="background-clip" defaultClass="bg-clip-border" featuredClass="bg-clip-padding" />



---
File: /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.";

<ApiTable
  rows={[
    ["bg-inherit", "background-color: inherit;"],
    ["bg-current", "background-color: currentColor;"],
    ["bg-transparent", "background-color: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [
      `bg-${name}`,
      `background-color: var(--color-${name}); /* ${value} */`,
    ]),
    ["bg-(<custom-property>)", "background-color: var(<custom-property>);"],
    ["bg-[<value>]", "background-color: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `bg-white`, `bg-indigo-500` and `bg-transparent` to control the background color of an element:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-4 text-sm text-white sm:grid-cols-3">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">bg-blue-500</p>
        <button
          type="button"
          tabIndex="-1"
          className="rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white opacity-100 focus:outline-none"
        >
          Button A
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">bg-cyan-500</p>
        <button
          type="button"
          tabIndex="-1"
          className="rounded-md bg-cyan-500 px-4 py-2 text-sm font-semibold text-white opacity-100 focus:outline-none"
        >
          Button B
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">bg-pink-500</p>
        <button
          type="button"
          tabIndex="-1"
          className="rounded-md bg-pink-500 px-4 py-2 text-sm font-semibold text-white opacity-100 focus:outline-none"
        >
          Button C
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-blue-500,bg-cyan-500,bg-pink-500] -->
<button class="bg-blue-500 ...">Button A</button>
<button class="bg-cyan-500 ...">Button B</button>
<button class="bg-pink-500 ...">Button C</button>
```

</Figure>

### Changing the opacity

Use the color opacity modifier to control the opacity of an element's background color:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-4 text-sm text-white sm:grid-cols-3">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          bg-sky-500/100
        </p>
        <button
          type="button"
          tabIndex="-1"
          className="rounded-md bg-sky-500/100 px-4 py-2 text-sm font-semibold text-white opacity-100 focus:outline-none"
        >
          Button A
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">bg-sky-500/75</p>
        <button
          type="button"
          tabIndex="-1"
          className="rounded-md bg-sky-500/75 px-4 py-2 text-sm font-semibold text-white opacity-100 focus:outline-none"
        >
          Button B
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">bg-sky-500/50</p>
        <button
          type="button"
          tabIndex="-1"
          className="rounded-md bg-sky-500/50 px-4 py-2 text-sm font-semibold text-white opacity-100 focus:outline-none"
        >
          Button C
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code word:/100] -->
<!-- [!code word:/75] -->
<!-- [!code word:/50] -->
<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="bg" value="#50d71e" name="background color" variable="color" />

### Applying on hover

<TargetingSpecificStates property="background-color">

<Figure>

<Example>
  {
    <button
      type="button"
      tabIndex="-1"
      className="mx-auto block rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white hover:bg-fuchsia-500 focus:outline-none"
    >
      Save changes
    </button>
  }
</Example>

```html
<!-- [!code classes:hover:bg-fuchsia-500] -->
<button class="bg-indigo-500 hover:bg-fuchsia-500 ...">Save changes</button>
```

</Figure>

</TargetingSpecificStates>

### Responsive design

<ResponsiveDesign property="background-color" defaultClass="bg-blue-500" featuredClass="bg-green-500" />

## Customizing your theme

<CustomizingYourThemeColors utility="bg" />



---
File: /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.";

<svg className="hidden">
  <symbol id="gradient-color-stop" viewBox="0 0 32 34">
    <path d="M1 4a4 4 0 0 1 4-4h22a4 4 0 0 1 4 4v19.6a4 4 0 0 1-2.118 3.53L16 34 3.118 27.13A4 4 0 0 1 1 23.6V4Z" />
    <path
      fill="none"
      stroke="#000"
      strokeOpacity=".05"
      d="M5 .5h22A3.5 3.5 0 0 1 30.5 4v19.6a3.5 3.5 0 0 1-1.853 3.088L16 33.433 3.353 26.688A3.5 3.5 0 0 1 1.5 23.6V4A3.5 3.5 0 0 1 5 .5Z"
    />
  </symbol>
</svg>

<ApiTable
  rows={[
    ["bg-[<value>]", "background-image: <value>;"],
    ["bg-(image:<custom-property>)", "background-image: var(<custom-property>);"],
    ["bg-none", "background-image: none;"],
    ["bg-linear-to-t", "background-image: linear-gradient(to top, var(--tw-gradient-stops));"],
    ["bg-linear-to-tr", "background-image: linear-gradient(to top right, var(--tw-gradient-stops));"],
    ["bg-linear-to-r", "background-image: linear-gradient(to right, var(--tw-gradient-stops));"],
    ["bg-linear-to-br", "background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));"],
    ["bg-linear-to-b", "background-image: linear-gradient(to bottom, var(--tw-gradient-stops));"],
    ["bg-linear-to-bl", "background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));"],
    ["bg-linear-to-l", "background-image: linear-gradient(to left, var(--tw-gradient-stops));"],
    ["bg-linear-to-tl", "background-image: linear-gradient(to top left, var(--tw-gradient-stops));"],
    ["bg-linear-<angle>", "background-image: linear-gradient(<angle> in oklab, var(--tw-gradient-stops));"],
    ["-bg-linear-<angle>", "background-image: linear-gradient(-<angle> in oklab, var(--tw-gradient-stops));"],
    [
      "bg-linear-(<custom-property>)",
      "background-image: linear-gradient(var(--tw-gradient-stops, var(<custom-property>)));",
    ],
    ["bg-linear-[<value>]", "background-image: linear-gradient(var(--tw-gradient-stops, <value>));"],
    ["bg-radial", "background-image: radial-gradient(in oklab, var(--tw-gradient-stops));"],
    [
      "bg-radial-(<custom-property>)",
      "background-image: radial-gradient(var(--tw-gradient-stops,  var(<custom-property>)));",
    ],
    ["bg-radial-[<value>]", "background-image: radial-gradient(var(--tw-gradient-stops, <value>));"],
    ["bg-conic-<angle>", "background-image: conic-gradient(from <angle> in oklab, var(--tw-gradient-stops));"],
    ["-bg-conic-<angle>", "background-image: conic-gradient(from -<angle> in oklab, var(--tw-gradient-stops));"],
    ["bg-conic-(<custom-property>)", "background-image: var(<custom-property>);"],
    ["bg-conic-[<value>]", "background-image: <image>;"],
    ["from-<color>", "--tw-gradient-from: <color>;"],
    ["from-<percentage>", "--tw-gradient-from-position: <percentage>;"],
    ["from-(<custom-property>)", "--tw-gradient-from: var(<custom-property>);"],
    ["from-[<value>]", "--tw-gradient-from: <value>;"],
    ["via-<color>", "--tw-gradient-via: <color>;"],
    ["via-<percentage>", "--tw-gradient-via-position: <percentage>;"],
    ["via-(<custom-property>)", "--tw-gradient-via: var(<custom-property>);"],
    ["via-[<value>]", "--tw-gradient-via: <value>;"],
    ["to-<color>", "--tw-gradient-to: <color>;"],
    ["to-<percentage>", "--tw-gradient-to-position: <percentage>;"],
    ["to-(<custom-property>)", "--tw-gradient-to: var(<custom-property>);"],
    ["to-[<value>]", "--tw-gradient-to: <value>;"],
  ]}
/>

## Examples

### Basic example

Use the `bg-[<value>]` syntax to set the background image of an element:

<Figure>

<Example>
  {
    <div className="relative mx-auto flex h-48 w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96">
      <div className="h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat"></div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-[url(/img/mountains.jpg)]] -->
<div class="bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Adding a linear gradient

Use utilities like `bg-linear-to-r` and `bg-linear-<angle>` with the [color stop utilities](#setting-gradient-color-stops) to add a linear gradient to an element:

<Figure>

<Example>
  {
    <div className="space-y-4">
      <div className="h-14 rounded-lg bg-linear-to-r from-cyan-500 to-blue-500"></div>
      <div className="h-14 rounded-lg bg-linear-to-t from-sky-500 to-indigo-500"></div>
      <div className="h-14 rounded-lg bg-linear-to-bl from-violet-500 to-fuchsia-500"></div>
      <div className="h-14 rounded-lg bg-linear-65 from-purple-500 to-pink-500"></div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-linear-to-r,bg-linear-to-t,bg-linear-to-bl,bg-linear-65] -->
<div class="h-14 bg-linear-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-linear-to-t from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-linear-to-bl from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-linear-65 from-purple-500 to-pink-500"></div>
```

</Figure>

### Adding a radial gradient

Use the `bg-radial` and `bg-radial-[<position>]` utilities with the [color stop utilities](#setting-gradient-color-stops) to add a radial gradient to an element:

<Figure>

<Example padding={false}>
  {
    <div className="flex justify-around p-8 sm:p-12">
      <div className="size-18 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700 sm:size-24"></div>
      <div className="size-18 rounded-full bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90% sm:size-24"></div>
      <div className="size-18 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75% sm:size-24"></div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-radial-[at_50%_75%],bg-radial-[at_25%_25%],bg-radial] -->
<div class="size-18 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700"></div>
<div class="size-18 rounded-full bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90%"></div>
<div class="size-18 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>
```

</Figure>

### Adding a conic gradient

Use the `bg-conic` and `bg-conic-<angle>` utilities with the [color stop utilities](#setting-gradient-color-stops) to add a conic gradient to an element:

<Figure>

<Example padding={false}>
  {
    <div className="flex justify-around p-8 sm:p-12">
      <div className="size-18 rounded-full bg-conic from-blue-600 to-sky-400 to-50% sm:size-24"></div>
      <div className="size-18 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600 sm:size-24"></div>
      <div className="size-18 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700 sm:size-24"></div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-conic-180,bg-conic/decreasing,bg-conic] -->
<div class="size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%"></div>
<div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>
<div class="size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700"></div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="mx-5">
      <div className="relative h-[3.625rem]">
        <div className="absolute top-0 left-px -ml-4 flex h-12 flex-col items-center">
          <svg viewBox="0 0 32 34" className="w-8 flex-none fill-indigo-500 drop-shadow">
            <use href="#gradient-color-stop" />
          </svg>
          <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
        </div>
        <div className="absolute top-0 left-1/2 -ml-4 flex h-12 flex-col items-center">
          <svg viewBox="0 0 32 34" className="w-8 flex-none fill-purple-500 drop-shadow">
            <use href="#gradient-color-stop" />
          </svg>
          <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
        </div>
        <div className="absolute top-0 right-px -mr-4 flex h-12 flex-col items-center">
          <svg viewBox="0 0 32 34" className="w-8 flex-none fill-pink-500 drop-shadow">
            <use href="#gradient-color-stop" />
          </svg>
          <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
        </div>
      </div>
      <div className="h-10 rounded-lg bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
    </div>
  }
</Example>

```html
<!-- [!code classes:from-indigo-500,via-purple-500,to-pink-500] -->
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 ..."></div>
```

</Figure>

### Setting gradient stop positions

Use utilities like `from-10%`, `via-30%`, and `to-90%` to set more precise positions for the gradient color stops:

<Figure>

<Example>
  {
    <div className="mx-5">
      <div className="relative h-[3.625rem]">
        <div className="absolute top-0 left-[10%] -ml-4 flex h-12 flex-col items-center">
          <svg viewBox="0 0 32 34" className="w-8 flex-none fill-indigo-500 drop-shadow">
            <use href="#gradient-color-stop" />
          </svg>
          <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
          <div className="absolute top-0 left-0 flex h-8 w-full items-center justify-center font-mono text-[0.6875rem] font-semibold tracking-wider text-white">
            10%
          </div>
        </div>
        <div className="absolute top-0 left-[30%] -ml-4 flex h-12 flex-col items-center">
          <svg viewBox="0 0 32 34" className="w-8 flex-none fill-sky-500 drop-shadow">
            <use href="#gradient-color-stop" />
          </svg>
          <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
          <div className="absolute top-0 left-0 flex h-8 w-full items-center justify-center font-mono text-[0.6875rem] font-semibold tracking-wider text-white">
            30%
          </div>
        </div>
        <div className="absolute top-0 right-[10%] -mr-4 flex h-12 flex-col items-center">
          <svg viewBox="0 0 32 34" className="w-8 flex-none fill-emerald-500 drop-shadow">
            <use href="#gradient-color-stop" />
          </svg>
          <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
          <div className="absolute top-0 left-0 flex h-8 w-full items-center justify-center font-mono text-[0.6875rem] font-semibold tracking-wider text-white">
            90%
          </div>
        </div>
      </div>
      <div className="h-10 rounded-lg bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%"></div>
    </div>
  }
</Example>

```html
<!-- [!code classes:from-10%,via-30%,to-90%] -->
<div class="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ..."></div>
```

</Figure>

### Changing interpolation mode

Use the interpolation modifier to control the interpolation mode of a gradient:

<Figure>

<Example>
  {
    <div>
      <div className="grid grid-cols-1 items-center gap-x-4 gap-y-0 sm:grid-cols-[auto_1fr] sm:gap-y-2">
        <p className="mt-2 font-mono text-xs font-medium text-gray-500 sm:mt-0 sm:text-right dark:text-gray-400">
          srgb
        </p>
        <div className="mt-1 h-12 rounded-lg bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div>
        <p className="mt-2 font-mono text-xs font-medium text-gray-500 sm:mt-0 sm:text-right dark:text-gray-400">hsl</p>
        <div className="mt-1 h-12 rounded-lg bg-linear-to-r/hsl from-indigo-500 to-teal-400"></div>
        <p className="mt-2 font-mono text-xs font-medium text-gray-500 sm:mt-0 sm:text-right dark:text-gray-400">
          oklab
        </p>
        <div className="mt-1 h-12 rounded-lg bg-linear-to-r/oklab from-indigo-500 to-teal-400"></div>
        <p className="mt-2 font-mono text-xs font-medium text-gray-500 sm:mt-0 sm:text-right dark:text-gray-400">
          oklch
        </p>
        <div className="mt-1 h-12 rounded-lg bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div>
        <p className="mt-2 font-mono text-xs font-medium text-gray-500 sm:mt-0 sm:text-right dark:text-gray-400">
          longer
        </p>
        <div className="mt-1 h-12 rounded-lg bg-linear-to-r/longer from-indigo-500 to-teal-400"></div>
        <p className="mt-2 font-mono text-xs font-medium text-gray-500 sm:mt-0 sm:text-right dark:text-gray-400">
          shorter
        </p>
        <div className="mt-1 h-12 rounded-lg bg-linear-to-r/shorter from-indigo-500 to-teal-400"></div>
        <p className="mt-2 font-mono text-xs font-medium text-gray-500 sm:mt-0 sm:text-right dark:text-gray-400">
          increasing
        </p>
        <div className="mt-1 h-12 rounded-lg bg-linear-to-r/increasing from-indigo-500 to-teal-400"></div>
        <p className="mt-2 font-mono text-xs font-medium text-gray-500 sm:mt-0 sm:text-right dark:text-gray-400">
          decreasing
        </p>
        <div className="mt-1 h-12 rounded-lg bg-linear-to-r/decreasing from-indigo-500 to-teal-400"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code word:/srgb] -->
<!-- [!code word:/hsl] -->
<!-- [!code word:/oklab] -->
<!-- [!code word:/oklch] -->
<!-- [!code word:/longer] -->
<!-- [!code word:/shorter] -->
<!-- [!code word:/increasing] -->
<!-- [!code word:/decreasing] -->
<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/hsl from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/oklab from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/longer from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/shorter from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/increasing from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/decreasing from-indigo-500 to-teal-400"></div>
```

</Figure>

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
<!-- [!code classes:bg-none] -->
<div class="bg-none"></div>
```

### Using a custom value

<UsingACustomValue
  utilities={["bg-linear", "from"]}
  name="gradient"
  value="25deg,red_5%,yellow_60%,lime_90%,teal"
  variable="gradient"
/>

### Responsive design

<ResponsiveDesign property="background-image" defaultClass="from-purple-400" featuredClass="from-yellow-500" />

## Customizing your theme

<CustomizingYourThemeColors utilities={["from", "via", "to"]} />



---
File: /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.";

<ApiTable
  rows={[
    ["bg-origin-border", "background-origin: border-box;"],
    ["bg-origin-padding", "background-origin: padding-box;"],
    ["bg-origin-content", "background-origin: content-box;"],
  ]}
/>

## Examples

### Basic example

Use the `bg-origin-border`, `bg-origin-padding`, and `bg-origin-content` utilities to control where an element's background is rendered:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-12 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-origin-border
          </p>
          <div className="h-24 w-24 rounded-lg border-4 border-dashed border-white/75 bg-gray-300 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-cover bg-no-repeat bg-origin-border object-cover p-3 dark:border-white/40"></div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-origin-padding
          </p>
          <div className="h-24 w-24 rounded-lg border-4 border-dashed border-white/75 bg-gray-300 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-cover bg-no-repeat bg-origin-padding object-cover p-3 dark:border-white/25 dark:bg-gray-700"></div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-origin-content
          </p>
          <div className="h-24 w-24 rounded-lg border-4 border-dashed border-white/75 bg-gray-300 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-cover bg-no-repeat bg-origin-content object-cover p-3 dark:border-white/25 dark:bg-gray-700"></div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-origin-border,bg-origin-padding,bg-origin-content] -->
<div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-border p-3 ..."></div>
<div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-padding p-3 ..."></div>
<div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-content p-3 ..."></div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="background-origin" defaultClass="bg-origin-border" featuredClass="bg-origin-padding" />



---
File: /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.";

<ApiTable
  rows={[
    ["bg-top-left", "background-position: top left;"],
    ["bg-top", "background-position: top;"],
    ["bg-top-right", "background-position: top right;"],
    ["bg-left", "background-position: left;"],
    ["bg-center", "background-position: center;"],
    ["bg-right", "background-position: right;"],
    ["bg-bottom-left", "background-position: bottom left;"],
    ["bg-bottom", "background-position: bottom;"],
    ["bg-bottom-right", "background-position: bottom right;"],
    ["bg-position-(<custom-property>)", "background-position: var(<custom-property>);"],
    ["bg-position-[<value>]", "background-position: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `bg-center`, `bg-right`, and `bg-top-left` to control the position of an element's background image:

<Figure hint="Hover over these examples to see the full image">

<Example padding={false}>
  {
    <div className="w-full">
      <div className="flex snap-x scroll-p-4 items-end overflow-x-scroll overflow-y-hidden p-8 pt-16 sm:grid sm:grid-cols-3 sm:gap-16">
        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-top-left
          </p>
          <div className="group relative mx-auto h-20 w-20 rounded-lg">
            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top-left outline -outline-offset-1 outline-black/10"></div>
            <img
              className="absolute top-0 left-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
          </div>
        </div>
        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-top
          </p>
          <div className="group relative mx-auto h-20 w-20 rounded-lg">
            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top outline -outline-offset-1 outline-black/10"></div>
            <img
              className="absolute top-0 -left-6 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
          </div>
        </div>
        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-top-right
          </p>
          <div className="group relative mx-auto h-20 w-20 rounded-lg">
            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top-right outline -outline-offset-1 outline-black/10"></div>
            <img
              className="absolute top-0 right-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
          </div>
        </div>
        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-left
          </p>
          <div className="group relative mx-auto h-20 w-20 rounded-lg">
            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-left outline -outline-offset-1 outline-black/10"></div>
            <img
              className="absolute -top-6 left-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
          </div>
        </div>
        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-center
          </p>
          <div className="group relative mx-auto h-20 w-20 rounded-lg">
            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-center outline -outline-offset-1 outline-black/10"></div>
            <img
              className="absolute -top-6 -left-6 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
          </div>
        </div>
        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-right
          </p>
          <div className="group relative mx-auto h-20 w-20 rounded-lg">
            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-right outline -outline-offset-1 outline-black/10"></div>
            <img
              className="absolute -top-6 right-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
          </div>
        </div>
        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-bottom-left
          </p>
          <div className="group relative mx-auto h-20 w-20 rounded-lg">
            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom-left outline -outline-offset-1 outline-black/10"></div>
            <img
              className="absolute -top-12 left-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
          </div>
        </div>
        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-bottom
          </p>
          <div className="group relative mx-auto h-20 w-20 rounded-lg">
            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom outline -outline-offset-1 outline-black/10"></div>
            <img
              className="absolute -top-12 -left-6 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
          </div>
        </div>
        <div className="relative -mx-8 w-48 shrink-0 snap-start snap-always sm:w-auto">
          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            bg-bottom-right
          </p>
          <div className="group relative mx-auto h-20 w-20 rounded-lg">
            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom-right outline -outline-offset-1 outline-black/10"></div>
            <img
              className="absolute -top-12 right-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-top-left,bg-top-right,bg-bottom-right,bg-bottom-left,bg-center,bg-right,bg-top,bg-bottom,bg-left] -->
<div class="bg-[url(/img/mountains.jpg)] bg-top-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-top"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-top-right"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-center"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-right"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom-right"></div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="bg-position" value="center_top_1rem" name="background position" variable="bg-position" />

### Responsive design

<ResponsiveDesign property="background-position" defaultClass="bg-center" featuredClass="bg-top" />



---
File: /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.";

<ApiTable
  rows={[
    ["bg-repeat", "background-repeat: repeat;"],
    ["bg-repeat-x", "background-repeat: repeat-x;"],
    ["bg-repeat-y", "background-repeat: repeat-y;"],
    ["bg-repeat-space", "background-repeat: space;"],
    ["bg-repeat-round", "background-repeat: round;"],
    ["bg-no-repeat", "background-repeat: no-repeat;"],
  ]}
/>

## Examples

### Basic example

Use the `bg-repeat` utility to repeat the background image both vertically and horizontally:

<Figure>

<Example padding={false}>
  {<div className="h-64 bg-center bg-repeat" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-repeat] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat ..."></div>
```

</Figure>

### Repeating horizontally

Use the `bg-repeat-x` utility to only repeat the background image horizontally:

<Figure>

<Example padding={false}>
  {<div className="h-64 bg-center bg-repeat-x" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-repeat-x] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-x ..."></div>
```

</Figure>

### Repeating vertically

Use the `bg-repeat-y` utility to only repeat the background image vertically:

<Figure>

<Example padding={false}>
  {<div className="h-64 bg-center bg-repeat-y" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-repeat-y] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-y ..."></div>
```

</Figure>

### Preventing clipping

Use the `bg-repeat-space` utility to repeat the background image without clipping:

<Figure>

<Example padding={false} resizable>
  {<div className="h-64 bg-center bg-repeat-space" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-repeat-space] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-space ..."></div>
```

</Figure>

### Preventing clipping and gaps

Use the `bg-repeat-round` utility to repeat the background image without clipping, stretching if needed to avoid gaps:

<Figure>

<Example padding={false} resizable>
  {<div className="h-64 bg-center bg-repeat-round" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-repeat-round] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-round ..."></div>
```

</Figure>

### Disabling repeating

Use the `bg-no-repeat` utility to prevent a background image from repeating:

<Figure>

<Example padding={false}>
  {<div className="h-64 bg-center bg-no-repeat" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
</Example>

```html
<!-- [!code classes:bg-no-repeat] -->
<div class="bg-[url(/img/clouds.svg)] bg-center bg-no-repeat ..."></div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="background-repeat" defaultClass="bg-repeat" featuredClass="bg-repeat-x" />



---
File: /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.";

<ApiTable
  rows={[
    ["bg-auto", "background-size: auto;"],
    ["bg-cover", "background-size: cover;"],
    ["bg-contain", "background-size: contain;"],
    ["bg-size-(<custom-property>)", "background-size: var(<custom-property>);"],
    ["bg-size-[<value>]", "background-size: <value>;"],
  ]}
/>

## Examples

### Filling the container

Use the `bg-cover` utility to scale the background image until it fills the background layer, cropping the image if needed:

<Figure>

<Example>
  {
    <div className="relative mx-auto flex w-56 items-center justify-center overflow-hidden rounded-lg sm:w-96">
      <div className="absolute inset-0">
        <Stripes border className="h-full rounded-lg" />
      </div>
      <div className="relative z-10 h-48 w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&h=640&q=80)] bg-cover bg-center bg-no-repeat"></div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-cover] -->
<div class="bg-[url(/img/mountains.jpg)] bg-cover bg-center"></div>
```

</Figure>

### Filling without cropping

Use the `bg-contain` utility to scale the background image to the outer edges without cropping or stretching:

<Figure>

<Example>
  {
    <div className="relative mx-auto flex w-56 items-center justify-center overflow-hidden rounded-lg sm:w-96">
      <div className="absolute inset-0">
        <Stripes border className="h-full rounded-lg" />
      </div>
      <div className="relative z-10 h-48 w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&h=640&q=80)] bg-contain bg-center bg-no-repeat sm:bg-top"></div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-contain] -->
<div class="bg-[url(/img/mountains.jpg)] bg-contain bg-center"></div>
```

</Figure>

### Using the default size

Use the `bg-auto` utility to display the background image at its default size:

<Figure>

<Example>
  {
    <div className="relative mx-auto flex h-48 w-56 items-center justify-center overflow-hidden rounded-lg sm:w-96">
      <div className="absolute inset-0">
        <Stripes border className="h-full rounded-lg" />
      </div>
      <div className="relative z-10 h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=128&h=160&q=80)] bg-auto bg-center bg-no-repeat"></div>
    </div>
  }
</Example>

```html
<!-- [!code classes:bg-auto] -->
<div class="bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat"></div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="bg-size" value="auto_100px" name="background size" variable="image-size" />

### Responsive design

<ResponsiveDesign property="background-size" defaultClass="bg-auto" featuredClass="bg-contain" />



---
File: /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.";

<ApiTable
  rows={[
    ["border-collapse", "border-collapse: collapse;"],
    ["border-separate", "border-collapse: separate;"],
  ]}
/>

## Examples

### Collapsing table borders

Use the `border-collapse` utility to combine adjacent cell borders into a single border when possible:

<Figure>

<Example padding={false}>
  {
    <div className="px-4 py-8 sm:px-8">
      <table className="w-full border-collapse border border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800">
        <thead className="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
              State
            </th>
            <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
              City
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Indiana
            </td>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Indianapolis
            </td>
          </tr>
          <tr>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">Ohio</td>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Columbus
            </td>
          </tr>
          <tr>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Michigan
            </td>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Detroit
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-collapse] -->
<table class="border-collapse border border-gray-400 ...">
  <thead>
    <tr>
      <th class="border border-gray-300 ...">State</th>
      <th class="border border-gray-300 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 ...">Indiana</td>
      <td class="border border-gray-300 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-gray-300 ...">Ohio</td>
      <td class="border border-gray-300 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-gray-300 ...">Michigan</td>
      <td class="border border-gray-300 ...">Detroit</td>
    </tr>
  </tbody>
</table>
```

</Figure>

Note that this includes collapsing borders on the top-level `<table>` tag.

### Separating table borders

Use the `border-separate` utility to force each cell to display its own separate borders:

<Figure>

<Example padding={false}>
  {
    <div className="px-4 py-8 sm:px-8">
      <table className="w-full border-separate border border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800">
        <thead className="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
              State
            </th>
            <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
              City
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Indiana
            </td>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Indianapolis
            </td>
          </tr>
          <tr>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">Ohio</td>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Columbus
            </td>
          </tr>
          <tr>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Michigan
            </td>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Detroit
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-separate] -->
<table class="border-separate border border-gray-400 ...">
  <thead>
    <tr>
      <th class="border border-gray-300 ...">State</th>
      <th class="border border-gray-300 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 ...">Indiana</td>
      <td class="border border-gray-300 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-gray-300 ...">Ohio</td>
      <td class="border border-gray-300 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-gray-300 ...">Michigan</td>
      <td class="border border-gray-300 ...">Detroit</td>
    </tr>
  </tbody>
</table>
```

</Figure>

### Responsive design

<ResponsiveDesign
  element="table"
  property="border-collapse"
  defaultClass="border-collapse"
  featuredClass="border-separate"
/>



---
File: /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.";

<ApiTable
  rows={[
    ...[
      ["border", (value) => `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}-(<custom-property>)`, css("var(<custom-property>);")],
      [`${utility}-[<value>]`, css("<value>;")],
    ]),
  ]}
/>

## Examples

### Basic example

Use utilities like `border-rose-500` and `border-lime-100` to control the border color of an element:

<Figure>

<Example>
  {
    <div className="grid gap-4 text-center text-sm leading-6 font-bold text-white lg:grid-cols-3">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-500 bg-white p-4 dark:bg-gray-900"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-purple-500
        </p>
        <div className="size-16 border-4 border-purple-500 bg-white p-4 dark:bg-gray-900"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-sky-500
        </p>
        <div className="size-16 border-4 border-sky-500 bg-white p-4 dark:bg-gray-900"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-indigo-500,border-purple-500,border-sky-500] -->
<div class="border-4 border-indigo-500 ..."></div>
<div class="border-4 border-purple-500 ..."></div>
<div class="border-4 border-sky-500 ..."></div>
```

</Figure>

### Changing the opacity

Use the color opacity modifier to control the opacity of an element's border color:

<Figure>

<Example>
  {
    <div className="grid gap-4 text-center text-sm leading-6 font-bold text-white lg:grid-cols-3">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-indigo-500/100
        </p>
        <div className="size-16 border-4 border-indigo-500/100 bg-white p-4 dark:bg-gray-900"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-indigo-500/75
        </p>
        <div className="size-16 border-4 border-indigo-500/75 bg-white p-4 dark:bg-gray-900"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-indigo-500/50
        </p>
        <div className="size-16 border-4 border-indigo-500/50 bg-white p-4 dark:bg-gray-900"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code word:/100] -->
<!-- [!code word:/75] -->
<!-- [!code word:/50] -->
<div class="border-4 border-indigo-500/100 ..."></div>
<div class="border-4 border-indigo-500/75 ..."></div>
<div class="border-4 border-indigo-500/50 ..."></div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-x-4 gap-y-8 text-center text-sm leading-6 font-bold text-white sm:grid-cols-2">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-t-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-t-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-t-indigo-500 dark:bg-gray-900"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-r-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-r-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-r-indigo-500 dark:bg-gray-900"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-b-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-b-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-b-indigo-500 dark:bg-gray-900"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-l-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-l-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-l-indigo-500 dark:bg-gray-900"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-t-indigo-500,border-r-indigo-500,border-b-indigo-500,border-l-indigo-500] -->
<div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-r-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-b-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-l-indigo-500 ..."></div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-x-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-x-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-x-indigo-500 dark:bg-gray-900"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          border-y-indigo-500
        </p>
        <div className="size-16 border-4 border-indigo-200 border-y-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-y-indigo-500 dark:bg-gray-900"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-x-indigo-500,border-y-indigo-500] -->
<div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-2 place-items-center gap-x-4">
      <div className="flex flex-col items-start gap-y-4" dir="ltr">
        <p className="text-sm font-medium">Left-to-right</p>
        <div className="size-16 border-4 border-indigo-200 border-s-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-s-indigo-500 dark:bg-gray-900"></div>
      </div>
      <div className="flex flex-col items-start gap-y-4" dir="rtl">
        <p className="text-sm font-medium">Right-to-left</p>
        <div className="size-16 border-4 border-indigo-200 border-s-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-s-indigo-500 dark:bg-gray-900"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-s-indigo-500,border-s-indigo-500] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<div dir="ltr">
  <div class="border-s-indigo-500 ..."></div>
</div>
<div dir="rtl">
  <div class="border-s-indigo-500 ..."></div>
</div>
```

</Figure>

### Divider between children

Use utilities like `divide-indigo-500` and `divide-lime-100` to control the border color between child elements:

<Figure>

<Example>
  {
    <div className="mx-auto grid max-w-lg grid-cols-3 divide-x-4 divide-indigo-500 rounded-lg text-center font-mono text-sm leading-6 font-bold text-gray-400">
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">01</div>
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">02</div>
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">03</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:divide-indigo-500] -->
<div class="grid grid-cols-3 divide-x-4 divide-indigo-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="border" name="border color" value="#243c5a" />

### Applying on focus

<TargetingSpecificStates property="border-color" variant="focus">

<Figure>

<Example>
  {
    <label className="mx-auto block max-w-xs">
      <span className="text-sm font-medium text-gray-900 dark:text-gray-200">Email address</span>
      <input
        type="text"
        placeholder="[email protected]"
        className="block w-full rounded-lg border-2 border-gray-700 px-3 py-2 font-sans text-sm leading-5 text-gray-500 focus:border-pink-600 focus:outline-none dark:bg-gray-900 dark:text-gray-400 dark:placeholder:text-gray-600"
      />
    </label>
  }
</Example>

```html
<!-- [!code classes:focus:border-pink-600] -->
<input class="border-2 border-gray-700 focus:border-pink-600 ..." />
```

</Figure>

</TargetingSpecificStates>

### Responsive design

<ResponsiveDesign property="border-color" defaultClass="border-blue-500" featuredClass="border-green-500" />

## Customizing your theme

<CustomizingYourThemeColors utility="border" />



---
File: /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.";

<ApiTable
  rows={[
    ["rounded", ["border-radius"]],
    ["rounded-s", ["border-start-start-radius", "border-end-start-radius"]],
    ["rounded-e", ["border-start-end-radius", "border-end-end-radius"]],
    ["rounded-t", ["border-top-left-radius", "border-top-right-radius"]],
    ["rounded-r", ["border-top-right-radius", "border-bottom-right-radius"]],
    ["rounded-b", ["border-bottom-right-radius", "border-bottom-left-radius"]],
    ["rounded-l", ["border-top-left-radius", "border-bottom-left-radius"]],
    ["rounded-ss", ["border-start-start-radius"]],
    ["rounded-se", ["border-start-end-radius"]],
    ["rounded-ee", ["border-end-end-radius"]],
    ["rounded-es", ["border-end-start-radius"]],
    ["rounded-tl", ["border-top-left-radius"]],
    ["rounded-tr", ["border-top-right-radius"]],
    ["rounded-br", ["border-bottom-right-radius"]],
    ["rounded-bl", ["border-bottom-left-radius"]],
  ].flatMap(([className, properties]) => [
    [`${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}-(<custom-property>)`,
      properties.map((property) => `${property}: var(<custom-property>);`).join("\n"),
    ],
    [`${className}-[<value>]`, properties.map((property) => `${property}: <value>;`).join("\n")],
  ])}
/>

## Examples

### Basic example

Use utilities like `rounded-sm` and `rounded-md` to apply different border radius sizes to an element:

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-sm</p>
        <div className="size-16 rounded-sm bg-purple-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-md</p>
        <div className="size-16 rounded-md bg-purple-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-lg</p>
        <div className="size-16 rounded-lg bg-purple-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-xl</p>
        <div className="size-16 rounded-xl bg-purple-500 p-4"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-sm,rounded-md,rounded-lg,rounded-xl] -->
<div class="rounded-sm ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-xl ..."></div>
```

</Figure>

### Rounding sides separately

Use utilities like `rounded-t-md` and `rounded-r-lg` to only round one side of an element:

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-t-lg</p>
        <div className="size-16 rounded-t-lg bg-blue-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-r-lg</p>
        <div className="size-16 rounded-r-lg bg-blue-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-b-lg</p>
        <div className="size-16 rounded-b-lg bg-blue-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-l-lg</p>
        <div className="size-16 rounded-l-lg bg-blue-500 p-4"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-t-lg,rounded-r-lg,rounded-b-lg,rounded-l-lg] -->
<div class="rounded-t-lg ..."></div>
<div class="rounded-r-lg ..."></div>
<div class="rounded-b-lg ..."></div>
<div class="rounded-l-lg ..."></div>
```

</Figure>

### Rounding corners separately

Use utilities like `rounded-tr-md` and `rounded-tl-lg` utilities to only round one corner of an element:

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-tl-lg</p>
        <div className="size-16 rounded-tl-lg bg-pink-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-tr-lg</p>
        <div className="size-16 rounded-tr-lg bg-pink-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-br-lg</p>
        <div className="size-16 rounded-br-lg bg-pink-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-bl-lg</p>
        <div className="size-16 rounded-bl-lg bg-pink-500 p-4"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-tl-lg,rounded-tr-lg,rounded-br-lg,rounded-bl-lg] -->
<div class="rounded-tl-lg ..."></div>
<div class="rounded-tr-lg ..."></div>
<div class="rounded-br-lg ..."></div>
<div class="rounded-bl-lg ..."></div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-2 place-items-center gap-x-4">
      <div className="flex flex-col items-start gap-y-4" dir="ltr">
        <p className="text-sm font-medium">Left-to-right</p>
        <div className="size-16 rounded-s-lg bg-blue-500 p-4"></div>
      </div>
      <div className="flex flex-col items-start gap-y-4" dir="rtl">
        <p className="text-sm font-medium">Right-to-left</p>
        <div className="size-16 rounded-s-lg bg-blue-500 p-4"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-s-lg] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<div dir="ltr">
  <div class="rounded-s-lg ..."></div>
</div>

<div dir="rtl">
  <div class="rounded-s-lg ..."></div>
</div>
```

</Figure>

Here are all the available border radius logical property utilities and their physical property equivalents in both LTR and RTL modes.

{

<table>
  <thead>
    <tr>
      <th>Class</th>
      <th>Left-to-right</th>
      <th>Right-to-left</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <code>rounded-s-*</code>
      </td>
      <td>
        <code>rounded-l-*</code>
      </td>
      <td>
        <code>rounded-r-*</code>
      </td>
    </tr>
    <tr>
      <td>
        <code>rounded-e-*</code>
      </td>
      <td>
        <code>rounded-r-*</code>
      </td>
      <td>
        <code>rounded-l-*</code>
      </td>
    </tr>
    <tr>
      <td>
        <code>rounded-ss-*</code>
      </td>
      <td>
        <code>rounded-tl-*</code>
      </td>
      <td>
        <code>rounded-tr-*</code>
      </td>
    </tr>
    <tr>
      <td>
        <code>rounded-se-*</code>
      </td>
      <td>
        <code>rounded-tr-*</code>
      </td>
      <td>
        <code>rounded-tl-*</code>
      </td>
    </tr>
    <tr>
      <td>
        <code>rounded-es-*</code>
      </td>
      <td>
        <code>rounded-bl-*</code>
      </td>
      <td>
        <code>rounded-br-*</code>
      </td>
    </tr>
    <tr>
      <td>
        <code>rounded-ee-*</code>
      </td>
      <td>
        <code>rounded-br-*</code>
      </td>
      <td>
        <code>rounded-bl-*</code>
      </td>
    </tr>
  </tbody>
</table>

}

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:

<Figure>

<Example>
  {
    <div className="flex justify-center gap-4 text-center text-sm leading-6 font-bold text-white">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-full</p>
        <button className="rounded-full bg-cyan-500 px-4 py-2 text-sm font-semibold text-white">Save Changes</button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-full] -->
<button class="rounded-full ...">Save Changes</button>
```

</Figure>

### Removing the border radius

Use the `rounded-none` utility to remove an existing border radius from an element:

<Figure>

<Example>
  {
    <div className="flex justify-center gap-4 text-center text-sm leading-6 font-bold text-white">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-none</p>
        <button className="rounded-none bg-sky-500 px-4 py-2 text-sm font-semibold text-white">Save Changes</button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:rounded-none] -->
<button class="rounded-none ...">Save Changes</button>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="rounded" name="border radius" value="2vw" variable="radius" />

### Responsive design

<ResponsiveDesign property="border-radius" defaultClass="rounded" featuredClass="rounded-lg" />

## Customizing your theme

<CustomizingYourTheme utility="rounded" themeKey="radius" name="border radius" customName="5xl" customValue="3rem" />



---
File: /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.";

<ApiTable
  rows={[
    ["border-spacing-<number>", "border-spacing: calc(var(--spacing) * <number>);"],
    ["border-spacing-(<custom-property>)", "border-spacing: var(<custom-property>);"],
    ["border-spacing-[<value>]", "border-spacing: <value>;"],
    ["border-spacing-x-<number>", "border-spacing: calc(var(--spacing) * <number>) var(--tw-border-spacing-y);"],
    ["border-spacing-x-(<custom-property>)", "border-spacing: var(<custom-property>) var(--tw-border-spacing-y);"],
    ["border-spacing-x-[<value>]", "border-spacing: <value> var(--tw-border-spacing-y);"],
    ["border-spacing-y-<number>", "border-spacing: var(--tw-border-spacing-x) calc(var(--spacing) * <number>);"],
    ["border-spacing-y-(<custom-property>)", "border-spacing: var(--tw-border-spacing-x) var(<custom-property>);"],
    ["border-spacing-y-[<value>]", "border-spacing: var(--tw-border-spacing-x) <value>;"],
  ]}
/>

## Examples

### Basic example

Use `border-spacing-<number>` utilities like `border-spacing-2` and `border-spacing-x-3` to control the space between the borders of table cells with [separate borders](/docs/border-collapse#separating-table-borders):

<Figure>

<Example padding={false}>
  {
    <div className="px-4 py-8 sm:px-8">
      <table className="w-full border-separate border-spacing-2 border border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800">
        <thead className="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
              State
            </th>
            <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
              City
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Indiana
            </td>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Indianapolis
            </td>
          </tr>
          <tr>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">Ohio</td>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Columbus
            </td>
          </tr>
          <tr>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Michigan
            </td>
            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
              Detroit
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-spacing-2] -->
<table class="border-separate border-spacing-2 border border-gray-400 dark:border-gray-500">
  <thead>
    <tr>
      <th class="border border-gray-300 dark:border-gray-600">State</th>
      <th class="border border-gray-300 dark:border-gray-600">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 dark:border-gray-700">Indiana</td>
      <td class="border border-gray-300 dark:border-gray-700">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-gray-300 dark:border-gray-700">Ohio</td>
      <td class="border border-gray-300 dark:border-gray-700">Columbus</td>
    </tr>
    <tr>
      <td class="border border-gray-300 dark:border-gray-700">Michigan</td>
      <td class="border border-gray-300 dark:border-gray-700">Detroit</td>
    </tr>
  </tbody>
</table>
```

</Figure>

### Using a custom value

<UsingACustomValue element="table" utility="border-spacing" value="7px" name="border spacing" />

### Responsive design

<ResponsiveDesign
  element="table"
  property="border-spacing"
  defaultClass="border-spacing-2"
  featuredClass="border-spacing-4"
/>

## Customizing your theme

<CustomizingYourSpacingScale utility="border-spacing" />



---
File: /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.";

<ApiTable
  rows={[
    ["border-solid", "border-style: solid;"],
    ["border-dashed", "border-style: dashed;"],
    ["border-dotted", "border-style: dotted;"],
    ["border-double", "border-style: double;"],
    ["border-hidden", "border-style: hidden;"],
    ["border-none", "border-style: none;"],
    ["divide-solid", "& > :not(:last-child) {\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:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-x-4 gap-y-8 text-center text-sm leading-6 font-bold text-white sm:grid-cols-2">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-solid</p>
        <button className="rounded-md border-2 border-solid border-indigo-500 bg-white px-4 py-2 text-sm font-semibold text-gray-700 dark:border-sky-500 dark:bg-gray-700 dark:text-white">
          Button A
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-dashed</p>
        <button className="rounded-md border-2 border-dashed border-indigo-500 bg-white px-4 py-2 text-sm font-semibold text-gray-700 dark:border-sky-500 dark:bg-gray-700 dark:text-white">
          Button A
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-dotted</p>
        <button className="rounded-md border-2 border-dotted border-indigo-500 bg-white px-4 py-2 text-sm font-semibold text-gray-700 dark:border-sky-500 dark:bg-gray-700 dark:text-white">
          Button A
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-double</p>
        <button className="rounded-md border-4 border-double border-indigo-500 bg-white px-4 py-2 text-sm font-semibold text-gray-700 dark:border-sky-500 dark:bg-gray-700 dark:text-white">
          Button A
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-solid,border-dashed,border-dotted,border-double] -->
<div class="border-2 border-solid ..."></div>
<div class="border-2 border-dashed ..."></div>
<div class="border-2 border-dotted ..."></div>
<div class="border-4 border-double ..."></div>
```

</Figure>

### Removing a border

Use the `border-none` utility to remove an existing border from an element:

<Figure>

<Example>
  {
    <div className="flex justify-center gap-4 text-center text-sm leading-6 font-bold text-white">
      <button className="rounded-md border-2 border-none border-indigo-500 bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-700 dark:bg-gray-700 dark:text-white">
        Save Changes
      </button>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-none] -->
<button class="border-none ...">Save Changes</button>
```

</Figure>

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:

<Figure>

<Example>
  {
    <div className="mx-auto grid max-w-lg grid-cols-3 divide-x-3 divide-dashed divide-indigo-500 rounded-lg text-center font-mono text-sm leading-6 font-bold text-gray-400">
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">01</div>
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">02</div>
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">03</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:divide-dashed] -->
<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="border-style" defaultClass="border-solid" featuredClass="border-dotted" />



---
File: /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.";

<ApiTable
  rows={[
    ["border", "border-width: 1px;"],
    ["border-<number>", "border-width: <number>px;"],
    ["border-(length:<custom-property>)", "border-width: var(<custom-property>);"],
    ["border-[<value>]", "border-width: <value>;"],
    ["border-x", "border-inline-width: 1px;"],
    ["border-x-<number>", "border-inline-width: <number>px;"],
    ["border-x-(length:<custom-property>)", "border-inline-width: var(<custom-property>);"],
    ["border-x-[<value>]", "border-inline-width: <value>;"],
    ["border-y", "border-block-width: 1px;"],
    ["border-y-<number>", "border-block-width: <number>px;"],
    ["border-y-(length:<custom-property>)", "border-block-width: var(<custom-property>);"],
    ["border-y-[<value>]", "border-block-width: <value>;"],
    ["border-s", "border-inline-start-width: 1px;"],
    ["border-s-<number>", "border-inline-start-width: <number>px;"],
    ["border-s-(length:<custom-property>)", "border-inline-start-width: var(<custom-property>);"],
    ["border-s-[<value>]", "border-inline-start-width: <value>;"],
    ["border-e", "border-inline-end-width: 1px;"],
    ["border-e-<number>", "border-inline-end-width: <number>px;"],
    ["border-e-(length:<custom-property>)", "border-inline-end-width: var(<custom-property>);"],
    ["border-e-[<value>]", "border-inline-end-width: <value>;"],
    ["border-t", "border-top-width: 1px;"],
    ["border-t-<number>", "border-top-width: <number>px;"],
    ["border-t-(length:<custom-property>)", "border-top-width: var(<custom-property>);"],
    ["border-t-[<value>]", "border-top-width: <value>;"],
    ["border-r", "border-right-width: 1px;"],
    ["border-r-<number>", "border-right-width: <number>px;"],
    ["border-r-(length:<custom-property>)", "border-right-width: var(<custom-property>);"],
    ["border-r-[<value>]", "border-right-width: <value>;"],
    ["border-b", "border-bottom-width: 1px;"],
    ["border-b-<number>", "border-bottom-width: <number>px;"],
    ["border-b-(length:<custom-property>)", "border-bottom-width: var(<custom-property>);"],
    ["border-b-[<value>]", "border-bottom-width: <value>;"],
    ["border-l", "border-left-width: 1px;"],
    ["border-l-<number>", "border-left-width: <number>px;"],
    ["border-l-(length:<custom-property>)", "border-left-width: var(<custom-property>);"],
    ["border-l-[<value>]", "border-left-width: <value>;"],
    [
      "divide-x",
      dedent`
        & > :not(:last-child) {
          border-inline-start-width: 0px;
          border-inline-end-width: 1px;
        }
    `,
    ],
    [
      "divide-x-<number>",
      dedent`
        & > :not(:last-child) {
          border-inline-start-width: 0px;
          border-inline-end-width: <number>px;
        }
    `,
    ],
    [
      "divide-x-(length:<custom-property>)",
      dedent`
        & > :not(:last-child) {
          border-inline-start-width: 0px;
          border-inline-end-width: var(<custom-property>);
        }
    `,
    ],
    [
      "divide-x-[<value>]",
      dedent`
        & > :not(:last-child) {
          border-inline-start-width: 0px;
          border-inline-end-width: <value>;
        }
    `,
    ],
    [
      "divide-y",
      dedent`
        & > :not(:last-child) {
          border-top-width: 0px;
          border-bottom-width: 1px;
        }
    `,
    ],
    [
      "divide-y-<number>",
      dedent`
        & > :not(:last-child) {
          border-top-width: 0px;
          border-bottom-width: <number>px;
        }
    `,
    ],
    [
      "divide-y-(length:<custom-property>)",
      dedent`
        & > :not(:last-child) {
          border-top-width: 0px;
          border-bottom-width: var(<custom-property>);
        }
    `,
    ],
    [
      "divide-y-[<value>]",
      dedent`
        & > :not(:last-child) {
          border-top-width: 0px;
          border-bottom-width: <value>;
        }
    `,
    ],
    ["divide-x-reverse", "--tw-divide-x-reverse: 1;"],
    ["divide-y-reverse", "--tw-divide-y-reverse: 1;"],
  ]}
/>

## Examples

### Basic example

Use `border` or `border-<number>` utilities like `border-2` and `border-4` to set the border width for all sides of an element:

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border</p>
        <div className="size-16 border border-indigo-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-2</p>
        <div className="size-16 border-2 border-indigo-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-4</p>
        <div className="size-16 border-4 border-indigo-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-8</p>
        <div className="size-16 border-8 border-indigo-600 p-4"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border,border-2,border-4,border-8] -->
<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div>
```

</Figure>

### Individual sides

Use utilities like `border-r` and `border-t-4` to set the border width for one side of an element:

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-t-4</p>
        <div className="size-16 border-t-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-r-4</p>
        <div className="size-16 border-r-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-b-4</p>
        <div className="size-16 border-b-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-l-4</p>
        <div className="size-16 border-l-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-t-4,border-r-4,border-b-4,border-l-4] -->
<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-x-4</p>
        <div className="size-16 border-x-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-y-4</p>
        <div className="size-16 border-y-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:border-x-4,border-y-4] -->
<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-2 place-items-center gap-x-4">
      <div className="flex flex-col items-start gap-y-4" dir="ltr">
        <p className="text-sm font-medium">Left-to-right</p>
        <div className="size-16 border-s-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div>
      </div>
      <div className="flex flex-col items-start gap-y-4" dir="rtl">
        <p className="text-sm font-medium">Right-to-left</p>
        <div className="size-16 border-s-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<!-- [!code classes:border-s-4] -->
<div dir="ltr">
  <div class="border-s-4 ..."></div>
</div>
<div dir="rtl">
  <div class="border-s-4 ..."></div>
</div>
```

</Figure>

### Between children

Use utilities like `divide-x` and `divide-y-4` to add borders between child elements:

<Figure>

<Example>
  {
    <div className="mx-auto grid max-w-lg grid-cols-3 divide-x-4 divide-indigo-500 rounded-lg text-center font-mono text-sm leading-6 font-bold text-gray-400">
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">01</div>
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">02</div>
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">03</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:divide-x-4] -->
<div class="grid grid-cols-3 divide-x-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="mx-auto flex max-w-sm flex-col-reverse divide-y-4 divide-y-reverse divide-indigo-500 rounded-lg text-center font-mono text-sm leading-6 font-bold text-gray-400">
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">01</div>
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">02</div>
      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">03</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flex-col-reverse,divide-y-4,divide-y-reverse] -->
<div class="flex flex-col-reverse divide-y-4 divide-y-reverse divide-gray-200">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="border" name="border width" value="2vw" dataType="length" variable="border-width" />

### Responsive design

<ResponsiveDesign property="border-width" defaultClass="border-2" featuredClass="border-t-4" />



---
File: /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.";

<ApiTable
  rows={[
    ["box-decoration-clone", "box-decoration-break: clone"],
    ["box-decoration-slice", "box-decoration-break: slice"],
  ]}
/>

## Examples

### Basic example

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-10 px-10 font-mono font-bold sm:grid-cols-2">
      <div className="flex flex-col">
        <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">box-decoration-slice</p>
        <div className="font-sans text-5xl leading-none font-extrabold tracking-tight">
          <span className="bg-linear-to-r from-indigo-600 to-pink-500 box-decoration-slice px-2 leading-[3.5rem] text-white">
            Hello
            <br />
            World
          </span>
        </div>
      </div>
      <div className="flex flex-col">
        <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">box-decoration-clone</p>
        <div className="font-sans text-5xl leading-none font-extrabold tracking-tight">
          <span className="bg-linear-to-r from-indigo-600 to-pink-500 box-decoration-clone px-2 leading-[3.5rem] text-white">
            Hello
            <br />
            World
          </span>
        </div>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:box-decoration-slice,box-decoration-clone] -->
<span class="box-decoration-slice bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...">
  Hello<br />World
</span>
<span class="box-decoration-clone bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...">
  Hello<br />World
</span>
```

</Figure>

### Responsive design

<ResponsiveDesign
  property="box-decoration-break"
  defaultClass="box-decoration-clone"
  featuredClass="box-decoration-slice"
/>



---
File: /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.";

<ApiTable
  rows={[
    // Shadows
    ["shadow-2xs", "box-shadow: var(--shadow-2xs); /* 0 1px rgb(0 0 0 / 0.05) */"],
    ["shadow-xs", "box-shadow: var(--shadow-xs); /* 0 1px 2px 0 rgb(0 0 0 / 0.05) */"],
    ["shadow-sm", "box-shadow: var(--shadow-sm); /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */"],
    [
      "shadow-md",
      "box-shadow: var(--shadow-md); /* 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */",
    ],
    [
      "shadow-lg",
      "box-shadow: var(--shadow-lg); /* 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */",
    ],
    [
      "shadow-xl",
      "box-shadow: var(--shadow-xl); /* 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */",
    ],
    ["shadow-2xl", "box-shadow: var(--shadow-2xl); /* 0 25px 50px -12px rgb(0 0 0 / 0.25) */"],
    ["shadow-none", "box-shadow: 0 0 #0000;"],
    ["shadow-(<custom-property>)", "box-shadow: var(<custom-property>);"],
    ["shadow-(color:<custom-property>)", "--tw-shadow-color: var(<custom-property>);"],
    ["shadow-[<value>]", "box-shadow: <value>;"],
    // 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-(<custom-property>)", "box-shadow: var(<custom-property>);"],
    ["inset-shadow-[<value>]", "box-shadow: <value>;"],
    // 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-<number>", "--tw-ring-shadow: 0 0 0 <number>px;"],
    ["ring-(<custom-property>)", "--tw-ring-shadow: 0 0 0 var(<custom-property>);"],
    ["ring-[<value>]", "--tw-ring-shadow: 0 0 0 <value>;"],
    // 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-<number>", "--tw-inset-ring-shadow: inset 0 0 0 <number>px"],
    ["inset-ring-(<custom-property>)", "--tw-inset-ring-shadow: inset 0 0 0 var(<custom-property>);"],
    ["inset-ring-[<value>]", "--tw-inset-ring-shadow: inset 0 0 0 <value>;"],
    // 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:

<Figure>

<Example padding={false}>
  {
    <div className="flex items-center justify-around gap-4 gap-y-6 bg-white px-6 py-14 font-mono font-bold max-sm:flex-col max-sm:py-10">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-md</p>
        <div className="size-24 rounded-lg bg-white shadow-md"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-lg</p>
        <div className="size-24 rounded-lg bg-white shadow-lg"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-xl</p>
        <div className="size-24 rounded-lg bg-white shadow-xl"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:shadow-md,shadow-lg,shadow-xl] -->
<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
<div class="shadow-xl ..."></div>
```

</Figure>

### Changing the opacity

Use the opacity modifier to adjust the opacity of the box shadow:

<Figure>

<Example padding={false}>
  {
    <div className="flex items-center justify-around gap-4 gap-y-6 bg-white px-6 py-14 font-mono font-bold max-sm:flex-col max-sm:py-10">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-xl</p>
        <div className="size-24 rounded-lg bg-white shadow-xl"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-xl/20</p>
        <div className="size-24 rounded-lg bg-white shadow-xl/20"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-xl/30</p>
        <div className="size-24 rounded-lg bg-white shadow-xl/30"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:shadow-xl,shadow-xl/20,shadow-xl/30] -->
<div class="shadow-xl ..."></div>
<div class="shadow-xl/20 ..."></div>
<div class="shadow-xl/30 ..."></div>
```

</Figure>

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:

<Figure>

<Example>
  {
    <div className="flex flex-col justify-center gap-8 py-6 sm:flex-row sm:gap-12">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          shadow-cyan-500/50
        </p>
        <button className="rounded-md bg-cyan-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-cyan-500/50 focus:outline-none">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          shadow-blue-500/50
        </p>
        <button className="rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-blue-500/50 focus:outline-none">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          shadow-indigo-500/50
        </p>
        <button className="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-indigo-500/50 focus:outline-none">
          Subscribe
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:shadow-cyan-500/50,shadow-blue-500/50,shadow-indigo-500/50] -->
<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>
```

</Figure>

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:

<Figure>

<Example padding={false}>
  {
    <div className="flex flex-col items-center justify-around gap-4 gap-y-6 bg-white p-6 font-mono font-bold sm:flex-row">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-2xs</p>
        <div className="size-24 rounded-lg bg-white ring-1 inset-shadow-2xs ring-black/5"></div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-xs</p>
        <div className="size-24 rounded-lg bg-white ring-1 inset-shadow-xs ring-black/5"></div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-sm</p>
        <div className="size-24 rounded-lg bg-white ring-1 inset-shadow-sm ring-black/5"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:inset-shadow-2xs,inset-shadow-xs,inset-shadow-sm] -->
<div class="inset-shadow-2xs ..."></div>
<div class="inset-shadow-xs ..."></div>
<div class="inset-shadow-sm ..."></div>
```

</Figure>

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:

<Figure>

<Example padding={false}>
  {
    <div className="flex flex-col items-center justify-around gap-4 gap-y-6 bg-white p-6 font-mono font-bold sm:flex-row">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-indigo-500</p>
        <div className="size-24 rounded-lg bg-indigo-200 inset-shadow-sm inset-shadow-indigo-500"></div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-indigo-500/50</p>
        <div className="size-24 rounded-lg bg-indigo-200 inset-shadow-sm inset-shadow-indigo-500/50"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:inset-shadow-indigo-500,inset-shadow-indigo-500/75] -->
<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div>
<div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>
```

</Figure>

By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.

### Adding a ring

Use `ring` or `ring-<number>` utilities like `ring-2` and `ring-4` to apply a solid box-shadow to an element:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-3">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">ring</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">ring-2</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-2 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">ring-4</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-4 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:ring,ring-2,ring-4] -->
<button class="ring ...">Subscribe</button>
<button class="ring-2 ...">Subscribe</button>
<button class="ring-4 ...">Subscribe</button>
```

</Figure>

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:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-2">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">ring-blue-500</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-2 ring-blue-500 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          ring-blue-500/50
        </p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-2 ring-blue-500/50 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:ring-blue-500,ring-blue-500/50] -->
<button class="ring-2 ring-blue-500 ...">Subscribe</button>
<button class="ring-2 ring-blue-500/50 ...">Subscribe</button>
```

</Figure>

By default rings have an opacity of 100% but you can adjust this using the opacity modifier.

### Adding an inset ring

Use `inset-ring` or `inset-ring-<number>` utilities like `inset-ring-2` and `inset-ring-4` to apply a solid inset box-shadow to an element:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-3">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">inset-ring</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">inset-ring-2</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-2 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">inset-ring-4</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-4 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:inset-ring,inset-ring-2,inset-ring-4] -->
<button class="inset-ring ...">Subscribe</button>
<button class="inset-ring-2 ...">Subscribe</button>
<button class="inset-ring-4 ...">Subscribe</button>
```

</Figure>

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:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-2">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          inset-ring-blue-500
        </p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-2 inset-ring-blue-500 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          inset-ring-blue-500/50
        </p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-2 inset-ring-blue-500/50 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:inset-ring-blue-500,inset-ring-blue-500/50] -->
<button class="inset-ring-2 inset-ring-blue-500 ...">Subscribe</button>
<button class="inset-ring-2 inset-ring-blue-500/50 ...">Subscribe</button>
```

</Figure>

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:

<Figure>

<Example padding={false}>
  {
    <div className="flex items-center justify-around gap-4 bg-white p-6 font-mono font-bold">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-none</p>
        <div className="size-24 rounded-lg outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:shadow-none] -->
<div class="shadow-none ..."></div>
```

</Figure>

### Using a custom value

<UsingACustomValue
  utilities={["shadow", "inset-shadow", "ring", "inset-ring"]}
  name="box shadow"
  value="0_35px_35px_rgba(0,0,0,0.25)"
/>

### Responsive design

<ResponsiveDesign property="box-shadow" defaultClass="shadow-none" featuredClass="shadow-lg" />

## Customizing your theme

### Customizing shadows

<CustomizingYourTheme
  utility="shadow"
  themeKey="shadow"
  name="box shadow"
  customName="3xl"
  customValue="0 35px 35px rgba(0, 0, 0, 0.25)"
/>

### Customizing inset shadows

<CustomizingYourTheme
  utility="inset-shadow"
  themeKey="inset-shadow"
  name="inset box shadow"
  customName="md"
  customValue="inset 0 2px 3px rgba(0, 0, 0, 0.25)"
/>

### Customizing shadow colors

<CustomizingYourThemeColors utilities={["shadow", "inset-shadow", "ring", "inset-ring"]} />



---
File: /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.";

<ApiTable
  rows={[
    ["box-border", "box-sizing: border-box"],
    ["box-content", "box-sizing: content-box"],
  ]}
/>

## Examples

### Including borders and padding

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

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

<Figure>

<Example padding={false}>
  {
    <div className="relative grid w-full grid-cols-[1fr_8rem_1fr] grid-rows-[1fr_3fr_1fr] gap-px bg-gray-700/10 font-mono text-sm leading-6 font-bold dark:bg-gray-700">
      <div className="col-start-1 row-start-1 bg-white dark:bg-gray-900"></div>
      <div className="relative col-start-2 row-start-1 bg-white dark:bg-gray-900">
        {/* w-measure indicator */}
        <div className="absolute right-0 bottom-2 left-0 flex">
          {/* Horizontal line */}
          <div className="absolute top-1/2 right-0 left-0 h-px -translate-y-px bg-sky-400"></div>
          {/* Left chip */}
          <div className="w-full">
            <div className="absolute top-1/2 left-0 h-2 w-px -translate-x-px -translate-y-1 rounded-full bg-sky-400"></div>
          </div>
          {/* Badge */}
          <div className="relative flex w-full flex-auto items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-sky-600 dark:bg-gray-900 dark:text-sky-400">
            128px
          </div>
          {/* Right chip */}
          <div className="w-full">
            <div className="absolute top-1/2 right-0 h-2 w-px translate-x-px -translate-y-1 rounded-full bg-sky-400"></div>
          </div>
        </div>
      </div>
      <div className="col-start-3 row-start-1 bg-white dark:bg-gray-900"></div>
      <div className="relative col-start-1 row-start-2 bg-white dark:bg-gray-900">
        {/* h-measure indicator */}
        <div className="absolute top-0 right-2 bottom-0 flex w-3">
          {/* Vertical line */}
          <div className="absolute top-0 bottom-0 left-1/2 w-px -translate-x-[0.5px] bg-sky-400"></div>
          {/* Top chip */}
          <div className="w-full">
            <div className="absolute top-0 left-1/2 h-px w-2 -translate-x-1 -translate-y-px rounded-full bg-sky-400"></div>
          </div>
          {/* Badge */}
          <div className="relative flex h-3 flex-auto -translate-x-[1.15rem] translate-y-14 -rotate-90 items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-sky-600 dark:bg-gray-900 dark:text-sky-400">
            128px
          </div>
          {/* Bottom chip */}
          <div className="w-full">
            <div className="absolute bottom-0 left-1/2 h-px w-2 -translate-x-1 translate-y-px rounded-full bg-sky-400"></div>
          </div>
        </div>
      </div>
      <div className="col-start-2 row-start-2 size-32 bg-white ring-1 ring-sky-300 dark:bg-gray-900 dark:ring-sky-400">
        <div className="relative box-border size-32 p-5 ring ring-sky-300 ring-inset">
          <div className="relative z-1 h-full w-full bg-sky-500 ring-1 ring-sky-500"></div>
          <div className="absolute inset-0">
            <Stripes className="h-full" />
          </div>
        </div>
      </div>
      <div className="col-start-3 row-start-2 bg-white dark:bg-gray-900"></div>
      <div className="col-start-1 row-start-3 bg-white dark:bg-gray-900"></div>
      <div className="col-start-2 row-start-3 bg-white dark:bg-gray-900"></div>
      <div className="col-start-3 row-start-3 bg-white dark:bg-gray-900"></div>
    </div>
  }
</Example>

```html
<!-- [!code classes:box-border] -->
<div class="box-border size-32 border-4 p-4 ...">
  <!-- ... -->
</div>
```

</Figure>

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 &times; 100px element with a 2px border and 4px of padding on all sides will actually be rendered as 112px &times; 112px, with an internal content area of 100px &times; 100px:

<Figure>

<Example padding={false}>
  {
    <div className="relative grid grid-cols-[1fr_8rem_1fr] grid-rows-[1fr_2fr_1fr] gap-px bg-gray-700/10 font-mono text-sm leading-6 font-bold dark:bg-gray-700">
      <div className="col-start-1 row-start-1 bg-white dark:bg-gray-900"></div>
      <div className="relative col-start-2 row-start-1 bg-white dark:bg-gray-900">
        {/* w-measure indicator */}
        <div className="absolute right-0 bottom-2 left-0 flex -translate-y-5">
          {/* Horizontal line */}
          <div className="absolute top-1/2 right-0 left-0 h-px -translate-y-px bg-blue-400"></div>
          {/* Left chip */}
          <div className="w-full">
            <div className="absolute top-1/2 left-0 h-2 w-px -translate-x-px -translate-y-1 rounded-full bg-blue-400"></div>
          </div>
          {/* Badge */}
          <div className="relative flex w-full flex-auto items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-blue-600 dark:bg-gray-900 dark:text-blue-400">
            128px
          </div>
          {/* Right chip */}
          <div className="w-full">
            <div className="absolute top-1/2 right-0 h-2 w-px translate-x-px -translate-y-1 rounded-full bg-blue-400"></div>
          </div>
        </div>
      </div>
      <div className="col-start-3 row-start-1 bg-white dark:bg-gray-900"></div>
      <div className="relative col-start-1 row-start-2 bg-white dark:bg-gray-900">
        {/* h-measure indicator */}
        <div className="absolute top-0 right-2 bottom-0 flex w-3 -translate-x-5">
          {/* Vertical line */}
          <div className="absolute top-0 bottom-0 left-1/2 w-px -translate-x-[0.5px] bg-blue-400"></div>
          {/* Top chip */}
          <div className="w-full">
            <div className="absolute top-0 left-1/2 h-px w-2 -translate-x-1 -translate-y-px rounded-full bg-blue-400"></div>
          </div>
          {/* Badge */}
          <div className="relative flex h-3 flex-auto -translate-x-[1.15rem] translate-y-14 -rotate-90 items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-blue-600 dark:bg-gray-900 dark:text-blue-400">
            128px
          </div>
          {/* Bottom chip */}
          <div className="w-full">
            <div className="absolute bottom-0 left-1/2 h-px w-2 -translate-x-1 translate-y-px rounded-full bg-blue-400"></div>
          </div>
        </div>
      </div>
      <div className="col-start-2 row-start-2 size-32 bg-white">
        <div className="relative box-content size-32 -translate-x-5 -translate-y-5 p-5 ring-4 ring-blue-300 ring-inset dark:ring-blue-500">
          <div className="h-full w-full bg-blue-500 ring-1 ring-blue-500"></div>
          <div className="absolute inset-1 z-10">
            <Stripes className="h-full" />
          </div>
        </div>
      </div>
      <div className="col-start-3 row-start-2 bg-white dark:bg-gray-900"></div>
      <div className="col-start-1 row-start-3 bg-white dark:bg-gray-900"></div>
      <div className="col-start-2 row-start-3 bg-white dark:bg-gray-900"></div>
      <div className="col-start-3 row-start-3 bg-white dark:bg-gray-900"></div>
    </div>
  }
</Example>

```html
<!-- [!code classes:box-content] -->
<div class="box-content size-32 border-4 p-4 ...">
  <!-- ... -->
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="box-sizing" defaultClass="box-content" featuredClass="box-border" />



---
File: /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.";

<ApiTable
  rows={[
    ["break-after-auto", "break-after: auto;"],
    ["break-after-avoid", "break-after: avoid;"],
    ["break-after-all", "break-after: all;"],
    ["break-after-avoid-page", "break-after: avoid-page;"],
    ["break-after-page", "break-after: page;"],
    ["break-after-left", "break-after: left;"],
    ["break-after-right", "break-after: right;"],
    ["break-after-column", "break-after: column;"],
  ]}
/>

## Examples

### Basic example

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

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

### Responsive design

<ResponsiveDesign property="break-after" defaultClass="break-after-column" featuredClass="break-after-auto" />



---
File: /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.";

<ApiTable
  rows={[
    ["break-before-auto", "break-before: auto;"],
    ["break-before-avoid", "break-before: avoid;"],
    ["break-before-all", "break-before: all;"],
    ["break-before-avoid-page", "break-before: avoid-page;"],
    ["break-before-page", "break-before: page;"],
    ["break-before-left", "break-before: left;"],
    ["break-before-right", "break-before: right;"],
    ["break-before-column", "break-before: column;"],
  ]}
/>

## Examples

### Basic example

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

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

### Responsive design

<ResponsiveDesign property="break-before" defaultClass="break-before-column" featuredClass="break-before-auto" />



---
File: /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.";

<ApiTable
  rows={[
    ["break-inside-auto", "break-inside: auto;"],
    ["break-inside-avoid", "break-inside: avoid;"],
    ["break-inside-avoid-page", "break-inside: avoid-page;"],
    ["break-inside-avoid-column", "break-inside: avoid-column;"],
  ]}
/>

## Examples

### Basic example

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

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

### Responsive design

<ResponsiveDesign property="break-inside" defaultClass="break-inside-avoid-column" featuredClass="break-inside-auto" />



---
File: /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.";

<ApiTable
  rows={[
    ["caption-top", "caption-side: top;"],
    ["caption-bottom", "caption-side: bottom;"],
  ]}
/>

## Examples

### Placing at top of table

Use the `caption-top` utility to position a caption element at the top of a table:

<Figure>

<Example padding={false}>
  {
    <div className="overflow-hidden px-4 py-8 sm:px-8">
      <table className="w-full table-auto border-collapse text-sm">
        <caption className="caption-top pb-4 text-xs text-gray-500 dark:text-gray-400">
          Table 3.1: Professional wrestlers and their signature moves.
        </caption>
        <thead>
          <tr>
            <th className="border border-gray-200 bg-gray-50 p-4 py-3 pl-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
              Wrestler
            </th>
            <th className="border border-gray-200 bg-gray-50 p-4 py-3 pr-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
              Signature Move(s)
            </th>
          </tr>
        </thead>
        <tbody className="bg-white dark:bg-gray-800">
          <tr>
            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              "Stone Cold" Steve Austin
            </td>
            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              Stone Cold Stunner, Lou Thesz Press
            </td>
          </tr>
          <tr>
            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              Bret "The Hitman" Hart
            </td>
            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              The Sharpshooter
            </td>
          </tr>
          <tr>
            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              Razor Ramon
            </td>
            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              Razor's Edge, Fallaway Slam
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  }
</Example>

```html
<!-- [!code classes:caption-top] -->
<table>
  <caption class="caption-top">
    Table 3.1: Professional wrestlers and their signature moves.
  </caption>
  <thead>
    <tr>
      <th>Wrestler</th>
      <th>Signature Move(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td>The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>
```

</Figure>

### Placing at bottom of table

Use the `caption-bottom` utility to position a caption element at the bottom of a table:

<Figure>

<Example padding={false}>
  {
    <div className="overflow-hidden px-4 py-8 sm:px-8">
      <table className="w-full table-auto border-collapse text-sm">
        <caption className="caption-bottom pt-4 text-xs text-gray-500 dark:text-gray-400">
          Table 3.1: Professional wrestlers and their signature moves.
        </caption>
        <thead>
          <tr>
            <th className="border border-gray-200 bg-gray-50 p-4 py-3 pl-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
              Wrestler
            </th>
            <th className="border border-gray-200 bg-gray-50 p-4 py-3 pr-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
              Signature Move(s)
            </th>
          </tr>
        </thead>
        <tbody className="bg-white dark:bg-gray-800">
          <tr>
            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              "Stone Cold" Steve Austin
            </td>
            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              Stone Cold Stunner, Lou Thesz Press
            </td>
          </tr>
          <tr>
            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              Bret "The Hitman" Hart
            </td>
            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              The Sharpshooter
            </td>
          </tr>
          <tr>
            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              Razor Ramon
            </td>
            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
              Razor's Edge, Fallaway Slam
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  }
</Example>

```html
<!-- [!code word:caption-bottom] -->
<table>
  <caption class="caption-bottom">
    Table 3.1: Professional wrestlers and their signature moves.
  </caption>
  <thead>
    <tr>
      <th>Wrestler</th>
      <th>Signature Move(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td>The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>
```

</Figure>

### Responsive design

<ResponsiveDesign property="caption-side" element="caption" defaultClass="caption-top" featuredClass="caption-bottom" />



---
File: /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.";

<ApiTable
  rows={[
    ["caret-inherit", "caret-color: inherit;"],
    ["caret-current", "caret-color: currentColor;"],
    ["caret-transparent", "caret-color: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [
      `caret-${name}`,
      `caret-color: var(--color-${name}); /* ${value} */`,
    ]),
    ["caret-<custom-property>", "caret-color: var(<custom-property>);"],
    ["caret-[<value>]", "caret-color: <value>;"],
  ]}
/>
## Examples

### Basic example

Use utilities like `caret-rose-500` and `caret-lime-600` to change the color of the text input cursor:

<Figure hint="Focus the textarea to see the new caret color">

<Example>
  {
    <div className="flex w-full items-center justify-center">
      <textarea
        className="w-80 rounded-md p-2 text-sm caret-pink-500 ring-1 ring-gray-900/10 focus:ring-2 focus:ring-pink-500 focus:outline-none dark:bg-gray-950/25 dark:ring-1 dark:ring-white/5 dark:focus:bg-gray-950/10 dark:focus:ring-2 dark:focus:ring-pink-500"
        rows="2"
      />
    </div>
  }
</Example>

```html
<!-- [!code classes:caret-pink-500] -->
<textarea class="caret-pink-500 ..."></textarea>
```

</Figure>

### Using a custom value

<UsingACustomValue element="textarea" utility="caret" value="#50d71e" name="caret color" variable="caret-color" />

### Responsive design

<ResponsiveDesign
  element="textarea"
  property="caret-color"
  defaultClass="caret-rose-500"
  featuredClass="caret-lime-600"
/>

## Customizing your theme

<CustomizingYourThemeColors element="textarea" utility="caret" />



---
File: /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.";

<ApiTable
  rows={[
    ["clear-left", "clear: left;"],
    ["clear-right", "clear: right;"],
    ["clear-both", "clear: both;"],
    ["clear-start", "clear: inline-start;"],
    ["clear-end", "clear: inline-end;"],
    ["clear-none", "clear: none;"],
  ]}
/>

## Examples

### Clearing left

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

<Figure>

<Example resizable>
  {
    <>
      <img
        className="float-left mr-6 mb-4 aspect-16/9 w-1/4 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <img
        className="float-right ml-6 aspect-6/5 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <p className="clear-left text-justify">
        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.
      </p>
    </>
  }
</Example>

```html
<!-- [!code classes:clear-left] -->
<article>
  <img class="float-left ..." src="/img/snow-mountains.jpg" />
  <img class="float-right ..." src="/img/green-mountains.jpg" />
  <p class="clear-left ...">Maybe we can live without libraries...</p>
</article>
```

</Figure>

### Clearing right

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

<Figure>

<Example resizable>
  {
    <>
      <img
        className="float-left mr-6 aspect-6/5 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <img
        className="float-right mb-4 ml-6 aspect-16/9 w-1/4 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=formathttps://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <p className="clear-right text-justify">
        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.
      </p>
    </>
  }
</Example>

```html
<!-- [!code classes:clear-right] -->
<article>
  <img class="float-left ..." src="/img/green-mountains.jpg" />
  <img class="float-right ..." src="/img/snow-mountains.jpg" />
  <p class="clear-right ...">Maybe we can live without libraries...</p>
</article>
```

</Figure>

### Clearing all

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

<Figure>

<Example resizable>
  {
    <>
      <img
        className="float-left mr-6 mb-4 aspect-16/9 w-1/4 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=formathttps://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <img
        className="float-right mb-4 ml-6 aspect-6/5 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <p className="clear-both text-justify">
        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.
      </p>
    </>
  }
</Example>

```html
<!-- [!code classes:clear-both] -->
<article>
  <img class="float-left ..." src="/img/snow-mountains.jpg" />
  <img class="float-right ..." src="/img/green-mountains.jpg" />
  <p class="clear-both ...">Maybe we can live without libraries...</p>
</article>
```

</Figure>

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

<Figure>

<Example resizable>
  {
    <div dir="rtl">
      <img
        className="float-left mr-6 mb-4 aspect-16/9 w-1/4 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <img
        className="float-right ml-6 aspect-6/5 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <p className="clear-end text-justify">
        ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك
        الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة
        والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب
        المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك
        هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.
      </p>
    </div>
  }
</Example>

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

</Figure>

### Disabling clears

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

<Figure>

<Example resizable>
  {
    <>
      <img
        className="float-left mr-6 aspect-6/5 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <img
        className="float-right ml-6 aspect-16/9 w-1/4 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=formathttps://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <p className="text-justify">
        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.
      </p>
    </>
  }
</Example>

```html
<!-- [!code classes:clear-none] -->
<article>
  <img class="float-left ..." src="/img/green-mountains.jpg" />
  <img class="float-right ..." src="/img/snow-mountains.jpg" />
  <p class="clear-none ...">Maybe we can live without libraries...</p>
</article>
```

</Figure>

### Responsive design

<ResponsiveDesign element="p" property="clear" defaultClass="clear-left" featuredClass="clear-none" />



---
File: /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.";

<ApiTable
  rows={[
    ["scheme-normal", "color-scheme: normal;"],
    ["scheme-dark", "color-scheme: dark;"],
    ["scheme-light", "color-scheme: light;"],
    ["scheme-light-dark", "color-scheme: light dark;"],
    ["scheme-only-dark", "color-scheme: only dark;"],
    ["scheme-only-light", "color-scheme: only light;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `scheme-light` and `scheme-light-dark` to control how element should be rendered:

<Figure hint="Try switching your system color scheme to see the difference">

<Example>
  {
    <div className="flex justify-between gap-8 text-sm max-sm:flex-col">
      <div className="flex flex-grow flex-col items-center gap-3 text-center scheme-light">
        <p className="font-mono font-medium text-gray-500 dark:text-gray-400">scheme-light</p>
        <input
          type="date"
          className="w-full rounded-lg border border-gray-950/10 bg-[Field] px-3 py-2 text-[FieldText] dark:border-white/10"
        />
      </div>
      <div className="flex flex-grow flex-col items-center gap-3 text-center scheme-dark">
        <p className="font-mono font-medium text-gray-500 dark:text-gray-400">scheme-dark</p>
        <input
          type="date"
          className="w-full rounded-lg border border-gray-950/10 bg-[Field] px-3 py-2 text-[FieldText] dark:border-white/10"
        />
      </div>
      <div className="flex flex-grow flex-col items-center gap-3 text-center scheme-light-dark">
        <p className="font-medium text-gray-500 dark:text-gray-400">scheme-light-dark</p>
        <input
          type="date"
          className="w-full rounded-lg border border-gray-950/10 bg-[Field] px-3 py-2 text-[FieldText] dark:border-white/10"
        />
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:scheme-light-dark,scheme-light,scheme-dark] -->
<div class="scheme-light ...">
  <input type="date" />
</div>

<div class="scheme-dark ...">
  <input type="date" />
</div>

<div class="scheme-light-dark ...">
  <input type="date" />
</div>
```

</Figure>

### Applying in dark mode

<TargetingSpecificStates
  element="html"
  property="color-scheme"
  variant="dark"
  defaultClass="scheme-light"
  featuredClass="scheme-dark"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["text-inherit", "color: inherit;"],
    ["text-current", "color: currentColor;"],
    ["text-transparent", "color: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [`text-${name}`, `color: var(--color-${name}); /* ${value} */`]),
    ["text-(<custom-property>)", "color: var(<custom-property>);"],
    ["text-[<value>]", "color: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `text-blue-600` and `text-sky-400` to control the text color of an element:

<Figure>

<Example>
  {
    <div className="relative text-center text-xl leading-6 font-medium">
      <p className="text-blue-600 dark:text-sky-400">The quick brown fox jumps over the lazy dog.</p>
    </div>
  }
</Example>

```html
<!-- [!code classes:text-blue-600,dark:text-sky-400] -->
<p class="text-blue-600 dark:text-sky-400">The quick brown fox...</p>
```

</Figure>

### Changing the opacity

Use the color opacity modifier to control the text color opacity of an element:

<Figure>

<Example>
  {
    <div className="space-y-4 text-center text-xl leading-6 font-medium">
      <p className="text-blue-600/100 dark:text-sky-400/100">The quick brown fox jumps over the lazy dog.</p>
      <p className="text-blue-600/75 dark:text-sky-400/75">The quick brown fox jumps over the lazy dog.</p>
      <p className="text-blue-600/50 dark:text-sky-400/50">The quick brown fox jumps over the lazy dog.</p>
      <p className="text-blue-600/25 dark:text-sky-400/25">The quick brown fox jumps over the lazy dog.</p>
    </div>
  }
</Example>

```html
<!-- [!code word:\/100] -->
<!-- [!code word:\/75] -->
<!-- [!code word:\/50] -->
<!-- [!code word:\/25] -->
<p class="text-blue-600/100 dark:text-sky-400/100">The quick brown fox...</p>
<p class="text-blue-600/75 dark:text-sky-400/75">The quick brown fox...</p>
<p class="text-blue-600/50 dark:text-sky-400/50">The quick brown fox...</p>
<p class="text-blue-600/25 dark:text-sky-400/25">The quick brown fox...</p>
```

</Figure>

### Using a custom value

<UsingACustomValue element="p" utility="text" name="text color" variable="color" value="#50d71e" />

### Applying on hover

<TargetingSpecificStates property="color">

<Figure hint="Hover over the text to see the expected behavior">

<Example>
  {
    <p className="text-center text-xl font-medium text-gray-900 dark:text-gray-200">
      Oh I gotta get on that{" "}
      <a
        href="https://en.wikipedia.org/wiki/Internet"
        target="_blank"
        className="underline hover:text-blue-600 dark:hover:text-blue-400"
      >
        internet
      </a>
      , I'm late on everything!
    </p>
  }
</Example>

```html
<!-- [!code classes:hover:text-blue-600,dark:hover:text-blue-400] -->
<!-- prettier-ignore -->
<p class="...">
  Oh I gotta get on that
  <a class="underline hover:text-blue-600 dark:hover:text-blue-400" href="https://en.wikipedia.org/wiki/Internet">internet</a>,
  I'm late on everything!
</p>
```

</Figure>

</TargetingSpecificStates>

### Responsive design

<ResponsiveDesign element="p" property="color" defaultClass="text-blue-600" featuredClass="text-green-600" />

## Customizing your theme

<CustomizingYourThemeColors element="p" utility="text" />



---
File: /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.

<div className="my-10">
  {/* <TipInfo>{<>Click to copy OKLCH, shift+click to copy nearest hex</>}</TipInfo> */}
  {/* <div className="mt-6"> */}
  <ColorPalette />
  {/* </div> */}
</div>

Every color in the default palette includes 11 steps, with 50 being the lightest, and 950 being the darkest:

<Figure>

<Example className="flex justify-center">
  <div className="mx-auto inline-grid max-w-lg grid-cols-1 justify-center gap-3 *:*:first:size-9 *:*:first:rounded-md *:*:first:inset-ring *:*:first:inset-ring-black/5 sm:grid-cols-11 sm:flex-row sm:*:*:first:aspect-square sm:*:*:first:w-full">
    <div className="flex items-center gap-1.5 sm:flex-col">
      <div className="bg-sky-50"></div>
      <p className="text-center font-mono text-xs text-gray-600 dark:text-gray-400">50</p>
    </div>
    <div className="flex items-center gap-1.5 sm:flex-col">
      <div className="bg-sky-100"></div>
      <p className="text-center font-mono text-xs text-gray-600 dark:text-gray-400">100</p>
    </div>
    <div className="flex items-center gap-1.5 sm:flex-col">
      <div className="bg-sky-200"></div>
      <p className="text-center font-mono text-xs text-gray-600 dark:text-gray-400">200</p>
    </div>
    <div className="flex items-center gap-1.5 sm:flex-col">
      <div className="bg-sky-300"></div>
      <p className="text-center font-mono text-xs text-gray-600 dark:text-gray-400">300</p>
    </div>
    <div className="flex items-center gap-1.5 sm:flex-col">
      <div className="bg-sky-400"></div>
      <p className="text-center font-mono text-xs text-gray-600 dark:text-gray-400">400</p>
    </div>
    <div className="flex items-center gap-1.5 sm:flex-col">
      <div className="bg-sky-500"></div>
      <p className="text-center font-mono text-xs text-gray-600 dark:text-gray-400">500</p>
    </div>
    <div className="flex items-center gap-1.5 sm:flex-col">
      <div className="bg-sky-600"></div>
      <p className="text-center font-mono text-xs text-gray-600 dark:text-gray-400">600</p>
    </div>
    <div className="flex items-center gap-1.5 sm:flex-col">
      <div className="bg-sky-700"></div>
      <p className="text-center font-mono text-xs text-gray-600 dark:text-gray-400">700</p>
    </div>
    <div className="flex items-center gap-1.5 sm:flex-col">
      <div className="bg-sky-800"></div>
      <p className="text-center font-mono text-xs text-gray-600 dark:text-gray-400">800</p>
    </div>
    <div className="flex items-center gap-1.5 sm:flex-col">
      <div className="bg-sky-900"></div>
      <p className="text-center font-mono text-xs text-gray-600 dark:text-gray-400">900</p>
    </div>
    <div className="flex items-center gap-1.5 sm:flex-col">
      <div className="bg-sky-950"></div>
      <p className="text-center font-mono text-xs text-gray-600 dark:text-gray-400">950</p>
    </div>
  </div>
</Example>

```html
<!-- [!code classes:bg-sky-50,bg-sky-100,bg-sky-200,bg-sky-300,bg-sky-400,bg-sky-500,bg-sky-600,bg-sky-700,bg-sky-800,bg-sky-900,bg-sky-950] -->
<div>
  <div class="bg-sky-50"></div>
  <div class="bg-sky-100"></div>
  <div class="bg-sky-200"></div>
  <div class="bg-sky-300"></div>
  <div class="bg-sky-400"></div>
  <div class="bg-sky-500"></div>
  <div class="bg-sky-600"></div>
  <div class="bg-sky-700"></div>
  <div class="bg-sky-800"></div>
  <div class="bg-sky-900"></div>
  <div class="bg-sky-950"></div>
</div>
```

</Figure>

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:

<Figure>

<Example padding={false}>
  {
    <div className="bg-black/5 p-8 text-sm">
      <div className="mx-auto flex max-w-md items-center gap-4 rounded-lg bg-white p-6 shadow-md outline outline-black/5 dark:bg-gray-800">
        <span className="inline-flex shrink-0 rounded-full border border-pink-300 bg-pink-100 p-2 dark:border-pink-300/10 dark:bg-pink-400/10">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            className="size-6 stroke-pink-700 dark:stroke-pink-500"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
            />
          </svg>
        </span>
        <div>
          <p className="text-gray-700 dark:text-gray-400">
            <span className="font-medium text-gray-950 dark:text-white">Tom Watson</span> mentioned you in{" "}
            <span className="font-medium text-gray-950 dark:text-white">Logo redesign</span>
          </p>
          <p className="mt-1 text-gray-500">9:37am</p>
        </div>
      </div>
    </div>
  }
</Example>

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

</Figure>

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

{

<table>
  <thead>
    <tr>
      <th>Utility</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <code>bg-*</code>
      </td>
      <td>
        Sets the <a href="/docs/background-color">background color</a> of an element
      </td>
    </tr>
    <tr>
      <td>
        <code>text-*</code>
      </td>
      <td>
        Sets the <a href="/docs/text-color">text color</a> of an element
      </td>
    </tr>
    <tr>
      <td>
        <code>decoration-*</code>
      </td>
      <td>
        Sets the <a href="/docs/text-decoration-color">text decoration color</a> of an element
      </td>
    </tr>
    <tr>
      <td>
        <code>border-*</code>
      </td>
      <td>
        Sets the <a href="/docs/border-color">border color</a> of an element
      </td>
    </tr>
    <tr>
      <td>
        <code>outline-*</code>
      </td>
      <td>
        Sets the <a href="/docs/outline-color">outline color</a> of an element
      </td>
    </tr>
    <tr>
      <td>
        <code>shadow-*</code>
      </td>
      <td>
        Sets the color of <a href="/docs/box-shadow#setting-the-shadow-color">box shadows</a>
      </td>
    </tr>
    <tr>
      <td>
        <code>inset-shadow-*</code>
      </td>
      <td>
        Sets the color of <a href="/docs/box-shadow#setting-the-inset-shadow-color">inset box shadows</a>
      </td>
    </tr>
    <tr>
      <td>
        <code>ring-*</code>
      </td>
      <td>
        Sets the color of <a href="/docs/box-shadow#setting-the-ring-color">ring shadows</a>
      </td>
    </tr>
    <tr>
      <td>
        <code>inset-ring-*</code>
      </td>
      <td>
        Sets the color of <a href="/docs/box-shadow#setting-the-inset-ring-color">inset ring shadows</a>
      </td>
    </tr>
    <tr>
      <td>
        <code>accent-*</code>
      </td>
      <td>
        Sets the <a href="/docs/accent-color">accent color</a> of form controls
      </td>
    </tr>
    <tr>
      <td>
        <code>caret-*</code>
      </td>
      <td>
        Sets the <a href="/docs/caret-color">caret color</a> in form controls
      </td>
    </tr>
    <tr>
      <td>
        <code>fill-*</code>
      </td>
      <td>
        Sets the <a href="/docs/fill">fill color</a> of SVG elements
      </td>
    </tr>
    <tr>
      <td>
        <code>stroke-*</code>
      </td>
      <td>
        Sets the <a href="/docs/stroke">stroke color</a> of SVG elements
      </td>
    </tr>
  </tbody>
</table>
}

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

<Figure>

<Example padding={false}>
  <div
    className="flex items-center justify-center p-8 [--checkered-bg:--alpha(var(--color-gray-950)/10%)] dark:[--checkered-bg:--alpha(var(--color-white)/5%)]"
    style={{
      backgroundImage: `
      linear-gradient(45deg, var(--checkered-bg) 25%, transparent 25%),
      linear-gradient(-45deg, var(--checkered-bg) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--checkered-bg) 75%),
      linear-gradient(-45deg, transparent 75%, var(--checkered-bg) 75%)`,
      backgroundSize: "20px 20px",
      backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
    }}
  >
    <div className="mx-auto inline-grid max-w-lg grid-cols-1 justify-center gap-3 *:*:first:size-9 *:*:first:rounded-md sm:grid-cols-10 sm:flex-row sm:*:*:first:aspect-square sm:*:*:first:w-full">
      <div className="flex items-center gap-1.5 sm:flex-col">
        <div className="bg-sky-500/10"></div>
      </div>
      <div className="flex items-center gap-1.5 sm:flex-col">
        <div className="bg-sky-500/20"></div>
      </div>
      <div className="flex items-center gap-1.5 sm:flex-col">
        <div className="bg-sky-500/30"></div>
      </div>
      <div className="flex items-center gap-1.5 sm:flex-col">
        <div className="bg-sky-500/40"></div>
      </div>
      <div className="flex items-center gap-1.5 sm:flex-col">
        <div className="bg-sky-500/50"></div>
      </div>
      <div className="flex items-center gap-1.5 sm:flex-col">
        <div className="bg-sky-500/60"></div>
      </div>
      <div className="flex items-center gap-1.5 sm:flex-col">
        <div className="bg-sky-500/70"></div>
      </div>
      <div className="flex items-center gap-1.5 sm:flex-col">
        <div className="bg-sky-500/80"></div>
      </div>
      <div className="flex items-center gap-1.5 sm:flex-col">
        <div className="bg-sky-500/90"></div>
      </div>
      <div className="flex items-center gap-1.5 sm:flex-col">
        <div className="bg-sky-500/100"></div>
      </div>
    </div>
  </div>
</Example>

```html
<!-- [!code classes:bg-black-50/10,bg-black-100/20,bg-black-200/30,bg-black-300/40,bg-black-400/50,bg-black-500/60,bg-black-600/70,bg-black-700/80,bg-black-800/90,bg-black-900/100] -->
<div>
  <div class="bg-sky-500/10"></div>
  <div class="bg-sky-500/20"></div>
  <div class="bg-sky-500/30"></div>
  <div class="bg-sky-500/40"></div>
  <div class="bg-sky-500/50"></div>
  <div class="bg-sky-500/60"></div>
  <div class="bg-sky-500/70"></div>
  <div class="bg-sky-500/80"></div>
  <div class="bg-sky-500/90"></div>
  <div class="bg-sky-500/100"></div>
</div>
```

</Figure>

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:bg-pink-500/[71.37%],bg-cyan-400/(--my-alpha-value)] -->
<div class="bg-pink-500/[71.37%]"><!-- ... --></div>
<div class="bg-cyan-400/(--my-alpha-value)"><!-- ... --></div>
```

### Targeting dark mode

Use the `dark` variant to write classes like `dark:bg-gray-800` that only apply a color when dark mode is active:

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-1 sm:grid-cols-2">
      <div className="p-8 pt-7">
        <p className="mb-2 text-sm font-medium text-gray-500">Light mode</p>
        <div className="rounded-lg bg-white px-6 py-8 shadow-xl ring ring-gray-900/5">
          <div>
            <span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
              <svg
                className="h-6 w-6 text-white"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                />
              </svg>
            </span>
          </div>
          <p className="mt-5 text-base font-medium tracking-tight text-gray-900">Writes upside-down</p>
          <p
            className="mt-2 text-sm text-gray-500"
            children={`The Zero Gravity Pen can be used to write in any orientation,
          including upside-down. It even works in outer space.`}
          />
        </div>
      </div>
      <div className="bg-gray-900 p-8 pt-7">
        <p className="mb-2 text-sm font-medium text-gray-400">Dark mode</p>
        <div className="rounded-lg bg-gray-800 px-6 py-8 shadow-xl ring ring-gray-900/5">
          <div>
            <span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
              <svg
                className="h-6 w-6 text-white"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                />
              </svg>
            </span>
          </div>
          <p className="mt-5 text-base font-medium tracking-tight text-white">Writes upside-down</p>
          <p
            className="mt-2 text-sm text-gray-400"
            children={`The Zero Gravity Pen can be used to write in any orientation,
          including upside-down. It even works in outer space.`}
          />
        </div>
      </div>
    </div>
  }
</Example>

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

</Figure>

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
<!-- [!code filename:HTML] -->
<!-- [!code classes:bg-[light-dark(var(--color-white),var(--color-gray-950))]] -->
<div class="bg-[light-dark(var(--color-white),var(--color-gray-950))]">
  <!-- ... -->
</div>
```

To quickly adjust the opacity of a color when referencing it as a variable in CSS, Tailwind includes a special <code>--alpha()</code> 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.



---
File: /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.";

<ApiTable
  rows={[
    ["columns-<number>", "columns: <number>;"],
    ["columns-3xs", "columns: var(--container-3xs); /* 16rem (256px) */"],
    ["columns-2xs", "columns: var(--container-2xs); /* 18rem (288px) */"],
    ["columns-xs", "columns: var(--container-xs); /* 20rem (320px) */"],
    ["columns-sm", "columns: var(--container-sm); /* 24rem (384px) */"],
    ["columns-md", "columns: var(--container-md); /* 28rem (448px) */"],
    ["columns-lg", "columns: var(--container-lg); /* 32rem (512px) */"],
    ["columns-xl", "columns: var(--container-xl); /* 36rem (576px) */"],
    ["columns-2xl", "columns: var(--container-2xl); /* 42rem (672px) */"],
    ["columns-3xl", "columns: var(--container-3xl); /* 48rem (768px) */"],
    ["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-(<custom-property>)", "columns: var(<custom-property>);"],
    ["columns-[<value>]", "columns: <value>;"],
  ]}
/>

## Examples

### Setting by number

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

<Figure>

<Example>
  {
    <div className="@container relative">
      <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-3 gap-[5cqw]">
        <Stripes border="x" />
        <Stripes border="x" />
        <Stripes border="x" />
      </div>
      <div className="relative -mb-[5cqw] columns-3 gap-[5cqw] *:mb-[5cqw]">
        <img
          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2952&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2902&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3131&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80"
        />
        <img
          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1611605645802-c21be743c321?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1498603993951-8a027a8a8f84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2936&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1526400473556-aac12354f3db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1617369120004-4fc70312c5e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80"
        />
        <img
          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1518892096458-a169843d7f7f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        />
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:columns-3] -->
<div class="columns-3 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>
```

</Figure>

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:

<Figure desktopHint="Resize the example to see the expected behavior">

<Example resizable>
  {
    <div className="@container relative">
      <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-1 gap-8 @[34rem]:grid-cols-2">
        <Stripes border="x" />
        <Stripes border="x" />
        <Stripes border="x" className="@[34rem]:hidden" />
      </div>
      <div className="relative -mb-4 columns-3xs gap-4 *:mb-4 @sm:-mb-8 @sm:gap-8 @sm:*:mb-8">
        <img
          className="aspect-3/2 w-full rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2952&q=80"
        />
        <img
          className="aspect-square w-full rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2902&q=80"
        />
        <img
          className="aspect-square w-full rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3131&q=80"
        />
        <img
          className="aspect-3/2 w-full rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80"
        />
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:columns-3xs] -->
<div class="columns-3xs ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>
```

</Figure>

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

### Setting the column gap

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

<Figure>

<Example>
  {
    <div className="@container relative">
      <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-[1fr_2rem_1fr_2rem_1fr]">
        <div />
        <Stripes border="x" />
        <div />
        <Stripes border="x" />
        <div />
      </div>
      <div className="relative -mb-8 columns-3 gap-8 *:mb-8">
        <img
          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2952&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2902&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3131&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80"
        />
        <img
          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1611605645802-c21be743c321?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1498603993951-8a027a8a8f84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2936&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1526400473556-aac12354f3db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1617369120004-4fc70312c5e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80"
        />
        <img
          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1518892096458-a169843d7f7f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        />
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:gap-8] -->
<div class="columns-3 gap-8 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>
```

</Figure>

Learn more about the gap utilities in the [gap documentation](/docs/gap).

### Using a custom value

<UsingACustomValue utility="columns" value="30vw" />

### Responsive design

<ResponsiveDesign property="columns" breakpoint="sm" featuredClass="aspect-square">

<Figure desktopHint="Resize the example to see the expected behavior">

<Example resizable>
  {
    <div className="@container relative">
      <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-2 gap-4 @sm:grid-cols-3 @sm:gap-8">
        <Stripes border="x" />
        <Stripes border="x" />
        <Stripes border="x" className="@max-sm:hidden" />
      </div>
      <div className="relative columns-2 gap-4 *:mb-4 @sm:-mb-8 @sm:columns-3 @sm:gap-8 @sm:*:mb-8">
        <img
          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2952&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2902&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3131&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80"
        />
        <img
          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1611605645802-c21be743c321?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1498603993951-8a027a8a8f84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2936&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1526400473556-aac12354f3db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        />
        <img
          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1617369120004-4fc70312c5e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80"
        />
        <img
          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
          src="https://images.unsplash.com/photo-1518892096458-a169843d7f7f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        />
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:sm:gap-8,sm:columns-3] -->
<div class="columns-2 gap-4 sm:columns-3 sm:gap-8 ...">
  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
  <!-- ... -->
</div>
```

</Figure>

</ResponsiveDesign>

## Customizing your theme

<CustomizingYourTheme
  utility="columns"
  themeKey="container"
  name="fixed-width column"
  customName="4xs"
  customValue="14rem"
/>



---
File: /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
<!-- [!code word:hover\:bg-indigo-600] -->
<button class="bg-indigo-500 hover:bg-indigo-600 ...">
  <!-- ... -->
</button>
```

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:

<TipInfo>{<>Import your global styles as reference to make sure your theme variables are defined</>}</TipInfo>

```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 `<style>` blocks in component files that behave very much like [CSS modules](#css-modules), which means they are each processed by your build tooling totally separately and have all of the same drawbacks.

If you're using Tailwind with these tools, **we recommend avoiding `<style>` blocks in your components** and just styling things with utility classes directly in your markup, the way Tailwind is meant to be used.

If you do use `<style>` blocks, make sure to import your global styles as reference if you want features like `@apply` to work as expected:

<TipInfo
  children={`Import your global styles as reference to make sure your theme variables are
    defined`}
/>

```html
<!-- [!code filename:Button.vue] -->
<template>
  <button><slot /></button>
</template>

<style scoped>
  /* [!code highlight:2] */
  @reference "../app.css";

  button {
    @apply bg-blue-500;
  }
</style>
```

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
<!-- [!code filename:Button.vue] -->
<template>
  <button><slot /></button>
</template>

<style scoped>
  button {
    /* [!code highlight:2] */
    background-color: var(--color-blue-500);
  }
</style>
```



---
File: /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.";

<ApiTable
  rows={[
    ["content-[<value>]", "content: <value>;"],
    ["content-(<custom-property>)", "content: var(<custom-property>);"],
    ["content-none", "content: none;"],
  ]}
/>

## Examples

### Basic example

Use the `content-[<value>]` syntax, along with the `before` and `after` variants, to set the contents of the `::before` and `::after` pseudo-elements:

<Figure>

<Example>
  {
    <div className="mx-auto w-full max-w-md text-gray-500 dark:text-gray-400">
      Higher resolution means more than just a better-quality image. With a Retina 6K display,{" "}
      <a
        href="https://www.apple.com/pro-display-xdr/"
        className="font-medium text-blue-600 after:text-sm after:font-bold after:content-['_↗'] dark:text-sky-400"
        target="_blank"
      >
        Pro Display XDR
      </a>{" "}
      gives you nearly 40 percent more screen real estate than a 5K display.
    </div>
  }
</Example>

```html
<!-- [!code classes:after:content-['_↗']] -->
<!-- prettier-ignore -->
<p>Higher resolution means more than just a better-quality image. With a
Retina 6K display, <a class="text-blue-600 after:content-['_↗']" href="...">
Pro Display XDR</a> gives you nearly 40 percent more screen real estate than
a 5K display.</p>
```

</Figure>

### Referencing an attribute value

Use the `content-[attr(<name>)]` syntax to reference a value stored in an attribute using the `attr()` CSS function:

<Figure>

<Example>
  {
    <p
      before="Hello World"
      className="text-center font-semibold text-gray-900 before:content-[attr(before)] dark:text-gray-200"
    />
  }
</Example>

```html
<!-- [!code classes:before:content-[attr(before)]] -->
<p before="Hello World" class="before:content-[attr(before)] ...">
  <!-- ... -->
</p>
```

</Figure>

### Using spaces and underscores

Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore:

<Figure>

<Example>
  {<p className="text-center font-semibold text-gray-900 before:content-['Hello_World'] dark:text-gray-200" />}
</Example>

```html
<!-- [!code classes:before:content-['Hello_World']] -->
<p class="before:content-['Hello_World'] ..."></p>
```

</Figure>

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

<Figure>

<Example>
  {<p className="text-center font-semibold text-gray-900 before:content-['Hello\_World'] dark:text-gray-200" />}
</Example>

```html
<!-- [!code classes:before:content-['Hello\_World']] -->
<p class="before:content-['Hello\_World']"></p>
```

</Figure>

### Using a CSS variable

Use the <code>content-{'(<custom-property>)'}</code> syntax to control the contents of the `::before` and `::after` pseudo-elements using a CSS variable:

```html
<!-- [!code classes:content-(--my-content)] -->
<p class="content-(--my-content)"></p>
```

This is just a shorthand for <code>content-{'[var(<custom-property>)]'}</code> that adds the `var()` function for you automatically.

### Responsive design

<ResponsiveDesign property="content">

```html
<!-- [!code classes:md:before:content-['Desktop']] -->
<p class="before:content-['Mobile'] md:before:content-['Desktop'] ..."></p>
```

</ResponsiveDesign>



---
File: /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.";

<ApiTable
  rows={[
    ["cursor-auto", "cursor: auto;"],
    ["cursor-default", "cursor: default;"],
    ["cursor-pointer", "cursor: pointer;"],
    ["cursor-wait", "cursor: wait;"],
    ["cursor-text", "cursor: text;"],
    ["cursor-move", "cursor: move;"],
    ["cursor-help", "cursor: help;"],
    ["cursor-not-allowed", "cursor: not-allowed;"],
    ["cursor-none", "cursor: none;"],
    ["cursor-context-menu", "cursor: context-menu;"],
    ["cursor-progress", "cursor: progress;"],
    ["cursor-cell", "cursor: cell;"],
    ["cursor-crosshair", "cursor: crosshair;"],
    ["cursor-vertical-text", "cursor: vertical-text;"],
    ["cursor-alias", "cursor: alias;"],
    ["cursor-copy", "cursor: copy;"],
    ["cursor-no-drop", "cursor: no-drop;"],
    ["cursor-grab", "cursor: grab;"],
    ["cursor-grabbing", "cursor: grabbing;"],
    ["cursor-all-scroll", "cursor: all-scroll;"],
    ["cursor-col-resize", "cursor: col-resize;"],
    ["cursor-row-resize", "cursor: row-resize;"],
    ["cursor-n-resize", "cursor: n-resize;"],
    ["cursor-e-resize", "cursor: e-resize;"],
    ["cursor-s-resize", "cursor: s-resize;"],
    ["cursor-w-resize", "cursor: w-resize;"],
    ["cursor-ne-resize", "cursor: ne-resize;"],
    ["cursor-nw-resize", "cursor: nw-resize;"],
    ["cursor-se-resize", "cursor: se-resize;"],
    ["cursor-sw-resize", "cursor: sw-resize;"],
    ["cursor-ew-resize", "cursor: ew-resize;"],
    ["cursor-ns-resize", "cursor: ns-resize;"],
    ["cursor-nesw-resize", "cursor: nesw-resize;"],
    ["cursor-nwse-resize", "cursor: nwse-resize;"],
    ["cursor-zoom-in", "cursor: zoom-in;"],
    ["cursor-zoom-out", "cursor: zoom-out;"],
    ["cursor-(<custom-property>)", "cursor: var(<custom-property>);"],
    ["cursor-[<value>]", "cursor: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `cursor-pointer` and `cursor-grab` to control which cursor is displayed when hovering over an element:

<Figure hint="Hover over each button to see the cursor change">

<Example>
  {
    <div className="flex flex-col items-center justify-around gap-4 sm:flex-row sm:gap-0">
      <button
        type="button"
        className="w-full cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-700 focus:outline-none disabled:bg-indigo-300 sm:w-auto dark:disabled:bg-indigo-800 dark:disabled:text-indigo-400"
        tabIndex="-1"
      >
        Submit
      </button>
      <button
        type="button"
        className="w-full cursor-progress rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-700 focus:outline-none disabled:bg-indigo-300 sm:w-auto dark:disabled:bg-indigo-800 dark:disabled:text-indigo-400"
        tabIndex="-1"
      >
        Saving...
      </button>
      <button
        type="button"
        disabled
        className="w-full cursor-not-allowed rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-700 focus:outline-none disabled:bg-indigo-300 sm:w-auto dark:disabled:bg-indigo-800 dark:disabled:text-indigo-400"
        tabIndex="-1"
      >
        Confirm
      </button>
    </div>
  }
</Example>

```html
<!-- [!code classes:cursor-pointer,cursor-progress,cursor-not-allowed] -->
<button class="cursor-pointer ...">Submit</button>
<button class="cursor-progress ...">Saving...</button>
<button class="cursor-not-allowed ..." disabled>Confirm</button>
```

</Figure>

### Using a custom value

<UsingACustomValue element="button" utility="cursor" value="url(hand.cur),_pointer" />

### Responsive design

<ResponsiveDesign element="button" property="cursor" defaultClass="cursor-not-allowed" featuredClass="cursor-auto" />



---
File: /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:

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-1 sm:grid-cols-2">
      <div className="p-8 pt-7">
        <p className="mb-2 text-sm font-medium text-gray-500">Light mode</p>
        <div className="rounded-lg bg-white px-6 py-8 shadow-xl ring ring-gray-900/5">
          <div>
            <span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
              <svg
                className="h-6 w-6 text-white"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                />
              </svg>
            </span>
          </div>
          <p className="mt-5 text-base font-medium tracking-tight text-gray-900">Writes upside-down</p>
          <p
            className="mt-2 text-sm text-gray-500"
            children={`The Zero Gravity Pen can be used to write in any orientation,
          including upside-down. It even works in outer space.`}
          />
        </div>
      </div>
      <div className="bg-gray-900 p-8 pt-7">
        <p className="mb-2 text-sm font-medium text-gray-400">Dark mode</p>
        <div className="rounded-lg bg-gray-800 px-6 py-8 shadow-xl ring ring-gray-900/5">
          <div>
            <span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
              <svg
                className="h-6 w-6 text-white"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                />
              </svg>
            </span>
          </div>
          <p className="mt-5 text-base font-medium tracking-tight text-white">Writes upside-down</p>
          <p
            className="mt-2 text-sm text-gray-400"
            children={`The Zero Gravity Pen can be used to write in any orientation,
          including upside-down. It even works in outer space.`}
          />
        </div>
      </div>
    </div>
  }
</Example>

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

</Figure>

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
<!-- [!code filename:HTML] -->
<!-- [!code word:dark\:bg-black] -->
<!-- [!code word:dark] -->
<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>
```

How you add the `dark` class to the `html` element is up to you, but a common approach is to use a bit of JavaScript that updates the `class` attribute and syncs that preference to somewhere like `localStorage`.

### Using a data attribute

To use a data attribute instead of a class to activate dark mode, just override the `dark` variant with an attribute selector instead:

```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
<!-- [!code filename:HTML] -->
<!-- [!code word:dark\:bg-black] -->
<!-- [!code word:data-theme="dark"] -->
<html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>
```

### With system theme support

To build three-way theme toggles that support light mode, dark mode, and your system theme, use a custom dark mode selector and the [`window.matchMedia()` API](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.



---
File: /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 (
    <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}>
      {children}
    </button>
  );
}
```

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

### Dynamic class names

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

<TipBad>{<>Don't construct class names dynamically</>}</TipBad>

```html
<!-- [!code filename:HTML] -->
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
```

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

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

<TipGood>{<>Always use complete class names</>}</TipGood>

```html
<!-- [!code filename:HTML] -->
<!-- [!code word:text-red-600] -->
<!-- [!code word:text-green-600] -->
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
```

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

<TipBad>Don't use props to build class names dynamically</TipBad>

```jsx
// [!code filename:JSX]
function Button({ color, children }) {
  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
}
```

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

<TipGood>Always map props to static class names</TipGood>

```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 <button className={`${colorVariants[color]} ...`}>{children}</button>;
}
```

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

```jsx
// [!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 <button className={`${colorVariants[color]} ...`}>{children}</button>;
}
```

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

### Which files are scanned

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

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

If you need to scan any files that Tailwind is ignoring by default, you can [explicitly register](#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:

<CodeExampleStack>
```css
/* [!code filename:CSS] */
@import "tailwindcss";
/* [!code highlight:2] */
@source inline("underline");
```

```css
/* [!code filename:Generated CSS] */
.underline {
  text-decoration: underline;
}
```

</CodeExampleStack>

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

<CodeExampleStack>
```css
/* [!code filename:CSS] */
@import "tailwindcss";
/* [!code highlight:2] */
@source inline("{hover:,focus:,}underline");
```

```css
/* [!code filename:Generated CSS] */
.underline {
  text-decoration: underline;
}
@media (hover: hover) {
  .hover\:underline:hover {
    text-decoration: underline;
  }
}
@media (focus: focus) {
  .focus\:underline:focus {
    text-decoration: underline;
  }
}
```

</CodeExampleStack>

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

<CodeExampleStack>
```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);
  }
}
```

</CodeExampleStack>

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.



---
File: /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.";

<ApiTable
  rows={[
    ["inline", "display: inline;"],
    ["block", "display: block;"],
    ["inline-block", "display: inline-block;"],
    ["flow-root", "display: flow-root;"],
    ["flex", "display: flex;"],
    ["inline-flex", "display: inline-flex;"],
    ["grid", "display: grid;"],
    ["inline-grid", "display: inline-grid;"],
    ["contents", "display: contents;"],
    ["table", "display: table;"],
    ["inline-table", "display: inline-table;"],
    ["table-caption", "display: table-caption;"],
    ["table-cell", "display: table-cell;"],
    ["table-column", "display: table-column;"],
    ["table-column-group", "display: table-column-group;"],
    ["table-footer-group", "display: table-footer-group;"],
    ["table-header-group", "display: table-header-group;"],
    ["table-row-group", "display: table-row-group;"],
    ["table-row", "display: table-row;"],
    ["list-item", "display: list-item;"],
    ["hidden", "display: none;"],
    [
      "sr-only",
      dedent`
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      `,
    ],
    [
      "not-sr-only",
      dedent`
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
      `,
    ],
  ]}
/>

## Examples

### Block and Inline

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

<Figure>

<Example>
  {
    <div className="mx-auto max-w-xs px-4 text-sm leading-6 text-gray-500 sm:text-base sm:leading-7 dark:text-gray-300">
      When controlling the flow of text, using the CSS property{" "}
      <span className="inline rounded bg-sky-100 font-mono text-sm font-bold text-gray-900 dark:bg-white/15 dark:text-gray-200">
        display: inline
      </span>{" "}
      will cause the text inside the element to wrap normally.
      <br />
      <br />
      While using the property{" "}
      <span className="inline-block rounded bg-sky-100 font-mono text-sm font-bold text-gray-900 dark:bg-white/15 dark:text-gray-200">
        display: inline-block
      </span>{" "}
      will wrap the element to prevent the text inside from extending beyond its parent.
      <br />
      <br />
      Lastly, using the property{" "}
      <span className="block rounded bg-sky-100 font-mono text-sm font-bold text-gray-900 dark:bg-white/15 dark:text-gray-200">
        display: block
      </span>{" "}
      will put the element on its own line and fill its parent.
    </div>
  }
</Example>

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

</Figure>

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

<Figure>

<Example padding={false}>
  {
    <div className="mx-auto max-w-xs p-4 text-sm leading-6 text-gray-500 sm:text-base sm:leading-7 dark:text-gray-300">
      <div className="relative mb-0.5 flow-root">
        <div className="absolute inset-x-0">
          <Stripes border className="h-4 w-full" />
        </div>
        <div className="absolute inset-x-0 bottom-0">
          <Stripes border className="h-4" />
        </div>
        <div className="my-4">
          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.
        </div>
      </div>
      <div className="relative mt-0.5 flow-root">
        <div className="absolute inset-x-0">
          <Stripes border className="h-4 w-full" />
        </div>
        <div className="absolute inset-x-0 bottom-0">
          <Stripes border className="h-4" />
        </div>
        <div className="my-4">
          Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting
          convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library
          books? Well, let me give you a hint, junior.
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flow-root] -->
<div class="p-4">
  <div class="flow-root ...">
    <div class="my-4 ...">Well, let me tell you something, ...</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">Sure, go ahead, laugh if you want...</div>
  </div>
</div>
```

</Figure>

### Flex

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

<Figure>

<Example padding={false}>
  {
    <div className="mx-auto flex max-w-xs justify-center p-4 leading-6 text-gray-500 dark:text-gray-400">
      <div className="flex items-center gap-4 p-4">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80"
        />
        <div className="flex flex-col">
          <strong className="font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
          <span className="font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flex] -->
<div class="flex items-center">
  <img src="path/to/image.jpg" />
  <div>
    <strong>Andrew Alfred</strong>
    <span>Technical advisor</span>
  </div>
</div>
```

</Figure>

### Inline Flex

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

<Figure>

<Example padding={false}>
  {
    <p className="mx-auto max-w-lg p-4 text-sm leading-6 text-gray-500 sm:text-base/7 dark:text-gray-300">
      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.{" "}
      <span className="ml-1 inline-flex items-baseline">
        <img
          src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80"
          alt=""
          className="mr-1 size-5 self-center rounded-full"
        />
        <span className="font-medium text-gray-900 dark:text-gray-100">Kramer</span>
      </span>{" "}
      keeps telling me there is no way to make it work, that he has run the numbers on every possible approach, but I
      just have to believe there's a way to make it work, there's simply too much opportunity here.
    </p>
  }
</Example>

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

</Figure>

### Grid

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

<Figure>

<Example>
  {
    <div className="relative grid grid-cols-3 grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
      <div className="absolute inset-0">
        <Stripes border className="h-full rounded-lg" />
      </div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">01</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">02</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">03</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">04</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">05</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">06</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">07</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">08</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">09</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grid] -->
<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <!-- ... -->
</div>
```

</Figure>

### Inline Grid

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

<Figure>

<Example>
  {
    <div className="w-full space-x-3 overflow-x-auto p-8 whitespace-nowrap">
      <div className="relative inline-grid grid-cols-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">01</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">02</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">03</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">04</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">05</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">06</div>
      </div>
      <div className="relative inline-grid grid-cols-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">01</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">02</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">03</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">04</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">05</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">06</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:inline-grid] -->
<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>
<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>
```

</Figure>

### Contents

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

<Figure>

<Example>
  {
    <div className="relative flex gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
      <div className="absolute inset-0">
        <Stripes border className="h-full rounded-lg" />
      </div>
      <div className="relative flex-1 rounded-lg bg-purple-500 p-4">01</div>
      <div className="relative contents">
        <div className="relative flex-1 rounded-lg bg-purple-500 p-4">02</div>
        <div className="relative flex-1 rounded-lg bg-purple-500 p-4">03</div>
      </div>
      <div className="relative flex-1 rounded-lg bg-purple-500 p-4">04</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:contents] -->
<div class="flex ...">
  <div class="flex-1 ...">01</div>
  <div class="contents">
    <div class="flex-1 ...">02</div>
    <div class="flex-1 ...">03</div>
  </div>
  <div class="flex-1 ...">04</div>
</div>
```

</Figure>

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

<Figure>

<Example padding={false}>
  {
    <div className="my-8 overflow-hidden">
      <div className="table w-full table-auto border-collapse text-sm">
        <div className="table-header-group">
          <div className="table-row">
            <div className="table-cell border-b border-gray-200 p-4 pt-0 pb-3 pl-8 text-left font-medium text-gray-400 dark:border-white/20 dark:text-white">
              Song
            </div>
            <div className="table-cell border-b border-gray-200 p-4 pt-0 pb-3 text-left font-medium text-gray-400 dark:border-white/20 dark:text-white">
              Artist
            </div>
            <div className="table-cell border-b border-gray-200 p-4 pt-0 pr-8 pb-3 text-left font-medium text-gray-400 dark:border-white/20 dark:text-white">
              Year
            </div>
          </div>
        </div>
        <div className="table-row-group dark:bg-black/5">
          <div className="table-row">
            <div className="table-cell border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
              The Sliding Mr. Bones (Next Stop, Pottersville)
            </div>
            <div className="table-cell border-b border-gray-100 p-4 text-gray-500 dark:border-white/10 dark:text-gray-300">
              Malcolm Lockyer
            </div>
            <div className="table-cell border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
              1961
            </div>
          </div>
          <div className="table-row">
            <div className="table-cell border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
              Witchy Woman
            </div>
            <div className="table-cell border-b border-gray-100 p-4 text-gray-500 dark:border-white/10 dark:text-gray-300">
              The Eagles
            </div>
            <div className="table-cell border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
              1972
            </div>
          </div>
          <div className="table-row">
            <div className="table-cell border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-white/20 dark:text-gray-300">
              Shining Star
            </div>
            <div className="table-cell border-b border-gray-100 p-4 text-gray-500 dark:border-white/20 dark:text-gray-300">
              Earth, Wind, and Fire
            </div>
            <div className="table-cell border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-white/20 dark:text-gray-300">
              1975
            </div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

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

</Figure>

### Hidden

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

<Figure>

<Example>
  {
    <div className="relative flex gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
      <div className="absolute inset-0">
        <Stripes border className="h-full rounded-lg" />
      </div>
      <div className="hidden h-14 w-14 rounded-lg bg-purple-500 p-4">01</div>
      <div className="relative h-14 w-14 rounded-lg bg-purple-500 p-4">02</div>
      <div className="relative h-14 w-14 rounded-lg bg-purple-500 p-4">03</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:hidden] -->
<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

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
<!-- [!code classes:sr-only] -->
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>
```

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

```html
<!-- [!code classes:sm:not-sr-only] -->
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>
```

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

### Responsive design

<ResponsiveDesign property="display" defaultClass="flex" featuredClass="inline-flex" />



---
File: /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.

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

<img
  src={require("./img/intellisense.png").default.src}
  alt="Tailwind CSS IntelliSense extension for Visual Studio Code"
  width={1344}
  height={672}
  className="rounded-lg"
/>

- **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).

<img src={require("./img/prettier-banner.jpg").default.src} alt="" width={2400} height={819} className="rounded-lg" />

It works seamlessly with custom Tailwind configurations, and because it’s just a Prettier plugin, it works anywhere Prettier works—including every popular editor and IDE, and of course on the command line.

```html
<!-- [!code filename:HTML] -->
<!-- Before -->
<!-- prettier-ignore -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">Submit</button>

<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Submit</button>
```

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 &rarr;](https://www.jetbrains.com/help/webstorm/tailwind-css.html)



---
File: /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.";

<ApiTable
  rows={[
    ["field-sizing-fixed", "field-sizing: fixed;"],
    ["field-sizing-content", "field-sizing: content;"],
  ]}
/>

## Examples

### Sizing based on content

Use the `field-sizing-content` utility to allow a form control to adjust it's size based on the content:

<Figure hint="Type in the input below to see the size change">

<Example>
  {
    <textarea
      rows="2"
      defaultValue="Latex Salesman, Vanderlay Industries"
      className="mx-auto block field-sizing-content rounded-md p-2 text-sm text-gray-950 outline-1 outline-gray-900/10 focus:outline-2 focus:outline-gray-900 dark:bg-gray-950/25 dark:text-white dark:outline-1 dark:outline-white/5 dark:focus:outline-white/20"
    />
  }
</Example>

```html
<!-- [!code classes:field-sizing-content] -->
<textarea class="field-sizing-content ..." rows="2">
  Latex Salesman, Vanderlay Industries
</textarea>
```

</Figure>

### Using a fixed size

Use the `field-sizing-fixed` utility to make a form control use a fixed size:

<Figure hint="Type in the input below to see the size remain the same">

<Example>
  {
    <textarea
      rows="2"
      defaultValue="Latex Salesman, Vanderlay Industries"
      className="mx-auto block field-sizing-fixed w-80 rounded-md p-2 text-sm text-gray-950 outline-1 outline-gray-900/10 focus:outline-2 focus:outline-gray-900 dark:bg-gray-950/25 dark:text-white dark:outline-1 dark:outline-white/5 dark:focus:outline-white/20"
    />
  }
</Example>

```html
<!-- [!code classes:field-sizing-fixed] -->
<textarea class="field-sizing-fixed w-80 ..." rows="2">
  Latex Salesman, Vanderlay Industries
</textarea>
```

</Figure>

### Responsive design

<ResponsiveDesign
  element="input"
  property="field-sizing"
  defaultClass="field-sizing-content"
  featuredClass="field-sizing-fixed"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["fill-none", "fill: none;"],
    ["fill-inherit", "fill: inherit;"],
    ["fill-current", "fill: currentColor;"],
    ["fill-transparent", "fill: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [`fill-${name}`, `fill: var(--color-${name}); /* ${value} */`]),
    ["fill-(<custom-property>)", "fill: var(<custom-property>);"],
    ["fill-[<color>]", "fill: <color>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `fill-indigo-500` and `fill-lime-600` to change the fill color of an SVG:

<Figure>

<Example>
  {
    <div className="flex items-center justify-center">
      <svg className="h-12 fill-blue-500" viewBox="0 0 46 48">
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 19V32.5335C4.00017 32.8383 3.9145 33.1371 3.75292 33.3956L0.912672 37.94C0.0801118 39.2721 1.0378 41 2.60867 41H43.3917C44.9625 41 45.9202 39.2721 45.0877 37.94L42.2474 33.3956C42.0858 33.1371 42.0002 32.8383 42.0002 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 0ZM23.0002 48C20.2388 48 18.0002 45.7614 18.0002 43H28.0002C28.0002 45.7614 25.7616 48 23.0002 48Z"
        />
      </svg>
    </div>
  }
</Example>

```html
<!-- [!code classes:fill-blue-500] -->
<svg class="fill-blue-500 ...">
  <!-- ... -->
</svg>
```

</Figure>

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:

<Figure hint="Hover over the button to see the fill color change">

<Example>
  {
    <div className="flex items-center justify-center">
      <button className="inline-flex gap-2 rounded-md border border-indigo-100 bg-white px-3 py-2 text-sm font-semibold text-indigo-600 shadow-sm transition-colors duration-150 hover:border-indigo-600 hover:bg-indigo-600 hover:text-white dark:border-transparent">
        <svg viewBox="0 0 20 20" className="size-5 fill-current">
          <path
            d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
            fillRule="evenodd"
            clipRule="evenodd"
          />
        </svg>
        Check for updates
      </button>
    </div>
  }
</Example>

```html
<!-- [!code classes:fill-current] -->
<button class="bg-white text-indigo-600 hover:bg-indigo-600 hover:text-white ...">
  <svg class="size-5 fill-current ...">
    <!-- ... -->
  </svg>
  Check for updates
</button>
```

</Figure>

### Using a custom value

<UsingACustomValue element="svg" utility="fill" name="fill color" value="#243c5a" variable="fill-color" />

### Responsive design

<ResponsiveDesign element="svg" property="fill" defaultClass="fill-cyan-500" featuredClass="fill-cyan-700" />

## Customizing your theme

<CustomizingYourThemeColors element="svg" utility="fill" />



---
File: /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.";

<ApiTable
  rows={[
    ["blur-xs", "filter: blur(var(--blur-xs)); /* 4px */"],
    ["blur-sm", "filter: blur(var(--blur-sm)); /* 8px */"],
    ["blur-md", "filter: blur(var(--blur-md)); /* 12px */"],
    ["blur-lg", "filter: blur(var(--blur-lg)); /* 16px */"],
    ["blur-xl", "filter: blur(var(--blur-xl)); /* 24px */"],
    ["blur-2xl", "filter: blur(var(--blur-2xl)); /* 40px */"],
    ["blur-3xl", "filter: blur(var(--blur-3xl)); /* 64px */"],
    ["blur-none", "filter: ;"],
    ["blur-(<custom-property>)", "filter: blur(var(<custom-property>));"],
    ["blur-[<value>]", "filter: blur(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `blur-sm` and `blur-lg` to blur an element:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-12 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">blur-none</p>
          <div className="relative blur-none">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">blur-sm</p>
          <div className="relative blur-sm">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">blur-lg</p>
          <div className="relative blur-lg">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">blur-2xl</p>
          <div className="relative blur-2xl">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:blur-none,blur-sm,blur-lg,blur-2xl] -->
<img class="blur-none" src="/img/mountains.jpg" />
<img class="blur-sm" src="/img/mountains.jpg" />
<img class="blur-lg" src="/img/mountains.jpg" />
<img class="blur-2xl" src="/img/mountains.jpg" />
```

</Figure>

### Using a custom value

<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="blur" value="2px" />

### Responsive design

<ResponsiveDesign
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  property="filter: blur()"
  defaultClass="blur-none"
  featuredClass="blur-lg"
/>

## Customizing your theme

<CustomizingYourTheme
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  utility="blur"
  name="blur"
  customName="2xs"
  customValue="2px"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["brightness-<number>", "filter: brightness(<number>%);"],
    ["brightness-(<custom-property>)", "filter: brightness(var(<custom-property>));"],
    ["brightness-[<value>]", "filter: brightness(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `brightness-50` and `brightness-100` to control an element's brightness:

<Figure>
  {
    <Example padding={false}>
      <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
        <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
          <div className="flex shrink-0 flex-col items-center">
            <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
              brightness-50
            </p>
            <div className="relative brightness-50">
              <img
                className="size-24 rounded-lg object-cover"
                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
              />
              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
            </div>
          </div>
          <div className="flex shrink-0 flex-col items-center">
            <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
              brightness-100
            </p>
            <div className="relative brightness-100">
              <img
                className="size-24 rounded-lg object-cover"
                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
              />
              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
            </div>
          </div>
          <div className="flex shrink-0 flex-col items-center">
            <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
              brightness-125
            </p>
            <div className="relative brightness-125">
              <img
                className="size-24 rounded-lg object-cover"
                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
              />
              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
            </div>
          </div>
          <div className="flex shrink-0 flex-col items-center">
            <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
              brightness-200
            </p>
            <div className="relative brightness-200">
              <img
                className="size-24 rounded-lg object-cover"
                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
              />
              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
            </div>
          </div>
        </div>
      </div>
    </Example>
  }
</Figure>

```html
<!-- [!code classes:brightness-50,brightness-100,brightness-125,brightness-200] -->
<img class="brightness-50 ..." src="/img/mountains.jpg" />
<img class="brightness-100 ..." src="/img/mountains.jpg" />
<img class="brightness-125 ..." src="/img/mountains.jpg" />
<img class="brightness-200 ..." src="/img/mountains.jpg" />
```

### Using a custom value

<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="brightness" value="1.75" />

### Responsive design

<ResponsiveDesign
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  property="filter: brightness()"
  defaultClass="brightness-110"
  featuredClass="brightness-150"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["contrast-<number>", "filter: contrast(<number>%);"],
    ["contrast-(<custom-property>)", "filter: contrast(var(<custom-property>));"],
    ["contrast-[<value>]", "filter: contrast(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `contrast-50` and `contrast-100` to control an element's contrast:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">contrast-50</p>
          <div className="relative contrast-50">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            contrast-100
          </p>
          <div className="relative contrast-100">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            contrast-125
          </p>
          <div className="relative contrast-125">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            contrast-200
          </p>
          <div className="relative contrast-200">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:contrast-50,contrast-100,contrast-125,contrast-200] -->
<img class="contrast-50 ..." src="/img/mountains.jpg" />
<img class="contrast-100 ..." src="/img/mountains.jpg" />
<img class="contrast-125 ..." src="/img/mountains.jpg" />
<img class="contrast-200 ..." src="/img/mountains.jpg" />
```

</Figure>

### Using a custom value

<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="contrast" value=".25" />

### Responsive design

<ResponsiveDesign
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  property="filter: contrast()"
  defaultClass="contrast-125"
  featuredClass="contrast-150"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["drop-shadow-xs", "filter: drop-shadow(var(--drop-shadow-xs)); /* 0 1px 1px rgb(0 0 0 / 0.05) */"],
    ["drop-shadow-sm", "filter: drop-shadow(var(--drop-shadow-sm)); /* 0 1px 2px rgb(0 0 0 / 0.15) */"],
    ["drop-shadow-md", "filter: drop-shadow(var(--drop-shadow-md)); /* 0 3px 3px rgb(0 0 0 / 0.12) */"],
    ["drop-shadow-lg", "filter: drop-shadow(var(--drop-shadow-lg)); /* 0 4px 4px rgb(0 0 0 / 0.15) */"],
    ["drop-shadow-xl", "filter: drop-shadow(var(--drop-shadow-xl); /* 0 9px 7px rgb(0 0 0 / 0.1) */"],
    ["drop-shadow-2xl", "filter: drop-shadow(var(--drop-shadow-2xl)); /* 0 25px 25px rgb(0 0 0 / 0.15) */"],
    ["drop-shadow-none", "filter: drop-shadow(0 0 #0000);"],
    ["drop-shadow-(<custom-property>)", "filter: drop-shadow(var(<custom-property>));"],
    ["drop-shadow-(color:<custom-property>)", "--tw-drop-shadow-color: var(<custom-property>);"],
    ["drop-shadow-[<value>]", "filter: drop-shadow(<value>);"],
    ["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:

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-3 items-end gap-8 bg-white p-8 max-sm:grid-cols-1">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-md</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-md" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-lg</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-lg" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:drop-shadow-md,drop-shadow-lg,drop-shadow-xl] -->
<svg class="drop-shadow-md ...">
  <!-- ... -->
</svg>
<svg class="drop-shadow-lg ...">
  <!-- ... -->
</svg>
<svg class="drop-shadow-xl ...">
  <!-- ... -->
</svg>
```

</Figure>

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:

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-3 items-end gap-8 bg-white p-8 max-sm:grid-cols-1">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl/25</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl/25" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl/50</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl/50" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:drop-shadow-xl,drop-shadow-xl/25,drop-shadow-xl/50] -->
<svg class="fill-white drop-shadow-xl ...">...</svg>
<svg class="fill-white drop-shadow-xl/25 ...">...</svg>
<svg class="fill-white drop-shadow-xl/50 ...">...</svg>
```

</Figure>

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:

<Figure>

<Example>
  {
    <div className="grid grid-cols-2 items-end p-8 max-sm:grid-cols-1">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-cyan-500/50</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl drop-shadow-cyan-500/50" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-cyan-500"
          />
        </svg>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-indigo-500/50</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl drop-shadow-indigo-500/50" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-indigo-500"
          />
        </svg>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:drop-shadow-cyan-500/50,drop-shadow-indigo-500/50] -->
<svg class="fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50 ...">...</svg>
<svg class="fill-indigo-500 drop-shadow-lg drop-shadow-indigo-500/50 ...">...</svg>
```

</Figure>

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:

<Figure>

```html
<!-- [!code classes:dark:drop-shadow-none] -->
<svg class="drop-shadow-lg dark:drop-shadow-none">
  <!-- ... -->
</svg>
```

</Figure>

### Using a custom value

<UsingACustomValue element="svg" utility="drop-shadow" value="0_35px_35px_rgba(0,0,0,0.25)" name="drop shadow" />

### Responsive design

<ResponsiveDesign
  element="svg"
  property="filter: drop-shadow()"
  defaultClass="drop-shadow-md"
  featuredClass="drop-shadow-xl"
/>

## Customizing your theme

### Customizing drop shadows

<CustomizingYourTheme
  element="svg"
  utility="drop-shadow"
  name="drop shadow"
  customName="3xl"
  customValue="0 35px 35px rgba(0, 0, 0, 0.25)"
/>

### Customizing shadow colors

<CustomizingYourThemeColors element="svg" utility="drop-shadow" />



---
File: /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.";

<ApiTable
  rows={[
    ["grayscale", "filter: grayscale(100%);"],
    ["grayscale-<number>", "filter: grayscale(<number>%);"],
    ["grayscale-(<custom-property>)", "filter: grayscale(var(<custom-property>));"],
    ["grayscale-[<value>]", "filter: grayscale(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `grayscale` and `grayscale-75` to control the amount of grayscale effect applied to an element:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-center overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">grayscale-0</p>
          <div className="relative grayscale-0">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            grayscale-25
          </p>
          <div className="relative grayscale-25">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            grayscale-50
          </p>
          <div className="relative grayscale-50">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">grayscale</p>
          <div className="relative grayscale">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grayscale-0,grayscale-25,grayscale-50,grayscale] -->
<img class="grayscale-0 ..." src="/img/mountains.jpg" />
<img class="grayscale-25 ..." src="/img/mountains.jpg" />
<img class="grayscale-50 ..." src="/img/mountains.jpg" />
<img class="grayscale ..." src="/img/mountains.jpg" />
```

</Figure>

### Using a custom value

<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="grayscale" value="0.5" />

### Responsive design

<ResponsiveDesign
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  property="filter: grayscale()"
  defaultClass="grayscale"
  featuredClass="grayscale-0"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["hue-rotate-<number>", "filter: hue-rotate(<number>deg);"],
    ["-hue-rotate-<number>", "filter: hue-rotate(calc(<number>deg * -1));"],
    ["hue-rotate-(<custom-property>)", "filter: hue-rotate(var(<custom-property>));"],
    ["hue-rotate-[<value>]", "filter: hue-rotate(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `hue-rotate-90` and `hue-rotate-180` to rotate the hue of an element by degrees:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            hue-rotate-15
          </p>
          <div className="relative hue-rotate-15">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            hue-rotate-90
          </p>
          <div className="relative hue-rotate-90">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            hue-rotate-180
          </p>
          <div className="relative hue-rotate-180">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            hue-rotate-270
          </p>
          <div className="relative hue-rotate-270">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:hue-rotate-15,hue-rotate-90,hue-rotate-180,hue-rotate-270] -->
<img class="hue-rotate-15" src="/img/mountains.jpg" />
<img class="hue-rotate-90" src="/img/mountains.jpg" />
<img class="hue-rotate-180" src="/img/mountains.jpg" />
<img class="hue-rotate-270" src="/img/mountains.jpg" />
```

</Figure>

### Using negative values

Use utilities like `-hue-rotate-15` and `-hue-rotate-45` to set a negative hue rotate value:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            -hue-rotate-15
          </p>
          <div className="relative -hue-rotate-15">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            -hue-rotate-45
          </p>
          <div className="relative -hue-rotate-45">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            -hue-rotate-90
          </p>
          <div className="relative -hue-rotate-90">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:-hue-rotate-15,-hue-rotate-45,-hue-rotate-90] -->
<img class="-hue-rotate-15" src="/img/mountains.jpg" />
<img class="-hue-rotate-45" src="/img/mountains.jpg" />
<img class="-hue-rotate-90" src="/img/mountains.jpg" />
```

</Figure>

### Using a custom value

<UsingACustomValue
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  utility="hue-rotate"
  value="3.142rad"
  name="hue rotation"
/>

### Responsive design

<ResponsiveDesign
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  property="filter: hue-rotate()"
  defaultClass="hue-rotate-60"
  featuredClass="hue-rotate-0"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["invert", "filter: invert(100%);"],
    ["invert-<number>", "filter: invert(<number>%);"],
    ["invert-(<custom-property>)", "filter: invert(var(<custom-property>))"],
    ["invert-[<value>]", "filter: invert(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `invert` and `invert-20` to control the color inversion of an element:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-center overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">invert-0</p>
          <div className="relative invert-0">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">invert-20</p>
          <div className="relative invert-20">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">invert</p>
          <div className="relative invert">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:invert-0,invert-20,invert] -->
<img class="invert-0" src="/img/mountains.jpg" />
<img class="invert-20" src="/img/mountains.jpg" />
<img class="invert" src="/img/mountains.jpg" />
```

</Figure>

### Using a custom value

<UsingACustomValue
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  utility="invert"
  value=".25"
  name="color inversion"
  variable="inversion"
/>

### Responsive design

<ResponsiveDesign
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  property="filter: invert()"
  defaultClass="invert"
  featuredClass="invert-0"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["saturate-<number>", "filter: saturate(<number>%);"],
    ["saturate-(<custom-property>)", "filter: saturate(var(<custom-property>));"],
    ["saturate-[<value>]", "filter: saturate(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `saturate-50` and `saturate-100` to control an element's saturation:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">saturate-50</p>
          <div className="relative saturate-50">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            saturate-100
          </p>
          <div className="relative saturate-100">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            saturate-150
          </p>
          <div className="relative saturate-150">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
            saturate-200
          </p>
          <div className="relative saturate-200">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:saturate-50,saturate-100,saturate-150,saturate-200] -->
<img class="saturate-50 ..." src="/img/mountains.jpg" />
<img class="saturate-100 ..." src="/img/mountains.jpg" />
<img class="saturate-150 ..." src="/img/mountains.jpg" />
<img class="saturate-200 ..." src="/img/mountains.jpg" />
```

</Figure>

### Using a custom value

<UsingACustomValue
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  utility="saturate"
  name="saturation"
  value=".25"
  variable="saturation"
/>

### Responsive design

<ResponsiveDesign
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  property="filter: saturate()"
  defaultClass="saturate-50"
  featuredClass="saturate-150"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["sepia", "filter: sepia(100%);"],
    ["sepia-<number>", "filter: sepia(<number>%);"],
    ["sepia-(<custom-property>)", "filter: sepia(var(<custom-property>));"],
    ["sepia-[<value>]", "filter: sepia(<value>);"],
  ]}
/>

## Examples

### Basic example

Use utilities like `sepia` and `sepia-50` to control the sepia effect applied to an element:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 justify-center overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">sepia-0</p>
          <div className="relative sepia-0">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">sepia-50</p>
          <div className="relative sepia-50">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">sepia</p>
          <div className="relative sepia">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:sepia-0,sepia-50,sepia] -->
<img class="sepia-0" src="/img/mountains.jpg" />
<img class="sepia-50" src="/img/mountains.jpg" />
<img class="sepia" src="/img/mountains.jpg" />
```

</Figure>

### Using a custom value

<UsingACustomValue
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  utility="sepia"
  name="sepia amount"
  value=".25"
/>

### Responsive design

<ResponsiveDesign
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  property="filter: sepia()"
  defaultClass="sepia"
  featuredClass="sepia-0"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["filter-none", "filter: none;"],
    ["filter-(<custom-property>)", "filter: var(<custom-property>);"],
    ["filter-[<value>]", "filter: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `blur-xs` and `grayscale` to apply filters to an element:

<Figure>

<Example padding={false}>
  {
    <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center justify-around gap-12 p-8 font-mono font-bold sm:gap-4">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">blur-xs</p>
          <div className="relative blur-xs">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">grayscale</p>
          <div className="relative grayscale">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 italic dark:text-gray-400">
            combined
          </p>
          <div className="relative blur-xs grayscale">
            <img
              className="size-24 rounded-lg object-cover"
              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
            />
            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:blur-xs,grayscale] -->
<img class="blur-xs" src="/img/mountains.jpg" />
<img class="grayscale" src="/img/mountains.jpg" />
<img class="blur-xs grayscale" src="/img/mountains.jpg" />
```

</Figure>

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
<!-- [!code classes:md:filter-none] -->
<img class="blur-md brightness-150 invert md:filter-none" src="/img/mountains.jpg" />
```

### Using a custom value

<UsingACustomValue
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  utility="filter"
  value="url('filters.svg#filter-id')"
/>

### Applying on hover

<TargetingSpecificStates
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  property="filter"
  defaultClass="blur-sm"
  featuredClass="filter-none"
/>

### Responsive design

<ResponsiveDesign
  element="img"
  elementAttributes={{ src: "/img/mountains.jpg" }}
  property="filter"
  defaultClass="blur-sm"
  featuredClass="filter-none"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["basis-<number>", "flex-basis: calc(var(--spacing) * <number>);"],
    ["basis-<fraction>", "flex-basis: calc(<fraction> * 100%);"],
    ["basis-full", "flex-basis: 100%;"],
    ["basis-auto", "flex-basis: auto;"],
    ["basis-3xs", "flex-basis: var(--container-3xs); /* 16rem (256px) */"],
    ["basis-2xs", "flex-basis: var(--container-2xs); /* 18rem (288px) */"],
    ["basis-xs", "flex-basis: var(--container-xs); /* 20rem (320px) */"],
    ["basis-sm", "flex-basis: var(--container-sm); /* 24rem (384px) */"],
    ["basis-md", "flex-basis: var(--container-md); /* 28rem (448px) */"],
    ["basis-lg", "flex-basis: var(--container-lg); /* 32rem (512px) */"],
    ["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-(<custom-property>)", "flex-basis: var(<custom-property>);"],
    ["basis-[<value>]", "flex-basis: <value>;"],
  ]}
/>

## Examples

### Using the spacing scale

Use `basis-<number>` utilities like `basis-64` and `basis-128` to set the initial size of flex items based on the spacing scale:

<Figure>

<Example>
  {
    <div className="flex flex-row space-x-4 font-mono text-sm leading-6 font-bold text-white">
      <div className="flex h-14 basis-64 items-center justify-center rounded-lg bg-purple-500">01</div>
      <div className="flex h-14 basis-64 items-center justify-center rounded-lg bg-purple-500">02</div>
      <div className="flex h-14 basis-128 items-center justify-center rounded-lg bg-purple-500">03</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:basis-64,basis-128] -->
<div class="flex flex-row">
  <div class="basis-64">01</div>
  <div class="basis-64">02</div>
  <div class="basis-128">03</div>
</div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="flex flex-row space-x-4 font-mono text-sm leading-6 font-bold text-white">
      <div className="flex h-14 basis-3xs items-center justify-center rounded-lg bg-sky-500">01</div>
      <div className="flex h-14 basis-2xs items-center justify-center rounded-lg bg-sky-500">02</div>
      <div className="flex h-14 basis-xs items-center justify-center rounded-lg bg-sky-500">03</div>
      <div className="flex h-14 basis-sm items-center justify-center rounded-lg bg-sky-500">04</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:basis-3xs,basis-2xs,basis-xs,basis-sm] -->
<div class="flex flex-row">
  <div class="basis-3xs">01</div>
  <div class="basis-2xs">02</div>
  <div class="basis-xs">03</div>
  <div class="basis-sm">04</div>
</div>
```

</Figure>

### Using percentages

Use `basis-<fraction>` utilities like `basis-1/2` and `basis-2/3` to set the initial size of flex items:

<Figure>

<Example>
  {
    <div className="flex flex-row space-x-4 font-mono text-sm leading-6 font-bold text-white">
      <div className="flex h-14 basis-1/3 items-center justify-center rounded-lg bg-indigo-500">01</div>
      <div className="flex h-14 basis-2/3 items-center justify-center rounded-lg bg-indigo-500">02</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:basis-1/3,basis-2/3] -->
<div class="flex flex-row">
  <div class="basis-1/3">01</div>
  <div class="basis-2/3">02</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="basis" value="30vw" />

### Responsive design

<ResponsiveDesign property="flex-basis">

```html
<!-- [!code classes:md:basis-1/3] -->
<div class="flex flex-row">
  <div class="basis-1/4 md:basis-1/3">01</div>
  <div class="basis-1/4 md:basis-1/3">02</div>
  <div class="basis-1/2 md:basis-1/3">03</div>
</div>
```

</ResponsiveDesign>

## Customizing your theme

<CustomizingYourTheme
  utility="basis"
  themeKey="container"
  name="fixed-width basis"
  customName="4xs"
  customValue="14rem"
  includeSpacingNote
/>



---
File: /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.";

<ApiTable
  rows={[
    ["flex-row", "flex-direction: row;"],
    ["flex-row-reverse", "flex-direction: row-reverse;"],
    ["flex-col", "flex-direction: column;"],
    ["flex-col-reverse", "flex-direction: column-reverse;"],
  ]}
/>

## Examples

### Row

Use `flex-row` to position flex items horizontally in the same direction as text:

<Figure>

<Example>
  {
    <div className="flex flex-row gap-x-4 font-mono text-sm leading-6 font-bold text-white">
      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flex-row] -->
<div class="flex flex-row ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Row reversed

Use `flex-row-reverse` to position flex items horizontally in the opposite direction:

<Figure>

<Example>
  {
    <div className="flex flex-row-reverse gap-x-4 space-x-reverse font-mono text-sm leading-6 font-bold text-white">
      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-blue-500">01</div>
      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-blue-500">02</div>
      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-blue-500">03</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flex-row-reverse] -->
<div class="flex flex-row-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Column

Use `flex-col` to position flex items vertically:

<Figure>

<Example>
  {
    <div className="mx-auto flex max-w-xs flex-col space-y-4 font-mono text-sm leading-6 font-bold text-white">
      <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">01</div>
      <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
      <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">03</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flex-col] -->
<div class="flex flex-col ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Column reversed

Use `flex-col-reverse` to position flex items vertically in the opposite direction:

<Figure>

<Example>
  {
    <div className="mx-auto flex max-w-xs flex-col-reverse space-y-4 space-y-reverse font-mono text-sm leading-6 font-bold text-white">
      <div className="flex items-center justify-center rounded-lg bg-purple-500 p-4">01</div>
      <div className="flex items-center justify-center rounded-lg bg-purple-500 p-4">02</div>
      <div className="flex items-center justify-center rounded-lg bg-purple-500 p-4">03</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flex-col-reverse] -->
<div class="flex flex-col-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="flex-direction" defaultClass="flex flex-col" featuredClass="flex-row" />



---
File: /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.";

<ApiTable
  rows={[
    ["grow", "flex-grow: 1;"],
    ["grow-<number>", "flex-grow: <number>;"],
    ["grow-[<value>]", "flex-grow: <value>;"],
    ["grow-(<custom-property>)", "flex-grow: var(<custom-property>);"],
  ]}
/>

## Examples

### Allowing items to grow

Use `grow` to allow a flex item to grow to fill any available space:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex size-14 flex-none items-center justify-center rounded-lg bg-sky-300 dark:bg-sky-800 dark:text-sky-400">
          01
        </div>
        <div className="flex size-14 grow items-center justify-center rounded-lg bg-sky-500 p-4">02</div>
        <div className="flex size-14 flex-none items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grow] -->
<div class="flex ...">
  <div class="size-14 flex-none ...">01</div>
  <div class="size-14 grow ...">02</div>
  <div class="size-14 flex-none ...">03</div>
</div>
```

</Figure>

### Growing items based on factor

Use `grow-<number>` utilities like `grow-3` to make flex items grow proportionally based on their growth factor, allowing them to fill the available space relative to each other:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex size-14 grow-3 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
          01
        </div>
        <div className="flex size-14 grow-7 items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
        <div className="flex size-14 grow-3 items-center justify-center rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grow-3,grow-7] -->
<div class="flex ...">
  <div class="size-14 grow-3 ...">01</div>
  <div class="size-14 grow-7 ...">02</div>
  <div class="size-14 grow-3 ...">03</div>
</div>
```

</Figure>

### Preventing items from growing

Use `grow-0` to prevent a flex item from growing:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex size-14 grow items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
          01
        </div>
        <div className="flex size-14 shrink-0 grow-0 items-center justify-center rounded-lg bg-pink-500">02</div>
        <div className="hidden size-14 grow items-center justify-center rounded-lg bg-pink-300 p-4 md:flex dark:bg-pink-800 dark:text-pink-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grow-0] -->
<div class="flex ...">
  <div class="size-14 grow ...">01</div>
  <div class="size-14 grow-0 ...">02</div>
  <div class="size-14 grow ...">03</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="grow" name="flex grow factor" value="25vw" />

### Responsive design

<ResponsiveDesign property="flex-grow" defaultClass="grow" featuredClass="grow-0" />



---
File: /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.";

<ApiTable
  rows={[
    ["shrink", "flex-shrink: 1;"],
    ["shrink-<number>", "flex-shrink: <number>;"],
    ["shrink-[<value>]", "flex-shrink: <value>;"],
    ["shrink-(<custom-property>)", "flex-shrink: var(<custom-property>);"],
  ]}
/>

## Examples

### Allowing flex items to shrink

Use `shrink` to allow a flex item to shrink if needed:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex h-14 w-14 flex-none items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-400">
          01
        </div>
        <div className="flex h-14 w-64 shrink items-center justify-center rounded-lg bg-sky-500 p-4">02</div>
        <div className="hidden h-14 w-14 flex-none items-center justify-center rounded-lg bg-sky-300 p-4 sm:flex dark:bg-sky-800 dark:text-sky-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:shrink] -->
<div class="flex ...">
  <div class="h-14 w-14 flex-none ...">01</div>
  <div class="h-14 w-64 shrink ...">02</div>
  <div class="h-14 w-14 flex-none ...">03</div>
</div>
```

</Figure>

### Preventing items from shrinking

Use `shrink-0` to prevent a flex item from shrinking:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-blue-300 p-4 dark:bg-blue-800 dark:text-blue-500">
          01
        </div>
        <div className="flex w-16 shrink-0 items-center justify-center rounded-lg bg-blue-500 p-4 sm:w-64">02</div>
        <div className="hidden flex-1 items-center justify-center rounded-lg bg-blue-300 p-4 sm:flex dark:bg-blue-800 dark:text-blue-500">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:shrink-0] -->
<div class="flex ...">
  <div class="h-16 flex-1 ...">01</div>
  <div class="h-16 w-32 shrink-0 ...">02</div>
  <div class="h-16 flex-1 ...">03</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="shrink" name="flex shrink factor" value="calc(100vw-var(--sidebar))" />

### Responsive design

<ResponsiveDesign property="flex-shrink" defaultClass="shrink" featuredClass="shrink-0" />



---
File: /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.";

<ApiTable
  rows={[
    ["flex-nowrap", "flex-wrap: nowrap;"],
    ["flex-wrap", "flex-wrap: wrap;"],
    ["flex-wrap-reverse", "flex-wrap: wrap-reverse;"],
  ]}
/>

## Examples

### Don't wrap

Use `flex-nowrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex flex-nowrap gap-4 rounded-lg font-mono text-sm/6 font-bold text-white">
        <div className="w-2/5 flex-none last:pr-8">
          <div className="flex w-full items-center justify-center rounded-lg bg-sky-500 p-4">01</div>
        </div>
        <div className="w-2/5 flex-none last:pr-8">
          <div className="flex w-full items-center justify-center rounded-lg bg-sky-500 p-4">02</div>
        </div>
        <div className="w-2/5 flex-none last:pr-8">
          <div className="flex w-full items-center justify-center rounded-lg bg-sky-500 p-4">03</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flex-nowrap] -->
<div class="flex flex-nowrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Wrap normally

Use `flex-wrap` to allow flex items to wrap:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex flex-wrap gap-4 rounded-lg font-mono text-sm/6 font-bold text-white">
        <div className="flex w-2/5 items-center justify-center rounded-lg bg-indigo-500 p-4">01</div>
        <div className="flex w-2/5 items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
        <div className="flex w-2/5 items-center justify-center rounded-lg bg-indigo-500 p-4">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flex-wrap] -->
<div class="flex flex-wrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Wrap reversed

Use `flex-wrap-reverse` to wrap flex items in the reverse direction:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex flex-wrap-reverse gap-4 rounded-lg font-mono text-sm/6 font-bold text-white">
        <div className="flex w-2/5 items-center justify-center rounded-lg bg-fuchsia-500 p-4">01</div>
        <div className="flex w-2/5 items-center justify-center rounded-lg bg-fuchsia-500 p-4">02</div>
        <div className="flex w-2/5 items-center justify-center rounded-lg bg-fuchsia-500 p-4">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flex-wrap-reverse] -->
<div class="flex flex-wrap-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="flex-wrap" defaultClass="flex flex-wrap" featuredClass="flex-wrap-reverse" />



---
File: /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.";

<ApiTable
  rows={[
    ["flex-<number>", "flex: <number>;"],
    ["flex-<fraction>", "flex: calc(<fraction> * 100%);"],
    ["flex-auto", "flex: 1 1 auto;"],
    ["flex-initial", "flex: 0 1 auto;"],
    ["flex-none", "flex: none;"],
    ["flex-(<custom-property>)", "flex: var(<custom-property>);"],
    ["flex-[<value>]", "flex: <value>;"],
  ]}
/>

## Examples

### Basic example

Use `flex-<number>` utilities like `flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex h-14 w-14 flex-none items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
          01
        </div>
        <div className="flex w-64 flex-1 items-center justify-center rounded-lg bg-pink-500 p-4">02</div>
        <div className="flex w-32 flex-1 items-center justify-center rounded-lg bg-pink-500 p-4">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code word:flex-1] -->
<div class="flex">
  <div class="w-14 flex-none ...">01</div>
  <div class="w-64 flex-1 ...">02</div>
  <div class="w-32 flex-1 ...">03</div>
</div>
```

</Figure>

### Initial

Use `flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex h-14 w-14 flex-none items-center justify-center rounded-lg bg-blue-300 p-4 dark:bg-blue-800 dark:text-blue-500">
          01
        </div>
        <div className="flex w-24 flex-initial items-center justify-center rounded-lg bg-blue-500 p-4 sm:w-64">02</div>
        <div className="flex w-14 flex-initial items-center justify-center rounded-lg bg-blue-500 p-4 sm:w-32">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code word:flex-initial] -->
<div class="flex">
  <div class="w-14 flex-none ...">01</div>
  <div class="w-64 flex-initial ...">02</div>
  <div class="w-32 flex-initial ...">03</div>
</div>
```

</Figure>

### Auto

Use `flex-auto` to allow a flex item to grow and shrink, taking into account its initial size:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex h-14 w-14 flex-none items-center justify-center rounded-lg bg-violet-300 p-4 dark:bg-violet-800 dark:text-violet-400">
          01
        </div>
        <div className="flex w-64 flex-auto items-center justify-center rounded-lg bg-violet-500 p-4">02</div>
        <div className="flex w-32 flex-auto items-center justify-center rounded-lg bg-violet-500 p-4">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code word:flex-auto] -->
<div class="flex ...">
  <div class="w-14 flex-none ...">01</div>
  <div class="w-64 flex-auto ...">02</div>
  <div class="w-32 flex-auto ...">03</div>
</div>
```

</Figure>

### None

Use `flex-none` to prevent a flex item from growing or shrinking:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex-none last:pr-8 sm:last:pr-0">
          <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-500 p-4">01</div>
        </div>
        <div className="flex-none last:pr-8 sm:last:pr-0">
          <div className="flex w-32 items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
        </div>
        <div className="flex-1 last:pr-8 sm:last:pr-0">
          <div className="flex items-center justify-center rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">
            03
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code word:flex-none] -->
<div class="flex ...">
  <div class="w-14 flex-none ...">01</div>
  <div class="w-32 flex-none ...">02</div>
  <div class="flex-1 ...">03</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="flex" name="flex shorthand property" value="3_1_auto" />

### Responsive design

<ResponsiveDesign property="flex" defaultClass="flex-none" featuredClass="flex-1" />



---
File: /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.";

<ApiTable
  rows={[
    ["float-right", "float: right;"],
    ["float-left", "float: left;"],
    ["float-start", "float: inline-start;"],
    ["float-end", "float: inline-end;"],
    ["float-none", "float: none;"],
  ]}
/>

## Examples

### Floating elements to the right

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

<Figure>

<Example resizable>
  {
    <>
      <img
        className="float-right ml-6 aspect-16/9 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <p className="text-justify">
        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.
      </p>
    </>
  }
</Example>

```html
<!-- [!code classes:float-right] -->
<article>
  <img class="float-right ..." src="/img/mountains.jpg" />
  <p>Maybe we can live without libraries, people like you and me. ...</p>
</article>
```

</Figure>

### Floating elements to the left

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

<Figure>

<Example resizable>
  {
    <>
      <img
        className="float-left mr-6 aspect-16/9 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <p className="text-justify">
        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.
      </p>
    </>
  }
</Example>

```html
<!-- [!code classes:float-left] -->
<article>
  <img class="float-left ..." src="/img/mountains.jpg" />
  <p>Maybe we can live without libraries, people like you and me. ...</p>
</article>
```

</Figure>

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

<Figure>

<Example resizable>
  {
    <>
      <div dir="ltr">
        <p className="mb-4 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">left-to-right</p>
        <div>
          <img
            className="float-start me-6 aspect-16/9 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
          />
          <p className="text-justify">
            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.
          </p>
        </div>
      </div>
      <div dir="rtl" className="mt-6">
        <p className="mb-4 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">right-to-left</p>
        <div>
          <img
            className="float-start me-6 aspect-16/9 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
          />
          <p className="text-justify">
            ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن
            ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في
            القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة
            والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو:
            ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.
          </p>
        </div>
      </div>
    </>
  }
</Example>

```html
<!-- [!code word:dir="rtl"] -->
<!-- [!code classes:float-start] -->
<article>
  <img class="float-start ..." src="/img/mountains.jpg" />
  <p>Maybe we can live without libraries, people like you and me. ...</p>
</article>

<article dir="rtl">
  <img class="float-start ..." src="/img/mountains.jpg" />
  <p>... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد</p>
</article>
```

</Figure>

### Disabling a float

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

<Figure>

<Example resizable>
  {
    <>
      <img
        className="mb-4 aspect-16/9 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
      />
      <p className="text-justify">
        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.
      </p>
    </>
  }
</Example>

```html
<!-- [!code classes:float-none] -->
<article>
  <img class="float-none ..." src="/img/mountains.jpg" />
  <p>Maybe we can live without libraries, people like you and me. ...</p>
</article>
```

</Figure>

### Responsive design

<ResponsiveDesign property="float">

```html
<!-- [!code classes:md:float-left] -->
<img class="float-right md:float-left" src="/img/mountains.jpg" />
```

</ResponsiveDesign>



---
File: /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.";

<ApiTable
  rows={[
    [
      "font-sans",
      "font-family: var(--font-sans); /* ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */",
    ],
    ["font-serif", "font-family: var(--font-serif); /* ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif */"],
    [
      "font-mono",
      "font-family: var(--font-mono); /* ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace */",
    ],
    ["font-(family-name:<custom-property>)", "font-family: var(<custom-property>);"],
    ["font-[<value>]", "font-family: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `font-sans` and `font-mono` to set the font family of an element:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-sans</span>
        <p className="font-sans text-lg font-medium text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-serif</span>
        <p className="font-serif text-lg font-medium text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-mono</span>
        <p className="font-mono text-lg font-medium text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:font-sans,font-serif,font-mono] -->
<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-serif ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="font" name="font family" value="Open_Sans" element="p" dataType="family-name" />

### Responsive design

<ResponsiveDesign property="font-family" defaultClass="font-sans" featuredClass="font-serif" element="p" />

## Customizing your theme

<CustomizingYourTheme
  utility="font"
  name="font family"
  customName="display"
  customValue='"Oswald", "sans-serif"'
>

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.

</CustomizingYourTheme>



---
File: /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.";

<ApiTable
  rows={[
    [
      "text-xs",
      "font-size: var(--text-xs); /* 0.75rem (12px) */ \nline-height: var(--text-xs--line-height); /* calc(1 / 0.75) */",
    ],
    [
      "text-sm",
      "font-size: var(--text-sm); /* 0.875rem (14px) */ \nline-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */",
    ],
    [
      "text-base",
      "font-size: var(--text-base); /* 1rem (16px) */ \nline-height: var(--text-base--line-height); /* calc(1.5 / 1) */",
    ],
    [
      "text-lg",
      "font-size: var(--text-lg); /* 1.125rem (18px) */ \nline-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */",
    ],
    [
      "text-xl",
      "font-size: var(--text-xl); /* 1.25rem (20px) */ \nline-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */",
    ],
    [
      "text-2xl",
      "font-size: var(--text-2xl); /* 1.5rem (24px) */ \nline-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */",
    ],
    [
      "text-3xl",
      "font-size: var(--text-3xl); /* 1.875rem (30px) */ \nline-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */",
    ],
    [
      "text-4xl",
      "font-size: var(--text-4xl); /* 2.25rem (36px) */ \nline-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */",
    ],
    ["text-5xl", "font-size: var(--text-5xl); /* 3rem (48px) */ \nline-height: var(--text-5xl--line-height); /* 1 */"],
    [
      "text-6xl",
      "font-size: var(--text-6xl); /* 3.75rem (60px) */ \nline-height: var(--text-6xl--line-height); /* 1 */",
    ],
    [
      "text-7xl",
      "font-size: var(--text-7xl); /* 4.5rem (72px) */ \nline-height: var(--text-7xl--line-height); /* 1 */",
    ],
    ["text-8xl", "font-size: var(--text-8xl); /* 6rem (96px) */ \nline-height: var(--text-8xl--line-height); /* 1 */"],
    ["text-9xl", "font-size: var(--text-9xl); /* 8rem (128px) */ \nline-height: var(--text-9xl--line-height); /* 1 */"],
    ["text-(length:<custom-property>)", "font-size: var(<custom-property>);"],
    ["text-[<value>]", "font-size: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `text-sm` and `text-lg` to set the font size of an element:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm</span>
        <p className="text-sm font-medium text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-base</span>
        <p className="text-base font-medium text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-lg</span>
        <p className="text-lg font-medium text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-xl</span>
        <p className="text-xl font-medium text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-2xl</span>
        <p className="text-2xl font-medium text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:text-sm,text-base,text-lg,text-xl,text-2xl] -->
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/6</span>
        <p className="text-sm/6 text-gray-900 dark:text-gray-200">
          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/7</span>
        <p className="text-sm/7 text-gray-900 dark:text-gray-200">
          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/8</span>
        <p className="text-sm/8 text-gray-900 dark:text-gray-200">
          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:text-sm/6,text-sm/7,text-sm/8] -->
<p class="text-sm/6 ...">So I started to walk into the water...</p>
<p class="text-sm/7 ...">So I started to walk into the water...</p>
<p class="text-sm/8 ...">So I started to walk into the water...</p>
```

</Figure>

### Using a custom value

<UsingACustomValue element="p" utility="text" name="font size" value="14px" variable="text-size" dataType="length" />

### Responsive design

<ResponsiveDesign element="p" property="font-size" defaultClass="text-sm" featuredClass="text-base" />

## Customizing your theme

<CustomizingYourTheme utility="text" name="font size" customValue="0.625rem" customName="tiny">

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] */
}
```

</CustomizingYourTheme>



---
File: /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.";

<ApiTable
  rows={[
    ["antialiased", "-webkit-font-smoothing: antialiased;\n-moz-osx-font-smoothing: grayscale;"],
    ["subpixel-antialiased", "-webkit-font-smoothing: auto;\n-moz-osx-font-smoothing: auto;"],
  ]}
/>

## Examples

### Grayscale antialiasing

Use the `antialiased` utility to render text using grayscale antialiasing:

<Figure>

<Example>
  {
    <p className="text-center text-lg font-medium text-gray-900 antialiased dark:text-gray-200">
      The quick brown fox jumps over the lazy dog.
    </p>
  }
</Example>

```html
<!-- [!code classes:antialiased] -->
<p class="antialiased ...">The quick brown fox ...</p>
```

</Figure>

### Subpixel antialiasing

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

<Figure>

<Example>
  {
    <p className="text-center text-lg font-medium text-gray-900 subpixel-antialiased dark:text-gray-200">
      The quick brown fox jumps over the lazy dog.
    </p>
  }
</Example>

```html
<!-- [!code classes:subpixel-antialiased] -->
<p class="subpixel-antialiased ...">The quick brown fox ...</p>
```

</Figure>

### Responsive design

<ResponsiveDesign
  element="p"
  properties={["-webkit-font-smoothing", "-moz-osx-font-smoothing"]}
  defaultClass="antialiased"
  featuredClass="subpixel-antialiased"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["font-stretch-ultra-condensed", "font-stretch: ultra-condensed; /* 50% */"],
    ["font-stretch-extra-condensed", "font-stretch: extra-condensed; /* 62.5% */"],
    ["font-stretch-condensed", "font-stretch: condensed; /* 75% */"],
    ["font-stretch-semi-condensed", "font-stretch: semi-condensed; /* 87.5% */"],
    ["font-stretch-normal", "font-stretch: normal; /* 100% */"],
    ["font-stretch-semi-expanded", "font-stretch: semi-expanded; /* 112.5% */"],
    ["font-stretch-expanded", "font-stretch: expanded; /* 125% */"],
    ["font-stretch-extra-expanded", "font-stretch: extra-expanded; /* 150% */"],
    ["font-stretch-ultra-expanded", "font-stretch: ultra-expanded; /* 200% */"],
    ["font-stretch-<percentage>", "font-stretch: <percentage>;"],
    ["font-stretch-(<custom-property>)", "font-stretch: var(<custom-property>);"],
    ["font-stretch-[<value>]", "font-stretch: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `font-stretch-condensed` and `font-stretch-expanded` to set the width of a font face:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          font-stretch-extra-condensed
        </span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-extra-condensed dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          font-stretch-condensed
        </span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-condensed dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-normal</span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-normal dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          font-stretch-expanded
        </span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-expanded dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          font-stretch-extra-expanded
        </span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-extra-expanded dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:font-stretch-extra-condensed,font-stretch-condensed,font-stretch-normal,font-stretch-expanded,font-stretch-extra-expanded] -->
<p class="font-stretch-extra-condensed">The quick brown fox...</p>
<p class="font-stretch-condensed">The quick brown fox...</p>
<p class="font-stretch-normal">The quick brown fox...</p>
<p class="font-stretch-expanded">The quick brown fox...</p>
<p class="font-stretch-extra-expanded">The quick brown fox...</p>
```

</Figure>

This only applies to fonts that have multiple width variations available, otherwise the browser selects the closest match.

### Using percentages

Use `font-stretch-<percentage>` utilities like `font-stretch-50%` and `font-stretch-125%` to set the width of a font face using a percentage:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-50%</span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-50% dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-100%</span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-100% dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-stretch-150%</span>
        <p className="font-[system-ui] text-xl font-medium text-gray-900 font-stretch-150% dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:font-stretch-50%,font-stretch-100%,font-stretch-150%] -->
<p class="font-stretch-50%">The quick brown fox...</p>
<p class="font-stretch-100%">The quick brown fox...</p>
<p class="font-stretch-150%">The quick brown fox...</p>
```

</Figure>

### Using a custom value

<UsingACustomValue element="p" utility="font-stretch" value="66.66%" name="font width" variable="font-width" />

### Responsive design

<ResponsiveDesign property="font-stretch" defaultClass="font-stretch-normal" featuredClass="font-stretch-expanded" />



---
File: /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.";

<ApiTable
  rows={[
    ["italic", "font-style: italic;"],
    ["not-italic", "font-style: normal;"],
  ]}
/>

## Examples

### Italicizing text

Use the `italic` utility to make text italic:

<Figure>

<Example>
  {
    <p className="text-center text-lg font-medium text-gray-900 italic dark:text-gray-200">
      The quick brown fox jumps over the lazy dog.
    </p>
  }
</Example>

```html
<!-- [!code classes:italic] -->
<p class="italic ...">The quick brown fox ...</p>
```

</Figure>

### Displaying text normally

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

<Figure>

<Example>
  {
    <p className="text-center text-lg font-medium text-gray-900 not-italic dark:text-gray-200">
      The quick brown fox jumps over the lazy dog.
    </p>
  }
</Example>

```html
<!-- [!code classes:not-italic] -->
<p class="not-italic ...">The quick brown fox ...</p>
```

</Figure>

### Responsive design

<ResponsiveDesign property="font-style" defaultClass="italic" featuredClass="not-italic" element="p" />



---
File: /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.";

<ApiTable
  rows={[
    ["normal-nums", "font-variant-numeric: normal;"],
    ["ordinal", "font-variant-numeric: ordinal;"],
    ["slashed-zero", "font-variant-numeric: slashed-zero;"],
    ["lining-nums", "font-variant-numeric: lining-nums;"],
    ["oldstyle-nums", "font-variant-numeric: oldstyle-nums;"],
    ["proportional-nums", "font-variant-numeric: proportional-nums;"],
    ["tabular-nums", "font-variant-numeric: tabular-nums;"],
    ["diagonal-fractions", "font-variant-numeric: diagonal-fractions;"],
    ["stacked-fractions", "font-variant-numeric: stacked-fractions;"],
  ]}
/>

## Examples

### Using ordinal glyphs

Use the `ordinal` utility to enable special glyphs for the ordinal markers in fonts that support them:

<Figure>

<Example>{<p className="text-center font-source text-lg text-gray-900 ordinal dark:text-gray-200">1st</p>}</Example>

```html
<!-- [!code classes:ordinal] -->
<p class="ordinal ...">1st</p>
```

</Figure>

### Using slashed zeroes

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

<Figure>

<Example>{<p className="text-center font-source text-lg text-gray-900 slashed-zero dark:text-gray-200">0</p>}</Example>

```html
<!-- [!code classes:slashed-zero] -->
<p class="slashed-zero ...">0</p>
```

</Figure>

### Using lining figures

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

<Figure>

<Example>
  {<p className="text-center font-source text-lg text-gray-900 lining-nums dark:text-gray-200">1234567890</p>}
</Example>

```html
<!-- [!code classes:lining-nums] -->
<p class="lining-nums ...">1234567890</p>
```

</Figure>

### Using oldstyle figures

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

<Figure>

<Example>
  {<p className="text-center font-source text-lg text-gray-900 oldstyle-nums dark:text-gray-200">1234567890</p>}
</Example>

```html
<!-- [!code classes:oldstyle-nums] -->
<p class="oldstyle-nums ...">1234567890</p>
```

</Figure>

### Using proportional figures

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

<Figure>

<Example>
  {
    <div className="max-w-xs text-right">
      <p className="font-source text-lg text-gray-900 proportional-nums dark:text-gray-200">12121</p>
      <p className="font-source text-lg text-gray-900 proportional-nums dark:text-gray-200">90909</p>
    </div>
  }
</Example>

```html
<!-- [!code classes:proportional-nums] -->
<p class="proportional-nums ...">12121</p>
<p class="proportional-nums ...">90909</p>
```

</Figure>

### Using tabular figures

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

<Figure>

<Example>
  {
    <div className="max-w-xs text-right">
      <p className="font-source text-lg text-gray-900 tabular-nums dark:text-gray-200">12121</p>
      <p className="font-source text-lg text-gray-900 tabular-nums dark:text-gray-200">90909</p>
    </div>
  }
</Example>

```html
<!-- [!code classes:tabular-nums] -->
<p class="tabular-nums ...">12121</p>
<p class="tabular-nums ...">90909</p>
```

</Figure>

### Using diagonal fractions

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

<Figure>

<Example>
  {<p className="text-center font-source text-lg text-gray-900 diagonal-fractions dark:text-gray-200">1/2 3/4 5/6</p>}
</Example>

```html
<!-- [!code classes:diagonal-fractions] -->
<p class="diagonal-fractions ...">1/2 3/4 5/6</p>
```

</Figure>

### Using stacked fractions

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

<Figure>

<Example>
  {
    <p className="text-center font-ubuntu-mono text-lg text-gray-900 stacked-fractions dark:text-gray-200">
      1/2 3/4 5/6
    </p>
  }
</Example>

```html
<!-- [!code classes:stacked-fractions] -->
<p class="stacked-fractions ...">1/2 3/4 5/6</p>
```

</Figure>

### Stacking multiple utilities

The `font-variant-numeric` utilities are composable so you can enable multiple variants by combining them:

<Figure>

<Example>
  {
    <dl className="mx-auto grid max-w-2xs grid-cols-2 text-gray-900 dark:text-gray-200">
      <dt className="border-b border-gray-200 py-2 dark:border-white/10">Subtotal</dt>
      <dd className="border-b border-gray-200 py-2 text-right slashed-zero tabular-nums dark:border-white/10">
        $100.00
      </dd>
      <dt className="border-b border-gray-200 py-2 dark:border-white/10">Tax</dt>
      <dd className="border-b border-gray-200 py-2 text-right slashed-zero tabular-nums dark:border-white/10">
        $14.50
      </dd>
      <dt className="py-2">Total</dt>
      <dd className="slashed-medium py-2 text-right tabular-nums">$114.50</dd>
    </dl>
  }
</Example>

```html
<!-- [!code classes:slashed-zero,tabular-nums] -->
<dl class="...">
  <dt class="...">Subtotal</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$100.00</dd>
  <dt class="...">Tax</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$14.50</dd>
  <dt class="...">Total</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$114.50</dd>
</dl>
```

</Figure>

### Resetting numeric font variants

Use the `normal-nums` property to reset numeric font variants:

```html
<!-- [!code classes:slashed-zero,tabular-nums,normal-nums] -->
<p class="slashed-zero tabular-nums md:normal-nums ...">
  <!-- ... -->
</p>
```

### Responsive design

<ResponsiveDesign
  property="font-variant-numeric"
  defaultClass="proportional-nums"
  featuredClass="tabular-nums"
  element="p"
/>



---
File: /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";

export const title = "font-weight";
export const description = "Utilities for controlling the font weight of an element.";

<ApiTable
  rows={[
    ["font-thin", "font-weight: 100;"],
    ["font-extralight", "font-weight: 200;"],
    ["font-light", "font-weight: 300;"],
    ["font-normal", "font-weight: 400;"],
    ["font-medium", "font-weight: 500;"],
    ["font-semibold", "font-weight: 600;"],
    ["font-bold", "font-weight: 700;"],
    ["font-extrabold", "font-weight: 800;"],
    ["font-black", "font-weight: 900;"],
    ["font-(<custom-property>)", "font-weight: var(<custom-property>);"],
    ["font-[<value>]", "font-weight: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `font-thin` and `font-bold` to set the font weight of an element:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-light</span>
        <p className="text-lg font-light text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-normal</span>
        <p className="text-lg font-normal text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-medium</span>
        <p className="text-lg font-medium text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-semibold</span>
        <p className="text-lg font-semibold text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-bold</span>
        <p className="text-lg font-bold text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:font-light,font-normal,font-medium,font-semibold,font-bold] -->
<p class="font-light ...">The quick brown fox ...</p>
<p class="font-normal ...">The quick brown fox ...</p>
<p class="font-medium ...">The quick brown fox ...</p>
<p class="font-semibold ...">The quick brown fox ...</p>
<p class="font-bold ...">The quick brown fox ...</p>
```

</Figure>

### Using a custom value

<UsingACustomValue element="p" utility="font" value="1000" name="font weight" variable="font-weight" />

### Responsive design

<ResponsiveDesign element="p" property="font-weight" defaultClass="font-normal" featuredClass="font-bold" />

## Customizing your theme

<CustomizingYourTheme
  utility="font"
  themeKey="font-weight"
  name="font weight"
  customValue="1000"
  customName="extrablack"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["forced-color-adjust-auto", "forced-color-adjust: auto;"],
    ["forced-color-adjust-none", "forced-color-adjust: none;"],
  ]}
/>

## Examples

### Opting out of forced colors

Use the `forced-color-adjust-none` utility to opt an element out of the colors enforced by forced colors mode. This is useful in situations where enforcing a limited color palette will degrade usability.

<Figure hint="Try emulating `forced-colors: active` in your developer tools to see the changes">

<Example>
  {
    <div className="mx-auto max-w-sm overflow-clip rounded-lg border border-transparent bg-white shadow dark:border-white/10 dark:bg-white/5">
      <div className="aspect-h-3 aspect-w-3 overflow-hidden">
        <Image
          src={tshirtImage}
          alt="Two each of gray, white, and black shirts laying flat."
          className="h-full w-full object-cover object-center"
        />
      </div>
      <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-4">
        <div>
          <p className="font-medium text-gray-900 dark:text-white">Basic Tee</p>
          <p className="text-sm font-medium text-gray-900 dark:text-white">$35</p>
        </div>
        <fieldset>
          <legend className="sr-only">Choose a color</legend>
          <div className="grid grid-flow-col items-center gap-3 forced-color-adjust-none">
            <label className="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 ring-0 focus:outline-none has-checked:ring-1 has-checked:ring-gray-400 has-checked:ring-offset-1">
              <input
                type="radio"
                name="color-choice"
                value="White"
                className="sr-only"
                aria-labelledby="color-choice-0-label"
              />
              <span id="color-choice-0-label" className="sr-only">
                White
              </span>
              <span
                aria-hidden="true"
                className="size-6 rounded-full border border-black/10 bg-white dark:border-white/10"
              ></span>
            </label>
            <label className="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 ring-0 focus:outline-none has-checked:ring-1 has-checked:ring-gray-400 has-checked:ring-offset-1">
              <input type="radio" defaultChecked name="color-choice" value="Gray" className="sr-only" />
              <span id="color-choice-1-label" className="sr-only">
                Gray
              </span>
              <span
                aria-hidden="true"
                className="size-6 rounded-full border border-black/10 bg-gray-200 dark:border-white/10"
              ></span>
            </label>
            <label className="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 ring-0 focus:outline-none has-checked:ring-1 has-checked:ring-gray-900 has-checked:ring-offset-1">
              <input
                type="radio"
                name="color-choice"
                value="Black"
                className="sr-only"
                aria-labelledby="color-choice-2-label"
              />
              <span id="color-choice-2-label" className="sr-only">
                Black
              </span>
              <span
                aria-hidden="true"
                className="size-6 rounded-full border border-black/10 bg-gray-900 dark:border-white/10"
              ></span>
            </label>
          </div>
        </fieldset>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:forced-color-adjust-none] -->
<form>
  <img src="/img/shirt.jpg" />
  <div>
    <h3>Basic Tee</h3>
    <h3>$35</h3>
    <fieldset>
      <legend class="sr-only">Choose a color</legend>
      <div class="forced-color-adjust-none ...">
        <label>
          <input class="sr-only" type="radio" name="color-choice" value="White" />
          <span class="sr-only">White</span>
          <span class="size-6 rounded-full border border-black/10 bg-white"></span>
        </label>
        <!-- ... -->
      </div>
    </fieldset>
  </div>
</form>
```

</Figure>

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
<!-- [!code classes:lg:forced-color-adjust-auto] -->
<form>
  <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ...">
    <legend>Choose a color:</legend>
    <select class="hidden lg:block">
      <option value="White">White</option>
      <option value="Gray">Gray</option>
      <option value="Black">Black</option>
    </select>
    <div class="lg:hidden">
      <label>
        <input class="sr-only" type="radio" name="color-choice" value="White" />
        <!-- ... -->
      </label>
      <!-- ... -->
    </div>
  </fieldset>
</form>
```

This can be useful if you want to undo the `forced-color-adjust-none` utility, for example on a larger screen size.

### Responsive design

<ResponsiveDesign
  property="forced-color-adjust"
  defaultClass="forced-color-adjust-none"
  featuredClass="forced-color-adjust-auto"
/>



---
File: /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.

<h3 id="import-directive">@import</h3>

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

```css
/* [!code filename:CSS] */
@import "tailwindcss";
```

<h3 id="theme-directive">@theme</h3>

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

<h3 id="source-directive">@source</h3>

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

<h3 id="utility-directive">@utility</h3>

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

<h3 id="variant-directive">@variant</h3>

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

<h3 id="custom-variant-directive">@custom-variant</h3>

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

<h3 id="apply-directive">@apply</h3>

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.

<h3 id="reference-directive">@reference</h3>

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

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

```html
<!-- [!code filename:Vue] -->
<template>
  <h1>Hello world!</h1>
</template>

<style>
  /* [!code highlight:2] */
  @reference "../../app.css";

  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>
```

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

```html
<!-- [!code filename:Vue] -->
<template>
  <h1>Hello world!</h1>
</template>

<style>
  /* [!code highlight:2] */
  @reference "tailwindcss";

  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>
```

## Functions

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

<h3 id="alpha-function">--alpha()</h3>

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

<CodeExampleStack>

```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);
}
```

</CodeExampleStack>

<h3 id="spacing-function">--spacing()</h3>

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

<CodeExampleStack>

```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);
}
```

</CodeExampleStack>

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

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:py-[calc(--spacing(4)-1px)]] -->
<div class="py-[calc(--spacing(4)-1px)]">
  <!-- ... -->
</div>
```

## Compatibility

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

<h3 id="config-directive">@config</h3>

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.

<h3 id="plugin-directive">@plugin</h3>

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.

<h3 id="theme-function">theme()</h3>

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.



---
File: /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.";

<ApiTable
  rows={[
    ["gap-<number>", "gap: calc(var(--spacing) * <value>);"],
    ["gap-(<custom-property>)", "gap: var(<custom-property>);"],
    ["gap-[<value>]", "gap: <value>;"],
    ["gap-x-<number>", "column-gap: calc(var(--spacing) * <value>);"],
    ["gap-x-(<custom-property>)", "column-gap: var(<custom-property>);"],
    ["gap-x-[<value>]", "column-gap: <value>;"],
    ["gap-y-<number>", "row-gap: calc(var(--spacing) * <value>);"],
    ["gap-y-(<custom-property>)", "row-gap: var(<custom-property>);"],
    ["gap-y-[<value>]", "row-gap: <value>;"],
  ]}
/>

## Examples

### Basic example

Use `gap-<number>` utilities like `gap-2` and `gap-4` to change the gap between both rows and columns in grid and flexbox layouts:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-cols-2 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-violet-500 p-4">01</div>
        <div className="rounded-lg bg-violet-500 p-4">02</div>
        <div className="rounded-lg bg-violet-500 p-4">03</div>
        <div className="rounded-lg bg-violet-500 p-4">04</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:gap-4] -->
<div class="grid grid-cols-2 gap-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```

</Figure>

### Changing row and column gaps independently

Use `gap-x-<number>` or `gap-y-<number>` utilities like `gap-x-8` and `gap-y-4` to change the gap between columns and rows independently:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-cols-3 gap-x-8 gap-y-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-sky-500 p-4">01</div>
        <div className="rounded-lg bg-sky-500 p-4">02</div>
        <div className="rounded-lg bg-sky-500 p-4">03</div>
        <div className="rounded-lg bg-sky-500 p-4">04</div>
        <div className="rounded-lg bg-sky-500 p-4">05</div>
        <div className="rounded-lg bg-sky-500 p-4">06</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:gap-x-8,gap-y-4] -->
<div class="grid grid-cols-3 gap-x-8 gap-y-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utilities={["gap", "gap-x", "gap-y"]} value="10vw" />

### Responsive design

<ResponsiveDesign properties={["gap", "column-gap", "row-gap"]} defaultClass="grid gap-4" featuredClass="gap-6" />



---
File: /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.";

<ApiTable
  rows={[
    ["auto-cols-auto", "grid-auto-columns: auto;"],
    ["auto-cols-min", "grid-auto-columns: min-content;"],
    ["auto-cols-max", "grid-auto-columns: max-content;"],
    ["auto-cols-fr", "grid-auto-columns: minmax(0, 1fr);"],
    ["auto-cols-(<custom-property>)", "grid-auto-columns: var(<custom-property>);"],
    ["auto-cols-[<value>]", "grid-auto-columns: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `auto-cols-min` and `auto-cols-max` to control the size of implicitly-created grid columns:

```html
<!-- [!code classes:auto-cols-max] -->
<div class="grid auto-cols-max grid-flow-col">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

### Using a custom value

<UsingACustomValue utility="auto-cols" name="size of implicitly-created grid columns" value="minmax(0,2fr)" />

### Responsive design

<ResponsiveDesign
  property="grid-auto-columns"
  defaultClass="grid grid-flow-col auto-cols-max"
  featuredClass="auto-cols-min"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["grid-flow-row", "grid-auto-flow: row;"],
    ["grid-flow-col", "grid-auto-flow: column;"],
    ["grid-flow-dense", "grid-auto-flow: dense;"],
    ["grid-flow-row-dense", "grid-auto-flow: row dense;"],
    ["grid-flow-col-dense", "grid-auto-flow: column dense;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `grid-flow-col` and `grid-flow-row-dense` to control how the auto-placement algorithm works for a grid layout:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-flow-row-dense grid-cols-3 grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="col-span-2 rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">01</div>
        <div className="col-span-2 rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">02</div>
        <div className="rounded-lg bg-purple-500 p-4">03</div>
        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">04</div>
        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">05</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grid-flow-row-dense] -->
<div class="grid grid-flow-row-dense grid-cols-3 grid-rows-3 ...">
  <div class="col-span-2">01</div>
  <div class="col-span-2">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="grid-auto-flow" defaultClass="grid grid-flow-col" featuredClass="grid-flow-row" />



---
File: /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.";

<ApiTable
  rows={[
    ["auto-rows-auto", "grid-auto-rows: auto;"],
    ["auto-rows-min", "grid-auto-rows: min-content;"],
    ["auto-rows-max", "grid-auto-rows: max-content;"],
    ["auto-rows-fr", "grid-auto-rows: minmax(0, 1fr);"],
    ["auto-rows-(<custom-property>)", "grid-auto-rows: var(<custom-property>);"],
    ["auto-rows-[<value>]", "grid-auto-rows: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `auto-rows-min` and `auto-rows-max` to control the size of implicitly-created grid rows:

```html
<!-- [!code classes:auto-rows-max] -->
<div class="grid grid-flow-row auto-rows-max">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

### Using a custom value

<UsingACustomValue utility="auto-rows" name="size of implicitly-created grid rows" value="minmax(0,2fr)" />

### Responsive design

<ResponsiveDesign
  property="grid-auto-rows"
  defaultClass="grid grid-flow-row auto-rows-max"
  featuredClass="auto-rows-min"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["col-span-<number>", "grid-column: span <number> / span <number>;"],
    ["col-span-full", "grid-column: 1 / -1;"],
    ["col-span-(<custom-property>)", "grid-column: span var(<custom-property>) / span var(<custom-property>);"],
    ["col-span-[<value>]", "grid-column: span <value> / span <value>;"],
    ["col-start-<number>", "grid-column-start: <number>;"],
    ["-col-start-<number>", "grid-column-start: calc(<number> * -1);"],
    ["col-start-auto", "grid-column-start: auto;"],
    ["col-start-(<custom-property>)", "grid-column-start: var(<custom-property>);"],
    ["col-start-[<value>]", "grid-column-start: <value>;"],
    ["col-end-<number>", "grid-column-end: <number>;"],
    ["-col-end-<number>", "grid-column-end: calc(<number> * -1);"],
    ["col-end-auto", "grid-column-end: auto;"],
    ["col-end-(<custom-property>)", "grid-column-end: var(<custom-property>);"],
    ["col-end-[<value>]", "grid-column-end: <value>;"],
    ["col-auto", "grid-column: auto;"],
    ["col-<number>", "grid-column: <number>;"],
    ["-col-<number>", "grid-column: calc(<number> * -1);"],
    ["col-(<custom-property>)", "grid-column: var(<custom-property>);"],
    ["col-[<value>]", "grid-column: <value>;"],
  ]}
/>

## Examples

### Spanning columns

Use `col-span-<number>` utilities like `col-span-2` and `col-span-4` to make an element span _n_ columns:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-cols-3 gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">01</div>
        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">02</div>
        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">03</div>
        <div className="col-span-2 rounded-lg bg-indigo-500 p-4">04</div>
        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">05</div>
        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">06</div>
        <div className="col-span-2 rounded-lg bg-indigo-500 p-4">07</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:col-span-2] -->
<div class="grid grid-cols-3 gap-4">
  <div class="...">01</div>
  <div class="...">02</div>
  <div class="...">03</div>
  <div class="col-span-2 ...">04</div>
  <div class="...">05</div>
  <div class="...">06</div>
  <div class="col-span-2 ...">07</div>
</div>
```

</Figure>

### Starting and ending lines

Use `col-start-<number>` or `col-end-<number>` utilities like `col-start-2` and `col-end-3` to make an element start or end at the _nth_ grid line:

<Figure>

<Example>
  {
    <div className="grid grid-cols-6 gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
      <Stripes border className="rounded-lg p-4" />
      <div className="col-span-4 col-start-2 rounded-lg bg-sky-500 p-4">01</div>
      <Stripes border className="rounded-lg p-4" />
      <div className="col-start-1 col-end-3 rounded-lg bg-sky-500 p-4">02</div>
      <Stripes border className="rounded-lg p-4" />
      <Stripes border className="rounded-lg p-4" />
      <div className="col-span-2 col-end-7 rounded-lg bg-sky-500 p-4">03</div>
      <div className="col-start-1 col-end-7 rounded-lg bg-sky-500 p-4">04</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:col-start-1,col-start-2,col-end-3,col-end-7] -->
<div class="grid grid-cols-6 gap-4">
  <div class="col-span-4 col-start-2 ...">01</div>
  <div class="col-start-1 col-end-3 ...">02</div>
  <div class="col-span-2 col-end-7 ...">03</div>
  <div class="col-start-1 col-end-7 ...">04</div>
</div>
```

</Figure>

These can also be combined with the `col-span-<number>` utilities to span a specific number of columns.

### Using a custom value

<UsingACustomValue
  utilities={["col", "col-span", "col-start", "col-end"]}
  variable="columns"
  name="grid column size and location"
  value="16_/_span_16"
/>

### Responsive design

<ResponsiveDesign
  properties={["grid-column", "grid-column-start", "grid-column-end"]}
  defaultClass="col-span-2"
  featuredClass="col-span-6"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["row-span-<number>", "grid-row: span <number> / span <number>;"],
    ["row-span-full", "grid-row: 1 / -1;"],
    ["row-span-(<custom-property>)", "grid-row: span var(<custom-property>) / span var(<custom-property>);"],
    ["row-span-[<value>]", "grid-row: span <value> / span <value>;"],
    ["row-start-<number>", "grid-row-start: <number>;"],
    ["-row-start-<number>", "grid-row-start: calc(<number> * -1);"],
    ["row-start-auto", "grid-row-start: auto;"],
    ["row-start-(<custom-property>)", "grid-row-start: var(<custom-property>);"],
    ["row-start-[<value>]", "grid-row-start: <value>;"],
    ["row-end-<number>", "grid-row-end: <number>;"],
    ["-row-end-<number>", "grid-row-end: calc(<number> * -1);"],
    ["row-end-auto", "grid-row-end: auto;"],
    ["row-end-(<custom-property>)", "grid-row-end: var(<custom-property>);"],
    ["row-end-[<value>]", "grid-row-end: <value>;"],
    ["row-auto", "grid-row: auto;"],
    ["row-<number>", "grid-row: <number>;"],
    ["-row-<number>", "grid-row: calc(<number> * -1);"],
    ["row-(<custom-property>)", "grid-row: var(<custom-property>);"],
    ["row-[<value>]", "grid-row: <value>;"],
  ]}
/>

## Examples

### Spanning rows

Use `row-span-<number>` utilities like `row-span-2` and `row-span-4` to make an element span _n_ rows:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-flow-col grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="row-span-3 grid place-content-center rounded-lg bg-fuchsia-500 p-4">01</div>
        <div className="col-span-2 grid place-content-center rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
          02
        </div>
        <div className="col-span-2 row-span-2 grid place-content-center rounded-lg bg-fuchsia-500 p-4">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:row-span-2,row-span-3] -->
<div class="grid grid-flow-col grid-rows-3 gap-4">
  <div class="row-span-3 ...">01</div>
  <div class="col-span-2 ...">02</div>
  <div class="col-span-2 row-span-2 ...">03</div>
</div>
```

</Figure>

### Starting and ending lines

Use `row-start-<number>` or `row-end-<number>` utilities like `row-start-2` and `row-end-3` to make an element start or end at the _nth_ grid line:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-flow-col grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="row-span-2 row-start-2 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">01</div>
        <div className="row-span-2 row-end-3 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">02</div>
        <div className="row-start-1 row-end-4 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:row-start-1,row-start-2,row-end-3,row-end-4] -->
<div class="grid grid-flow-col grid-rows-3 gap-4">
  <div class="row-span-2 row-start-2 ...">01</div>
  <div class="row-span-2 row-end-3 ...">02</div>
  <div class="row-start-1 row-end-4 ...">03</div>
</div>
```

</Figure>

These can also be combined with the `row-span-<number>` utilities to span a specific number of rows.

### Using a custom value

<UsingACustomValue
  utilities={["row", "row-span", "row-start", "row-end"]}
  variable="rows"
  name="grid row size and location"
  value="span_16_/_span_16"
/>

### Responsive design

<ResponsiveDesign
  properties={["grid-row", "grid-row-start", "grid-row-end"]}
  defaultClass="row-span-3"
  featuredClass="row-span-4"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["grid-cols-<number>", "grid-template-columns: repeat(<number>, minmax(0, 1fr));"],
    ["grid-cols-none", "grid-template-columns: none;"],
    ["grid-cols-subgrid", "grid-template-columns: subgrid;"],
    ["grid-cols-[<value>]", "grid-template-columns: <value>;"],
    ["grid-cols-(<custom-property>)", "grid-template-columns: var(<custom-property>);"],
  ]}
/>

## Examples

### Specifying the grid columns

Use `grid-cols-<number>` utilities like `grid-cols-2` and `grid-cols-4` to create grids with _n_ equally sized columns:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-cols-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-fuchsia-500 p-4">01</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">02</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">03</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">04</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">05</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">06</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">07</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">08</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">09</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grid-cols-4] -->
<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>
```

</Figure>

### Implementing a subgrid

Use the `grid-cols-subgrid` utility to adopt the column tracks defined by the item's parent:

<Figure>

<Example>
  {
    <div className="grid grid-cols-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">01</div>
      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">02</div>
      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">03</div>
      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">04</div>
      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">05</div>
      <div className="col-span-3 grid grid-cols-subgrid gap-4">
        <Stripes border className="rounded-lg p-4" />
        <div className="rounded-lg bg-pink-500 p-4">06</div>
        <Stripes border className="rounded-lg p-4" />
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grid-cols-subgrid] -->
<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="col-span-3 grid grid-cols-subgrid gap-4">
    <div class="col-start-2">06</div>
  </div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="grid-cols" name="columns" value="200px_minmax(900px,_1fr)_100px" />

### Responsive design

<ResponsiveDesign property="grid-template-columns" defaultClass="grid grid-cols-1" featuredClass="grid-cols-6" />



---
File: /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.";

<ApiTable
  rows={[
    ["grid-rows-<number>", "grid-template-rows: repeat(<number>, minmax(0, 1fr));"],
    ["grid-rows-none", "grid-template-rows: none;"],
    ["grid-rows-subgrid", "grid-template-rows: subgrid;"],
    ["grid-rows-[<value>]", "grid-template-rows: <value>;"],
    ["grid-rows-(<custom-property>)", "grid-template-rows: var(<custom-property>);"],
  ]}
/>

## Examples

### Specifying the grid rows

Use `grid-rows-<number>` utilities like `grid-rows-2` and `grid-rows-4` to create grids with _n_ equally sized rows:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-flow-col grid-rows-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-pink-500 p-4">01</div>
        <div className="rounded-lg bg-pink-500 p-4">02</div>
        <div className="rounded-lg bg-pink-500 p-4">03</div>
        <div className="rounded-lg bg-pink-500 p-4">04</div>
        <div className="rounded-lg bg-pink-500 p-4">05</div>
        <div className="rounded-lg bg-pink-500 p-4">06</div>
        <div className="rounded-lg bg-pink-500 p-4">07</div>
        <div className="rounded-lg bg-pink-500 p-4">08</div>
        <div className="rounded-lg bg-pink-500 p-4">09</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grid-rows-4] -->
<div class="grid grid-flow-col grid-rows-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>
```

</Figure>

### Implementing a subgrid

Use the `grid-rows-subgrid` utility to adopt the row tracks defined by the item's parent:

<Figure>

<Example>
  {
    <div className="grid grid-flow-col grid-rows-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">01</div>
      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">02</div>
      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">03</div>
      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">04</div>
      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">05</div>
      <div className="row-span-3 grid grid-rows-subgrid gap-4">
        <Stripes border className="h-14 rounded-lg" />
        <div className="grid h-14 items-center justify-center rounded-lg bg-fuchsia-500">06</div>
        <Stripes border className="h-14 rounded-lg" />
      </div>
      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">07</div>
      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">08</div>
      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">09</div>
      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">10</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grid-rows-subgrid] -->
<div class="grid grid-flow-col grid-rows-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="row-span-3 grid grid-rows-subgrid gap-4">
    <div class="row-start-2">06</div>
  </div>
  <div>07</div>
  <!-- ... -->
  <div>10</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="grid-rows" name="rows" value="200px_minmax(900px,1fr)_100px" />

### Responsive design

<ResponsiveDesign property="grid-template-rows" defaultClass="grid grid-rows-2" featuredClass="grid-rows-6" />



---
File: /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.";

<ApiTable
  rows={[
    ["h-<number>", "height: calc(var(--spacing) * <number>);"],
    ["h-<fraction>", "height: calc(<fraction> * 100%);"],
    ["h-auto", "height: auto;"],
    ["h-px", "height: 1px;"],
    ["h-full", "height: 100%;"],
    ["h-screen", "height: 100vh;"],
    ["h-dvh", "height: 100dvh;"],
    ["h-dvw", "height: 100dvw;"],
    ["h-lvh", "height: 100lvh;"],
    ["h-lvw", "height: 100lvw;"],
    ["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-(<custom-property>)", "height: var(<custom-property>);"],
    ["h-[<value>]", "height: <value>;"],
    ["size-<number>", "width: calc(var(--spacing) * <number>);\nheight: calc(var(--spacing) * <number>);"],
    ["size-<fraction>", "width: calc(<fraction> * 100%);\nheight: calc(<fraction> * 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-(<custom-property>)", "width: var(<custom-property>);\nheight: var(<custom-property>);"],
    ["size-[<value>]", "width: <value>;\nheight: <value>;"],
  ]}
/>

## Examples

### Basic example

Use `h-<number>` utilities like `h-24` and `h-64` to set an element to a fixed height based on the spacing scale:

<Figure>

<Example>
  {
    <div className="flex items-end justify-center space-x-4 font-mono text-xs font-bold text-white">
      <div className="relative flex h-96 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-96</div>
      </div>
      <div className="relative flex h-80 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-80</div>
      </div>
      <div className="relative flex h-64 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-64</div>
      </div>
      <div className="relative flex h-48 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-48</div>
      </div>
      <div className="relative flex h-40 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-40</div>
      </div>
      <div className="relative flex h-32 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-32</div>
      </div>
      <div className="relative flex h-24 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-24</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:h-96,h-80,h-64,h-48,h-40,h-32,h-24] -->
<div class="h-96 ...">h-96</div>
<div class="h-80 ...">h-80</div>
<div class="h-64 ...">h-64</div>
<div class="h-48 ...">h-48</div>
<div class="h-40 ...">h-40</div>
<div class="h-32 ...">h-32</div>
<div class="h-24 ...">h-24</div>
```

</Figure>

### Using a percentage

Use `h-full` or `h-<fraction>` utilities like `h-1/2` and `h-2/5` to give an element a percentage-based height:

<Figure>

<Example>
  {
    <div className="flex h-96 items-end justify-center space-x-4 font-mono text-xs font-bold text-white">
      <div className="relative flex h-full items-end">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative flex h-full w-8 items-end justify-center rounded-lg bg-sky-500">
          <div className="mb-6 -rotate-90 text-left text-nowrap">h-full</div>
        </div>
      </div>
      <div className="relative flex h-full items-end">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative flex h-9/10 w-8 items-end justify-center rounded-lg bg-sky-500">
          <div className="mb-6 -rotate-90 text-left text-nowrap">h-9/10</div>
        </div>
      </div>
      <div className="relative flex h-full items-end">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative flex h-3/4 w-8 items-end justify-center rounded-lg bg-sky-500">
          <div className="mb-6 -rotate-90 text-left text-nowrap">h-3/4</div>
        </div>
      </div>
      <div className="relative flex h-full items-end">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative flex h-1/2 w-8 items-end justify-center rounded-lg bg-sky-500">
          <div className="mb-6 -rotate-90 text-left text-nowrap">h-1/2</div>
        </div>
      </div>
      <div className="relative flex h-full items-end">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative flex h-1/3 w-8 items-end justify-center rounded-lg bg-sky-500">
          <div className="mb-6 -rotate-90 text-left text-nowrap">h-1/3</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:h-9/10,h-3/4,h-1/2,h-1/3,h-full] -->
<div class="h-full ...">h-full</div>
<div class="h-9/10 ...">h-9/10</div>
<div class="h-3/4 ...">h-3/4</div>
<div class="h-1/2 ...">h-1/2</div>
<div class="h-1/3 ...">h-1/3</div>
```

</Figure>

### Matching viewport

Use the `h-screen` utility to make an element span the entire height of the viewport:

```html
<!-- [!code classes:h-screen] -->
<div class="h-screen">
  <!-- ... -->
</div>
```

### Matching dynamic viewport

Use the `h-dvh` utility to make an element span the entire height of the viewport, which changes as the browser UI expands or contracts:

<Figure hint="Scroll the viewport to see the viewport height change">

<Example padding={false}>
  {<DynamicViewportExample unit="dvh" colorStyles="dark:bg-pink-500 bg-pink-500 border border-pink-400" />}
</Example>

```html
<!-- [!code classes:h-dvh] -->
<div class="h-dvh">
  <!-- ... -->
</div>
```

</Figure>

### Matching large viewport

Use the `h-lvh` utility to set an element's height to the largest possible height of the viewport:

<Figure hint="Scroll the viewport to see the viewport height change">

<Example padding={false}>
  {<DynamicViewportExample unit="lvh" colorStyles="dark:bg-indigo-500 bg-indigo-500 border border-indigo-400" />}
</Example>

```html
<!-- [!code classes:h-lvh] -->
<div class="h-lvh">
  <!-- ... -->
</div>
```

</Figure>

### Matching small viewport

Use the `h-svh` utility to set an element's height to the smallest possible height of the viewport:

<Figure hint="Scroll the viewport to see the viewport height change">

<Example padding={false}>
  {<DynamicViewportExample unit="svh" colorStyles="dark:bg-purple-500 bg-purple-500 border border-purple-400" />}
</Example>

```html
<!-- [!code classes:h-svh] -->
<div class="h-svh">
  <!-- ... -->
</div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid grid-flow-col justify-center gap-4 text-center font-mono text-xs font-bold text-white">
      <div className="grid size-16 items-center justify-center rounded-lg bg-indigo-500">size-16</div>
      <div className="grid size-20 items-center justify-center rounded-lg bg-indigo-500">size-20</div>
      <div className="grid size-24 items-center justify-center rounded-lg bg-indigo-500">size-24</div>
      <div className="hidden size-32 items-center justify-center rounded-lg bg-indigo-500 sm:grid">size-32</div>
      <div className="hidden size-40 items-center justify-center rounded-lg bg-indigo-500 md:grid">size-40</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:size-16,size-20,size-24,size-32,size-40] -->
<div class="size-16 ...">size-16</div>
<div class="size-20 ...">size-20</div>
<div class="size-24 ...">size-24</div>
<div class="size-32 ...">size-32</div>
<div class="size-40 ...">size-40</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="h" value="32rem" name="height" variable="height" />

### Responsive design

<ResponsiveDesign property="height" defaultClass="h-1/2" featuredClass="h-full" />

## Customizing your theme

<CustomizingYourSpacingScale utilities={["h", "size"]} />



---
File: /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:

<Figure hint="Hover over this button to see the background color change">

<Example>
  {
    <div className="grid place-items-center">
      <button className="rounded-full bg-sky-500 px-5 py-2 text-sm leading-5 font-semibold text-white hover:bg-sky-700">
        Save changes
      </button>
    </div>
  }
</Example>

```html
<!-- [!code classes:hover:bg-sky-700] -->
<button class="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>
```

</Figure>

<details className="mb-10 rounded-xl border border-gray-200 px-6 py-3 prose open:pb-5 dark:prose-dark dark:border-gray-800">
<summary className="font-medium cursor-default select-none text-gray-900 dark:text-gray-200">How does this compare to traditional CSS?</summary>

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

<TipBad>{<>Traditionally the same class name applies different styles on hover</>}</TipBad>

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

<TipGood>{<>In Tailwind, separate classes are used for the default state and the hover state</>}</TipGood>

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

</details>

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
<!-- [!code classes:dark:md:hover:bg-fuchsia-600] -->
<button class="dark:md:hover:bg-fuchsia-600 ...">Save changes</button>
```

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

## Pseudo-classes

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

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

<Figure hint="Try interacting with this button to see the hover, focus, and active states">

<Example>
  {
    <div className="grid place-items-center">
      <button
        type="button"
        className="rounded-full bg-violet-500 px-5 py-2 text-sm leading-5 font-semibold text-white hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700"
      >
        Save changes
      </button>
    </div>
  }
</Example>

```html
<!-- [!code classes:hover:bg-violet-600,focus:outline-2,focus:outline-offset-2,focus:outline-violet-500,active:bg-violet-700] -->
<!-- prettier-ignore -->
<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700 ...">
  Save changes
</button>
```

</Figure>

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:

<Figure>

<Example className="py-0">
  {
    <div className="px-4">
      <div className="mx-auto max-w-md border-x border-x-gray-200 dark:border-x-gray-800 dark:bg-gray-950/10">
        <ul role="list" className="divide-y divide-gray-200 p-6 dark:divide-gray-800">
          <li className="flex py-4 first:pt-0 last:pb-0">
            <img
              className="h-10 w-10 rounded-full"
              src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
              alt=""
            />
            <div className="ml-3 overflow-hidden">
              <p className="text-sm font-medium text-gray-900 dark:text-white">Kristen Ramos</p>
              <p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
            </div>
          </li>
          <li className="flex py-4 first:pt-0 last:pb-0">
            <img
              className="h-10 w-10 rounded-full"
              src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
              alt=""
            />
            <div className="ml-3 overflow-hidden">
              <p className="text-sm font-medium text-gray-900 dark:text-white">Floyd Miles</p>
              <p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
            </div>
          </li>
          <li className="flex py-4 first:pt-0 last:pb-0">
            <img
              className="h-10 w-10 rounded-full"
              src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
              alt=""
            />
            <div className="ml-3 overflow-hidden">
              <p className="text-sm font-medium text-gray-900 dark:text-white">Courtney Henry</p>
              <p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
            </div>
          </li>
          <li className="flex py-4 first:pt-0 last:pb-0">
            <img
              className="h-10 w-10 rounded-full"
              src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
              alt=""
            />
            <div className="ml-3 overflow-hidden">
              <p className="text-sm font-medium text-gray-900 dark:text-white">Ted Fox</p>
              <p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  }
</Example>

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

</Figure>

You can also style an element when it's an odd or even child using the `odd` and `even` variants:

<Figure>

<Example padding={false} className="py-8">
  {
    <div className="">
      <div className="border-y border-y-gray-200 bg-white dark:border-y-gray-800 dark:bg-gray-950">
        <div>
          <div className="inline-block min-w-full align-middle">
            <div className="overflow-hidden">
              <table className="min-w-full">
                <thead className="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white">
                      Name
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white">
                      Title
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white">
                      Email
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950">
                    <td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">
                      Jane Cooper
                    </td>
                    <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">
                      Regional Paradigm Technician
                    </td>
                    <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">
                      [email protected]
                    </td>
                  </tr>
                  <tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950">
                    <td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">
                      Cody Fisher
                    </td>
                    <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">
                      Product Directives Officer
                    </td>
                    <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">
                      [email protected]
                    </td>
                  </tr>
                  <tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950">
                    <td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">
                      Leonard Krasner
                    </td>
                    <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">
                      Senior Designer
                    </td>
                    <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">
                      [email protected]
                    </td>
                  </tr>
                  <tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950">
                    <td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">
                      Emily Selman
                    </td>
                    <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">
                      VP, Hardware Engineering
                    </td>
                    <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">
                      [email protected]
                    </td>
                  </tr>
                  <tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950">
                    <td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">
                      Anna Roberts
                    </td>
                    <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">
                      Chief Strategy Officer
                    </td>
                    <td className="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">
                      [email protected]
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

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

</Figure>

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

```html
<!-- [!code classes:nth-3:underline,nth-last-5:underline,nth-of-type-4:underline,nth-last-of-type-6:underline] -->
<div class="nth-3:underline">
  <!-- ... -->
</div>
<div class="nth-last-5:underline">
  <!-- ... -->
</div>
<div class="nth-of-type-4:underline">
  <!-- ... -->
</div>
<div class="nth-last-of-type-6:underline">
  <!-- ... -->
</div>
```

You can pass any number you want to these by default, and use arbitrary values for more complex expressions like `nth-[2n+1_of_li]`.

Tailwind also includes variants for other structural pseudo-classes like `:only-child`, `:first-of-type`, `:empty`, and more.

See the [pseudo-class reference](#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`:

<Figure hint="Try making the email address valid to see the styles change">

<Example className="py-0">
  {
    <div className="mx-auto max-w-md border-x border-x-gray-200 px-6 py-5 dark:border-x-gray-800 dark:bg-gray-950/10">
      <form>
        <div>
          <label htmlFor="username" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Username
          </label>
          <div className="mt-1">
            <input
              type="text"
              name="username"
              id="username"
              className="block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"
              defaultValue="tbone"
              disabled
            />
          </div>
        </div>
        <div className="mt-6">
          <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Email
          </label>
          <div className="mt-1">
            <input
              type="email"
              name="email"
              id="email-1"
              className="block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"
              defaultValue="george@krugerindustrial."
              placeholder="[email protected]"
            />
          </div>
        </div>
        <div className="mt-6">
          <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Password
          </label>
          <div className="mt-1">
            <input
              type="password"
              name="password"
              id="password"
              autoComplete="none"
              className="block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"
              defaultValue="Bosco"
            />
          </div>
        </div>
        <div className="mt-6 text-right">
          <button className="rounded-md bg-sky-500 px-5 py-2.5 text-sm leading-5 font-semibold text-white hover:bg-sky-700">
            Save changes
          </button>
        </div>
      </form>
    </div>
  }
</Example>

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

</Figure>

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:

<Figure>

<Example className="py-0">
  {
    <div className="mx-auto max-w-md border-x border-x-gray-200 px-4 py-6 text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-200">
      <fieldset>
        <legend className="text-base font-semibold text-gray-900 dark:text-white">Payment method</legend>
        <div className="mt-4 space-y-2">
          <label
            htmlFor="apple"
            className="grid grid-cols-[24px_1fr_auto] items-center gap-6 rounded-lg p-4 ring-1 ring-transparent hover:bg-gray-100 has-checked:bg-indigo-50 has-checked:text-indigo-800 has-checked:ring-indigo-200 dark:hover:bg-white/5 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900"
          >
            <svg className="w-8" fill="currentColor" viewBox="0 0 24 13">
              <path d="M3.96299 1.735C3.22833 1.73504 2.50814 1.9393 1.88285 2.32497C1.25756 2.71063 0.751781 3.26252 0.42199 3.919C0.144511 4.47115 0 5.08054 0 5.6985C0 6.31645 0.144511 6.92584 0.42199 7.478C0.751781 8.13447 1.25756 8.68636 1.88285 9.07202C2.50814 9.45769 3.22833 9.66195 3.96299 9.662C5.03299 9.662 5.93299 9.31 6.58999 8.705C7.33799 8.015 7.76999 6.995 7.76999 5.789C7.76976 5.51882 7.74634 5.24916 7.69999 4.983H3.96399V6.509H6.10399C6.06043 6.75276 5.96798 6.98519 5.83221 7.19228C5.69644 7.39937 5.52016 7.57684 5.31399 7.714C4.95799 7.955 4.49999 8.093 3.96399 8.093C2.92999 8.093 2.05299 7.396 1.73899 6.457C1.57315 5.96493 1.57315 5.43207 1.73899 4.94C2.05299 4 2.92999 3.304 3.96399 3.304C4.52899 3.29475 5.07496 3.50811 5.48399 3.898L6.61599 2.768C5.89873 2.09384 4.94728 1.72362 3.96299 1.735ZM10.464 2.285V9.185H11.35V6.39H12.815C13.418 6.39 13.925 6.194 14.337 5.802C14.5421 5.61815 14.705 5.39214 14.8146 5.13945C14.9242 4.88676 14.9779 4.61337 14.972 4.338C14.9762 4.06405 14.9216 3.79238 14.8121 3.54125C14.7026 3.29011 14.5406 3.06533 14.337 2.882C14.1354 2.68674 13.897 2.53337 13.6358 2.43073C13.3746 2.32809 13.0956 2.27822 12.815 2.284L10.464 2.285ZM12.891 3.135C13.0456 3.13769 13.1981 3.17139 13.3395 3.23408C13.4808 3.29678 13.6082 3.3872 13.714 3.5C13.8267 3.60959 13.9162 3.74065 13.9774 3.88544C14.0385 4.03024 14.07 4.18582 14.07 4.343C14.07 4.50017 14.0385 4.65576 13.9774 4.80055C13.9162 4.94534 13.8267 5.07641 13.714 5.186C13.6007 5.30328 13.4642 5.39562 13.3132 5.45709C13.1622 5.51857 13 5.54783 12.837 5.543H11.35V3.135H12.837C12.855 3.13458 12.873 3.13458 12.891 3.135ZM17.015 4.31C16.173 4.31 15.538 4.618 15.108 5.235L15.889 5.726C16.177 5.309 16.569 5.1 17.064 5.1C17.3798 5.09612 17.6855 5.21145 17.92 5.423C18.0354 5.51846 18.1282 5.63844 18.1915 5.77423C18.2548 5.91001 18.2871 6.05818 18.286 6.208V6.41C17.946 6.217 17.512 6.121 16.986 6.121C16.369 6.121 15.876 6.266 15.507 6.555C15.137 6.843 14.953 7.232 14.953 7.72C14.949 7.9396 14.994 8.15734 15.0848 8.35733C15.1757 8.55732 15.31 8.73451 15.478 8.876C15.828 9.184 16.263 9.339 16.783 9.339C17.393 9.339 17.881 9.069 18.248 8.529H18.286V9.184H19.134V6.275C19.134 5.665 18.944 5.185 18.566 4.835C18.186 4.485 17.67 4.31 17.015 4.31ZM19.278 4.464L21.224 8.886L20.126 11.266H21.041L24 4.463H23.035L21.667 7.854H21.647L20.241 4.464H19.278ZM17.132 6.832C17.626 6.832 18.012 6.942 18.288 7.162C18.288 7.534 18.141 7.858 17.848 8.135C17.5835 8.39951 17.225 8.54839 16.851 8.549C16.6011 8.55376 16.3573 8.47178 16.161 8.317C16.0697 8.25093 15.9954 8.16402 15.9445 8.06349C15.8935 7.96295 15.8673 7.85171 15.868 7.739C15.868 7.482 15.988 7.269 16.231 7.092C16.471 6.919 16.772 6.832 17.132 6.832Z" />
            </svg>
            Google Pay
            <input
              name="payment_method"
              id="apple"
              value="google"
              type="radio"
              className="box-content h-1.5 w-1.5 appearance-none rounded-full border-[5px] border-white bg-white bg-clip-padding ring-1 ring-gray-950/20 outline-none checked:border-indigo-500 checked:ring-indigo-500"
              defaultChecked
            />
          </label>
          <label
            htmlFor="google"
            className="grid grid-cols-[24px_1fr_auto] items-center gap-6 rounded-lg p-4 ring-1 ring-transparent hover:bg-gray-100 has-checked:bg-indigo-50 has-checked:text-indigo-800 has-checked:ring-indigo-200 dark:hover:bg-white/5 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900"
          >
            <svg className="mt-1 w-8 fill-current" fill="currentColor" viewBox="0 0 24 13">
              <path d="M4.38526 1.86704C4.10401 2.19606 3.65392 2.45565 3.20387 2.41854C3.14762 1.97367 3.36793 1.50091 3.62579 1.20892C3.90704 0.870635 4.39932 0.62962 4.79781 0.611084C4.84468 1.07453 4.66182 1.52871 4.38526 1.86704ZM4.79312 2.50663C4.14146 2.46956 3.5836 2.87272 3.27418 2.87272C2.96012 2.87272 2.48659 2.52517 1.97092 2.53443C1.30056 2.5437 0.677025 2.91906 0.33479 3.51694C-0.368428 4.71265 0.151978 6.48308 0.831712 7.45632C1.16457 7.9383 1.56306 8.46662 2.0881 8.44809C2.58507 8.42955 2.78195 8.12834 3.38204 8.12834C3.98677 8.12834 4.16026 8.44809 4.68531 8.43882C5.2291 8.42955 5.57134 7.95688 5.9042 7.47485C6.28388 6.92799 6.43862 6.39499 6.44799 6.36718C6.43862 6.35791 5.3979 5.96402 5.38853 4.77753C5.37915 3.78576 6.20893 3.31304 6.24643 3.28524C5.77759 2.59931 5.04629 2.52517 4.79312 2.50663ZM8.55765 1.16258V8.38789H9.69212V5.91768H11.2626C12.6971 5.91768 13.7051 4.94445 13.7051 3.53552C13.7051 2.12664 12.7159 1.16262 11.3001 1.16262H8.5576L8.55765 1.16258ZM9.69212 2.10806H11.0001C11.9846 2.10806 12.5471 2.62711 12.5471 3.54011C12.5471 4.4531 11.9846 4.97684 10.9954 4.97684H9.69212V2.10806ZM15.7772 8.44345C16.4898 8.44345 17.1508 8.08664 17.4508 7.52119H17.4743V8.38785H18.5244V4.79143C18.5244 3.74868 17.6806 3.07666 16.3819 3.07666C15.1771 3.07666 14.2864 3.75795 14.2536 4.69412H15.2756C15.36 4.24921 15.7771 3.95722 16.3491 3.95722C17.043 3.95722 17.4321 4.27701 17.4321 4.86562V5.26415L16.0163 5.34756C14.6989 5.42634 13.9864 5.95934 13.9864 6.88629C13.9864 7.82245 14.7224 8.44345 15.7772 8.44345ZM16.0819 7.58607C15.4772 7.58607 15.0927 7.29876 15.0927 6.85844C15.0927 6.4043 15.4631 6.14012 16.171 6.09841L17.4321 6.01963V6.42743C17.4321 7.10408 16.8508 7.58607 16.0819 7.58607H16.0819ZM19.9261 10.3529C21.0325 10.3529 21.5529 9.93584 22.0076 8.67057L24 3.14617H22.8467L21.5107 7.41456H21.4872L20.1511 3.14617H18.9651L20.8871 8.40638L20.784 8.72618C20.6106 9.2684 20.3293 9.47698 19.8277 9.47698C19.7386 9.47698 19.5652 9.46771 19.4948 9.45844V10.3251C19.5604 10.3436 19.8417 10.3529 19.9261 10.3529Z" />
            </svg>
            Apple Pay
            <input
              name="payment_method"
              id="google"
              value="apple"
              type="radio"
              className="box-content h-1.5 w-1.5 appearance-none rounded-full border-[5px] border-white bg-white bg-clip-padding ring-1 ring-gray-950/20 outline-none checked:border-indigo-500 checked:ring-indigo-500"
            />
          </label>
          <label
            htmlFor="credit-card"
            className="grid grid-cols-[24px_1fr_auto] items-center gap-6 rounded-lg p-4 ring-1 ring-transparent hover:bg-gray-100 has-checked:bg-indigo-50 has-checked:text-indigo-800 has-checked:ring-indigo-200 dark:hover:bg-white/5 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900"
          >
            <svg className="w-8" viewBox="0 0 24 13" fill="none">
              <rect stroke="currentColor" x="0.5" y="0.5" width="23" height="11" rx="1.5" />
              <path
                fill="currentColor"
                d="M16.539 3.18591C16.0742 3.01652 15.5828 2.93152 15.088 2.93491C13.488 2.93491 12.358 3.74091 12.35 4.89791C12.34 5.74791 13.153 6.22691 13.768 6.51091C14.399 6.80291 14.61 6.98691 14.608 7.24791C14.604 7.64491 14.104 7.82491 13.639 7.82491C13 7.82491 12.651 7.73591 12.114 7.51291L11.915 7.41991L11.688 8.75191C12.077 8.91391 12.778 9.05291 13.502 9.06491C15.203 9.06491 16.315 8.26391 16.328 7.03291C16.342 6.35391 15.902 5.84091 14.976 5.41691C14.413 5.14191 14.064 4.95791 14.064 4.67891C14.064 4.43191 14.363 4.16791 14.988 4.16791C15.404 4.15785 15.8174 4.23589 16.201 4.39691L16.351 4.46391L16.578 3.17691L16.539 3.18591ZM20.691 3.04291H19.441C19.052 3.04291 18.759 3.14991 18.589 3.53591L16.185 8.98191H17.886L18.226 8.08891L20.302 8.09091C20.351 8.29991 20.501 8.98191 20.501 8.98191H22.001L20.691 3.04291ZM10.049 2.99291H11.67L10.656 8.93491H9.03705L10.049 2.99091V2.99291ZM5.93405 6.26791L6.10205 7.09291L7.68605 3.04291H9.40305L6.85205 8.97391H5.13905L3.73905 3.95191C3.71637 3.8691 3.66312 3.79798 3.59005 3.75291C3.08545 3.49225 2.55079 3.29444 1.99805 3.16391L2.02005 3.03891H4.62905C4.98305 3.05291 5.26805 3.16391 5.36305 3.54191L5.93305 6.27091L5.93405 6.26791ZM18.691 6.87391L19.337 5.21191C19.329 5.22991 19.47 4.86891 19.552 4.64591L19.663 5.15891L20.038 6.87291H18.69L18.691 6.87391Z"
              />
            </svg>
            Credit Card
            <input
              name="payment_method"
              id="credit-card"
              value="credit-card"
              type="radio"
              className="box-content h-1.5 w-1.5 appearance-none rounded-full border-[5px] border-white bg-white bg-clip-padding ring-1 ring-gray-950/20 outline-none checked:border-indigo-500 checked:ring-indigo-500"
            />
          </label>
        </div>
      </fieldset>
    </div>
  }
</Example>

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

</Figure>

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:

<Figure>

<Example className="py-0">
  {
    <div className="mx-auto grid max-w-md divide-y divide-gray-100 border-x border-x-gray-200 text-gray-700 dark:divide-gray-800 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300">
      <div className="group grid grid-cols-[32px_1fr_auto] items-center gap-x-4 px-4 py-4 pt-6">
        <img
          className="size-[32px] rounded-full"
          src="https://spotlight.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Favatar.51a13c67.jpg&w=128&q=80"
          alt=""
        />
        {/* This is not an h4 because we're converting h4's to links in MDX files */}
        <div className="font-semibold text-gray-900 dark:text-white">Spencer Sharp</div>
        <svg
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth="1.5"
          stroke="currentColor"
          className="hidden size-4 group-has-[a]:block"
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
        </svg>
        <p className="col-start-2 text-sm">
          Product Designer at{" "}
          <a href="#" className="dark;text-blue-400 text-blue-500 underline">
            planeteria.tech
          </a>
        </p>
      </div>
      <div className="group grid grid-cols-[32px_1fr_auto] items-center gap-x-4 px-4 py-4">
        <img
          className="size-[32px] rounded-full"
          src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt=""
        />
        {/* This is not an h4 because we're converting h4's to links in MDX files */}
        <div className="font-semibold text-gray-900 dark:text-white">Casey Jordan</div>
        <svg
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth="1.5"
          stroke="currentColor"
          className="hidden size-4 group-has-[a]:block"
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
        </svg>
        <p className="col-start-2 text-sm">Just happy to be here.</p>
      </div>
      <div className="group grid grid-cols-[32px_1fr_auto] items-center gap-x-4 px-4 py-4">
        <img
          className="size-[32px] rounded-full"
          src="https://images.unsplash.com/photo-1590895340509-793cb98788c9?q=80&w=256&h=256&&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt=""
        />
        {/* This is not an h4 because we're converting h4's to links in MDX files */}
        <div className="font-semibold text-gray-900 dark:text-white">Alex Reed</div>
        <svg
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth="1.5"
          stroke="currentColor"
          className="hidden size-4 group-has-[a]:block"
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
        </svg>
        <p className="col-start-2 text-sm">
          A multidisciplinary designer, working at the intersection of art and technology. <br />
          <br />
          <a href="#" className="dark;text-blue-400 text-blue-500 underline">
            alex-reed.com
          </a>
        </p>
      </div>
      <div className="group grid grid-cols-[32px_1fr_auto] items-center gap-x-4 px-4 py-4 pb-6">
        <img
          className="size-[32px] rounded-full"
          src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt=""
        />
        {/* This is not an h4 because we're converting h4's to links in MDX files */}
        <div className="font-semibold text-gray-900 dark:text-white">Taylor Bailey</div>
        <svg
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth="1.5"
          stroke="currentColor"
          className="hidden size-4 group-has-[a]:block"
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
        </svg>
        <p className="col-start-2 text-sm">Pushing pixels. Slinging divs.</p>
      </div>
    </div>
  }
</Example>

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

</Figure>

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

<Figure>

<Example className="py-0">
  {
    <div className="mx-auto max-w-md border-x border-x-gray-200 px-4 py-6 dark:border-x-gray-800 dark:bg-gray-950/10">
      <fieldset className="space-y-3">
        <legend className="text-base font-semibold text-gray-900 dark:text-white">Today</legend>
        <div className="grid grid-cols-[1fr_24px] items-center gap-6">
          <label className="peer grid grid-cols-[auto_1fr] items-center gap-3 rounded-md px-2 hover:bg-gray-100 dark:hover:bg-white/5">
            <input
              type="checkbox"
              className="peer size-3.5 appearance-none rounded-sm border border-gray-300 accent-pink-500 checked:appearance-auto dark:border-gray-600 dark:accent-pink-600"
              defaultChecked
            />
            <span className="text-gray-700 select-none peer-checked:text-gray-400 peer-checked:line-through dark:text-gray-300">
              Create a to do list
            </span>
          </label>
          <div className="size-[26px] rounded-md p-1 peer-has-checked:hidden hover:bg-red-50 hover:text-pink-500">
            <svg fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </div>
        </div>
        <div className="grid grid-cols-[1fr_24px] items-center gap-6">
          <label className="peer grid grid-cols-[auto_1fr] items-center gap-3 rounded-md px-2 hover:bg-gray-100 dark:hover:bg-white/5">
            <input
              type="checkbox"
              className="peer size-3.5 appearance-none rounded-sm border border-gray-300 accent-pink-500 checked:appearance-auto dark:border-gray-600 dark:accent-pink-600"
            />
            <span className="text-gray-700 select-none peer-checked:text-gray-400 peer-checked:line-through dark:text-gray-300">
              Check off first item
            </span>
          </label>
          <div className="size-[26px] rounded-md p-1 peer-has-checked:hidden hover:bg-red-50 hover:text-pink-500">
            <svg fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </div>
        </div>
        <div className="grid grid-cols-[1fr_24px] items-center gap-6">
          <label className="peer grid grid-cols-[auto_1fr] items-center gap-3 rounded-md px-2 hover:bg-gray-100 dark:hover:bg-white/5">
            <input
              type="checkbox"
              className="peer size-3.5 appearance-none rounded-sm border border-gray-300 accent-pink-500 checked:appearance-auto dark:border-gray-600 dark:accent-pink-600"
            />
            <span className="text-gray-700 select-none peer-checked:text-gray-400 peer-checked:line-through dark:text-gray-300">
              Investigate race condition
            </span>
          </label>
          <div className="block size-[26px] rounded-md p-1 peer-has-checked:hidden hover:bg-red-50 hover:text-pink-500">
            <svg fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </div>
        </div>
      </fieldset>
    </div>
  }
</Example>

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

</Figure>

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

<Figure hint="Try focusing on the button and then hovering over it">

<Example>
  {
    <div className="grid place-items-center">
      <button
        type="button"
        className="rounded-full bg-indigo-600 px-5 py-2 text-sm leading-5 font-semibold text-white hover:not-focus:bg-indigo-700 focus:outline focus:outline-violet-300 active:bg-violet-700"
        tabIndex="0"
      >
        Save changes
      </button>
    </div>
  }
</Example>

```html
<!-- [!code classes:hover:not-focus:bg-indigo-700] -->
<button class="bg-indigo-600 hover:not-focus:bg-indigo-700">
  <!-- ... -->
</button>
```

</Figure>

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
<!-- [!code classes:not-supports-[display:grid]:flex] -->
<div class="not-supports-[display:grid]:flex">
  <!-- ... -->
</div>
```

### Styling based on parent state

When you need to style an element based on the state of some _parent_ element, mark the parent with the `group` class, and use `group-*` variants like `group-hover` to style the target element:

<Figure hint="Hover over the card to see both text elements change color">

<Example>
  {
    <a
      href="#"
      className="group mx-auto block max-w-xs space-y-3 rounded-lg bg-white p-4 shadow-lg ring-1 ring-gray-900/5 hover:bg-sky-500 hover:ring-sky-500 dark:bg-white/5 dark:ring-white/10"
    >
      <div className="flex items-center space-x-3">
        <svg className="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M11 19H6.931A1.922 1.922 0 015 17.087V8h12.069C18.135 8 19 8.857 19 9.913V11"
          />
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M14 7.64L13.042 6c-.36-.616-1.053-1-1.806-1H7.057C5.921 5 5 5.86 5 6.92V11M17 15v4M19 17h-4"
          />
        </svg>
        {/* This is not an h3 because we're converting h3's to links in MDX files */}
        <div className="text-sm font-semibold text-gray-900 group-hover:text-white dark:text-white">New project</div>
      </div>
      <p className="text-sm text-gray-500 group-hover:text-white dark:text-gray-400">
        Create a new project from a variety of starting templates.
      </p>
    </a>
  }
</Example>

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

</Figure>

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

<Figure>

<Example className="py-0">
  {
    <div className="px-4">
      <ul
        role="list"
        className="mx-auto max-w-md border-x border-x-gray-200 p-2 dark:border-x-gray-800 dark:bg-gray-950/10"
      >
        <li className="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5">
          <div className="flex gap-4">
            <div className="flex-shrink-0">
              <img
                className="h-12 w-12 rounded-full"
                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
              />
            </div>
            <div className="w-full text-sm leading-6">
              <a href="#" className="font-semibold text-gray-900 dark:text-white">
                <span className="absolute inset-0 rounded-xl" aria-hidden="true"></span>Leslie Abbott
              </a>
              <div className="text-gray-500">Co-Founder / CEO</div>
            </div>
          </div>
          <a
            href="#"
            className="group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400"
          >
            <span className="font-semibold transition group-hover/edit:text-gray-700">Call</span>
            <svg
              className="mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fillRule="evenodd"
                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                clipRule="evenodd"
              />
            </svg>
          </a>
        </li>
        <li className="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5">
          <div className="flex gap-4">
            <div className="flex-shrink-0">
              <img
                className="h-12 w-12 rounded-full"
                src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
              />
            </div>
            <div className="w-full text-sm leading-6">
              <a href="#" className="font-semibold text-gray-900 dark:text-white">
                <span className="absolute inset-0 rounded-xl" aria-hidden="true"></span>Hector Adams
              </a>
              <div className="text-gray-500">VP, Marketing</div>
            </div>
          </div>
          <a
            href="#"
            className="group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400"
          >
            <span className="font-semibold transition group-hover/edit:text-gray-700">Call</span>
            <svg
              className="mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fillRule="evenodd"
                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                clipRule="evenodd"
              />
            </svg>
          </a>
        </li>
        <li className="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5">
          <div className="flex gap-4">
            <div className="flex-shrink-0">
              <img
                className="h-12 w-12 rounded-full"
                src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
              />
            </div>
            <div className="w-full text-sm leading-6">
              <a href="#" className="font-semibold text-gray-900 dark:text-white">
                <span className="absolute inset-0 rounded-xl" aria-hidden="true"></span>Blake Alexander
              </a>
              <div className="text-gray-500">Account Coordinator</div>
            </div>
          </div>
          <a
            href="#"
            className="group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400"
          >
            <span className="font-semibold transition group-hover/edit:text-gray-700">Call</span>
            <svg
              className="mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fillRule="evenodd"
                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                clipRule="evenodd"
              />
            </svg>
          </a>
        </li>
      </ul>
    </div>
  }
</Example>

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

</Figure>

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:

<CodeExampleGroup
  filenames={["HTML", "Generated CSS"]}
>
  <CodeBlock
    example={html`
      <!-- [!code classes:group-[.is-published]:block] -->
      <div class="group is-published">
        <div class="hidden group-[.is-published]:block">
          Published
        </div>
      </div>
    `}
  />
  <CodeBlock
    example={css`
      .group-\[\.is-published\]\:block {
        &:is(:where(.group):is(.is-published) *) {
          display: block;
        }
      }
    `}
  />
</CodeExampleGroup>

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:

<CodeExampleGroup
  filenames={["HTML", "Generated CSS"]}
>
  <CodeBlock
    example={html`
      <!-- [!code classes:_&] -->
      <div class="group">
        <div class="group-[:nth-of-type(3)_&]:block">
          <!-- ... -->
        </div>
      </div>
    `}
  />
  <CodeBlock
    example={css`
      .group-\[\:nth-of-type\(3\)_\&\]\:block {
        &:is(:nth-of-type(3) :where(.group) *) {
          display: block;
        }
      }
    `}
  />
</CodeExampleGroup>

#### Implicit groups

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

{/* prettier-ignore */}
```html
<!-- [!code classes:in-focus:opacity-100] -->
<!-- [!code --:3] -->
<div tabindex="0" class="group">
  <div class="opacity-50 group-focus:opacity-100">
<!-- [!code ++:3] -->
<div tabindex="0">
  <div class="opacity-50 in-focus:opacity-100">
    <!-- ... -->
  </div>
</div>
```

The `in-*` variant responds to state changes in any parent, so if you want more fine-grained control you'll need to use `group` instead.

### Styling based on sibling state

When you need to style an element based on the state of a _sibling_ element, mark the sibling with the `peer` class, and use `peer-*` variants like `peer-invalid` to style the target element:

<Figure hint="Try making the email address valid to see the warning disappear">

<Example className="py-0">
  {
    <div className="mx-auto max-w-md border-x border-x-gray-200 px-6 pt-6 pb-5 dark:border-x-gray-800 dark:bg-gray-950/10">
      <form>
        <div>
          <label htmlFor="email-2" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Email
          </label>
          <div className="mt-1">
            <input
              type="email"
              name="email"
              id="email-2"
              className="peer block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm"
              defaultValue="george@krugerindustrial."
              placeholder="[email protected]"
            />
            <p className="invisible mt-2 text-sm text-pink-600 peer-invalid:visible">
              Please provide a valid email address.
            </p>
          </div>
        </div>
      </form>
    </div>
  }
</Example>

```html
<!-- [!code classes:peer-invalid:visible] -->
<!-- [!code classes:peer] -->
<form>
  <label class="block">
    <span class="...">Email</span>
    <input type="email" class="peer ..." />
    <p class="invisible peer-invalid:visible ...">Please provide a valid email address.</p>
  </label>
</form>
```

</Figure>

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:

<TipBad>{<>Won't work, only previous siblings can be marked as peers</>}</TipBad>

```html
<!-- [!code classes:peer-invalid:text-red-500] -->
<!-- [!code classes:peer] -->
<label>
  <span class="peer-invalid:text-red-500 ...">Email</span>
  <input type="email" class="peer ..." />
</label>
```

#### Differentiating peers

When using multiple peers, you can style something on the state of a _specific_ peer by giving that peer a unique name using a `peer/{name}` class, and including that name in variants using classes like `peer-checked/{name}`:

<Figure>

<Example className="py-0">
  {
    <div className="px-4">
      <fieldset className="mx-auto max-w-md border-x border-x-gray-200 p-8 text-sm text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-100">
        <div className="mb-6 border-b border-gray-200 pb-2 text-base font-semibold dark:border-gray-800">
          Published status
        </div>
        <input
          id="draft"
          className="peer/draft form-radio mr-2 mb-0.5 border-gray-300 text-sky-400 focus:ring-sky-400"
          type="radio"
          name="status"
          defaultChecked
        />
        <label className="font-medium peer-checked/draft:text-sky-500" htmlFor="draft">
          Draft
        </label>
        <input
          id="published"
          className="peer/published form-radio mr-2 mb-0.5 ml-4 border-gray-300 text-sky-400 focus:ring-sky-400"
          type="radio"
          name="status"
        />
        <label className="font-medium peer-checked/published:text-sky-500" htmlFor="published">
          Published
        </label>
        <div className="mt-4 hidden text-gray-500 peer-checked/draft:block dark:text-gray-400">
          Drafts are only visible to administrators.
        </div>
        <div className="mt-4 hidden text-gray-500 peer-checked/published:block dark:text-gray-400">
          Your post will be publicly visible on your site.
        </div>
      </fieldset>
    </div>
  }
</Example>

```html
<!-- [!code classes:peer-checked/draft:block] -->
<!-- [!code classes:peer-checked/draft:text-sky-500] -->
<!-- [!code classes:peer-checked/published:text-sky-500] -->
<!-- [!code classes:peer-checked/published:block] -->
<!-- [!code classes:peer/draft] -->
<!-- [!code classes:peer/published] -->
<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

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

</Figure>

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:

<CodeExampleGroup
  filenames={["HTML", "Generated CSS"]}
>
  <CodeBlock
    example={html`
      <!-- [!code classes:peer-[.is-dirty]] -->
      <form>
        <label for="email">Email:</label>
        <input id="email" name="email" type="email" class="is-dirty peer" required />
        <div class="peer-[.is-dirty]:peer-required:block hidden">This field is required.</div>
        <!-- ... -->
      </form>
    `}
  />
  <CodeBlock
    example={css`
      .peer-\[\.is-dirty\]\:peer-required\:block {
        &:is(:where(.peer):is(.is-dirty) ~ *) {
          &:is(:where(.peer):required ~ *) {
            display: block;
          }
        }
      }
    `}
  />
</CodeExampleGroup>

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:

<CodeExampleGroup
  filenames={["HTML", "Generated CSS"]}
>
  <CodeBlock
    filename="HTML"
    example={html`
      <!-- [!code classes:peer-[:nth-of-type(3)_&]:block] -->
      <div>
        <input type="text" class="peer" />
        <div class="hidden peer-[:nth-of-type(3)_&]:block">
          <!-- ... -->
        </div>
      </div>
    `}
  />
  <CodeBlock
    filename="Generated CSS"
    example={css`
      .peer-\[\:nth-of-type\(3\)_\&\]\:block {
        &:is(:nth-of-type(3) :where(.peer) ~ *) {
          display: block;
        }
      }
    `}
  />
</CodeExampleGroup>

## Pseudo-elements

### ::before and ::after

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

<Figure>

<Example className="py-0">
  {
    <div className="mx-auto max-w-sm border-x border-x-gray-200 px-6 pt-6 pb-5 dark:border-x-gray-800 dark:bg-gray-950/10">
      <form>
        <label className="block">
          <span className="block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] dark:text-white">
            Email
          </span>
          <input
            type="email"
            name="email"
            id="email-3"
            className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm"
            placeholder="[email protected]"
          />
        </label>
      </form>
    </div>
  }
</Example>

```html
<!-- [!code classes:after:content-['*']] -->
<!-- [!code classes:after:ml-0.5] -->
<!-- [!code classes:after:text-red-500] -->
<label>
  <span class="text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] ...">Email</span>
  <input type="email" name="email" class="..." placeholder="[email protected]" />
</label>
```

</Figure>

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:

<Figure>

<Example className="py-0">
  {
    <div className="px-6">
      <div className="mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 dark:border-x-gray-800 dark:bg-gray-950/10">
        <blockquote className="text-center text-2xl font-semibold text-gray-900 italic dark:text-white">
          When you look{" "}
          <span className="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500">
            <span className="relative text-white dark:text-gray-950">annoyed</span>
          </span>{" "}
          all the time, people think that you're busy.
        </blockquote>
      </div>
    </div>
  }
</Example>

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

</Figure>

It's worth noting that you don't really need `::before` and `::after` pseudo-elements for most things in Tailwind projects — it's usually simpler to just use a real HTML element.

For example, here's the same design from above but using a `<span>` instead of the `::before` pseudo-element, which is a little easier to read and is actually less code:

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

Save `before` and `after` for situations where it's important that the content of the pseudo-element is not actually in the DOM and can't be selected by the user.

### ::placeholder

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

<Figure>

<Example>
  {
    <div className="mx-auto max-w-sm">
      <form>
        <label className="relative block">
          <span className="absolute inset-y-0 left-0 flex items-center pl-2">
            <svg className="h-5 w-5 fill-gray-300" viewBox="0 0 20 20">
              <path
                fillRule="evenodd"
                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                clipRule="evenodd"
              />
            </svg>
          </span>
          <span className="sr-only">Search</span>
          <input
            type="text"
            name="search"
            className="block w-full rounded-md border border-gray-300 py-2 pr-3 pl-9 text-gray-700 shadow-sm placeholder:text-gray-400 placeholder:italic focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm dark:border-gray-600 dark:text-white"
            placeholder="Search for anything..."
          />
        </label>
      </form>
    </div>
  }
</Example>

```html
<!-- [!code classes:placeholder:italic,placeholder:text-gray-500] -->
<input
  class="placeholder:text-gray-500 placeholder:italic ..."
  placeholder="Search for anything..."
  type="text"
  name="search"
/>
```

</Figure>

### ::file

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

<Figure>

<Example className="py-0">
  {
    <div className="px-6">
      <div className="mx-auto max-w-sm border-x border-x-gray-200 px-6 py-8 dark:border-x-gray-800 dark:bg-gray-950/10">
        <form className="flex items-center space-x-6">
          <div className="shrink-0">
            <img
              className="h-16 w-16 rounded-full object-cover"
              src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80"
              alt="Current profile photo"
            />
          </div>
          <label className="block">
            <span className="sr-only">Choose profile photo</span>
            <input
              type="file"
              className="block w-full text-sm text-gray-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100 dark:file:bg-violet-600 dark:file:text-violet-100 dark:hover:file:bg-violet-500"
            />
          </label>
        </form>
      </div>
    </div>
  }
</Example>

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

</Figure>

### ::marker

Style the counters or bullets in lists using the `marker` variant:

<Figure>

<Example className="py-0">
  {
    <div className="px-6">
      <div className="mx-auto max-w-sm border-x border-x-gray-200 px-8 py-8 dark:border-x-gray-800 dark:bg-gray-950/10">
        <h2 className="text-base font-semibold text-gray-900 dark:text-gray-200">Ingredients</h2>
        <ul role="list" className="mt-3 list-disc space-y-3 pl-5 text-gray-500 marker:text-sky-400 dark:text-gray-400">
          <li>5 cups chopped Porcini mushrooms</li>
          <li>1/2 cup of olive oil</li>
          <li>3lb of celery</li>
        </ul>
      </div>
    </div>
  }
</Example>

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

</Figure>

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

### ::selection

Style the active text selection using the `selection` variant:

<Figure hint="Try selecting some of this text with your mouse">

<Example className="py-0">
  {
    <div className="px-6">
      <div className="mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 text-gray-700 selection:bg-fuchsia-300 selection:text-fuchsia-900 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300">
        <p>
          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:selection:bg-fuchsia-300] -->
<!-- [!code classes:selection:text-fuchsia-900] -->
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
  <p>
    So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my
    way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all
    living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
  </p>
</div>
```

</Figure>

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
<!-- [!code classes:selection:bg-pink-300] -->
<html>
  <head>
    <!-- ... -->
  </head>
  <body class="selection:bg-pink-300">
    <!-- ... -->
  </body>
</html>
```

### ::first-line and ::first-letter

Style the first line in a block of content using the `first-line` variant, and the first letter using the `first-letter` variant:

<Figure>

<Example className="py-0">
  {
    <div className="px-6">
      <div className="mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 font-serif text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-200">
        <p
          className="first-letter:float-left first-letter:mr-3 first-letter:text-7xl first-letter:leading-none first-letter:font-bold first-letter:text-gray-900 first-line:tracking-widest first-line:uppercase dark:first-letter:text-white"
          children={`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.`}
        />
        <p
          className="mt-6"
          children={`Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.`}
        />
      </div>
    </div>
  }
</Example>

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

</Figure>

### ::backdrop

Style the backdrop of a [native `<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) using the `backdrop` variant:

```html
<!-- [!code classes:backdrop:bg-gray-50] -->
<dialog class="backdrop:bg-gray-50">
  <form method="dialog">
    <!-- ... -->
  </form>
</dialog>
```

If you're using native `<dialog>` elements in your project, you may also want to read about [styling open/closed states](/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
<!-- [!code classes:md:grid-cols-4,lg:grid-cols-6] -->
<div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
  <!-- ... -->
</div>
```

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

```html
<!-- [!code classes:@container,@md:flex-row] -->
<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- ... -->
  </div>
</div>
```

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:

<Figure>

<Example padding={false} className="py-0">
  {
    <div className="grid grid-cols-1 sm:grid-cols-2">
      <div className="p-8 pt-7">
        <p className="mb-2 text-sm font-medium text-gray-500">Light mode</p>
        <div className="rounded-lg bg-white px-6 py-8 shadow-xl ring-1 ring-gray-900/5">
          <div>
            <span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
              <svg
                className="h-6 w-6 text-white"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                />
              </svg>
            </span>
          </div>
          {/* This is not an h3 because we're converting h3's to links in MDX files */}
          <div className="mt-5 text-base font-medium tracking-tight text-gray-900">Writes upside-down</div>
          <p className="mt-2 text-sm text-gray-500">
            The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer
            space.
          </p>
        </div>
      </div>
      <div className="border-l border-l-transparent bg-black/90 p-8 pt-7 dark:border-l-white/10 dark:bg-transparent">
        <p className="mb-2 text-sm font-medium text-gray-400">Dark mode</p>
        <div className="rounded-lg bg-gray-800 px-6 py-8 shadow-xl ring-1 ring-gray-900/5">
          <div>
            <span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
              <svg
                className="h-6 w-6 text-white"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                />
              </svg>
            </span>
          </div>
          {/* This is not an h3 because we're converting h3's to links in MDX files */}
          <div className="mt-5 text-base font-medium tracking-tight text-white">Writes upside-down</div>
          <p className="mt-2 text-sm text-gray-400">
            The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer
            space.
          </p>
        </div>
      </div>
    </div>
  }
</Example>

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

</Figure>

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:

<Figure hint="Try emulating &#96;prefers-reduced-motion: reduce&#96; in your developer tools to hide the spinner">

<Example>
  {
    <div className="flex items-center justify-center">
      <button
        type="button"
        className="inline-flex items-center rounded-md bg-indigo-500 px-4 py-2 text-sm leading-6 font-semibold text-white shadow"
        disabled
      >
        <svg
          className="mr-3 -ml-1 h-5 w-5 animate-spin text-white motion-reduce:hidden"
          fill="none"
          viewBox="0 0 24 24"
        >
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
          <path
            className="opacity-75"
            fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
          ></path>
        </svg>
        Processing...
      </button>
    </div>
  }
</Example>

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

</Figure>

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
<!-- [!code classes:motion-reduce:hover:translate-y-0] -->
<!-- [!code classes:motion-reduce:transition-none] -->
<!-- [!code classes:motion-safe:hover:-translate-x-0.5] -->
<!-- [!code classes:motion-safe:transition] -->
<!-- Using `motion-reduce` can mean lots of "undoing" styles -->
<button class="transition hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0 ...">
  Save changes
</button>

<!-- Using `motion-safe` is less code in these situations -->
<button class="motion-safe:transition motion-safe:hover:-translate-x-0.5 ...">Save changes</button>
```

### prefers-contrast

The `prefers-contrast` media query tells you if the user has requested more or less contrast.

Use the `contrast-more` variant to conditionally add styles when the user has requested more contrast:

<Figure hint="Try emulating &#96;prefers-contrast: more&#96; in your developer tools to see the changes">

<Example className="py-0">
  {
    <div className="mx-auto max-w-sm border-x border-x-gray-200 px-6 pt-6 pb-4 dark:border-x-gray-800 dark:bg-gray-950/10">
      <form>
        <div>
          <label htmlFor="contrast-example" className="block text-sm font-medium text-gray-700 dark:text-white">
            Social Security Number
          </label>
          <div className="mt-1">
            <input
              type="text"
              name="contrast-example"
              id="contrast-example"
              className="block w-full rounded-md border border-gray-200 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 contrast-more:border-gray-400 contrast-more:placeholder-gray-500 sm:text-sm dark:border-gray-900 dark:contrast-more:border-gray-700 dark:contrast-more:placeholder-gray-300"
              placeholder="000-00-0000"
            />
            <p className="mt-2 text-sm text-gray-600 opacity-10 contrast-more:opacity-100 dark:text-gray-400">
              We need this to steal your identity.
            </p>
          </div>
        </div>
      </form>
    </div>
  }
</Example>

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

</Figure>

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:

<Figure hint="Try emulating &#96;forced-colors: active&#96; in your developer tools to see the changes">

<Example className="py-0">
  {
    <div className="mx-auto max-w-sm border-x border-x-gray-200 px-6 pt-6 pb-4 text-gray-900 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-white">
      <form>
        <legend> Choose a theme: </legend>
        <div className="mt-4 grid grid-flow-col">
          <label htmlFor="theme-1" className="text-sm font-medium text-gray-700 dark:text-white">
            <div className="relative grid h-16 w-16 items-center justify-center rounded-xl border border-transparent bg-transparent text-white hover:bg-gray-50 has-checked:border-cyan-500 has-checked:bg-cyan-50 has-checked:text-cyan-50 dark:text-gray-800 dark:hover:bg-gray-800 dark:has-checked:bg-cyan-950 dark:has-checked:text-cyan-950 forced-colors:border-0">
              <input
                type="radio"
                name="themes"
                id="theme-1"
                className="appearance-none forced-colors:appearance-auto"
                defaultChecked
              />
              <p className="hidden forced-colors:block">Cyan</p>
              <div className="absolute top-3 left-3 h-6 w-6 rounded-full bg-cyan-200 forced-colors:hidden"></div>
              <div className="absolute right-3 bottom-3 h-6 w-6 rounded-full bg-cyan-500 ring-2 ring-current forced-colors:hidden"></div>
            </div>
          </label>
          <label htmlFor="theme-2" className="text-sm font-medium text-gray-700 dark:text-white">
            <div className="relative grid h-16 w-16 items-center justify-center rounded-xl border border-transparent bg-transparent text-white hover:bg-gray-50 has-checked:border-blue-500 has-checked:bg-blue-50 has-checked:text-blue-50 dark:text-gray-800 dark:hover:bg-gray-800 dark:has-checked:bg-blue-950 dark:has-checked:text-blue-950 forced-colors:border-0">
              <input
                type="radio"
                name="themes"
                id="theme-2"
                className="appearance-none forced-colors:appearance-auto"
              />
              <p className="hidden forced-colors:block">Blue</p>
              <div className="absolute top-3 left-3 h-6 w-6 rounded-full bg-blue-200 forced-colors:hidden"></div>
              <div className="absolute right-3 bottom-3 h-6 w-6 rounded-full bg-blue-500 ring-2 ring-current forced-colors:hidden"></div>
            </div>
          </label>
          <label htmlFor="theme-3" className="text-sm font-medium text-gray-700 dark:text-white">
            <div className="relative grid h-16 w-16 items-center justify-center rounded-xl border border-transparent bg-transparent text-white hover:bg-gray-50 has-checked:border-indigo-500 has-checked:bg-indigo-50 has-checked:text-indigo-50 dark:text-gray-800 dark:hover:bg-gray-800 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-950 forced-colors:border-0">
              <input
                type="radio"
                name="themes"
                id="theme-3"
                className="appearance-none forced-colors:appearance-auto"
              />
              <p className="hidden forced-colors:block">Indigo</p>
              <div className="absolute top-3 left-3 h-6 w-6 rounded-full bg-indigo-200 forced-colors:hidden"></div>
              <div className="absolute right-3 bottom-3 h-6 w-6 rounded-full bg-indigo-500 ring-2 ring-current forced-colors:hidden"></div>
            </div>
          </label>
          <label htmlFor="theme-4" className="text-sm font-medium text-gray-700 dark:text-white">
            <div className="relative grid h-16 w-16 items-center justify-center rounded-xl border border-transparent bg-transparent text-white hover:bg-gray-50 has-checked:border-purple-500 has-checked:bg-purple-50 has-checked:text-purple-50 dark:text-gray-800 dark:hover:bg-gray-800 dark:has-checked:bg-purple-950 dark:has-checked:text-purple-950 forced-colors:border-0">
              <input
                type="radio"
                name="themes"
                id="theme-4"
                className="appearance-none forced-colors:appearance-auto"
              />
              <p className="hidden forced-colors:block">Purple</p>
              <div className="absolute top-3 left-3 h-6 w-6 rounded-full bg-purple-200 forced-colors:hidden"></div>
              <div className="absolute right-3 bottom-3 h-6 w-6 rounded-full bg-purple-500 ring-2 ring-current forced-colors:hidden"></div>
            </div>
          </label>
        </div>
      </form>
    </div>
  }
</Example>

```html
<!-- [!code classes:forced-colors:appearance-auto] -->
<!-- [!code classes:forced-colors:block] -->
<!-- [!code classes:forced-colors:hidden] -->
<!-- [!code classes:forced-colors:hidden] -->
<label>
  <input type="radio" class="appearance-none forced-colors:appearance-auto" />
  <p class="hidden forced-colors:block">Cyan</p>
  <div class="bg-cyan-200 forced-colors:hidden ..."></div>
  <div class="bg-cyan-500 forced-colors:hidden ..."></div>
</label>
```

</Figure>

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

```html
<!-- [!code classes:not-forced-colors:appearance-none] -->
<div class="not-forced-colors:appearance-none ...">
  <!-- ... -->
</div>
```

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
<!-- [!code classes:inverted-colors:shadow-none] -->
<div class="shadow-xl inverted-colors:shadow-none ...">
  <!-- ... -->
</div>
```

### pointer and any-pointer

The `pointer` media query tells you whether the user has a primary pointing device, like a mouse, and the accuracy of that pointing device.

Use the `pointer-fine` variant to target an accurate pointing device, like a mouse or trackpad, or the `pointer-coarse` variant to target a less accurate pointing device, like a touchscreen, which can be useful for providing larger click targets on touch devices:

<Figure hint="Try emulating a touch device in your developer tools to see the changes">

<Example>
  {
    <fieldset aria-label="Choose a memory option" className="mx-auto max-w-md">
      <div className="flex items-center justify-between">
        <div className="text-sm/6 font-medium text-gray-900 dark:text-white">RAM</div>
        <a href="#" className="text-sm/6 font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400">
          See performance specs
        </a>
      </div>
      <div className="mt-4 grid grid-cols-6 gap-2 max-sm:grid-cols-3 pointer-coarse:mt-6 pointer-coarse:grid-cols-3 pointer-coarse:gap-4">
        <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4">
          <input type="radio" name="memory-option" value="4 GB" className="sr-only" />
          <span>4 GB</span>
        </label>
        <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4">
          <input type="radio" name="memory-option" value="8 GB" className="sr-only" defaultChecked />
          <span>8 GB</span>
        </label>
        <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4">
          <input type="radio" name="memory-option" value="16 GB" className="sr-only" />
          <span>16 GB</span>
        </label>
        <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4">
          <input type="radio" name="memory-option" value="32 GB" className="sr-only" />
          <span>32 GB</span>
        </label>
        <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4">
          <input type="radio" name="memory-option" value="64 GB" className="sr-only" />
          <span>64 GB</span>
        </label>
        <label className="flex items-center justify-center rounded-md bg-white p-2 text-sm font-semibold text-gray-900 uppercase ring-1 ring-gray-300 not-data-focus:not-has-checked:ring-inset hover:bg-gray-50 has-checked:bg-indigo-600 has-checked:text-white has-checked:ring-0 has-checked:hover:bg-indigo-500 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 data-focus:ring-2 data-focus:ring-indigo-600 data-focus:ring-offset-2 data-focus:has-checked:ring-2 sm:flex-1 dark:bg-transparent dark:text-white dark:ring-white/20 dark:hover:bg-gray-950/50 pointer-coarse:p-4">
          <input type="radio" name="memory-option" value="128 GB" className="sr-only" />
          <span>128 GB</span>
        </label>
      </div>
    </fieldset>
  }
</Example>

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

</Figure>

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
<!-- [!code classes:portrait:hidden,landscape:hidden] -->
<div>
  <div class="portrait:hidden">
    <!-- ... -->
  </div>
  <div class="landscape:hidden">
    <p>This experience is designed to be viewed in landscape. Please rotate your device to view the site.</p>
  </div>
</div>
```

### scripting

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

```html
<!-- [!code classes:noscript:block] -->
<div class="hidden noscript:block">
  <p>This experience requires JavaScript to function. Please enable JavaScript in your browser settings.</p>
</div>
```

### print

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

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

### @supports

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

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

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
<!-- [!code classes:supports-backdrop-filter:bg-black/25,supports-backdrop-filter:backdrop-blur] -->
<div class="bg-black/75 supports-backdrop-filter:bg-black/25 supports-backdrop-filter:backdrop-blur ...">
  <!-- ... -->
</div>
```

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

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

You can configure shortcuts for common `@supports` rules you're using in your project by creating a new variant in the `supports-*` namespace:

```css
@custom-variant supports-grid {
  @supports (display: grid) {
    @slot;
  }
}
```

You can then use these custom `supports-*` variants in your project:

```html
<!-- [!code classes:supports-grid:grid] -->
<div class="supports-grid:grid">
  <!-- ... -->
</div>
```

### @starting-style

Use the `starting` variant to set the appearance of an element when it is first rendered in the DOM, or transitions from `display: none` to visible:

<Figure>

<Example className="flex py-0">
  {
    <Iframe className="h-[340px] w-full">
      <div className="grid h-full items-center justify-center">
        <button
          popoverTarget="my-popover"
          className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
        >
          Check for updates
        </button>
        <div
          popover="auto"
          id="my-popover"
          className="relative inset-y-0 mx-auto my-auto transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left opacity-0 shadow-xl transition-all [transition-behavior:allow-discrete] duration-500 sm:w-full sm:max-w-96 sm:p-6 dark:bg-gray-800 [&:is([open],:popover-open)]:opacity-100 [@starting-style]:[&:is([open],:popover-open)]:opacity-0"
        >
          <div>
            <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-indigo-50 dark:bg-indigo-600/10">
              <svg
                className="size-5 text-indigo-400 dark:text-indigo-600"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fillRule="evenodd"
                  d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <div className="mt-3 text-center sm:mt-5">
              <h3 className="text-base font-semibold text-gray-900 dark:text-white" id="modal-title">
                Update available
              </h3>
              <div className="mt-2">
                <p className="text-sm text-gray-500 dark:text-gray-200">
                  A new software update is available: <span className="font-semibold">v2.0.4.</span>
                  <br />
                  Click the button below to install it.
                </p>
              </div>
            </div>
          </div>
          <div className="mt-5">
            <button
              type="button"
              className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
            >
              Install
            </button>
          </div>
        </div>
      </div>
    </Iframe>
  }
</Example>

```html
<!-- [!code classes:starting:open:opacity-0] -->
<div>
  <button popovertarget="my-popover">Check for updates</button>
  <div popover id="my-popover" class="opacity-0 starting:open:opacity-0 ...">
    <!-- ... -->
  </div>
</div>
```

</Figure>

## 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
<!-- [!code classes:aria-checked:bg-sky-700] -->
<div aria-checked="true" class="bg-gray-600 aria-checked:bg-sky-700">
  <!-- ... -->
</div>
```

By default we've included variants for the most common boolean ARIA attributes:

{

<table>
  <thead>
    <tr>
      <th>Variant</th>
      <th>CSS</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <code className="before:content-none after:content-none">aria-busy</code>
      </td>
      <td>
        <code className="whitespace-nowrap before:content-none after:content-none">
          <span className="text-gray-400">&</span>[aria-busy="true"]
        </code>
      </td>
    </tr>
    <tr>
      <td>
        <code className="before:content-none after:content-none">aria-checked</code>
      </td>
      <td>
        <code className="whitespace-nowrap before:content-none after:content-none">
          <span className="text-gray-400">&</span>[aria-checked="true"]
        </code>
      </td>
    </tr>
    <tr>
      <td>
        <code className="before:content-none after:content-none">aria-disabled</code>
      </td>
      <td>
        <code className="whitespace-nowrap before:content-none after:content-none">
          <span className="text-gray-400">&</span>[aria-disabled="true"]
        </code>
      </td>
    </tr>
    <tr>
      <td>
        <code className="before:content-none after:content-none">aria-expanded</code>
      </td>
      <td>
        <code className="whitespace-nowrap before:content-none after:content-none">
          <span className="text-gray-400">&</span>[aria-expanded="true"]
        </code>
      </td>
    </tr>
    <tr>
      <td>
        <code className="before:content-none after:content-none">aria-hidden</code>
      </td>
      <td>
        <code className="whitespace-nowrap before:content-none after:content-none">
          <span className="text-gray-400">&</span>[aria-hidden="true"]
        </code>
      </td>
    </tr>
    <tr>
      <td>
        <code className="before:content-none after:content-none">aria-pressed</code>
      </td>
      <td>
        <code className="whitespace-nowrap before:content-none after:content-none">
          <span className="text-gray-400">&</span>[aria-pressed="true"]
        </code>
      </td>
    </tr>
    <tr>
      <td>
        <code className="before:content-none after:content-none">aria-readonly</code>
      </td>
      <td>
        <code className="whitespace-nowrap before:content-none after:content-none">
          <span className="text-gray-400">&</span>[aria-readonly="true"]
        </code>
      </td>
    </tr>
    <tr>
      <td>
        <code className="before:content-none after:content-none">aria-required</code>
      </td>
      <td>
        <code className="whitespace-nowrap before:content-none after:content-none">
          <span className="text-gray-400">&</span>[aria-required="true"]
        </code>
      </td>
    </tr>
    <tr>
      <td>
        <code className="before:content-none after:content-none">aria-selected</code>
      </td>
      <td>
        <code className="whitespace-nowrap before:content-none after:content-none">
          <span className="text-gray-400">&</span>[aria-selected="true"]
        </code>
      </td>
    </tr>
  </tbody>
</table>

}

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:

<Figure>

<Example padding={false} className="py-0">
  {
    <div className="py-8">
      <table className="w-full border-collapse border-y border-gray-400 bg-white text-sm dark:border-white/10 dark:bg-transparent">
        <thead className="bg-gray-50 dark:bg-white/5">
          <tr>
            <th
              className="group border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-200"
              aria-sort="ascending"
            >
              <span className="flex w-full items-center justify-between gap-2">
                Invoice #
                <svg
                  viewBox="0 0 20 20"
                  className="h-5 w-5 fill-gray-500 group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"
                >
                  <path
                    fillRule="evenodd"
                    d="M10 5a.75.75 0 01.75.75v6.638l1.96-2.158a.75.75 0 111.08 1.04l-3.25 3.5a.75.75 0 01-1.08 0l-3.25-3.5a.75.75 0 111.08-1.04l1.96 2.158V5.75A.75.75 0 0110 5z"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
            </th>
            <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-200">
              Client
            </th>
            <th className="border border-gray-300 px-4 py-3 text-right font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-200">
              Amount
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400">
              #100
            </td>
            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400">
              Pendant Publishing
            </td>
            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400">
              $2,000.00
            </td>
          </tr>
          <tr>
            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400">
              #101
            </td>
            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400">
              Kruger Industrial Smoothing
            </td>
            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400">
              $545.00
            </td>
          </tr>
          <tr>
            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400">
              #102
            </td>
            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400">
              J. Peterman
            </td>
            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-white/10 dark:text-gray-400">
              $10,000.25
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  }
</Example>

  <CodeExampleGroup
    filenames={["HTML", "Generated CSS"]}
  >
    <CodeBlock
      example={html`
        <!-- [!code classes:aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')],aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]] -->
        <table>
          <thead>
            <tr>
              <th
                aria-sort="ascending"
                class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]"
              >
                Invoice #
              </th>
              <!-- ... -->
            </tr>
          </thead>
          <!-- ... -->
        </table>
      `}
    />
    <CodeBlock
      example={css`
        .aria-\[sort\=ascending\]\:bg-\[url\(\'\/img\/down-arrow\.svg\'\)\] {
          &[aria-sort="ascending"] {
            background-image: url('/img/down-arrow.svg');
          }
        }
        .aria-\[sort\=descending\]\:bg-\[url\(\'\/img\/up-arrow\.svg\'\)\] {
          &[aria-sort="descending"] {
            background-image: url('/img/up-arrow.svg');
          }
        }
      `}
    />

  </CodeExampleGroup>
</Figure>

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

<CodeExampleGroup
  filenames={["HTML", "Generated CSS"]}
>
  <CodeBlock
    example={html`
      <!-- [!code classes:group-aria-[sort=ascending]:rotate-0,group-aria-[sort=descending]:rotate-180] -->
      <table>
        <thead>
          <tr>
          <th aria-sort="ascending" class="group">
            Invoice #
            <svg class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"><!-- ... --></svg>
          </th>
          <!-- ... -->
          </tr>
        </thead>
        <!-- ... -->
      </table>
    `}
  />
  <CodeBlock
    example={css`
      .group-aria-\[sort\=ascending\]\:rotate-0 {
        &:is(:where(.group)[aria-sort="ascending"] *) {
          rotate: 0deg;
        }
      }
      .group-aria-\[sort\=descending\]\:rotate-180 {
        &:is(:where(.group)[aria-sort="descending"] *) {
          rotate: 180deg;
        }
      }
    `}

/>

</CodeExampleGroup>

### 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
<!-- Will apply -->
<!-- [!code classes:data-active:border-purple-500] -->
<div data-active class="border border-gray-300 data-active:border-purple-500">
  <!-- ... -->
</div>

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

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

```html
<!-- Will apply -->
<!-- [!code classes:data-[size=large]:p-8] -->
<div data-size="large" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

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

Alternatively, you can configure shortcuts for common data attributes you're using in your project by creating a new variant in the `data-*` namespace:

```css
<!-- [!code filename:app.css] -->
@import "tailwindcss";

@custom-variant data-checked (&[data-ui~="checked"]);
```

You can then use these custom `data-*` variants in your project:

```html
<!-- [!code classes:data-checked:underline] -->
<div data-ui="checked active" class="data-checked:underline">
  <!-- ... -->
</div>
```

### RTL support

Use the `rtl` and `ltr` variants to conditionally add styles in right-to-left and left-to-right modes respectively when building multi-directional layouts:

<Figure>

<Example>
  {
    <div className="mx-auto grid max-w-lg grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2">
      <div dir="ltr">
        <p className="mb-4 text-sm font-medium">Left-to-right</p>
        <div className="group flex items-center">
          <img
            className="h-12 w-12 shrink-0 rounded-full"
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            alt=""
          />
          <div className="ml-3 rtl:mr-3 rtl:ml-0">
            <p className="text-sm font-medium text-gray-700 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-white">
              Tom Cook
            </p>
            <p className="text-sm font-medium text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300">
              Director of Operations
            </p>
          </div>
        </div>
      </div>
      <div dir="rtl">
        <p className="mb-4 text-sm font-medium">Right-to-left</p>
        <div className="group flex items-center">
          <img
            className="h-12 w-12 shrink-0 rounded-full"
            src="https://images.unsplash.com/photo-1563833717765-00462801314e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            alt=""
          />
          <div className="ml-3 rtl:mr-3 rtl:ml-0">
            <p className="text-sm font-medium text-gray-700 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-white">
              تامر كرم
            </p>
            <p className="text-sm font-medium text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300">
              الرئيس التنفيذي
            </p>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

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

</Figure>

Remember, these variants are only useful if you are building a site that needs to support _both_ left-to-right and right-to-left layouts. If you're building a site that only needs to support a single direction, you don't need these variants — just apply the styles that make sense for your content.

### Open/closed state

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

<Figure hint="Try toggling the disclosure to see the styles change">

<Example>
  {
    <div className="mx-auto max-w-lg">
      <details
        className="rounded-lg border border-transparent p-6 open:border-black/10 open:bg-gray-100 dark:open:border-gray-700/50 dark:open:bg-gray-950/50"
        open
      >
        <summary className="text-sm leading-6 font-semibold text-gray-900 select-none dark:text-white">
          Why do they call it Ovaltine?
        </summary>
        <div className="mt-3 text-sm leading-6 text-gray-600 dark:text-gray-400">
          <p>The mug is round. The jar is round. They should call it Roundtine.</p>
        </div>
      </details>
    </div>
  }
</Example>

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

</Figure>

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

```html
<!-- [!code classes:open:opacity-100] -->
<div>
  <button popovertarget="my-popover">Open Popover</button>
  <div popover id="my-popover" class="opacity-0 open:opacity-100 ...">
    <!-- ... -->
  </div>
</div>
```

### Styling inert elements

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

<Figure>

<Example padding={false}>
  {
    <form className="mx-auto max-w-md space-y-6 border-x border-x-gray-200 p-8 dark:border-x-gray-800">
      <legend>Notification preferences</legend>
      <fieldset name="resale" defaultValue="permit">
        <div className="flex items-center gap-x-3">
          <input
            readOnly
            id="push-everything"
            name="push-notifications"
            type="radio"
            className="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 dark:border-gray-700 dark:bg-gray-950 forced-colors:appearance-auto forced-colors:before:hidden"
          />
          <label htmlFor="push-everything" className="block text-sm/6 font-medium text-gray-900 dark:text-white">
            Custom
          </label>
        </div>
        <fieldset className="mt-6 space-y-6 pl-8 inert:opacity-25" inert>
          <div className="flex gap-3">
            <div className="flex h-6 shrink-0 items-center">
              <div className="group grid size-4 grid-cols-1">
                <input
                  defaultChecked
                  id="comments"
                  name="comments"
                  type="checkbox"
                  aria-describedby="comments-description"
                  className="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 dark:border-gray-700 dark:bg-gray-950 forced-colors:appearance-auto"
                />
                <svg
                  fill="none"
                  viewBox="0 0 14 14"
                  className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
                >
                  <path
                    d="M3 8L6 11L11 3.5"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="opacity-0 group-has-checked:opacity-100"
                  />
                  <path
                    d="M3 7H11"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="opacity-0 group-has-indeterminate:opacity-100"
                  />
                </svg>
              </div>
            </div>
            <div className="text-sm/6">
              <label htmlFor="comments" className="font-medium text-gray-900 dark:text-white">
                Comments
              </label>
              <p id="comments-description" className="text-gray-500 dark:text-gray-400">
                Get notified when someones posts a comment on a post.
              </p>
            </div>
          </div>
          <div className="flex gap-3">
            <div className="flex h-6 shrink-0 items-center">
              <div className="group grid size-4 grid-cols-1">
                <input
                  defaultChecked
                  id="comments"
                  name="comments"
                  type="checkbox"
                  aria-describedby="comments-description"
                  className="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 dark:border-gray-700 dark:bg-gray-950 forced-colors:appearance-auto"
                />
                <svg
                  fill="none"
                  viewBox="0 0 14 14"
                  className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
                >
                  <path
                    d="M3 8L6 11L11 3.5"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="opacity-0 group-has-checked:opacity-100"
                  />
                  <path
                    d="M3 7H11"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="opacity-0 group-has-indeterminate:opacity-100"
                  />
                </svg>
              </div>
            </div>
            <div className="text-sm/6">
              <label htmlFor="comments" className="font-medium text-gray-900 dark:text-white">
                Mentions
              </label>
              <p id="comments-description" className="text-gray-500 dark:text-gray-400">
                Get notified when someones mentions you.
              </p>
            </div>
          </div>
        </fieldset>
        <div className="mt-6 flex items-center gap-x-3">
          <input
            readOnly
            checked
            id="push-everything"
            name="push-notifications"
            type="radio"
            className="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 dark:border-gray-700 dark:bg-gray-950 forced-colors:appearance-auto forced-colors:before:hidden"
          />
          <label htmlFor="push-everything" className="block text-sm/6 font-medium text-gray-900 dark:text-white">
            Everything
          </label>
        </div>
      </fieldset>
    </form>
  }
</Example>

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

</Figure>

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:

<Figure>

<Example className="py-0">
  {
    <div className="mx-auto max-w-md border-x border-x-gray-200 p-6 dark:border-x-gray-800 dark:bg-gray-950/10">
      <h2 className="text-base font-semibold text-gray-900 dark:text-gray-200">Categories</h2>
      <div className="flex flex-wrap gap-2 pt-4 text-sm text-sky-600 *:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10">
        <div>Sales</div>
        <div>Marketing</div>
        <div>SEO</div>
        <div>Analytics</div>
        <div>Design</div>
        <div>Strategy</div>
        <div>Security</div>
        <div>Growth</div>
        <div>Mobile</div>
        <div>UX/UI</div>
      </div>
    </div>
  }
</Example>

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

</Figure>

It's important to note that overriding a style with a utility directly on the child itself won't work due to the specificity of the generated child selector:

<TipBad>{<>Won't work, children can't override their own styling.</>}</TipBad>

```html
<!-- [!code classes:*:bg-sky-50] -->
<!-- [!code classes:bg-red-50] -->
<ul class="*:bg-sky-50 ...">
  <li class="bg-red-50 ...">Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
  <!-- ... -->
</ul>
```

### Styling all descendants

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

<Figure>

<Example padding={false}>
  {
    <div className="px-4">
      <ul
        role="list"
        className="mx-auto max-w-md border-x border-x-gray-200 p-2 **:data-avatar:size-12 **:data-avatar:rounded-full dark:border-x-gray-800 dark:bg-gray-950/10"
      >
        <li className="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5">
          <div className="flex gap-4">
            <div className="flex-shrink-0">
              <img
                data-avatar
                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
              />
            </div>
            <div className="w-full text-sm leading-6">
              <a href="#" className="font-semibold text-gray-900 dark:text-white">
                <span className="absolute inset-0 rounded-xl" aria-hidden="true"></span>Leslie Abbott
              </a>
              <div className="text-gray-500">Co-Founder / CEO</div>
            </div>
          </div>
        </li>
        <li className="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5">
          <div className="flex gap-4">
            <div className="flex-shrink-0">
              <img
                data-avatar
                src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
              />
            </div>
            <div className="w-full text-sm leading-6">
              <a href="#" className="font-semibold text-gray-900 dark:text-white">
                <span className="absolute inset-0 rounded-xl" aria-hidden="true"></span>Hector Adams
              </a>
              <div className="text-gray-500">VP, Marketing</div>
            </div>
          </div>
        </li>
        <li className="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5">
          <div className="flex gap-4">
            <div className="flex-shrink-0">
              <img
                data-avatar
                src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
              />
            </div>
            <div className="w-full text-sm leading-6">
              <a href="#" className="font-semibold text-gray-900 dark:text-white">
                <span className="absolute inset-0 rounded-xl" aria-hidden="true"></span>Blake Alexander
              </a>
              <div className="text-gray-500">Account Coordinator</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  }
</Example>

```svelte
<!-- [!code classes:**:data-avatar:rounded-full,**:data-avatar:size-12] -->
<ul class="**:data-avatar:size-12 **:data-avatar:rounded-full ...">
  {#each items as item}
    <li>
      <img src={item.src} data-avatar />
      <p>{item.name}</p>
    </li>
  {/each}
</ul>
```

</Figure>

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

<CodeExampleGroup
  filenames={["HTML", "Generated CSS"]}
>
  <CodeBlock
    example={svelte`
      <!-- [!code classes:[&.is-dragging]:cursor-grabbing] -->
      <ul role="list">
        {#each items as item}
          <li class="[&.is-dragging]:cursor-grabbing">{item}</li>
        {/each}
      </ul>
    `}

/>

  <CodeBlock
    example={css`
      .\[\&\.is-dragging\]\:cursor-grabbing {
        &.is-dragging {
          cursor: grabbing;
        }
      }
    `}
  />
</CodeExampleGroup>

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

<CodeExampleGroup
  filenames={["HTML", "Generated CSS"]}
>
  <CodeBlock
    example={svelte`
      <!-- [!code classes:[&.is-dragging]:active:cursor-grabbing] -->
      <ul role="list">
        {#each items as item}
          <li class="[&.is-dragging]:active:cursor-grabbing">{item}</li>
        {/each}
      </ul>
    `}
  />
  <CodeBlock
    example={css`
      .\[\&\.is-dragging\]\:active\:cursor-grabbing {
        &.is-dragging {
          &:active {
            cursor: grabbing;
          }
        }
      }
    `}
  />
</CodeExampleGroup>

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:

<CodeExampleGroup
  filenames={["HTML", "Generated CSS"]}
>
  <CodeBlock
    example={html`
      <!-- [!code classes:[&_p]:mt-4] -->
      <div class="[&_p]:mt-4">
        <p>Lorem ipsum...</p>
        <ul>
          <li>
            <p>Lorem ipsum...</p>
          </li>
          <!-- ... -->
        </ul>
      </div>
    `}
  />
  <CodeBlock
    example={css`
      .\[\&_p\]\:mt-4 {
        & p {
          margin-top: calc(var(--spacing) * 4);
        }
      }
    `}
  />
</CodeExampleGroup>

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

<CodeExampleGroup
  filenames={["HTML", "Generated CSS"]}
>
  <CodeBlock
    example={html`
      <!-- [!code classes:[@supports(display:grid)]:grid] -->
      <div class="flex [@supports(display:grid)]:grid">
        <!-- ... -->
      </div>
    `}
  />
  <CodeBlock
    example={css`
      .\[\@supports\(display\:grid\)\]\:grid {
        @supports (display:grid) {
          display: grid;
        }
      }
    `}
  />
</CodeExampleGroup>

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:<utility>` variant in your HTML:

```html
<!-- [!code classes:theme-midnight:bg-black] -->
<html data-theme="midnight">
  <button class="theme-midnight:bg-black ..."></button>
</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.

{

<div className="max-w-screen overflow-scroll">
  <table>
    <thead>
      <tr>
        <th>Variant</th>
        <th>CSS</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <a href="#hover" className="whitespace-nowrap">
            hover
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (hover: hover) {"{ "} <span className="text-gray-400">&</span>:hover {" }"}
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#focus" className="whitespace-nowrap">
            focus
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:focus
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#focus-within" className="whitespace-nowrap">
            focus-within
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:focus-within
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#focus-visible" className="whitespace-nowrap">
            focus-visible
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:focus-visible
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#active" className="whitespace-nowrap">
            active
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:active
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#visited" className="whitespace-nowrap">
            visited
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:visited
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#target" className="whitespace-nowrap">
            target
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:target
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#styling-direct-children" className="whitespace-nowrap">
            *
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            :is(<span className="text-gray-400">&</span> {" > *"})
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#styling-all-descendants" className="whitespace-nowrap">
            **
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            :is(<span className="text-gray-400">&</span> {" *"})
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#has" className="whitespace-nowrap">
            has-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:has(<span className="text-gray-400">...</span>)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#styling-based-on-parent-state" className="whitespace-nowrap">
            group-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:is(:where(.group)<span className="text-gray-400">...</span> *)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#styling-based-on-sibling-state" className="whitespace-nowrap">
            peer-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:is(:where(.peer)<span className="text-gray-400">...</span> ~ *)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#implicit-groups" className="whitespace-nowrap">
            in-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            :where(<span className="text-gray-400">...</span>) <span className="text-gray-400">&</span>
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#not" className="whitespace-nowrap">
            not-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:not(<span className="text-gray-400">...</span>)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#styling-inert-elements" className="whitespace-nowrap">
            inert
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:is([inert], [inert] *)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#first" className="whitespace-nowrap">
            first
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:first-child
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#last" className="whitespace-nowrap">
            last
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:last-child
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#only" className="whitespace-nowrap">
            only
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:only-child
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#odd" className="whitespace-nowrap">
            odd
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:nth-child(odd)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#even" className="whitespace-nowrap">
            even
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:nth-child(even)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#first-of-type" className="whitespace-nowrap">
            first-of-type
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:first-of-type
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#last-of-type" className="whitespace-nowrap">
            last-of-type
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:last-of-type
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#only-of-type" className="whitespace-nowrap">
            only-of-type
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:only-of-type
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#nth" className="whitespace-nowrap">
            nth-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:nth-child(<span className="text-gray-400">...</span>)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#nth-last" className="whitespace-nowrap">
            nth-last-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:nth-last-child(<span className="text-gray-400">...</span>)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#nth-of-type" className="whitespace-nowrap">
            nth-of-type-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:nth-of-type(<span className="text-gray-400">...</span>)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#nth-last-of-type" className="whitespace-nowrap">
            nth-last-of-type-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:nth-last-of-type(<span className="text-gray-400">...</span>)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#empty" className="whitespace-nowrap">
            empty
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:empty
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#disabled" className="whitespace-nowrap">
            disabled
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:disabled
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#enabled" className="whitespace-nowrap">
            enabled
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:enabled
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#checked" className="whitespace-nowrap">
            checked
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:checked
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#indeterminate" className="whitespace-nowrap">
            indeterminate
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:indeterminate
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#default" className="whitespace-nowrap">
            default
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:default
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#optional" className="whitespace-nowrap">
            optional
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:optional
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#required" className="whitespace-nowrap">
            required
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:required
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#valid" className="whitespace-nowrap">
            valid
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:valid
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#invalid" className="whitespace-nowrap">
            invalid
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:invalid
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#user-valid" className="whitespace-nowrap">
            user-valid
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:user-valid
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#user-invalid" className="whitespace-nowrap">
            user-invalid
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:user-invalid
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#in-range" className="whitespace-nowrap">
            in-range
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:in-range
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#out-of-range" className="whitespace-nowrap">
            out-of-range
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:out-of-range
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#placeholder-shown" className="whitespace-nowrap">
            placeholder-shown
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:placeholder-shown
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#placeholder-shown" className="whitespace-nowrap">
            details-content
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:details-content
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#autofill" className="whitespace-nowrap">
            autofill
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:autofill
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#read-only" className="whitespace-nowrap">
            read-only
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:read-only
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#before-and-after" className="whitespace-nowrap">
            before
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>::before
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#before-and-after" className="whitespace-nowrap">
            after
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>::after
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#first-line-and-first-letter" className="whitespace-nowrap">
            first-letter
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>::first-letter
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#first-line-and-first-letter" className="whitespace-nowrap">
            first-line
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>::first-line
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#marker" className="whitespace-nowrap">
            marker
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>::marker, <span className="text-gray-400">&</span> *::marker
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#selection" className="whitespace-nowrap">
            selection
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>::selection
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#file" className="whitespace-nowrap">
            file
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>::file-selector-button
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#backdrop" className="whitespace-nowrap">
            backdrop
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>::backdrop
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#placeholder" className="whitespace-nowrap">
            placeholder
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>::placeholder
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            sm
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (width {">="} 40rem)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            md
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (width {">="} 48rem)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            lg
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (width {">="} 64rem)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (width {">="} 80rem)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            2xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (width {">="} 96rem)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            min-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (width {">= "} <span className="text-gray-400">...</span>)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            max-sm
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (width {"<"} 40rem)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            max-md
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (width {"<"} 48rem)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            max-lg
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (width {"<"} 64rem)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            max-xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (width {"<"} 80rem)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            max-2xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (width {"<"} 96rem)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            max-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (width {"< "} <span className="text-gray-400">...</span>)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @3xs
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 16rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @2xs
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 18rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @xs
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 20rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @sm
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 24rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @md
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 28rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @lg
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 32rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 36rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @2xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 42rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @3xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 48rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @4xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 56rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @5xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 64rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @6xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 72rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @7xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">="} 80rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @min-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {">= "} <span className="text-gray-400">...</span>)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-3xs
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 16rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-2xs
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 18rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-xs
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 20rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-sm
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 24rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-md
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 28rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-lg
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 32rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 36rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-2xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 42rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-3xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 48rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-4xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 56rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-5xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 64rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-6xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 72rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-7xl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"<"} 80rem)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#responsive-breakpoints" className="whitespace-nowrap">
            @max-[<span className="text-gray-400">...</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @container (width {"< "} <span className="text-gray-400">...</span>)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#prefers-color-scheme" className="whitespace-nowrap">
            dark
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (prefers-color-scheme: dark)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#prefers-reduced-motion" className="whitespace-nowrap">
            motion-safe
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (prefers-reduced-motion: no-preference)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#prefers-reduced-motion" className="whitespace-nowrap">
            motion-reduce
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (prefers-reduced-motion: reduce)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#prefers-contrast" className="whitespace-nowrap">
            contrast-more
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (prefers-contrast: more)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#prefers-contrast" className="whitespace-nowrap">
            contrast-less
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (prefers-contrast: less)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#forced-colors" className="whitespace-nowrap">
            forced-colors
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (forced-colors: active)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#inverted-colors" className="whitespace-nowrap">
            inverted-colors
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (inverted-colors: inverted)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
            pointer-fine
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: fine)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
            pointer-coarse
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: coarse)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
            pointer-none
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (pointer: none)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
            any-pointer-fine
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: fine)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
            any-pointer-coarse
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: coarse)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#pointer-and-any-pointer" className="whitespace-nowrap">
            any-pointer-none
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (any-pointer: none)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#orientation" className="whitespace-nowrap">
            portrait
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (orientation: portrait)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#orientation" className="whitespace-nowrap">
            landscape
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @media (orientation: landscape)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#scripting" className="whitespace-nowrap">
            noscript
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media (scripting: none)</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#print" className="whitespace-nowrap">
            print
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@media print</code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#supports" className="whitespace-nowrap">
            supports-[<span className="text-gray-400">&hellip;</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            @supports (<span className="text-gray-400">&hellip;</span>)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#aria-states" className="whitespace-nowrap">
            aria-busy
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>[aria-busy="true"]
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#aria-states" className="whitespace-nowrap">
            aria-checked
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>[aria-checked="true"]
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#aria-states" className="whitespace-nowrap">
            aria-disabled
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>[aria-disabled="true"]
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#aria-states" className="whitespace-nowrap">
            aria-expanded
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>[aria-expanded="true"]
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#aria-states" className="whitespace-nowrap">
            aria-hidden
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>[aria-hidden="true"]
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#aria-states" className="whitespace-nowrap">
            aria-pressed
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>[aria-pressed="true"]
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#aria-states" className="whitespace-nowrap">
            aria-readonly
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>[aria-readonly="true"]
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#aria-states" className="whitespace-nowrap">
            aria-required
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>[aria-required="true"]
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#aria-states" className="whitespace-nowrap">
            aria-selected
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>[aria-selected="true"]
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#aria-states" className="whitespace-nowrap">
            aria-[<span className="text-gray-400">&hellip;</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>[aria-<span className="text-gray-400">&hellip;</span>]
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#data-attributes" className="whitespace-nowrap">
            data-[<span className="text-gray-400">&hellip;</span>]
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>[data-<span className="text-gray-400">&hellip;</span>]
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#rtl-support" className="whitespace-nowrap">
            rtl
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#rtl-support" className="whitespace-nowrap">
            ltr
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#openclosed-state" className="whitespace-nowrap">
            open
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">
            <span className="text-gray-400">&</span>:is([open], :popover-open, :open)
          </code>
        </td>
      </tr>
      <tr>
        <td>
          <a href="#starting-style" className="whitespace-nowrap">
            starting
          </a>
        </td>
        <td>
          <code className="whitespace-nowrap before:content-none after:content-none">@starting-style</code>
        </td>
      </tr>
    </tbody>
  </table>
</div>

}

### 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
<!-- [!code classes:hover:bg-white] -->
<div class="bg-black hover:bg-white ...">
  <!-- ... -->
</div>
```

#### :focus

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

```html
<!-- [!code classes:focus:border-blue-400] -->
<input class="border-gray-300 focus:border-blue-400 ..." />
```

#### :focus-within

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

```html
<!-- [!code classes:focus-within:shadow-lg] -->
<div class="focus-within:shadow-lg ...">
  <input type="text" />
</div>
```

#### :focus-visible

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

```html
<!-- [!code classes:focus-visible:outline-2] -->
<button class="focus-visible:outline-2 ...">Submit</button>
```

#### :active

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

```html
<!-- [!code classes:active:bg-blue-600] -->
<button class="bg-blue-500 active:bg-blue-600 ...">Submit</button>
```

#### :visited

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

```html
<!-- [!code classes:visited:text-purple-600] -->
<a href="https://seinfeldquotes.com" class="text-blue-600 visited:text-purple-600 ..."> Inspiration </a>
```

#### :target

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

```html
<!-- [!code classes:target:shadow-lg] -->
<div id="about" class="target:shadow-lg ...">
  <!-- ... -->
</div>
```

#### :first-child

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

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

#### :last-child

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

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

#### :only-child

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

```svelte
<!-- [!code classes:only:py-0] -->
<ul>
  {#each people as person}
    <li class="py-4 only:py-0 ...">
      <!-- ... -->
    </li>
  {/each}
</ul>
```

#### :nth-child(odd)

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

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

#### :nth-child(even)

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

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

#### :first-of-type

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

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

#### :last-of-type

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

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

#### :only-of-type

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

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

#### :nth-child()

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

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

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

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

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

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

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

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

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

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

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

#### :empty

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

```svelte
<!-- [!code classes:empty:hidden] -->
<ul>
  {#each people as person}
    <li class="empty:hidden ...">{person.hobby}</li>
  {/each}
</ul>
```

#### :disabled

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

```html
<!-- [!code classes:disabled:opacity-75] -->
<input class="disabled:opacity-75 ..." />
```

#### :enabled

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

```html
<!-- [!code classes:enabled:hover:border-gray-400] -->
<input class="enabled:hover:border-gray-400 disabled:opacity-75 ..." />
```

#### :checked

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

```html
<!-- [!code classes:checked:bg-blue-500] -->
<input type="checkbox" class="appearance-none checked:bg-blue-500 ..." />
```

#### :indeterminate

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

```html
<!-- [!code classes:indeterminate:bg-gray-300] -->
<input type="checkbox" class="appearance-none indeterminate:bg-gray-300 ..." />
```

#### :default

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

```html
<!-- [!code classes:default:outline-2] -->
<input type="checkbox" class="default:outline-2 ..." />
```

#### :optional

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

```html
<!-- [!code classes:optional:border-red-500] -->
<input class="border optional:border-red-500 ..." />
```

#### :required

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

```html
<!-- [!code classes:required:border-red-500] -->
<input required class="border required:border-red-500 ..." />
```

#### :valid

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

```html
<!-- [!code classes:valid:border-green-500] -->
<input required class="border valid:border-green-500 ..." />
```

#### :invalid

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

```html
<!-- [!code classes:invalid:border-red-500] -->
<input required class="border invalid:border-red-500 ..." />
```

#### :user-valid

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

```html
<!-- [!code classes:user-valid:border-green-500] -->
<input required class="border user-valid:border-green-500" />
```

#### :user-invalid

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

```html
<!-- [!code classes:user-invalid:border-red-500] -->
<input required class="border user-invalid:border-red-500" />
```

#### :in-range

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

```html
<!-- [!code classes:in-range:border-green-500] -->
<input min="1" max="5" class="in-range:border-green-500 ..." />
```

#### :out-of-range

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

```html
<!-- [!code classes:out-of-range:border-red-500] -->
<input min="1" max="5" class="out-of-range:border-red-500 ..." />
```

#### :placeholder-shown

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

```html
<!-- [!code classes:placeholder-shown:border-gray-500] -->
<input class="placeholder-shown:border-gray-500 ..." placeholder="[email protected]" />
```

#### :details-content

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

```html
<!-- [!code classes:details-content:bg-gray-100] -->
<details class="details-content:bg-gray-100 ...">
  <summary>Details</summary>
  This is a secret.
</details>
```

#### :autofill

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

```html
<!-- [!code classes:autofill:bg-yellow-200] -->
<input class="autofill:bg-yellow-200 ..." />
```

#### :read-only

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

```html
<!-- [!code classes:read-only:bg-gray-100] -->
<input class="read-only:bg-gray-100 ..." />
```



---
File: /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.";

<ApiTable
  rows={[
    ["hyphens-none", "hyphens: none;"],
    ["hyphens-manual", "hyphens: manual;"],
    ["hyphens-auto", "hyphens: auto;"],
  ]}
/>

## Examples

### Preventing hyphenation

Use the `hyphens-none` utility to prevent words from being hyphenated even if the line break suggestion `&shy;` is used:

<Figure>

<Example padding={false}>
  {
    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-normal hyphens-none text-gray-900 dark:text-gray-200">
      Officially recognized by the Duden dictionary as the longest word in German,{" "}
      <span className="font-bold" lang="de">
        Kraftfahrzeug&shy;haftpflichtversicherung
      </span>{" "}
      is a 36 letter word for motor vehicle liability insurance.
    </p>
  }
</Example>

```html
<!-- [!code classes:hyphens-none] -->
<!-- [!code word:&shy;] -->
<!-- prettier-ignore -->
<p class="hyphens-none">
  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...
</p>
```

</Figure>

### Manual hyphenation

Use the `hyphens-manual` utility to only set hyphenation points where the line break suggestion `&shy;` is used:

<Figure>

<Example padding={false}>
  {
    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-normal hyphens-manual text-gray-900 dark:text-gray-200">
      Officially recognized by the Duden dictionary as the longest word in German,{" "}
      <span className="font-bold" lang="de">
        Kraftfahrzeug&shy;haftpflichtversicherung
      </span>{" "}
      is a 36 letter word for motor vehicle liability insurance.
    </p>
  }
</Example>

```html
<!-- [!code classes:hyphens-manual] -->
<!-- [!code word:&shy;] -->
<!-- prettier-ignore -->
<p class="hyphens-manual">
  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...
</p>
```

</Figure>

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:

<Figure>

<Example padding={false}>
  {
    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-normal hyphens-auto text-gray-900 dark:text-gray-200">
      Officially recognized by the Duden dictionary as the longest word in German,{" "}
      <span className="font-bold" lang="de">
        Kraftfahrzeughaftpflichtversicherung
      </span>{" "}
      is a 36 letter word for motor vehicle liability insurance.
    </p>
  }
</Example>

```html
<!-- [!code classes:hyphens-auto] -->
<!-- [!code word:lang="de"] -->
<!-- prettier-ignore -->
<p class="hyphens-auto" lang="de">
  ... Kraftfahrzeughaftpflichtversicherung is a ...
</p>
```

</Figure>

The line break suggestion `&shy;` will be preferred over automatic hyphenation points.

### Responsive design

<ResponsiveDesign element="p" property="hyphens" defaultClass="hyphens-none" featuredClass="hyphens-auto" />



---
File: /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.";

<ApiTable
  rows={[
    ["isolate", "isolation: isolate;"],
    ["isolation-auto", "isolation: auto;"],
  ]}
/>

## Examples

### Basic example

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

```html
<!-- [!code classes:isolate] -->
<div class="isolate ...">
  <!-- ... -->
</div>
```

### Responsive design

<ResponsiveDesign property="isolation" defaultClass="isolate" featuredClass="isolation-auto" />



---
File: /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.";

<ApiTable
  rows={[
    ["justify-start", "justify-content: flex-start;"],
    ["justify-end", "justify-content: flex-end;"],
    ["justify-end-safe", "justify-content: safe flex-end;"],
    ["justify-center", "justify-content: center;"],
    ["justify-center-safe", "justify-content: safe center;"],
    ["justify-between", "justify-content: space-between;"],
    ["justify-around", "justify-content: space-around;"],
    ["justify-evenly", "justify-content: space-evenly;"],
    ["justify-stretch", "justify-content: stretch;"],
    ["justify-baseline", "justify-content: baseline;"],
    ["justify-normal", "justify-content: normal;"],
  ]}
/>

## Examples

### Start

Use the `justify-start` utility to justify items against the start of the container's main axis:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex justify-start space-x-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-start] -->
<div class="flex justify-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Center

Use the `justify-center` or `justify-center-safe` utilities to justify items along the center of the container's main axis:

<Figure hint="Resize the container to see the alignment behavior">

<Example resizable>
  {
    <div className="grid grid-cols-1 gap-8">
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-center</p>
        <div className="mt-4 grid grid-cols-1">
          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
          <div className="col-start-1 row-start-1 flex justify-center space-x-4 overflow-hidden rounded-lg font-mono text-sm leading-6 font-bold text-white">
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">01</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">02</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">03</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">04</div>
          </div>
        </div>
      </div>
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          justify-center-safe
        </p>
        <div className="mt-4 grid grid-cols-1">
          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
          <div className="col-start-1 row-start-1 flex justify-center-safe space-x-4 overflow-hidden rounded-lg font-mono text-sm leading-6 font-bold text-white">
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">01</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">02</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">03</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">04</div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

<CodeExampleStack>

```html
<!-- [!code filename:justify-center] -->
<!-- [!code classes:justify-center] -->
<div class="flex justify-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```

```html
<!-- [!code filename:justify-center-safe] -->
<!-- [!code classes:justify-center-safe] -->
<div class="flex justify-center-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```

</CodeExampleStack>

</Figure>

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:

<Figure hint="Resize the container to see the alignment behavior">

<Example resizable>
  {
    <div className="grid grid-cols-1 gap-8">
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-end</p>
        <div className="mt-4 grid grid-cols-1">
          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
          <div className="col-start-1 row-start-1 flex justify-end space-x-4 overflow-hidden rounded-lg font-mono text-sm leading-6 font-bold text-white">
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-pink-500">01</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-pink-500">02</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-pink-500">03</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-pink-500">04</div>
          </div>
        </div>
      </div>
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-end-safe</p>
        <div className="mt-4 grid grid-cols-1">
          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
          <div className="col-start-1 row-start-1 flex justify-end-safe space-x-4 overflow-hidden rounded-lg font-mono text-sm leading-6 font-bold text-white">
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">04</div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

<CodeExampleStack>

```html
<!-- [!code filename:justify-end] -->
<!-- [!code classes:justify-end] -->
<div class="flex justify-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>03</div>
</div>
```

```html
<!-- [!code filename:justify-end-safe] -->
<!-- [!code classes:justify-end-safe] -->
<div class="flex justify-end-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>03</div>
</div>
```

</CodeExampleStack>

</Figure>

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:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex justify-between space-x-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-cyan-500">01</div>
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-cyan-500">02</div>
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-cyan-500">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-between] -->
<div class="flex justify-between ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex justify-around space-x-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-purple-500">01</div>
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-purple-500">02</div>
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-purple-500">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-around] -->
<div class="flex justify-around ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex justify-evenly space-x-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">01</div>
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">02</div>
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-evenly] -->
<div class="flex justify-evenly ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Stretch

Use the `justify-stretch` utility to allow content items to fill the available space along the container's main axis:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-flow-col justify-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex h-14 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-stretch] -->
<div class="flex justify-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Normal

Use the `justify-normal` utility to pack content items in their default position as if no `justify-content` value was set:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex justify-normal space-x-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">01</div>
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">02</div>
        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-normal] -->
<div class="flex justify-normal ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="justify-content" defaultClass="flex justify-start" featuredClass="justify-between" />



---
File: /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.";

<ApiTable
  rows={[
    ["justify-items-start", "justify-items: start;"],
    ["justify-items-end", "justify-items: end;"],
    ["justify-items-end-safe", "justify-items: safe end;"],
    ["justify-items-center", "justify-items: center;"],
    ["justify-items-center-safe", "justify-items: safe center;"],
    ["justify-items-stretch", "justify-items: stretch;"],
    ["justify-items-normal", "justify-items: normal;"],
  ]}
/>

## Examples

### Start

Use the `justify-items-start` utility to justify grid items against the start of their inline axis:

<Figure>

<Example>
  {
    <div className="grid grid-cols-3 gap-4 font-mono text-sm leading-6 font-bold text-white">
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          01
        </div>
      </div>
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          02
        </div>
      </div>
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          03
        </div>
      </div>
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          04
        </div>
      </div>
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          05
        </div>
      </div>
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          06
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-items-start] -->
<div class="grid justify-items-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```

</Figure>

### End

Use the `justify-items-end` or `justify-items-end-safe` utilities to justify grid items against the end of their inline axis:

<Figure hint="Resize the container to see the alignment behavior">

<Example resizable>
  {
    <div className="grid grid-cols-1 gap-8">
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-items-end</p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="grid grid-cols-1 justify-items-end">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-blue-500 p-4">01</div>
          </div>
          <div className="grid grid-cols-1 justify-items-end">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-blue-500 p-4">02</div>
          </div>
          <div className="grid grid-cols-1 justify-items-end">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-blue-500 p-4">03</div>
          </div>
        </div>
      </div>
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          justify-items-end-safe
        </p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="grid grid-cols-1 justify-items-end-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-purple-500 p-4">01</div>
          </div>
          <div className="grid grid-cols-1 justify-items-end-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-purple-500 p-4">02</div>
          </div>
          <div className="grid grid-cols-1 justify-items-end-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-purple-500 p-4">03</div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

<CodeExampleStack>

```html
<!-- [!code filename:justify-items-end] -->
<!-- [!code classes:justify-items-end] -->
<div class="grid grid-flow-col justify-items-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

```html
<!-- [!code filename:justify-items-end-safe] -->
<!-- [!code classes:justify-items-end-safe] -->
<div class="grid grid-flow-col justify-items-end-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</ CodeExampleStack>

</Figure>

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:

<Figure hint="Resize the container to see the alignment behavior">

<Example resizable>
  {
    <div className="grid grid-cols-1 gap-8">
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          justify-items-center
        </p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="grid grid-cols-1 justify-items-center">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-indigo-500 p-4">01</div>
          </div>
          <div className="grid grid-cols-1 justify-items-center">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-indigo-500 p-4">02</div>
          </div>
          <div className="grid grid-cols-1 justify-items-center">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-indigo-500 p-4">03</div>
          </div>
        </div>
      </div>
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          justify-items-center-safe
        </p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="grid grid-cols-1 justify-items-center-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-500 p-4">01</div>
          </div>
          <div className="grid grid-cols-1 justify-items-center-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-500 p-4">02</div>
          </div>
          <div className="grid grid-cols-1 justify-items-center-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-500 p-4">03</div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

<CodeExampleStack>

```html
<!-- [!code filename:justify-items-center] -->
<!-- [!code classes:justify-items-center] -->
<div class="grid grid-flow-col justify-items-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

```html
<!-- [!code filename:justify-items-center-safe] -->
<!-- [!code classes:justify-items-center-safe] -->
<div class="grid grid-flow-col justify-items-center-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</CodeExampleStack>

</Figure>

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:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-cols-3 justify-items-stretch gap-4 font-mono text-sm leading-6 font-bold text-white">
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">01</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">02</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">03</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">04</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">05</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">06</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-items-stretch] -->
<div class="grid justify-items-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign
  property="justify-items"
  defaultClass="grid justify-items-start"
  featuredClass="justify-items-center"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["justify-self-auto", "justify-self: auto;"],
    ["justify-self-start", "justify-self: start;"],
    ["justify-self-center", "justify-self: center;"],
    ["justify-self-center-safe", "justify-self: safe center;"],
    ["justify-self-end", "justify-self: end;"],
    ["justify-self-end-safe", "justify-self: safe end;"],
    ["justify-self-stretch", "justify-self: stretch;"],
  ]}
/>

## Examples

### Auto

Use the `justify-self-auto` utility to align an item based on the value of the grid's `justify-items` property:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">01</div>
        <div className="justify-self-auto rounded-lg bg-purple-500 p-4">02</div>
        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">03</div>
        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">04</div>
        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">05</div>
        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">06</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-self-auto] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-auto ...">02</div>
  <!-- ... -->
</div>
```

</Figure>

### Start

Use the `justify-self-start` utility to align a grid item to the start of its inline axis:

<Figure>

<Example>
  {
    <div className="grid auto-rows-fr grid-cols-3 justify-items-stretch gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
      <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">01</div>
      <div className="grid grid-cols-1">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 size-14 justify-self-start rounded-lg bg-pink-500 p-4">02</div>
      </div>
      <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">03</div>
      <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">04</div>
      <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">05</div>
      <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">06</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-self-start] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-start ...">02</div>
  <!-- ... -->
</div>
```

</Figure>

### Center

Use the `justify-self-center` or `justify-self-center-safe` utilities to align a grid item along the center of its inline axis:

<Figure hint="Resize the container to see the alignment behavior">

<Example resizable>
  {
    <div className="grid grid-cols-1 gap-8">
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-self-center</p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-500">01</div>
          <div className="grid grid-cols-1">
            <Stripes border className="col-start-1 row-start-1 rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 justify-self-center rounded-lg bg-indigo-500 p-4">02</div>
          </div>
          <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-500">03</div>
        </div>
      </div>
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          justify-self-center-safe
        </p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">01</div>
          <div className="grid grid-cols-1">
            <Stripes border className="col-start-1 row-start-1 rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 justify-self-center-safe rounded-lg bg-sky-500 p-4">02</div>
          </div>
          <div className="rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">03</div>
        </div>
      </div>
    </div>
  }
</Example>

<CodeExampleStack>

```html
<!-- [!code filename:justify-self-center] -->
<!-- [!code classes:justify-self-center] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center ...">02</div>
  <!-- ... -->
</div>
```

```html
<!-- [!code filename:justify-self-center-safe] -->
<!-- [!code classes:justify-self-center-safe] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center-safe ...">02</div>
  <!-- ... -->
</div>
```

</CodeExampleStack>

</Figure>

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:

<Figure hint="Resize the container to see the alignment behavior">

<Example resizable>
  {
    <div className="grid grid-cols-1 gap-8">
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-self-end</p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="rounded-lg bg-blue-300 p-4 dark:bg-blue-800 dark:text-blue-500">01</div>
          <div className="grid grid-cols-1">
            <Stripes border className="col-start-1 row-start-1 rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 justify-self-end rounded-lg bg-blue-500 p-4">02</div>
          </div>
          <div className="rounded-lg bg-blue-300 p-4 dark:bg-blue-800 dark:text-blue-500">03</div>
        </div>
      </div>
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          justify-self-end-safe
        </p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-500">01</div>
          <div className="grid grid-cols-1">
            <Stripes border className="col-start-1 row-start-1 rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 justify-self-end-safe rounded-lg bg-purple-500 p-4">02</div>
          </div>
          <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-500">03</div>
        </div>
      </div>
    </div>
  }
</Example>

<CodeExampleStack>

```html
<!-- [!code filename:justify-self-end] -->
<!-- [!code classes:justify-self-end] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end ...">02</div>
  <!-- ... -->
</div>
```

```html
<!-- [!code filename:justify-self-end-safe] -->
<!-- [!code classes:justify-self-end-safe] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end-safe ...">02</div>
  <!-- ... -->
</div>
```

</CodeExampleStack>

</Figure>

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:

<Figure>

<Example>
  {
    <div className="grid auto-rows-fr grid-cols-3 justify-items-stretch gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
      <div className="grid grid-cols-1">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
          01
        </div>
      </div>
      <div className="bg-stripes-fuchsia grid w-full justify-self-stretch rounded-lg">
        <div className="justify-self-stretch rounded-lg bg-fuchsia-500 p-4">02</div>
      </div>
      <div className="grid grid-cols-1">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
          03
        </div>
      </div>
      <div className="grid grid-cols-1">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
          04
        </div>
      </div>
      <div className="grid grid-cols-1">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
          05
        </div>
      </div>
      <div className="grid grid-cols-1">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
          06
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-self-stretch] -->
<div class="grid justify-items-start ...">
  <!-- ... -->
  <div class="justify-self-stretch ...">02</div>
  <!-- ... -->
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="justify-self" defaultClass="justify-self-start" featuredClass="justify-self-end" />



---
File: /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.";

<ApiTable
  rows={[
    ["tracking-tighter", "letter-spacing: var(--tracking-tighter); /* -0.05em */"],
    ["tracking-tight", "letter-spacing: var(--tracking-tight); /* -0.025em */"],
    ["tracking-normal", "letter-spacing: var(--tracking-normal); /* 0em */"],
    ["tracking-wide", "letter-spacing: var(--tracking-wide); /* 0.025em */"],
    ["tracking-wider", "letter-spacing: var(--tracking-wider); /* 0.05em */"],
    ["tracking-widest", "letter-spacing: var(--tracking-widest); /* 0.1em */"],
    ["tracking-(<custom-property>)", "letter-spacing: var(<custom-property>);"],
    ["tracking-[<value>]", "letter-spacing: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `tracking-tight` and `tracking-wide` to set the letter spacing of an element:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">tracking-tight</span>
        <p className="text-lg font-medium tracking-tight text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">tracking-normal</span>
        <p className="text-lg font-medium tracking-normal text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">tracking-wide</span>
        <p className="text-lg font-medium tracking-wide text-gray-900 dark:text-gray-200">
          The quick brown fox jumps over the lazy dog.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:tracking-tight,tracking-normal,tracking-wide] -->
<p class="tracking-tight ...">The quick brown fox ...</p>
<p class="tracking-normal ...">The quick brown fox ...</p>
<p class="tracking-wide ...">The quick brown fox ...</p>
```

</Figure>

### 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
<!-- [!code classes:-tracking-2] -->
<p class="-tracking-2">The quick brown fox ...</p>
```

### Using a custom value

<UsingACustomValue element="p" utility="tracking" name="letter spacing" value=".25em" />

### Responsive design

<ResponsiveDesign element="p" property="letter-spacing" defaultClass="tracking-tight" featuredClass="tracking-wide" />

## Customizing your theme

<CustomizingYourTheme
  element="p"
  utility="tracking"
  name="letter spacing"
  customValue="-0.075em"
  customName="tightest"
/>



---
File: /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.";

<ApiTable
  rows={[
    [
      "line-clamp-<number>",
      "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: <number>;",
    ],
    [
      "line-clamp-none",
      "overflow: visible;\ndisplay: block;\n-webkit-box-orient: horizontal;\n-webkit-line-clamp: unset;",
    ],
    [
      "line-clamp-(<custom-property>)",
      "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: var(<custom-property>);",
    ],
    [
      "line-clamp-[<value>]",
      "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: <value>;",
    ],
  ]}
/>

## Examples

### Basic example

Use `line-clamp-<number>` utilities like `line-clamp-2` and `line-clamp-3` to truncate multi-line text after a specific number of lines:

<Figure>

<Example padding={false}>
  {
    <div className="px-4 sm:px-0">
      <article className="mx-auto max-w-sm p-8 text-gray-700 dark:text-gray-400">
        <time dateTime="2020-03-16" className="block text-sm leading-6 text-gray-500 dark:text-gray-400">
          Mar 10, 2020
        </time>
        <div className="mt-2 text-lg font-semibold text-gray-900 dark:text-gray-200">Boost your conversion rate</div>
        <p className="mt-4 line-clamp-3 text-sm leading-6 text-gray-500 dark:text-gray-400">
          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.
        </p>
        <div className="mt-4 flex gap-x-2.5 text-sm leading-6 font-semibold text-gray-900 dark:text-gray-200">
          <img
            className="h-6 w-6 flex-none rounded-full bg-gray-50 dark:bg-gray-900"
            src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            alt=""
          />
          Lindsay Walton
        </div>
      </article>
    </div>
  }
</Example>

```html
<!-- [!code classes:line-clamp-3] -->
<article>
  <time>Mar 10, 2020</time>
  <h2>Boost your conversion rate</h2>
  <p class="line-clamp-3">
    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.
  </p>
  <div>
    <img src="/img/lindsay.jpg" />
    Lindsay Walton
  </div>
</article>
```

</Figure>

### Undoing line clamping

Use `line-clamp-none` to undo a previously applied line clamp utility:

```html
<!-- [!code classes:lg:line-clamp-none] -->
<p class="line-clamp-3 lg:line-clamp-none">
  <!-- ... -->
</p>
```

### Using a custom value

<UsingACustomValue
  element="p"
  utility="line-clamp"
  name="number of lines"
  variable="line-count"
  value="calc(var(--characters)/100)"
/>

### Responsive design

<ResponsiveDesign property="line-clamp" defaultClass="line-clamp-3" featuredClass="line-clamp-4" />



---
File: /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.";

<ApiTable
  rows={[
    ["text-<size>/<number>", "font-size: <size>;\nline-height: calc(var(--spacing) * <number>);"],
    ["text-<size>/(<custom-property>)", "font-size: <size>;\nline-height: var(<custom-property>);"],
    ["text-<size>/[<value>]", "font-size: <size>;\nline-height: <value>;"],
    ["leading-none", "line-height: 1;"],
    ["leading-<number>", "line-height: calc(var(--spacing) * <number>)"],
    ["leading-(<custom-property>)", "line-height: var(<custom-property>);"],
    ["leading-[<value>]", "line-height: <value>;"],
  ]}
/>

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

<Figure>

<Example>{
  <div className="flex flex-col gap-8">
    <div>
      <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/6</span>
      <p className="text-sm/6 text-gray-900 dark:text-gray-200">
        So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
        my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship
        of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
      </p>
    </div>
    <div>
      <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/7</span>
      <p className="text-sm/7 text-gray-900 dark:text-gray-200">
        So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
        my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship
        of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
      </p>
    </div>
    <div>
      <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/8</span>
      <p className="text-sm/8 text-gray-900 dark:text-gray-200">
        So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
        my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship
        of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
      </p>
    </div>

  </div>
}</Example>

```html
<!-- [!code classes:text-base/6,text-base/7,text-base/8] -->
<p class="text-base/6 ...">So I started to walk into the water...</p>
<p class="text-base/7 ...">So I started to walk into the water...</p>
<p class="text-base/8 ...">So I started to walk into the water...</p>
```

</Figure>

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-<number>` utilities like `leading-6` and `leading-7` to set the line height of an element independent of the font-size:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">leading-6</span>
        <p className="leading-6 text-gray-900 dark:text-gray-200">
          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">leading-7</span>
        <p className="leading-7 text-gray-900 dark:text-gray-200">
          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
        </p>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">leading-8</span>
        <p className="leading-8 text-gray-900 dark:text-gray-200">
          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:leading-6,leading-7,leading-8] -->
<p class="text-sm leading-6">So I started to walk into the water...</p>
<p class="text-sm leading-7">So I started to walk into the water...</p>
<p class="text-sm leading-8">So I started to walk into the water...</p>
```

</Figure>

### Removing the leading

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

<Figure>

<Example>
  {
    <p className="mx-auto max-w-2xs text-2xl leading-none text-gray-900 dark:text-gray-200">
      The quick brown fox jumps over the lazy dog.
    </p>
  }
</Example>

```html
<!-- [!code classes:leading-none] -->
<p class="text-2xl leading-none ...">The quick brown fox...</p>
```

</Figure>

### Using a custom value

<UsingACustomValue element="p" utility="leading" name="line height" variable="line-height" value="1.5" />

### Responsive design

<ResponsiveDesign element="p" property="line-height" defaultClass="leading-5" featuredClass="leading-6" />

## Customizing your theme

<CustomizingYourSpacingScale utility="leading" />



---
File: /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.";

<ApiTable
  rows={[
    ["list-image-[<value>]", "list-style-image: <value>;"],
    ["list-image-(<custom-property>)", "list-style-image: var(<custom-property>);"],
    ["list-image-none", "list-style-image: none;"],
  ]}
/>

## Examples

### Basic example

Use the `list-image-[<value>]` syntax to control the marker image for list items:

<Figure>

<Example padding={false}>
  {
    <div className="px-4 sm:px-0">
      <div className="mx-auto max-w-sm p-8 text-gray-700 sm:text-base sm:leading-7 dark:text-gray-400">
        <ul className="list-image-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjMzhiZGY4Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy42ODUuMTUzYS43NTIuNzUyIDAgMCAxIC4xNDMgMS4wNTJsLTggMTAuNWEuNzUuNzUgMCAwIDEtMS4xMjcuMDc1bC00LjUtNC41YS43NS43NSAwIDAgMSAxLjA2LTEuMDZsMy44OTQgMy44OTMgNy40OC05LjgxN2EuNzUuNzUgMCAwIDEgMS4wNS0uMTQzWiIgLz48L3N2Zz4=')] pl-4 text-gray-900 dark:text-gray-200">
          <li className="pl-2">5 cups chopped Porcini mushrooms</li>
          <li className="pl-2">1/2 cup of olive oil</li>
          <li className="pl-2">3lb of celery</li>
        </ul>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:list-image-[url(/img/checkmark.png)]] -->
<ul class="list-image-[url(/img/checkmark.png)]">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>
```

</Figure>

### Using a CSS variable

Use the <code>list-image-{'(<custom-property>)'}</code> syntax to control the marker image for list items using a CSS variable:

```html
<!-- [!code classes:list-image-(--my-list-image)] -->
<ul class="list-image-(--my-list-image)">
  <!-- ... -->
</ul>
```

This is just a shorthand for <code>list-image-{'[var(<custom-property>)]'}</code> 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
<!-- [!code classes:list-image-none] -->
<ul class="list-image-none">
  <!-- ... -->
</ul>
```

### Responsive design

<ResponsiveDesign
  property="list-style-image"
  defaultClass="list-image-none"
  featuredClass="list-image-[url(/img/checkmark.png)]"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["list-inside", "list-style-position: inside;"],
    ["list-outside", "list-style-position: outside;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `list-inside` and `list-outside` to control the position of the markers and text indentation in a list:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8 sm:flex-row">
      <div className="relative">
        <div className="absolute -top-8 -bottom-8 left-8 w-px bg-pink-400/40 dark:bg-pink-400/30"></div>
        <p className="mb-3 ml-8 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-inside</p>
        <ul className="list-inside list-disc rounded-xl p-4 pl-8 text-gray-900 dark:text-gray-200">
          <li>5 cups chopped Porcini mushrooms</li>
          <li>1/2 cup of olive oil</li>
          <li>3lb of celery</li>
        </ul>
      </div>
      <div className="relative">
        <div className="absolute -top-0 -bottom-8 left-8 w-px bg-pink-400/40 sm:-top-8 dark:bg-pink-400/30"></div>
        <p className="mb-3 ml-8 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-outside</p>
        <ul className="list-outside list-disc rounded-xl p-4 pl-8 text-gray-900 dark:text-gray-200">
          <li>5 cups chopped Porcini mushrooms</li>
          <li>1/2 cup of olive oil</li>
          <li>3lb of celery</li>
        </ul>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:list-inside] -->
<ul class="list-inside">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

<!-- [!code classes:list-outside] -->
<ul class="list-outside">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>
```

</Figure>

### Responsive design

<ResponsiveDesign element="ul" property="list-style-position" defaultClass="list-outside" featuredClass="list-inside" />



---
File: /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.";

<ApiTable
  rows={[
    ["list-disc", "list-style-type: disc;"],
    ["list-decimal", "list-style-type: decimal;"],
    ["list-none", "list-style-type: none;"],
    ["list-(<custom-property>)", "list-style-type: var(<custom-property>);"],
    ["list-[<value>]", "list-style-type: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `list-disc` and `list-decimal` to control the style of the markers in a list:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-8">
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-disc</span>
        <ul className="list-inside list-disc text-gray-900 dark:text-gray-200">
          <li>Now this is a story all about how, my life got flipped-turned upside down</li>
          <li>And I'd like to take a minute just sit right there</li>
          <li>I'll tell you how I became the prince of a town called Bel-Air</li>
        </ul>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-decimal</span>
        <ul className="list-inside list-decimal text-gray-900 dark:text-gray-200">
          <li>Now this is a story all about how, my life got flipped-turned upside down</li>
          <li>And I'd like to take a minute just sit right there</li>
          <li>I'll tell you how I became the prince of a town called Bel-Air</li>
        </ul>
      </div>
      <div>
        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-none</span>
        <ul className="list-inside list-none text-gray-900 dark:text-gray-200">
          <li>Now this is a story all about how, my life got flipped-turned upside down</li>
          <li>And I'd like to take a minute just sit right there</li>
          <li>I'll tell you how I became the prince of a town called Bel-Air</li>
        </ul>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:list-disc] -->
<ul class="list-disc">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>

<!-- [!code classes:list-decimal] -->
<ol class="list-decimal">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ol>

<!-- [!code classes:list-none] -->
<ul class="list-none">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>
```

</Figure>

### Using a custom value

<UsingACustomValue element="ol" utility="list" name="marker" value="upper-roman" variable="marker" />

### Responsive design

<ResponsiveDesign element="ul" property="list-style-type" defaultClass="list-none" featuredClass="list-disc" />



---
File: /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.";

<ApiTable
  rows={[
    ...[
      ["m", "margin"],
      ["mx", "margin-inline"],
      ["my", "margin-block"],
      ["ms", "margin-inline-start"],
      ["me", "margin-inline-end"],
      ["mt", "margin-top"],
      ["mr", "margin-right"],
      ["mb", "margin-bottom"],
      ["ml", "margin-left"],
    ].flatMap(([prefix, property]) => [
      [`${prefix}-<number>`, `${property}: calc(var(--spacing) * <number>);`],
      [`-${prefix}-<number>`, `${property}: calc(var(--spacing) * -<number>);`],
      [`${prefix}-auto`, `${property}: auto;`],
      [`${prefix}-px`, `${property}: 1px;`],
      [`-${prefix}-px`, `${property}: -1px;`],
      [`${prefix}-(<custom-property>)`, `${property}: var(<custom-property>);`],
      [`${prefix}-[<value>]`, `${property}: <value>;`],
    ]),
    ...[
      ["space-x", "margin-inline"],
      ["space-y", "margin-block"],
    ].flatMap(([prefix, property]) => [
      [
        `${prefix}-<number>`,
        dedent`& > :not(:last-child) {
          --tw-${prefix}-reverse: 0;
          ${property}-start: calc(calc(var(--spacing) * <number>) * var(--tw-${prefix}-reverse));
          ${property}-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-${prefix}-reverse)));
        };`,
      ],
      [
        `-${prefix}-<number>`,
        dedent`& > :not(:last-child) {
          --tw-${prefix}-reverse: 0;
          ${property}-start: calc(calc(var(--spacing) * -<number>) * var(--tw-${prefix}-reverse));
          ${property}-end: calc(calc(var(--spacing) * -<number>) * 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}-(<custom-property>)`,
        dedent`& > :not(:last-child) {
          --tw-${prefix}-reverse: 0;
          ${property}-start: calc(var(<custom-property>) * var(--tw-${prefix}-reverse));
          ${property}-end: calc(var(<custom-property>) * calc(1 - var(--tw-${prefix}-reverse)));
        };`,
      ],
      [
        `${prefix}-[<value>]`,
        dedent`& > :not(:last-child) {
          --tw-${prefix}-reverse: 0;
          ${property}-start: calc(<value> * var(--tw-${prefix}-reverse));
          ${property}-end: calc(<value> * 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-<number>` utilities like `m-4` and `m-8` to control the margin on all sides of an element:

<Figure>

<Example>
  {
    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
      <div className="relative flow-root rounded-lg">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="relative m-8 rounded-lg bg-blue-500 p-4">m-8</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:m-8] -->
<div class="m-8 ...">m-8</div>
```

</Figure>

### Adding margin to a single side

Use `mt-<number>`, `mr-<number>`, `mb-<number>`, and `ml-<number>` utilities like `ml-2` and `mt-6` to control the margin on one side of an element:

<Figure>

<Example padding={false}>
  {
    <div className="relative h-56 font-mono text-sm leading-6 font-bold text-white">
      <div className="absolute top-0 left-1/2 -translate-x-1/2 md:-ml-24">
        <div className="relative pt-6">
          <Stripes border="x" className="absolute inset-0 rounded-b-lg" />
          <div className="relative rounded-lg bg-purple-500 p-4">mt-6</div>
        </div>
      </div>
      <div className="absolute top-1/2 right-0 -translate-y-1/2">
        <div className="relative pr-4">
          <Stripes border="y" className="absolute inset-0 rounded-l-lg" />
          <div className="relative rounded-lg bg-purple-500 p-4">mr-4</div>
        </div>
      </div>
      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 md:ml-24">
        <div className="relative pb-8">
          <Stripes border="x" className="absolute inset-0 rounded-t-lg" />
          <div className="relative rounded-lg bg-purple-500 p-4">mb-8</div>
        </div>
      </div>
      <div className="absolute top-1/2 left-0 -translate-y-1/2">
        <div className="relative pl-2">
          <Stripes border="y" className="absolute inset-0 rounded-r-lg" />
          <div className="relative rounded-lg bg-purple-500 p-4">ml-2</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:mt-6,mr-4,mb-8,ml-2] -->
<div class="mt-6 ...">mt-6</div>
<div class="mr-4 ...">mr-4</div>
<div class="mb-8 ...">mb-8</div>
<div class="ml-2 ...">ml-2</div>
```

</Figure>

### Adding horizontal margin

Use `mx-<number>` utilities like `mx-4` and `mx-8` to control the horizontal margin of an element:

<Figure>

<Example>
  {
    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
      <div className="relative rounded-lg">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="relative mx-8 rounded-lg bg-indigo-500 p-4">mx-8</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:mx-8] -->
<div class="mx-8 ...">mx-8</div>
```

</Figure>

### Adding vertical margin

Use `my-<number>` utilities like `my-4` and `my-8` to control the vertical margin of an element:

<Figure>

<Example>
  {
    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
      <div className="relative flow-root rounded-lg">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="relative my-8 rounded-lg bg-pink-500 p-4">my-8</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:my-8] -->
<div class="my-8 ...">my-8</div>
```

</Figure>

### Using negative values

To use a negative margin value, prefix the class name with a dash to convert it to a negative value:

<Figure>

<Example>
  {
    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
      <div className="flex flex-col items-center">
        <div className="relative h-16 w-36 overflow-hidden rounded-md border border-sky-700/10 bg-sky-400/20"></div>
        <div className="relative -mt-8 flex items-center justify-center rounded-md bg-sky-500 p-4">-mt-8</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:-mt-8] -->
<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div>
<div class="-mt-8 bg-sky-300 ...">-mt-8</div>
```

</Figure>

### Using logical properties

Use `ms-<number>` or `me-<number>` utilities like `ms-4` and `me-8` to set the `margin-inline-start` and `margin-inline-end` logical properties:

<Figure>

<Example>
  {
    <div className="grid grid-cols-2 place-items-center gap-x-4">
      <div className="flex flex-col items-start gap-y-4" dir="ltr">
        <p className="text-sm font-medium">Left-to-right</p>
        <div className="relative flex rounded-lg font-mono text-sm leading-6 font-bold text-white">
          <Stripes border className="absolute min-h-full w-full rounded-lg" />
          <div className="relative ms-8 rounded-lg bg-indigo-500 p-4">ms-8</div>
        </div>
        <div className="relative mt-4 flex rounded-lg font-mono text-sm leading-6 font-bold text-white">
          <Stripes border className="absolute min-h-full w-full rounded-lg" />
          <div className="relative me-8 rounded-lg bg-indigo-500 p-4">me-8</div>
        </div>
      </div>
      <div className="flex flex-col items-start gap-y-4" dir="rtl">
        <p className="text-sm font-medium">Right-to-left</p>
        <div className="relative flex rounded-lg font-mono text-sm leading-6 font-bold text-white">
          <Stripes border className="absolute min-h-full w-full rounded-lg" />
          <div className="relative ms-8 rounded-lg bg-indigo-500 p-4">ms-8</div>
        </div>
        <div className="relative mt-4 flex rounded-lg font-mono text-sm leading-6 font-bold text-white">
          <Stripes border className="absolute min-h-full w-full rounded-lg" />
          <div className="relative me-8 rounded-lg bg-indigo-500 p-4">me-8</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:ms-8,me-8] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<div>
  <div dir="ltr">
    <div class="ms-8 ...">ms-8</div>
    <div class="me-8 ...">me-8</div>
  </div>
  <div dir="rtl">
    <div class="ms-8 ...">ms-8</div>
    <div class="me-8 ...">me-8</div>
  </div>
</div>
```

</Figure>

### Adding space between children

Use `space-x-<number>` or `space-y-<number>` utilities like `space-x-4` and `space-y-8` to control the space between elements:

<Figure>

<Example>
  {
    <div className="flex justify-start font-mono text-sm leading-6 font-bold text-white">
      <div className="relative flex space-x-4 rounded-lg">
        <div className="absolute inset-0">
          <Stripes border="y" className="h-full rounded-lg" />
        </div>
        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:space-x-4] -->
<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

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

<Figure>

<Example>
  {
    <div className="flex justify-end font-mono text-sm leading-6 font-bold text-white">
      <div className="relative flex flex-row-reverse space-x-4 space-x-reverse rounded-lg">
        <div className="absolute inset-0">
          <Stripes border="y" className="h-full rounded-lg" />
        </div>
        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">01</div>
        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">02</div>
        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flex-row-reverse,space-x-4,space-x-reverse] -->
<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

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

<UsingACustomValue utilities={["m", "mx", "mb"]} name="margin" variable="margin" value="5px" />

### Responsive design

<ResponsiveDesign property="margin" defaultClass="mt-4" featuredClass="mt-8" />

## Customizing your theme

<CustomizingYourSpacingScale utilities={["m", "mx", "my", "ms", "me", "mt", "mr", "mb", "ml"]} />



---
File: /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.";

<ApiTable
  rows={[
    ["mask-clip-border", "mask-clip: border-box;"],
    ["mask-clip-padding", "mask-clip: padding-box;"],
    ["mask-clip-content", "mask-clip: content-box;"],
    ["mask-clip-fill", "mask-clip: fill-box;"],
    ["mask-clip-stroke", "mask-clip: stroke-box;"],
    ["mask-clip-view", "mask-clip: view-box;"],
    ["mask-no-clip", "mask-clip: no-clip;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `mask-clip-border`, `mask-clip-padding`, and `mask-clip-content` to control the bounding box of an element's mask:

<Figure>

<Example>
  {
    <div className="flex flex-col items-center justify-center gap-y-10 text-center font-mono text-xs font-medium text-gray-500 sm:flex-row sm:space-y-0 sm:space-x-10 dark:text-gray-400">
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-clip-border</p>
        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
          <div className="absolute -inset-[3px] bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-clip-border p-1.5"></div>
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-clip-padding</p>
        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
          <div className="absolute -inset-[3px] rounded-lg border-3 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-clip-padding p-1.5"></div>
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-clip-content</p>
        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
          <div className="absolute -inset-[3px] rounded-lg border-3 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-clip-content p-1.5"></div>
        </div>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-clip-border,mask-clip-padding,mask-clip-content] -->
<div class="mask-clip-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-clip-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-clip-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="mask-clip" defaultClass="mask-clip-border" featuredClass="mask-clip-padding" />



---
File: /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.";

<ApiTable
  rows={[
    ["mask-add", "mask-composite: add;"],
    ["mask-subtract", "mask-composite: subtract;"],
    ["mask-intersect", "mask-composite: intersect;"],
    ["mask-exclude", "mask-composite: exclude;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `mask-add` and `mask-intersect` to control how an element's masks are combined together:

<Figure>

<Example>
  {
    <div className="grid grid-cols-2 items-center justify-center justify-items-center gap-y-8 py-4 text-center font-mono text-xs font-medium text-gray-500 max-sm:grid-cols-1 dark:text-gray-400">
      <div className="relative grid justify-center">
        <div className="absolute -bottom-[2px] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
        <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
        <p className="mb-3">mask-add</p>
        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-add"></div>
      </div>
      <div className="relative grid justify-center">
        <div className="absolute -bottom-[2px] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
        <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
        <p className="mb-3 text-center">mask-subtract</p>
        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-subtract"></div>
      </div>
      <div className="relative grid justify-center">
        <div className="absolute -bottom-[2px] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
        <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
        <p className="mb-3 text-center">mask-intersect</p>
        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-intersect"></div>
      </div>
      <div className="relative grid justify-center">
        <div className="absolute -bottom-[2px] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
        <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
        <p className="mb-3 text-center">mask-exclude</p>
        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-exclude"></div>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-add,mask-subtract,mask-intersect,mask-exclude] -->
<div class="mask-add mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
<div class="mask-subtract mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
<div class="mask-intersect mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
<div class="mask-exclude mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="mask-composite" defaultClass="mask-add" featuredClass="mask-subtract" />



---
File: /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.";

<svg className="sr-only">
  <defs>
    <pattern id="checkerboard" x="0.5" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="5" height="5" fill="#fff" />
      <rect x="5" y="0" width="5" height="5" fill="#808080" />
      <rect x="0" y="5" width="5" height="5" fill="#808080" />
      <rect x="5" y="5" width="5" height="5" fill="#fff" />
    </pattern>
  </defs>
</svg>

<svg className="hidden">
  <symbol id="gradient-color-stop" viewBox="0 0 32 34">
    <path
      fill="url(#checkerboard)"
      stroke="#000"
      strokeOpacity=".05"
      d="M5 .5h22A3.5 3.5 0 0 1 30.5 4v19.6a3.5 3.5 0 0 1-1.853 3.088L16 33.433 3.353 26.688A3.5 3.5 0 0 1 1.5 23.6V4A3.5 3.5 0 0 1 5 .5Z"
    />
    <path
      fill="currentColor"
      d="M1 4a4 4 0 0 1 4-4h22a4 4 0 0 1 4 4v19.6a4 4 0 0 1-2.118 3.53L16 34 3.118 27.13A4 4 0 0 1 1 23.6V4Z"
    />
  </symbol>
</svg>

<ApiTable
  rows={[
    ["mask-[<value>]", "mask-image: <value>;"],
    ["mask-(<custom-property>)", "mask-image: var(<custom-property>);"],
    ["mask-none", "mask-image: none;"],
    [
      "mask-linear-<number>",
      "mask-image: linear-gradient(<number>deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));",
    ],
    [
      "-mask-linear-<number>",
      "mask-image: linear-gradient(calc(<number>deg * -1), black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));",
    ],
    [
      "mask-linear-from-<number>",
      "mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-linear-to));",
    ],
    [
      "mask-linear-from-<percentage>",
      "mask-image: linear-gradient(var(--tw-mask-linear-position), black <percentage>, transparent var(--tw-mask-linear-to));",
    ],
    [
      "mask-linear-from-<color>",
      "mask-image: linear-gradient(var(--tw-mask-linear-position), <color> var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to));",
    ],
    [
      "mask-linear-from-(<custom-property>)",
      "mask-image: linear-gradient(var(--tw-mask-linear-position), black <custom-property>, transparent var(--tw-mask-linear-to));",
    ],
    [
      "mask-linear-from-[<value>]",
      "mask-image: linear-gradient(var(--tw-mask-linear-position), black <value>, transparent var(--tw-mask-linear-to));",
    ],
    [
      "mask-linear-to-<number>",
      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent calc(var(--spacing * <number>)));",
    ],
    [
      "mask-linear-to-<percentage>",
      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <percentage>);",
    ],
    [
      "mask-linear-to-<color>",
      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), <color> var(--tw-mask-linear-to));",
    ],
    [
      "mask-linear-to-(<custom-property>)",
      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent var(<custom-property>));",
    ],
    [
      "mask-linear-to-[<value>]",
      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <value>);",
    ],
    [
      "mask-t-from-<number>",
      "mask-image: linear-gradient(to top, black calc(var(--spacing * <number>)), transparent var(--tw-mask-top-to));",
    ],
    [
      "mask-t-from-<percentage>",
      "mask-image: linear-gradient(to top, black <percentage>, transparent var(--tw-mask-top-to));",
    ],
    [
      "mask-t-from-<color>",
      "mask-image: linear-gradient(to top, <color> var(--tw-mask-top-from), transparent var(--tw-mask-top-to));",
    ],
    [
      "mask-t-from-(<custom-property>)",
      "mask-image: linear-gradient(to top, black var(<custom-property>), transparent var(--tw-mask-top-to));",
    ],
    ["mask-t-from-[<value>]", "mask-image: linear-gradient(to top, black <value>, transparent var(--tw-mask-top-to));"],
    [
      "mask-t-to-<number>",
      "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing * <number>));",
    ],
    [
      "mask-t-to-<percentage>",
      "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <percentage>);",
    ],
    [
      "mask-t-to-<color>",
      "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), <color> var(--tw-mask-top-to));",
    ],
    [
      "mask-t-to-(<custom-property>)",
      "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var(<custom-property>));",
    ],
    ["mask-t-to-[<value>]", "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <value>);"],
    [
      "mask-r-from-<number>",
      "mask-image: linear-gradient(to right, black calc(var(--spacing * <number>)), transparent var(--tw-mask-right-to));",
    ],
    [
      "mask-r-from-<percentage>",
      "mask-image: linear-gradient(to right, black <percentage>, transparent var(--tw-mask-right-to));",
    ],
    [
      "mask-r-from-<color>",
      "mask-image: linear-gradient(to right, <color> var(--tw-mask-right-from), transparent var(--tw-mask-right-to));",
    ],
    [
      "mask-r-from-(<custom-property>)",
      "mask-image: linear-gradient(to right, black var(<custom-property>), transparent var(--tw-mask-right-to));",
    ],
    [
      "mask-r-from-[<value>]",
      "mask-image: linear-gradient(to right, black <value>, transparent var(--tw-mask-right-to));",
    ],
    [
      "mask-r-to-<number>",
      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing * <number>));",
    ],
    [
      "mask-r-to-<percentage>",
      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <percentage>);",
    ],
    [
      "mask-r-to-<color>",
      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), <color> var(--tw-mask-right-to));",
    ],
    [
      "mask-r-to-(<custom-property>)",
      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var(<custom-property>));",
    ],
    [
      "mask-r-to-[<value>]",
      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <value>);",
    ],
    [
      "mask-b-from-<number>",
      "mask-image: linear-gradient(to bottom, black calc(var(--spacing * <number>)), transparent var(--tw-mask-bottom-to));",
    ],
    [
      "mask-b-from-<percentage>",
      "mask-image: linear-gradient(to bottom, black <percentage>, transparent var(--tw-mask-bottom-to));",
    ],
    [
      "mask-b-from-<color>",
      "mask-image: linear-gradient(to bottom, <color> var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to));",
    ],
    [
      "mask-b-from-(<custom-property>)",
      "mask-image: linear-gradient(to bottom, black var(<custom-property>), transparent var(--tw-mask-bottom-to));",
    ],
    [
      "mask-b-from-[<value>]",
      "mask-image: linear-gradient(to bottom, black <value>, transparent var(--tw-mask-bottom-to));",
    ],
    [
      "mask-b-to-<number>",
      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing * <number>));",
    ],
    [
      "mask-b-to-<percentage>",
      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <percentage>);",
    ],
    [
      "mask-b-to-<color>",
      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), <color> var(--tw-mask-bottom-to));",
    ],
    [
      "mask-b-to-(<custom-property>)",
      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var(<custom-property>));",
    ],
    [
      "mask-b-to-[<value>]",
      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <value>);",
    ],
    [
      "mask-l-from-<number>",
      "mask-image: linear-gradient(to left, black calc(var(--spacing * <number>)), transparent var(--tw-mask-left-to));",
    ],
    [
      "mask-l-from-<percentage>",
      "mask-image: linear-gradient(to left, black <percentage>, transparent var(--tw-mask-left-to));",
    ],
    [
      "mask-l-from-<color>",
      "mask-image: linear-gradient(to left, <color> var(--tw-mask-left-from), transparent var(--tw-mask-left-to));",
    ],
    [
      "mask-l-from-(<custom-property>)",
      "mask-image: linear-gradient(to left, black var(<custom-property>), transparent var(--tw-mask-left-to));",
    ],
    [
      "mask-l-from-[<value>]",
      "mask-image: linear-gradient(to left, black <value>, transparent var(--tw-mask-left-to));",
    ],
    [
      "mask-l-to-<number>",
      "mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing * <number>));",
    ],
    [
      "mask-l-to-<percentage>",
      "mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), transparent <percentage>);",
    ],
    [
      "mask-l-to-<color>",
      "mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), <color> var(--tw-mask-left-to));",
    ],
    [
      "mask-l-to-(<custom-property>)",
      "mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent var(<custom-property>));",
    ],
    [
      "mask-l-to-[<value>]",
      "mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent <value>);",
    ],
    [
      "mask-y-from-<number>",
      dedent`
        mask-image: linear-gradient(to top, black calc(var(--spacing * <number>)), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black calc(var(--spacing * <number>)), transparent var(--tw-mask-bottom-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-y-from-<percentage>",
      dedent`
        mask-image: linear-gradient(to top, black <percentage>, transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black <percentage>, transparent var(--tw-mask-bottom-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-y-from-<color>",
      dedent`
        mask-image: linear-gradient(to top, <color> var(--tw-mask-top-from), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, <color> var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-y-from-(<custom-property>)",
      dedent`
        mask-image: linear-gradient(to top, black var(<custom-property>), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black var(<custom-property>), transparent var(--tw-mask-bottom-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-y-from-[<value>]",
      dedent`
        mask-image: linear-gradient(to top, black <value>, transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black <value>, transparent var(--tw-mask-bottom-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-y-to-<number>",
      dedent`
        mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing * <number>)), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing * <number>));
        mask-composite: intersect;`,
    ],
    [
      "mask-y-to-<percentage>",
      dedent`
        mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), transparent <percentage>), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <percentage>);
        mask-composite: intersect;`,
    ],
    [
      "mask-y-to-<color>",
      dedent`
        mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), <color> var(--tw-mask-top-to)), linear-gradient(to bottom, black var(--tw-mask-bottom-from), <color> var(--tw-mask-bottom-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-y-to-(<custom-property>)",
      dedent`
      mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var(<custom-property>)),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var(<custom-property>));
      mask-composite: intersect;`,
    ],
    [
      "mask-y-to-[<value>]",
      dedent`
      mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <value>),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <value>);
      mask-composite: intersect;`,
    ],
    [
      "mask-x-from-<number>",
      dedent`
        mask-image: linear-gradient(to right, black calc(var(--spacing * <number>)), transparent var(--tw-mask-right-to)), linear-gradient(to left, black calc(var(--spacing * <number>)), transparent var(--tw-mask-left-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-x-from-<percentage>",
      dedent`
        mask-image: linear-gradient(to right, black <percentage>, transparent var(--tw-mask-right-to)), linear-gradient(to left, black <percentage>, transparent var(--tw-mask-left-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-x-from-<color>",
      dedent`
        mask-image: linear-gradient(to right, <color> var(--tw-mask-right-from), transparent var(--tw-mask-right-to)), linear-gradient(to left, <color>  var(--tw-mask-left-from), transparent var(--tw-mask-left-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-x-from-(<custom-property>)",
      dedent`
        mask-image: linear-gradient(to right, black var(<custom-property>), transparent var(--tw-mask-right-to)), linear-gradient(to left, black var(<custom-property>), transparent var(--tw-mask-left-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-x-from-[<value>]",
      dedent`
        mask-image: linear-gradient(to right, black <value>, transparent var(--tw-mask-right-to)), linear-gradient(to left, black <value>, transparent var(--tw-mask-left-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-x-to-<number>",
      dedent`
        mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing * <number>)), linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing * <number>));
        mask-composite: intersect;`,
    ],
    [
      "mask-x-to-<percentage>",
      dedent`
        mask-image: linear-gradient(to left, black var(--tw-mask-right-from), transparent <percentage>), linear-gradient(to left, black var(--tw-mask-left-from), transparent <percentage>);
        mask-composite: intersect;`,
    ],
    [
      "mask-x-to-<color>",
      dedent`
        mask-image: linear-gradient(to left, black var(--tw-mask-right-from), <color> var(--tw-mask-right-to)), linear-gradient(to left, black var(--tw-mask-left-from), <color> var(--tw-mask-left-to));
        mask-composite: intersect;`,
    ],
    [
      "mask-x-to-(<custom-property>)",
      dedent`
        mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var(<custom-property>)),linear-gradient(to left, black var(--tw-mask-left-from), transparent var(<custom-property>));
        mask-composite: intersect;`,
    ],
    [
      "mask-x-to-[<value>]",
      dedent`
        mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <value>),linear-gradient(to left, black var(--tw-mask-left-from), transparent <value>);
        mask-composite: intersect;`,
    ],
    ["mask-radial-[<value>]", "mask-image: radial-gradient(<value>);"],
    ["mask-radial-[<size>]", "--tw-mask-radial-size: <size>;"],
    ["mask-radial-[<size>_<size>]", "--tw-mask-radial-size: <size> <size>;"],
    [
      "mask-radial-from-<number>",
      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-radial-to));",
    ],
    [
      "mask-radial-from-<percentage>",
      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black <percentage>, transparent var(--tw-mask-radial-to));",
    ],
    [
      "mask-radial-from-<color>",
      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), <color> var(--tw-mask-radial-from), transparent var(--tw-mask-radial-to));",
    ],
    [
      "mask-radial-from-(<custom-property>)",
      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(<custom-property>), transparent var(--tw-mask-radial-to));",
    ],
    [
      "mask-radial-from-[<value>]",
      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black <value>, transparent var(--tw-mask-radial-to));",
    ],
    [
      "mask-radial-to-<number>",
      "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 * <number>)));",
    ],
    [
      "mask-radial-to-<percentage>",
      "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 <percentage>);",
    ],
    [
      "mask-radial-to-<color>",
      "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), <color> var(--tw-mask-radial-to));",
    ],
    [
      "mask-radial-to-(<custom-property>)",
      "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(<custom-property>));",
    ],
    [
      "mask-radial-to-[<value>]",
      "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 <value>);",
    ],
    ["mask-radial-circle", "--tw-mask-radial-shape: circle;"],
    ["mask-radial-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-<number>",
      "mask-image: conic-gradient(from <number>deg, black var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));",
    ],
    [
      "-mask-conic-<number>",
      "mask-image: conic-gradient(from calc(<number>deg * -1), black var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));",
    ],
    [
      "mask-conic-from-<number>",
      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-conic-to));",
    ],
    [
      "mask-conic-from-<percentage>",
      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black <percentage>, transparent var(--tw-mask-conic-to));",
    ],
    [
      "mask-conic-from-<color>",
      "mask-image: conic-gradient(from var(--tw-mask-conic-position), <color> var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));",
    ],
    [
      "mask-conic-from-(<custom-property>)",
      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(<custom-property>), transparent var(--tw-mask-conic-to));",
    ],
    [
      "mask-conic-from-[<value>]",
      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black <value>, transparent var(--tw-mask-conic-to));",
    ],
    [
      "mask-conic-to-<number>",
      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent calc(var(--spacing * <number>));",
    ],
    [
      "mask-conic-to-<percentage>",
      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent <percentage>);",
    ],
    [
      "mask-conic-to-<color>",
      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), <color> var(--tw-mask-conic-to);",
    ],
    [
      "mask-conic-to-(<custom-property>)",
      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent var(<custom-property>);",
    ],
    [
      "mask-conic-to-[<value>]",
      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent <value>);",
    ],
  ]}
/>

## Examples

### Using an image mask

Use the `mask-[<value>]` syntax to set the mask image of an element:

<Figure>

<Example>
  {
    <Stripes
      border
      className="relative mx-auto flex h-48 w-full max-w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96"
    >
      <div
        className="h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat mask-size-[110%_90%] mask-center mask-no-repeat"
        style={{ maskImage: `url(${maskImg.src})` }}
      ></div>
    </Stripes>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-[url(/img/scribble.png)]] -->
<div class="mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ...">
  <!-- ... -->
</div>
```

</Figure>

### Masking edges

Use utilities like `mask-b-from-<value>` and `mask-t-to-<value>` to add a linear gradient mask to a single side of an element:

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-2 dark:text-gray-400">
      <div className="flex flex-col items-center gap-3">
        <p>mask-t-from-50%</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-t-from-50% bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-r-from-30%</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-r-from-30% bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-l-from-50% mask-l-to-90%</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-l-from-50% mask-l-to-90% bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-b-from-20% mask-b-to-80%</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-b-from-20% mask-b-to-80% bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-t-from-50%,mask-r-from-30%,mask-l-from-50%,mask-l-to-90%,mask-b-from-20%,mask-b-to-80%] -->
<div class="mask-t-from-50% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-r-from-30% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-l-from-50% mask-l-to-90% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

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:

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-2 dark:text-gray-400">
      <div className="flex flex-col items-center gap-3">
        <p>mask-x-from-70% mask-x-to-90%</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-x-from-70% mask-x-to-90% bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-y-from-70% mask-y-to-90%</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-y-from-70% mask-y-to-90% bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-x-from-70%,mask-x-to-90%,mask-y-from-70%,mask-y-to-90%] -->
<div class="mask-x-from-70% mask-x-to-90% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-y-from-70% mask-y-to-90% bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

By default, linear gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask-<side>-from-<color>` and `mask-<side>-to-<color>` utilities.

### Adding an angled linear mask

Use utilities like `mask-linear-<angle>`, `mask-linear-from-20`, and `mask-linear-to-40` to add a custom linear gradient mask to an element:

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-2 dark:text-gray-400">
      <div className="flex flex-col items-center gap-3">
        <p>mask-linear-50</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>-mask-linear-50</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] -mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-linear-50,mask-linear-from-60%,mask-linear-to-80%,-mask-linear-50] -->
<div class="mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="-mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Adding a radial mask

Use the `mask-radial-from-<value>` and `mask-radial-to-<value>` utilities to add a radial gradient mask to an element:

<Figure>

<Example padding={false}>
  {
    <div className="mx-auto flex items-center p-16 max-sm:p-6">
      <img
        src={KeyboardLight.src}
        className="aspect-square max-h-72 w-full mask-radial-[100%_200%] mask-radial-from-transparent mask-radial-from-15% mask-radial-to-black mask-radial-to-60% mask-radial-at-right object-cover object-top-left dark:hidden"
        alt=""
      />
      <img
        src={KeyboardDark.src}
        className="hidden aspect-square max-h-72 w-full mask-radial-[100%_200%] mask-radial-from-transparent mask-radial-from-15% mask-radial-to-black mask-radial-to-60% mask-radial-at-right object-cover object-top-left dark:block"
        alt=""
      />
      <div className="font-medium max-sm:-mx-3">
        <p className="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Speed</p>
        <p className="mt-2 text-base whitespace-nowrap text-gray-700 dark:text-gray-300">Built for power users</p>
        <p className="mt-1 text-sm leading-relaxed text-balance text-gray-500">
          Work faster than ever with our keyboard shortcuts
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:mask-radial-from-75%] -->
<div class="flex items-center gap-4">
  <img class="mask-radial-[100%_100%] mask-radial-from-75% mask-radial-at-left ..." src="/img/keyboard.png" />
  <div class="font-medium">
    <p class="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Speed</p>
    <p class="mt-2 text-base text-gray-700 dark:text-gray-300">Built for power users</p>
    <p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">
      Work faster than ever with customizable keyboard shortcuts
    </p>
  </div>
</div>
```

</Figure>

By default, radial gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask-radial-from-<color>` and `mask-radial-to-<color>` utilities.

#### Setting the radial position

Use utilities like `mask-radial-at-bottom-left` and `mask-radial-at-[35%_35%]` to set the position of the center of the radial gradient mask:

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-3 dark:text-gray-400">
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-at-top-left</p>
        <div className="grid size-28 grid-cols-1 max-sm:size-24">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[33%_33%] mask-radial-from-100% mask-radial-at-top-left bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-at-top</p>
        <div className="grid size-28 grid-cols-1 max-sm:size-24">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[33%_33%] mask-radial-from-100% mask-radial-at-top bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-at-top-right</p>
        <div className="grid size-28 grid-cols-1 max-sm:size-24">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[33%_33%] mask-radial-from-100% mask-radial-at-top-right bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-at-left</p>
        <div className="grid size-28 grid-cols-1 max-sm:size-24">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[33%_33%] mask-radial-from-100% mask-radial-at-left bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-at-center</p>
        <div className="grid size-28 grid-cols-1 max-sm:size-24">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[33%_33%] mask-radial-from-100% mask-radial-at-center bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-at-right</p>
        <div className="grid size-28 grid-cols-1 max-sm:size-24">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[33%_33%] mask-radial-from-100% mask-radial-at-right bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-at-bottom-left</p>
        <div className="grid size-28 grid-cols-1 max-sm:size-24">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[33%_33%] mask-radial-from-100% mask-radial-at-bottom-left bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-at-bottom</p>
        <div className="grid size-28 grid-cols-1 max-sm:size-24">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[33%_33%] mask-radial-from-100% mask-radial-at-bottom bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-at-bottom-right</p>
        <div className="grid size-28 grid-cols-1 max-sm:size-24">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[33%_33%] mask-radial-from-100% mask-radial-at-bottom-right bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes: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,mask-radial-at-bottom-left,mask-radial-at-bottom-right] -->
<div class="mask-radial-at-top-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-top mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-top-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-center mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

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:

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-2 dark:text-gray-400">
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-closest-side</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-closest-corner</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-corner mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-farthest-side</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-farthest-side mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center gap-3">
        <p>mask-radial-farthest-corner</p>
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-farthest-corner mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-radial-farthest-corner,mask-radial-farthest-side,mask-radial-closest-corner,mask-radial-closest-side] -->
<div class="mask-radial-closest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-closest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-farthest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-farthest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

When setting a custom radial gradient size, the units you can use depend on the `<ending-shape>` of the gradient which is set to `ellipse` by default.

With `mask-circle`, you can only use a single fixed length, like `mask-radial-[5rem]`. Whereas with `mask-ellipse`, you can specify each axis as a fixed length or percentage, like `mask-radial-[40%_80%]`.

### Adding a conic mask

Use the `mask-conic-from-<value>`, `mask-conic-to-<value>` and `mask-conic-<angle>` utilities to add a conic gradient mask to an element:

<Figure>

<Example>
  {
    <div className="mx-auto flex w-full max-w-sm items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
      <div className="grid grid-cols-1 grid-rows-1">
        <div className="col-start-1 row-start-1 size-12 rounded-full border-4 border-gray-100 dark:border-gray-700" />
        <div className="col-start-1 row-start-1 size-12 rounded-full border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75% dark:border-amber-400" />
      </div>
      <div className="w-0 flex-1 text-sm text-gray-950 dark:text-white">
        <p className="font-medium">Storage used: 75%</p>
        <p className="mt-1 text-gray-500 dark:text-gray-400">
          <span className="font-medium">0.48 GB</span> out of 2 GB remaining
        </p>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:mask-conic-from-75%,mask-conic-to-75%] -->
<div class="flex items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
  <div class="grid grid-cols-1 grid-rows-1">
    <div class="border-4 border-gray-100 dark:border-gray-700 ..."></div>
    <div class="border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75% dark:border-amber-400 ..."></div>
  </div>
  <div class="w-0 flex-1 text-sm text-gray-950 dark:text-white">
    <p class="font-medium">Storage used: 75%</p>
    <p class="mt-1 text-gray-500 dark:text-gray-400"><span class="font-medium">0.48 GB</span> out of 2 GB remaining</p>
  </div>
</div>
```

</Figure>

By default, conic gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask-conic-from-<color>` and `mask-conic-to-<color>` utilities.

### Combining masks

Gradient mask utilities, like `mask-radial-from-<value>`, `mask-conic-to-<value>`, and `mask-l-from-<value>` can be combined to create more complex gradient masks:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-2 dark:text-gray-400">
      <div className="flex flex-col items-center">
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% mask-radial-at-bottom bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
      <div className="flex flex-col items-center">
        <div className="grid aspect-3/2 w-48 grid-cols-1">
          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
          <div className="col-start-1 row-start-1 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% mask-circle mask-radial-at-top-left bg-cover bg-center mask-no-repeat"></div>
        </div>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-b-from-50%,mask-radial-[50%_90%],mask-radial-from-80%,mask-r-from-80%,mask-b-from-80%,mask-radial-from-70%,mask-radial-to-85%] -->
<div class="mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

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
<!-- [!code classes:mask-none] -->
<div class="mask-none">
  <!-- ... -->
</div>
```

### Using a custom value

<UsingACustomValue
  utilities={["mask-linear", "mask-radial"]}
  name="mask image"
  value="70deg,transparent_10%,black,transparent_80%"
  variable="mask"
/>

### Responsive design

<ResponsiveDesign property="mask-image" defaultClass="mask-radial-from-70%" featuredClass="mask-radial-from-50%" />

## Customizing your theme

<CustomizingYourThemeColors utilities={["mask-radial-from", "mask-conic-to", "mask-b-from"]} />



---
File: /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.";

<svg className="sr-only">
  <defs>
    <pattern id="checkerboard" x="0.5" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="5" height="5" fill="#fff" />
      <rect x="5" y="0" width="5" height="5" fill="#808080" />
      <rect x="0" y="5" width="5" height="5" fill="#808080" />
      <rect x="5" y="5" width="5" height="5" fill="#fff" />
    </pattern>
  </defs>
</svg>

<svg className="hidden">
  <symbol id="gradient-color-stop" viewBox="0 0 32 34">
    <path
      fill="url(#checkerboard)"
      stroke="#000"
      strokeOpacity=".05"
      d="M5 .5h22A3.5 3.5 0 0 1 30.5 4v19.6a3.5 3.5 0 0 1-1.853 3.088L16 33.433 3.353 26.688A3.5 3.5 0 0 1 1.5 23.6V4A3.5 3.5 0 0 1 5 .5Z"
    />
    <path
      fill="currentColor"
      d="M1 4a4 4 0 0 1 4-4h22a4 4 0 0 1 4 4v19.6a4 4 0 0 1-2.118 3.53L16 34 3.118 27.13A4 4 0 0 1 1 23.6V4Z"
    />
  </symbol>
</svg>

<ApiTable
  rows={[
    ["mask-alpha", "mask-mode: alpha;"],
    ["mask-luminance", "mask-mode: luminance;"],
    ["mask-match", "mask-mode: match-source;"],
  ]}
/>

## Examples

### Basic example

Use the `mask-alpha`, `mask-luminance` and `mask-match` utilities to control the mode of an element's mask:

<Figure>

<Example>
  {
    <div className="mx-5 grid gap-10 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
      <div>
        <div className="relative h-[3.625rem]">
          <div className="absolute top-0 left-[50%] -ml-3 flex h-12 flex-col items-center">
            <svg viewBox="0 0 32 34" className="w-7 flex-none text-black drop-shadow-sm dark:stroke-white/10">
              <use href="#gradient-color-stop" />
            </svg>
            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
          </div>
          <div className="absolute top-0 right-px -mr-3 flex h-12 flex-col items-center">
            <svg viewBox="0 0 32 34" className="w-7 flex-none text-transparent drop-shadow-sm dark:stroke-white/10">
              <use href="#gradient-color-stop" />
            </svg>
            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
          </div>
        </div>
        <div className="relative">
          <div className="relative z-10 h-24 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-cover bg-center mask-alpha"></div>
          <Stripes className="absolute inset-0 rounded-lg" border />
        </div>
        <p className="mt-3">mask-alpha</p>
      </div>
      <div>
        <div className="relative h-[3.625rem]">
          <div className="absolute top-0 left-[50%] -ml-3 flex h-12 flex-col items-center">
            <svg viewBox="0 0 32 34" className="w-7 flex-none text-white drop-shadow-sm dark:stroke-white/10">
              <use href="#gradient-color-stop" />
            </svg>
            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
          </div>
          <div className="absolute top-0 right-px -mr-3 flex h-12 flex-col items-center">
            <svg viewBox="0 0 32 34" className="w-7 flex-none text-black drop-shadow-sm dark:stroke-white/10">
              <use href="#gradient-color-stop" />
            </svg>
            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
          </div>
        </div>
        <div className="relative">
          <div className="relative z-10 h-24 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-r-from-white mask-r-from-50% mask-r-to-black bg-cover bg-center mask-luminance"></div>
          <Stripes className="absolute inset-0 rounded-lg" border />
        </div>
        <p className="mt-3">mask-luminance</p>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-alpha,mask-luminance] -->
<div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

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

<ResponsiveDesign property="mask-mode" defaultClass="mask-alpha" featuredClass="mask-luminance" />



---
File: /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.";

<ApiTable
  rows={[
    ["mask-origin-border", "mask-origin: border-box;"],
    ["mask-origin-padding", "mask-origin: padding-box;"],
    ["mask-origin-content", "mask-origin: content-box;"],
    ["mask-origin-fill", "mask-origin: fill-box;"],
    ["mask-origin-stroke", "mask-origin: stroke-box;"],
    ["mask-origin-view", "mask-origin: view-box;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `mask-origin-border`, `mask-origin-padding`, and `mask-origin-content` to control where an element's mask is rendered:

<Figure>

<Example>
  {
    <div className="flex flex-col gap-y-10 text-center font-mono text-xs font-medium text-gray-500 sm:flex-row sm:justify-between dark:text-gray-400">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">mask-origin-border</p>
        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
          <div className="absolute -inset-[3px] bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-border p-1.5"></div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">mask-origin-padding</p>
        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
          <div className="absolute -inset-[3px] rounded-lg border-3 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-padding p-1.5"></div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">mask-origin-content</p>
        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
          <div className="absolute -inset-[3px] rounded-lg border-3 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-content p-1.5"></div>
        </div>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-origin-border,mask-origin-padding,mask-origin-content] -->
<div class="mask-origin-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-origin-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-origin-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="mask-origin" defaultClass="mask-origin-border" featuredClass="mask-origin-padding" />



---
File: /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.";

<ApiTable
  rows={[
    ["mask-top-left", "mask-position: top left;"],
    ["mask-top", "mask-position: top;"],
    ["mask-top-right", "mask-position: top right;"],
    ["mask-left", "mask-position: left;"],
    ["mask-center", "mask-position: center;"],
    ["mask-right", "mask-position: right;"],
    ["mask-bottom-left", "mask-position: bottom left;"],
    ["mask-bottom", "mask-position: bottom;"],
    ["mask-bottom-right", "mask-position: bottom right;"],
    ["mask-position-(<custom-property>)", "mask-position: var(<custom-property>);"],
    ["mask-position-[<value>]", "mask-position: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `mask-center`, `mask-right`, and `mask-left-top` to control the position of an element's mask image:

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-3 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:items-end max-sm:justify-between max-sm:px-2 dark:text-gray-400">
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-top-left</p>
        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-top-left mask-no-repeat"></div>
        </Stripes>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-top</p>
        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-top mask-no-repeat"></div>
        </Stripes>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-top-right</p>
        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-top-right mask-no-repeat"></div>
        </Stripes>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-left</p>
        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-left mask-no-repeat"></div>
        </Stripes>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-center</p>
        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-center mask-no-repeat"></div>
        </Stripes>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-right</p>
        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-right mask-no-repeat"></div>
        </Stripes>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-bottom-left</p>
        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-bottom-left mask-no-repeat"></div>
        </Stripes>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-bottom</p>
        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-bottom mask-no-repeat"></div>
        </Stripes>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3">mask-bottom-right</p>
        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-bottom-right mask-no-repeat"></div>
        </Stripes>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-top-left,mask-top,mask-top-right,mask-left,mask-center,mask-right,mask-bottom-left,mask-bottom,mask-bottom-right] -->
<div class="mask-top-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-top mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-top-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-center mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-bottom-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-bottom mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-bottom-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="mask-position" value="center_top_1rem" name="mask position" variable="mask-position" />

### Responsive design

<ResponsiveDesign property="mask-position" defaultClass="mask-center" featuredClass="mask-top" />



---
File: /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.";

<ApiTable
  rows={[
    ["mask-repeat", "mask-repeat: repeat;"],
    ["mask-no-repeat", "mask-repeat: no-repeat;"],
    ["mask-repeat-x", "mask-repeat: repeat-x;"],
    ["mask-repeat-y", "mask-repeat: repeat-y;"],
    ["mask-repeat-space", "mask-repeat: space;"],
    ["mask-repeat-round", "mask-repeat: round;"],
  ]}
/>

## Examples

### Basic example

Use the `mask-repeat` utility to repeat the mask image both vertically and horizontally:

<Figure>

<Example>
  {
    <div className="flex flex-col py-8">
      <Stripes className="h-40 w-full rounded-lg" border>
        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-repeat"></div>
      </Stripes>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-repeat] -->
<div class="mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Repeating horizontally

Use the `mask-repeat-x` utility to only repeat the mask image horizontally:

<Figure>

<Example>
  {
    <div className="flex flex-col py-8">
      <Stripes className="h-40 w-full rounded-lg" border>
        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-repeat-x"></div>
      </Stripes>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-repeat-x] -->
<div class="mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>
```

</Figure>

### Repeating vertically

Use the `mask-repeat-y` utility to only repeat the mask image vertically:

<Figure>

<Example>
  {
    <div className="flex flex-col py-8">
      <Stripes className="h-40 w-full rounded-lg" border>
        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-repeat-y"></div>
      </Stripes>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-repeat-y] -->
<div class="mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>
```

</Figure>

### Preventing clipping

Use the `mask-repeat-space` utility to repeat the mask image without clipping:

<Figure>

<Example resizable>
  {
    <div className="flex flex-col py-8">
      <Stripes className="h-40 w-full rounded-lg" border>
        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-repeat-space"></div>
      </Stripes>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-repeat-space] -->
<div class="mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Preventing clipping and gaps

Use the `mask-repeat-round` utility to repeat the mask image without clipping, stretching if needed to avoid gaps:

<Figure>

<Example resizable>
  {
    <div className="flex flex-col py-8">
      <Stripes className="h-40 w-full rounded-lg" border>
        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-repeat-round"></div>
      </Stripes>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-repeat-round] -->
<div class="mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Disabling repeating

Use the `mask-no-repeat` utility to prevent a mask image from repeating:

<Figure>

<Example>
  {
    <div className="flex flex-col py-8">
      <Stripes className="h-40 w-full rounded-lg" border>
        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-no-repeat"></div>
      </Stripes>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-no-repeat] -->
<div class="mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="mask-repeat" defaultClass="mask-repeat" featuredClass="mask-repeat-x" />



---
File: /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.";

<ApiTable
  rows={[
    ["mask-auto", "mask-size: auto;"],
    ["mask-cover", "mask-size: cover;"],
    ["mask-contain", "mask-size: contain;"],
    ["mask-size-(<custom-property>)", "mask-size: var(<custom-property>);"],
    ["mask-size-[<value>]", "mask-size: <value>;"],
  ]}
/>

## Examples

### Filling the container

Use the `mask-cover` utility to scale the mask image until it fills the mask layer, cropping the image if needed:

<Figure>

<Example>
  {
    <Stripes border className="mx-auto h-48 w-96 overflow-hidden rounded-lg sm:w-96">
      <div
        className="h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat mask-cover mask-center"
        style={{ maskImage: `url(${maskImg.src})` }}
      ></div>
    </Stripes>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-cover] -->
<div class="mask-cover mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Filling without cropping

Use the `mask-contain` utility to scale the mask image to the outer edges without cropping or stretching:

<Figure>

<Example>
  {
    <Stripes border className="mx-auto h-48 w-96 overflow-hidden rounded-lg sm:w-96">
      <div
        className="h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat mask-contain mask-center mask-no-repeat"
        style={{ maskImage: `url(${maskImg.src})` }}
      ></div>
    </Stripes>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-contain] -->
<div class="mask-contain mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Using the default size

Use the `mask-auto` utility to display the mask image at its default size:

<Figure>

<Example>
  {
    <Stripes border className="mx-auto h-48 w-96 overflow-hidden rounded-lg sm:w-96">
      <div
        className="h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat mask-auto mask-center mask-no-repeat"
        style={{ maskImage: `url(${maskImg.src})` }}
      ></div>
    </Stripes>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-auto] -->
<div class="mask-auto mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="mask-size" value="auto_100px" name="mask image size" variable="mask-size" />

### Responsive design

<ResponsiveDesign property="mask-size" defaultClass="mask-auto" featuredClass="mask-contain" />



---
File: /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.";

<ApiTable
  rows={[
    ["mask-type-alpha", "mask-type: alpha;"],
    ["mask-type-luminance", "mask-type: luminance;"],
  ]}
/>

## Examples

### Basic example

Use the `mask-type-alpha` and `mask-type-luminance` utilities to control the type of an SVG mask:

<Figure>

<Example>
  {
    <div>
      <Stripes
        border
        className="relative mx-auto flex h-48 max-w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96"
      >
        <svg viewBox="0 0 384 192">
          <mask id="blob1" className="mask-type-alpha fill-gray-700/70">
            <path d="M138.25 45.9161c34.504 -4.0384 45.586 -8.2996 69.504 -26.7274c35.516 -27.35568 88.5 -27.47958 103.651 24.8472c11.65 40.2452 0.417 90.1771 -25.438 113.0701c-43.537 38.552 -124.113 45.445 -174.128 15.703c-43.1183 -25.637 -56.9741 -74.9589 -30.0882 -107.1019c9.1187 -10.902 23.4522 -15.924 56.4992 -19.791z" />
          </mask>
          <image
            href="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80"
            height="100%"
            width="100%"
            preserveAspectRatio="xMaxYMid slice"
            mask="url(#blob1)"
          />
        </svg>
      </Stripes>
      <p className="mt-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">mask-type-alpha</p>
      <Stripes
        border
        className="relative mx-auto mt-8 flex h-48 max-w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96"
      >
        <svg viewBox="0 0 384 192">
          <mask id="blob2" className="mask-type-luminance fill-gray-700/70">
            <path d="M138.25 45.9161c34.504 -4.0384 45.586 -8.2996 69.504 -26.7274c35.516 -27.35568 88.5 -27.47958 103.651 24.8472c11.65 40.2452 0.417 90.1771 -25.438 113.0701c-43.537 38.552 -124.113 45.445 -174.128 15.703c-43.1183 -25.637 -56.9741 -74.9589 -30.0882 -107.1019c9.1187 -10.902 23.4522 -15.924 56.4992 -19.791z" />
          </mask>
          <image
            href="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80"
            height="100%"
            width="100%"
            preserveAspectRatio="xMaxYMid slice"
            mask="url(#blob2)"
          />
        </svg>
      </Stripes>
      <p className="mt-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
        mask-type-luminance
      </p>
    </div>
  }
</Example>

```html
<!-- [!code classes:mask-type-alpha,mask-type-luminance] -->
<svg>
  <mask id="blob1" class="mask-type-alpha fill-gray-700/70">
    <path d="..."></path>
  </mask>
  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob1)" />
</svg>

<svg>
  <mask id="blob2" class="mask-type-luminance fill-gray-700/70">
    <path d="..."></path>
  </mask>
  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob2)" />
</svg>
```

</Figure>

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

<ResponsiveDesign
  element="mask"
  property="mask-type"
  defaultClass="mask-type-alpha"
  featuredClass="mask-type-luminance"
/>



---
File: /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.";

<ApiTable
  rows={[
    ["max-h-<number>", "max-height: calc(var(--spacing) * <number>);"],
    ["max-h-<fraction>", "max-height: calc(<fraction> * 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-(<custom-property>)", "max-height: var(<custom-property>);"],
    ["max-h-[<value>]", "max-height: <value>;"],
  ]}
/>

## Examples

### Basic example

Use `max-h-<number>` utilities like `max-h-24` and `max-h-64` to set an element to a fixed maximum height based on the spacing scale:

<Figure>

<Example>
  {
    <div className="flex h-96 items-end justify-center space-x-4 text-center font-mono text-xs font-bold text-white">
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-80 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-80</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-64 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-64</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-48 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-48</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-40 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-40</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-32 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-32</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-24 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-24</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:max-h-80,max-h-64,max-h-48,max-h-40,max-h-32,max-h-24,max-h-full] -->
<div class="h-96 ...">
  <div class="h-full max-h-80 ...">max-h-80</div>
  <div class="h-full max-h-64 ...">max-h-64</div>
  <div class="h-full max-h-48 ...">max-h-48</div>
  <div class="h-full max-h-40 ...">max-h-40</div>
  <div class="h-full max-h-32 ...">max-h-32</div>
  <div class="h-full max-h-24 ...">max-h-24</div>
</div>
```

</Figure>

### Using a percentage

Use `max-h-full` or `max-h-<fraction>` utilities like `max-h-1/2` and `max-h-2/5` to give an element a percentage-based maximum height:

<Figure>

<Example>
  {
    <div className="flex h-96 items-end justify-center space-x-4 text-center font-mono text-xs font-bold text-white">
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-9/10 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-9/10</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-3/4 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-3/4</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-1/2 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-1/2</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-1/4 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-1/4</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-full w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-full</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:max-h-9/10,max-h-3/4,max-h-1/2,max-h-1/4,max-h-full] -->
<div class="h-96 ...">
  <div class="h-full max-h-9/10 ...">max-h-9/10</div>
  <div class="h-full max-h-3/4 ...">max-h-3/4</div>
  <div class="h-full max-h-1/2 ...">max-h-1/2</div>
  <div class="h-full max-h-1/4 ...">max-h-1/4</div>
  <div class="h-full max-h-full ...">max-h-full</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="max-h" value="220px" name="maximum height" variable="max-height" />

### Responsive design

<ResponsiveDesign property="max-height" defaultClass="h-48 max-h-full" featuredClass="max-h-screen" />

## Customizing your theme

<CustomizingYourSpacingScale utility="max-h" />



---
File: /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.";

<ApiTable
  rows={[
    ["max-w-<number>", "max-width: calc(var(--spacing) * <number>);"],
    ["max-w-<fraction>", "max-width: calc(<fraction> * 100%);"],
    ["max-w-3xs", "max-width: var(--container-3xs); /* 16rem (256px) */"],
    ["max-w-2xs", "max-width: var(--container-2xs); /* 18rem (288px) */"],
    ["max-w-xs", "max-width: var(--container-xs); /* 20rem (320px) */"],
    ["max-w-sm", "max-width: var(--container-sm); /* 24rem (384px) */"],
    ["max-w-md", "max-width: var(--container-md); /* 28rem (448px) */"],
    ["max-w-lg", "max-width: var(--container-lg); /* 32rem (512px) */"],
    ["max-w-xl", "max-width: var(--container-xl); /* 36rem (576px) */"],
    ["max-w-2xl", "max-width: var(--container-2xl); /* 42rem (672px) */"],
    ["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-(<custom-property>)", "max-width: var(<custom-property>);"],
    ["max-w-[<value>]", "max-width: <value>;"],
  ]}
/>

## Examples

### Basic example

Use `max-w-<number>` utilities like `max-w-24` and `max-w-64` to set an element to a fixed maximum width based on the spacing scale:

<Figure hint="Resize the example to see the expected behavior">

<Example resizable>
  {
    <div className="align-start grid gap-4 text-center font-mono text-xs font-bold text-white">
      <div className="relative grid w-full rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative max-w-96 rounded-lg bg-blue-500 px-4 py-2">max-w-96</div>
      </div>
      <div className="relative grid w-full rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative max-w-80 rounded-lg bg-blue-500 px-4 py-2">max-w-80</div>
      </div>
      <div className="relative grid w-full rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative max-w-64 rounded-lg bg-blue-500 px-4 py-2">max-w-64</div>
      </div>
      <div className="relative grid w-full rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative max-w-48 rounded-lg bg-blue-500 px-4 py-2">max-w-48</div>
      </div>
      <div className="relative grid w-full rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative max-w-40 rounded-lg bg-blue-500 px-4 py-2">max-w-40</div>
      </div>
      <div className="relative grid w-full rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative max-w-32 rounded-lg bg-blue-500 px-4 py-2">max-w-32</div>
      </div>
      <div className="relative grid w-full rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative max-w-24 rounded-lg bg-blue-500 px-4 py-2">max-w-24</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:max-w-96,max-w-80,max-w-64,max-w-48,max-w-40,max-w-32,max-w-24] -->
<div class="w-full max-w-96 ...">max-w-96</div>
<div class="w-full max-w-80 ...">max-w-80</div>
<div class="w-full max-w-64 ...">max-w-64</div>
<div class="w-full max-w-48 ...">max-w-48</div>
<div class="w-full max-w-40 ...">max-w-40</div>
<div class="w-full max-w-32 ...">max-w-32</div>
<div class="w-full max-w-24 ...">max-w-24</div>
```

</Figure>

### Using a percentage

Use `max-w-full` or `max-w-<fraction>` utilities like `max-w-1/2` and `max-w-2/5` to give an element a percentage-based maximum width:

<Figure hint="Resize the example to see the expected behavior">

<Example resizable>
  {
    <div className="align-start grid gap-4 text-center font-mono text-xs font-bold text-white">
      <div className="relative grid w-full rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative max-w-9/10 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-9/10</div>
      </div>
      <div className="relative grid w-full rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative max-w-3/4 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-3/4</div>
      </div>
      <div className="relative grid w-full rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative max-w-1/2 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-1/2</div>
      </div>
      <div className="relative grid w-full rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative max-w-1/3 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-1/3</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:max-w-3/4,max-w-9/10,max-w-1/2,max-w-1/3] -->
<div class="w-full max-w-9/10 ...">max-w-9/10</div>
<div class="w-full max-w-3/4 ...">max-w-3/4</div>
<div class="w-full max-w-1/2 ...">max-w-1/2</div>
<div class="w-full max-w-1/3 ...">max-w-1/3</div>
```

</Figure>

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

<Figure hint="Resize the example to see the expected behavior">

<Example resizable>
  {
    <div className="dark:highlight-white/5 relative mx-auto flex max-w-md items-center gap-6 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
      <img
        className="absolute -left-6 h-28 w-28 rounded-full"
        src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
      />
      <div className="min-w-0 py-5 pr-5 pl-28">
        <div className="truncate text-sm font-medium text-gray-900 sm:text-base dark:text-gray-200">Andrew Alfred</div>
        <div className="truncate text-sm leading-tight text-gray-500 sm:text-base dark:text-gray-400">
          Assistant to the Traveling Secretary
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:max-w-md] -->
<div class="max-w-md ...">
  <!-- ... -->
</div>
```

</Figure>

### 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
<!-- [!code classes:container] -->
<div class="container">
  <!-- ... -->
</div>
```

Note that unlike containers you might have used in other frameworks, Tailwind's container does not center itself automatically and does not have any built-in horizontal padding. Use `mx-auto` and the `px-<number>` utilities to add these:

```html
<!-- [!code classes:mx-auto,px-4] -->
<div class="container mx-auto px-4">
  <!-- ... -->
</div>
```

### Using a custom value

<UsingACustomValue utility="max-w" value="220px" name="maximum width" variable="max-width" />

### Responsive design

<ResponsiveDesign property="max-width" defaultClass="max-w-sm" featuredClass="max-w-lg" />

## Customizing your theme

<CustomizingYourSpacingScale utility="max-w" />



---
File: /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.";

<ApiTable
  rows={[
    ["min-h-<number>", "min-height: calc(var(--spacing) * <number>);"],
    ["min-h-<fraction>", "min-height: calc(<fraction> * 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-(<custom-property>)", "min-height: var(<custom-property>);"],
    ["min-h-[<value>]", "min-height: <value>;"],
  ]}
/>

## Examples

### Basic example

Use `min-h-<number>` utilities like `min-h-24` and `min-h-64` to set an element to a fixed minimum height based on the spacing scale:

<Figure>

<Example>
  {
    <div className="mx-auto flex justify-center">
      <div className="relative flex items-end space-x-4 font-mono text-xs font-bold text-white">
        <Stripes border className="absolute -inset-x-[5%] h-20 w-[110%] rounded-lg" />
        <div className="relative flex h-96 w-8 items-end justify-center rounded-lg bg-blue-500">
          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-96</div>
        </div>
        <div className="relative flex h-80 w-8 items-end justify-center rounded-lg bg-blue-500">
          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-80</div>
        </div>
        <div className="relative flex h-64 w-8 items-end justify-center rounded-lg bg-blue-500">
          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-64</div>
        </div>
        <div className="relative flex h-48 w-8 items-end justify-center rounded-lg bg-blue-500">
          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-48</div>
        </div>
        <div className="relative flex h-40 w-8 items-end justify-center rounded-lg bg-blue-500">
          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-40</div>
        </div>
        <div className="relative flex h-32 w-8 items-end justify-center rounded-lg bg-blue-500">
          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-32</div>
        </div>
        <div className="relative flex h-24 w-8 items-end justify-center rounded-lg bg-blue-500">