Skill: leonaaardob/lb-tailwindcss-skill (version 0.1.0)

--- name: tailwind description: Complete Tailwind CSS documentation. Use when working with Tailwind CSS utility classes, responsive design, dark mode, animations, custom configurations, plugins, or styling questions. Covers all utility classes, modifiers, configuration options, and best practices. --- # Tailwind CSS Documentation Complete Tailwind CSS documentation embedded in markdown. Read from `references/` to answer questions about utility classes, responsive design, customization, and best practices. ## Documentation Structure All documentation is in `references/` with individual files for each utility and concept: ### Core Concepts - `installation.mdx` - Setup and installation - `editor-setup.mdx` - IDE configuration - `using-with-preprocessors.mdx` - SCSS, PostCSS integration - `optimizing-for-production.mdx` - Build optimization - `browser-support.mdx` - Browser compatibility ### Layout & Spacing - `container.mdx`, `columns.mdx` - Layout utilities - `aspect-ratio.mdx` - Aspect ratio control - `box-sizing.mdx` - Box model - `display.mdx` - Display properties - `float.mdx`, `clear.mdx` - Floats - `position.mdx` - Positioning - `top-right-bottom-left.mdx` - Inset utilities - `visibility.mdx`, `z-index.mdx` - Z-index and visibility - `padding.mdx`, `margin.mdx` - Spacing - `space-between.mdx` - Gap utilities ### Flexbox & Grid - `flex-direction.mdx`, `flex-wrap.mdx`, `flex.mdx` - Flexbox - `flex-grow.mdx`, `flex-shrink.mdx`, `flex-basis.mdx` - Flex sizing - `order.mdx` - Flex/grid order - `grid-template-columns.mdx`, `grid-template-rows.mdx` - Grid - `grid-column.mdx`, `grid-row.mdx` - Grid placement - `gap.mdx` - Grid/flex gap - `justify-content.mdx`, `justify-items.mdx`, `justify-self.mdx` - Justify - `align-content.mdx`, `align-items.mdx`, `align-self.mdx` - Align - `place-content.mdx`, `place-items.mdx`, `place-self.mdx` - Place ### Typography - `font-family.mdx`, `font-size.mdx`, `font-weight.mdx` - Fonts - `font-smoothing.mdx`, `font-style.mdx`, `font-variant-numeric.mdx` - `letter-spacing.mdx`, `line-height.mdx`, `line-clamp.mdx` - Spacing - `list-style-type.mdx`, `list-style-position.mdx` - Lists - `text-align.mdx`, `text-color.mdx`, `text-decoration.mdx` - Text - `text-transform.mdx`, `text-overflow.mdx`, `text-wrap.mdx` - `text-indent.mdx`, `vertical-align.mdx`, `whitespace.mdx` - `word-break.mdx`, `hyphens.mdx` ### Backgrounds - `background-attachment.mdx`, `background-clip.mdx` - Background - `background-color.mdx`, `background-origin.mdx` - `background-position.mdx`, `background-repeat.mdx` - `background-size.mdx`, `background-image.mdx` - `gradient-color-stops.mdx` - Gradients ### Borders - `border-radius.mdx`, `border-width.mdx`, `border-color.mdx` - Borders - `border-style.mdx`, `divide-width.mdx`, `divide-color.mdx` - `divide-style.mdx`, `outline-width.mdx`, `outline-color.mdx` - `outline-style.mdx`, `outline-offset.mdx`, `ring-width.mdx` - `ring-color.mdx`, `ring-offset-width.mdx`, `ring-offset-color.mdx` ### Effects & Filters - `box-shadow.mdx`, `box-shadow-color.mdx` - Shadows - `opacity.mdx`, `mix-blend-mode.mdx`, `background-blend-mode.mdx` - `filter.mdx` - Filters - `blur.mdx`, `brightness.mdx`, `contrast.mdx`, `grayscale.mdx` - `hue-rotate.mdx`, `invert.mdx`, `saturate.mdx`, `sepia.mdx` - `backdrop-filter.mdx` - Backdrop filters - `backdrop-blur.mdx`, `backdrop-brightness.mdx`, etc. ### Transitions & Animations - `transition-property.mdx`, `transition-duration.mdx` - Transitions - `transition-timing-function.mdx`, `transition-delay.mdx` - `animation.mdx` - Animations ### Transforms - `scale.mdx`, `rotate.mdx`, `translate.mdx`, `skew.mdx` - Transforms - `transform-origin.mdx` - Transform origin ### Interactivity - `accent-color.mdx`, `appearance.mdx`, `cursor.mdx` - User interaction - `caret-color.mdx`, `pointer-events.mdx`, `resize.mdx` - `scroll-behavior.mdx`, `scroll-margin.mdx`, `scroll-padding.mdx` - `scroll-snap-align.mdx`, `scroll-snap-stop.mdx`, `scroll-snap-type.mdx` - `touch-action.mdx`, `user-select.mdx`, `will-change.mdx` ### Customization - `adding-custom-styles.mdx` - Custom CSS - `configuration.mdx` - tailwind.config.js - `content-configuration.mdx` - Content paths - `theme.mdx` - Theme customization - `screens.mdx` - Breakpoints - `colors.mdx` - Color palette - `spacing.mdx` - Spacing scale - `plugins.mdx` - Plugin system - `presets.mdx` - Config presets ### Advanced Features - `dark-mode.mdx` - Dark mode - `reusing-styles.mdx` - Component patterns - `functions-and-directives.mdx` - @apply, @layer, etc. ## Quick Reference ### Common Tasks | Task | File to Read | |------|--------------| | Setup Tailwind | `installation.mdx` | | Responsive design | `responsive-design.mdx`, `screens.mdx` | | Dark mode | `dark-mode.mdx` | | Custom colors | `customizing-colors.mdx`, `colors.mdx` | | Layout utilities | `container.mdx`, `display.mdx`, `position.mdx` | | Flexbox | `flex-direction.mdx`, `justify-content.mdx`, `align-items.mdx` | | Grid | `grid-template-columns.mdx`, `gap.mdx` | | Typography | `font-size.mdx`, `font-weight.mdx`, `text-color.mdx` | | Spacing | `padding.mdx`, `margin.mdx`, `space-between.mdx` | | Backgrounds | `background-color.mdx`, `background-image.mdx` | | Borders | `border-width.mdx`, `border-color.mdx`, `border-radius.mdx` | | Shadows | `box-shadow.mdx` | | Transitions | `transition-property.mdx` | | Custom config | `configuration.mdx`, `theme.mdx` | | Plugins | `plugins.mdx` | ### When to Use This Skill - Working with Tailwind CSS utility classes - Responsive design questions - Dark mode implementation - Custom Tailwind configuration - Plugin development - Migration to Tailwind - Styling patterns and best practices ### How to Navigate 1. **For specific utilities:** Find the utility name file (e.g., `flex.mdx`, `text-color.mdx`) 2. **For concepts:** Check concept files (installation, dark-mode, responsive-design) 3. **For customization:** See configuration files (configuration, theme, plugins) 4. **For best practices:** Read reusing-styles, adding-custom-styles All files are `.mdx` (Markdown + JSX) but readable as plain markdown.

path: README.md
content: # Tailwind CSS Documentation Skill

Complete Tailwind CSS documentation packaged as an OpenClaw AgentSkill.

## Contents

- **All Utility Classes** (185 utility documentation files)
- **Core Concepts** (installation, responsive design, dark mode)
- **Customization** (configuration, theming, plugins)
- **Layout & Spacing** (flexbox, grid, positioning)
- **Typography** (fonts, text utilities)
- **Backgrounds & Borders** (colors, gradients, shadows)
- **Effects & Filters** (transitions, animations, transforms)
- **Responsive Design** (breakpoints, modifiers)

## Structure

```
references/
├── *.mdx             # Individual utility docs (185 files)
├── installation.mdx  # Setup guide
├── configuration.mdx # Config reference
├── dark-mode.mdx     # Dark mode guide
├── plugins.mdx       # Plugin system
└── ...
```

## Installation

Via ClawHub:
```bash
clawhub install lb-tailwind-skill
```

Or manually: Download and extract into your OpenClaw workspace `skills/` folder.

## Usage

This skill triggers automatically when you ask questions about Tailwind CSS utilities, responsive design, dark mode, configuration, or styling patterns.

## Covered Topics

- Utility-first workflow
- Responsive breakpoints
- Dark mode implementation
- Custom color palettes
- Typography system
- Layout utilities (flex, grid, positioning)
- Spacing scale
- Border and shadow utilities
- Transitions and animations
- Transform utilities
- Plugin development
- Configuration and theming

## Source

Documentation extracted from [tailwindlabs/tailwindcss.com](https://github.com/tailwindlabs/tailwindcss.com) (latest version).

## License

Documentation content: MIT (from Tailwind CSS project)


path: references/accent-color.mdx
content: 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" />


path: references/adding-custom-styles.mdx
content: 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(--radius-lg);
    padding: --spacing(6);
    box-shadow: var(--shadow-xl);
  }
  /* [!code highlight:2] */
}
```

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

```html
<!-- [!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`.

Available bare value data types are: `number`, `integer`, `ratio`, and `percentage`.

#### Literal values

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

```css
/* [!code filename:CSS] */
@utility tab-* {
  tab-size: --value("inherit", "initial", "unset");
}
```

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

#### Arbitrary values

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

```css
/* [!code filename:CSS] */
@utility tab-* {
  tab-size: --value([integer]);
}
```

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

Available arbitrary value data types are: `absolute-size`, `angle`, `bg-size`, `color`, `family-name`, `generic-name`, `image`, `integer`, `length`, `line-width`, `number`, `percentage`, `position`, `ratio`, `relative-size`, `url`, `vector`, and `*`.

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

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

```css
/* [!code filename:CSS] */
@theme {
  --tab-size-github: 8;
}

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

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

```css
/* [!code filename:CSS] */
@utility opacity-* {
  opacity: --value([percentage]);
  /* [!code highlight:2] */
  opacity: calc(--value(integer) * 1%);
  /* prettier-ignore */
  opacity: --value(--opacity-*);
}
```

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

```css
/* [!code filename:CSS] */
@theme {
  --tab-size-github: 8;
}

@utility tab-* {
  /* [!code highlight:2] */
  /* prettier-ignore */
  tab-size: --value(--tab-size-*, integer, [integer]);
}

@utility opacity-* {
  opacity: calc(--value(integer) * 1%);
  /* [!code highlight:2] */
  /* prettier-ignore */
  opacity: --value(--opacity-*, [percentage]);
}
```

#### Negative values

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

```css
/* [!code filename:CSS] */
@utility inset-* {
  inset: --spacing(--value(integer));
  inset: --value([percentage], [length]);
}

/* [!code highlight:4] */
@utility -inset-* {
  inset: --spacing(--value(integer) * -1);
  inset: calc(--value([percentage], [length]) * -1);
}
```

#### Modifiers

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

```css
/* [!code filename:CSS] */
@utility text-* {
  /* prettier-ignore */
  font-size: --value(--text-*, [length]);
  /* [!code highlight:2] */
  /* prettier-ignore */
  line-height: --modifier(--leading-*, [length], [*]);
}
```

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

#### Fractions

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

```css
/* [!code filename:CSS] */
@utility aspect-* {
  /* [!code word:ratio, \[ratio\]] */
  /* prettier-ignore */
  aspect-ratio: --value(--aspect-ratio-*, ratio, [ratio]);
}
```

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

## Adding custom variants

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

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

Now you can use the `theme-midnight:<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;
    }
  }
}
```


path: references/align-content.mdx
content: 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" />


path: references/align-items.mdx
content: 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" />


path: references/align-self.mdx
content: 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-last", "align-self: last baseline;"],
  ]}
/>

## Examples

### Auto

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

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


path: references/animation.mdx
content: 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);
          }
        }
      }
    `}

/>


path: references/appearance.mdx
content: 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"
/>


path: references/aspect-ratio.mdx
content: 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-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"
/>


path: references/backdrop-filter-blur.mdx
content: 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" />


path: references/backdrop-filter-brightness.mdx
content: 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"
/>


path: references/backdrop-filter-contrast.mdx
content: 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"
/>


path: references/backdrop-filter-grayscale.mdx
content: 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"
/>


path: references/backdrop-filter-hue-rotate.mdx
content: 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"
/>


path: references/backdrop-filter-invert.mdx
content: 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"
/>


path: references/backdrop-filter-opacity.mdx
content: 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"
/>


path: references/backdrop-filter-saturate.mdx
content: 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"
/>


path: references/backdrop-filter-sepia.mdx
content: 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" />


path: references/backdrop-filter.mdx
content: 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" />


path: references/backface-visibility.mdx
content: 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" />


path: references/background-attachment.mdx
content: 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" />


path: references/background-blend-mode.mdx
content: 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"
/>


path: references/background-clip.mdx
content: 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-linear-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-linear-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" />


path: references/background-color.mdx
content: 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" />


path: references/background-image.mdx
content: 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: <value>;"],
    ["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"]} />


path: references/background-origin.mdx
content: 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" />


path: references/background-position.mdx
content: 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" />


path: references/background-repeat.mdx
content: 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" />


path: references/background-size.mdx
content: 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" />


path: references/border-collapse.mdx
content: 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"
/>


path: references/border-color.mdx
content: 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="[REDACTED_SECRET]"
        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" />


path: references/border-radius.mdx
content: 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" />


path: references/border-spacing.mdx
content: 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" />


path: references/border-style.mdx
content: 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" />


path: references/border-width.mdx
content: 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" />


path: references/box-decoration-break.mdx
content: 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"
/>


path: references/box-shadow.mdx
content: 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"]} />


path: references/box-sizing.mdx
content: 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" />


path: references/break-after.mdx
content: 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" />


path: references/break-inside.mdx
content: 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" />


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: suspicious | SkillSpector: clean (LOW)