

Get started with Tailwind CSS
=============================


Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.


It's fast, flexible, and reliable — with zero-runtime.



Installation
------------


* [Tailwind CLI](https://tailwindcss.com/docs/installation)
---------------------------------------------------------
* [Using PostCSS](/docs/installation)
-----------------------------------
* [Framework Guides](/docs/installation)
--------------------------------------
* [Play CDN](/docs/installation)
------------------------------



### Installing Tailwind CLI


The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a [standalone executable](https://tailwindcss.com/blog/standalone-cli) if you want to use it without installing Node.js.



1. #### Install Tailwind CSS


Install `tailwindcss` via npm, and create your `tailwind.config.js` file.





Terminal



```
npm install -D tailwindcssnpx tailwindcss init
```
2. #### Configure your template paths


Add the paths to all of your template files in your `tailwind.config.js` file.





tailwind.config.js



```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

```
3. #### Add the Tailwind directives to your CSS


Add the `@tailwind` directives for each of Tailwind’s layers to your main CSS file.





src/input.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
4. #### Start the Tailwind CLI build process


Run the CLI tool to scan your template files for classes and build your CSS.





Terminal



```
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
```
5. #### Start using Tailwind in your HTML


Add your compiled CSS file to the `<head>` and start using Tailwind’s utility classes to style your content.





src/index.html



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

```
What to read next
-----------------


Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.


* ### [Utility-First Fundamentals](utility-first)


Using a utility-first workflow to build complex components from a constrained set of primitive utilities.
* ### [Responsive Design](responsive-design)


Build fully responsive user interfaces that adapt to any screen size using responsive modifiers.
* ### [Hover, Focus & Other States](hover-focus-and-other-states)


Style elements in interactive states like hover, focus, and more using conditional modifiers.
* ### [Dark Mode](dark-mode)


Optimize your site for dark mode directly in your HTML using the dark mode modifier.
* ### [Reusing Styles](reusing-styles)


Manage duplication and keep your projects maintainable by creating reusable abstractions.
* ### [Customizing the Framework](adding-custom-styles)


Customize the framework to match your brand and extend it with your own custom styles.





 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs>

Utility-First Fundamentals
==========================


Building complex components from a constrained set of primitive utilities.

 Overview
--------

 Traditionally, whenever you need to style something on the web, you write CSS.

 

Using a traditional approach where custom designs require custom CSS


 
```
<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>
```
 With Tailwind, you style elements by applying pre-existing classes directly in your HTML.

 

Using utility classes to build custom designs without writing CSS


 
```
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>
```
 In the example above, we’ve used:

 * Tailwind’s [flexbox](display#flex) and <padding> utilities (`flex`, `shrink-0`, and `p-6`) to control the overall card layout
* The <max-width> and <margin> utilities (`max-w-sm` and `mx-auto`) to constrain the card width and center it horizontally
* The [background color](background-color), [border radius](border-radius), and <box-shadow> utilities (`bg-white`, `rounded-xl`, and `shadow-lg`) to style the card’s appearance
* The <width> and <height> utilities (`w-12` and `h-12`) to size the logo image
* The [space-between](space) utilities (`space-x-4`) to handle the spacing between the logo and the text
* The [font size](font-size), [text color](text-color), and <font-weight> utilities (`text-xl`, `text-black`, `font-medium`, etc.) to style the card text

 This approach allows us to implement a completely custom component design without writing a single line of custom CSS.

 Now I know what you’re thinking, *“this is an atrocity, what a horrible mess!”* and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — **you have to actually try it**.

 But once you’ve actually built something this way, you’ll quickly notice some really important benefits:

 * **You aren’t wasting energy inventing class names**. No more adding silly class names like `sidebar-inner-wrapper` just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container.
* **Your CSS stops growing**. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.
* **Making changes feels safer**. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.

 When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture.

 Why not just use inline styles?
-------------------------------

 A common reaction to this approach is wondering, “isn’t this just inline styles?” and in some ways it is — you’re applying styles directly to elements instead of assigning them a class name and then styling that class.

 But using utility classes has a few important advantages over inline styles:

 * **Designing with constraints**. Using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined [design system](theme), which makes it much easier to build visually consistent UIs.
* **Responsive design**. You can’t use media queries in inline styles, but you can use Tailwind’s [responsive utilities](responsive-design) to build fully responsive interfaces easily.
* **Hover, focus, and other states**. Inline styles can’t target states like hover or focus, but Tailwind’s [state variants](hover-focus-and-other-states) make it easy to style those states with utility classes.

 This component is fully responsive and includes a button with hover and focus styles, and is built entirely with utility classes:

 
```
<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">
        Erin Lindford
      </p>
      <p class="text-slate-500 font-medium">
        Product Engineer
      </p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>
```
 Maintainability concerns
------------------------

 The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations.

 This is easily solved by [extracting components and partials](reusing-styles#extracting-components-and-partials), and using [editor and language features](reusing-styles#using-editor-and-language-features) like multi-cursor editing and simple loops.

 
```
<!-- PrimaryButton.vue -->
<template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    <slot/>
  </button>
</template>
```
 Aside from that, maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. Large companies like GitHub, Netflix, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success.

 If you’d like to hear about others’ experiences with this approach, check out the following resources:

 * [By The Numbers: A Year and a Half with Atomic CSS](https://medium.com/@johnpolacek/by-the-numbers-a-year-and-half-with-atomic-css-39d75b1263b4) by John Polacek
* [No, Utility Classes Aren’t the Same As Inline Styles](https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styles) by Sarah Dayan of Algolia
* [Diana Mounter on using utility classes at GitHub](http://www.fullstackradio.com/75), a podcast interview

 For even more, check out [The Case for Atomic/Utility-First CSS](https://johnpolacek.github.io/the-case-for-atomic-css/), curated by [John Polacek](https://twitter.com/johnpolacek).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/utility-first>

Responsive Design
=================


Using responsive utility variants to build adaptive user interfaces.


Overview
--------

 Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.

 There are five breakpoints by default, inspired by common device resolutions:

 

| Breakpoint prefix | Minimum width | CSS |
| --- | --- | --- |
| `sm` | 640px | `@media (min-width: 640px) { ... }` |
| `md` | 768px | `@media (min-width: 768px) { ... }` |
| `lg` | 1024px | `@media (min-width: 1024px) { ... }` |
| `xl` | 1280px | `@media (min-width: 1280px) { ... }` |
| `2xl` | 1536px | `@media (min-width: 1536px) { ... }` |

 To add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the `:` character:

 
```
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">
```
 This works for **every utility class in the framework**, which means you can change literally anything at a given breakpoint — even things like letter spacing or cursor styles.

 Here’s a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens *(resize your browser to see it in action)*:

  
```
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/building.jpg" alt="Modern building architecture">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Company retreats</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Incredible accommodation for your team</a>
      <p class="mt-2 text-slate-500">Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that.</p>
    </div>
  </div>
</div>
```
 Here’s how the example above works:

 * By default, the outer `div` is `display: block`, but by adding the `md:flex` utility, it becomes `display: flex` on medium screens and larger.
* When the parent is a flex container, we want to make sure the image never shrinks, so we’ve added `md:shrink-0` to prevent shrinking on medium screens and larger. Technically we could have just used `shrink-0` since it would do nothing on smaller screens, but since it only matters on `md` screens, it’s a good idea to make that clear in the class name.
* On small screens the image is automatically full width by default. On medium screens and up, we’ve constrained the width to a fixed size and ensured the image is full height using `md:h-full md:w-48`.

 We’ve only used one breakpoint in this example, but you could easily customize this component at other sizes using the `sm`, `lg`, `xl`, or `2xl` responsive prefixes as well.

 Working mobile-first
--------------------

 By default, Tailwind uses a mobile-first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.

 What this means is that unprefixed utilities (like `uppercase`) take effect on all screen sizes, while prefixed utilities (like `md:uppercase`) only take effect at the specified breakpoint *and above*.

 ### Targeting mobile screens

 Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the `sm:` prefixed version. Don’t think of `sm:` as meaning “on small screens”, think of it as “at the small *breakpoint*“.

 

Don’t use `sm:` to target mobile devices


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

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


 
```
<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class="text-center sm:text-left"></div>
```
 For this reason, it’s often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for `sm` screens, followed by `md` screens, etc.

 ### Targeting a breakpoint range

 By default, styles applied by rules like `md:flex` will apply at that breakpoint and stay applied at larger breakpoints.

 If you’d like to apply a utility *only* when a specific breakpoint range is active, stack a responsive modifier like `md` with a `max-*` modifier to limit that style to a specific range:

 
```
<div class="md:max-xl:flex">
  <!-- ... -->
</div>
```
 Tailwind generates a corresponding `max-*` modifier for each breakpoint, so out of the box the following modifiers are available:

 

| Modifier | Media query |
| --- | --- |
| `max-sm` | `@media not all and (min-width: 640px) { ... }` |
| `max-md` | `@media not all and (min-width: 768px) { ... }` |
| `max-lg` | `@media not all and (min-width: 1024px) { ... }` |
| `max-xl` | `@media not all and (min-width: 1280px) { ... }` |
| `max-2xl` | `@media not all and (min-width: 1536px) { ... }` |

 ### Targeting a single breakpoint

 To target a single breakpoint, target the range for that breakpoint by stacking a responsive modifier like `md` with the `max-*` modifier for the next breakpoint:

 
```
<div class="md:max-lg:flex">
  <!-- ... -->
</div>
```
 Read about [targeting breakpoint ranges](responsive-design#targeting-a-breakpoint-range) to learn more.

 Using custom breakpoints
------------------------

 ### Customizing your theme

 You can completely customize your breakpoints in your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}
```

 Learn more in the [customizing breakpoints documentation](/docs/screens).

 ### Arbitrary values

 If you need to use a one-off breakpoint that doesn’t make sense to include in your theme, use the `min` or `max` modifiers to generate a custom breakpoint on the fly using any arbitrary value.

 
```
<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->
</div>
```
 Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/responsive-design>

Functions & Directives
======================


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


Directives
----------

 Directives are custom Tailwind-specific [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) you can use in your CSS that offer special functionality for Tailwind CSS projects.

 ### @tailwind

 Use the `@tailwind` directive to insert Tailwind’s `base`, `components`, `utilities` and `variants` styles into your CSS.

 
```
/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

/**
 * Use this directive to control where Tailwind injects the hover, focus,
 * responsive, dark mode, and other variants of each class.
 *
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
@tailwind variants;
```
 ### @layer

 Use the `@layer` directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are `base`, `components`, and `utilities`.

 
```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}
```
 Tailwind will automatically move the CSS within any `@layer` directive to the same place as the corresponding `@tailwind` rule, so you don’t have to worry about authoring your CSS in a specific order to avoid specificity issues.

 Any custom CSS added to a layer will only be included in the final build if that CSS is actually used in your HTML, just like all of the classes built in to Tailwind by default.

 Wrapping any custom CSS with `@layer` also makes it possible to use modifiers with those rules, like `hover:` and `focus:` or responsive modifiers like `md:` and `lg:`.

 ### @apply

 Use `@apply` to inline any existing utility classes into your own custom CSS.

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

 
```
.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}
.select2-search {
  @apply border border-gray-300 rounded;
}
.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}
```
 Any rules inlined with `@apply` will have `!important` **removed** by default to avoid specificity issues:

 
```
/* Input */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Output */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}
```
 If you’d like to `@apply` an existing class and make it `!important`, simply add `!important` to the end of the declaration:

 
```
/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}
```
 Note that if you’re using Sass/SCSS, you’ll need to use Sass’ interpolation feature to get this to work:

 
```
.btn {
  @apply font-bold py-2 px-4 rounded #{!important};
}
```
 #### Using @apply with per-component CSS

 Component frameworks like Vue and Svelte support adding per-component styles within a `<style>` block that lives in each component file.

 If you try to `@apply` a custom class you’ve defined in your global CSS in one of these per-component `<style>` blocks, you’ll get an error about the class not existing:

 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    background-color: theme(colors.white);
    border-radius: theme(borderRadius.lg);
    padding: theme(spacing.6);
    box-shadow: theme(boxShadow.xl);
  }
}
```

 

Card.svelte



```
<div>
  <slot></slot>
</div>

<style>
  div {
    /* Won't work because this file and main.css are processed separately */
    @apply card;
  }
</style>
```

 This is because under-the-hood, frameworks like Vue and Svelte are processing every single `<style>` block independently, and running your PostCSS plugin chain against each one in isolation.

 That means if you have 10 components that each have a `<style>` block, Tailwind is being run 10 separate times, and each run has zero knowledge about the other runs. Because of this, when you try to `@apply card` in `Card.svelte` it fails, because Tailwind has no idea that the `card` class exists since Svelte processed `Card.svelte` and `main.css` in total isolation from each other.

 The solution to this problem is to define any custom styles you want to `@apply` in your components using the [plugin system](plugins) instead:

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          padding: theme('spacing.6'),
          boxShadow: theme('boxShadow.xl'),
        }
      })
    })
  ]
}
```

 This way any file processed by Tailwind that uses this config file will have access to those styles.

 Honestly though the best solution is to just not do weird stuff like this at all. Use Tailwind’s utilities directly in your markup the way they are intended to be used, and don’t abuse the `@apply` feature to do things like this and you will have a much better experience.

 ### @config

 Use the `@config` directive to specify which config file Tailwind should use when compiling that CSS file. This is useful for projects that need to use different configuration files for different CSS entry points.

 The path you provide to the `@config` directive is relative to that CSS file, and will take precedence over a path defined in your PostCSS configuration or in the Tailwind CLI.

 Note that if you’re using `postcss-import`, your `@import` statements need to come before `@config` for things to work correctly, as `postcss-import` is strict about following the CSS spec which requires `@import` statements to precede any other rules in the file.

 

Don’t put `@config` before your `@import` statements


 

admin.css



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

@import "tailwindcss/base";
@import "./custom-base.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";
```

 

Put your `@import` statements before the `@config` directive


 

admin.css



```
@import "tailwindcss/base";
@import "./custom-base.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";

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

 Functions
---------

 Tailwind adds a few custom functions you can use in your CSS to access Tailwind-specific values. These functions are evaluated at build-time, and are replaced by static values in your final CSS.

 ### theme()

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

 
```
.content-area {
  height: calc(100vh - theme(spacing.12));
}
```
 If you need to access a value that contains a dot (like the `2.5` value in the spacing scale), you can use square bracket notation:

 
```
.content-area {
  height: calc(100vh - theme(spacing[2.5]));
}
```
 Since Tailwind uses a [nested object syntax](customizing-colors#color-object-syntax) to define its default color palette, make sure to use dot notation to access the nested colors.

 

Don’t use the dash syntax when accessing nested color values


 
```
.btn-blue {
  background-color: theme(colors.blue-500);
}
```
 

Use dot notation to access nested color values


 
```
.btn-blue {
  background-color: theme(colors.blue.500);
}
```
 To adjust the opacity of a color retrieved with `theme`, use a slash followed by the opacity value you want to use:

 
```
.btn-blue {
  background-color: theme(colors.blue.500 / 75%);
}
```
 ### screen()

 The `screen` function allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.

 
```
@media screen(sm) {
  /* ... */
}
```
 This will resolve to the underlying screen value at build-time, generating a regular media query that matches specified breakpoint:

 
```
@media (min-width: 640px) {
  /* ... */
}
```







 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/functions-and-directives>

Handling Hover, Focus, and Other States
=======================================


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


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

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

 
```
<button class="bg-sky-500 hover:bg-sky-700 ...">
  Save changes
</button>
```
 How does this compare to traditional CSS?When writing CSS the traditional way, a single class name would do different things based on the current state.




Traditionally the same class name applies different styles on hover




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

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




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




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

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


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

 Tailwind includes modifiers for just about everything you’ll ever need, including:

 * [Pseudo-classes](hover-focus-and-other-states#pseudo-classes), like `:hover`, `:focus`, `:first-child`, and `:required`
* [Pseudo-elements](hover-focus-and-other-states#pseudo-elements), like `::before`, `::after`, `::placeholder`, and `::selection`
* [Media and feature queries](hover-focus-and-other-states#media-and-feature-queries), like responsive breakpoints, dark mode, and `prefers-reduced-motion`
* [Attribute selectors](hover-focus-and-other-states#attribute-selectors), like `[dir="rtl"]` and `[open]`

 These modifiers can even be [stacked](hover-focus-and-other-states#ordering-stacked-modifiers) to target more specific situations, for example changing the background color in dark mode, at the medium breakpoint, on hover:

 
```
<button class="dark:md:hover:bg-fuchsia-600 ...">
  Save changes
</button>
```
 In this guide you’ll learn about every modifier available in the framework, how to use them with your own custom classes, and even how to create your own.

 Pseudo-classes
--------------

 ### Hover, focus, and active

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

 
```
<button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 ...">
  Save changes
</button>
```
 Tailwind also includes modifiers for other interactive states like `:visited`, `:focus-within`, `:focus-visible`, and more.

 See the [pseudo-class reference](hover-focus-and-other-states#pseudo-class-reference) for a complete list of available pseudo-class modifiers.

 ### First, last, odd, and even

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

 
```
<ul role="list" class="p-6 divide-y divide-slate-200">
  {#each people as person}
    <!-- Remove top/bottom padding when first/last child -->
    <li class="flex py-4 first:pt-0 last:pb-0">
      <img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
      <div class="ml-3 overflow-hidden">
        <p class="text-sm font-medium text-slate-900">{person.name}</p>
        <p class="text-sm text-slate-500 truncate">{person.email}</p>
      </div>
    </li>
  {/each}
</ul>
```
 You can also style an element when it’s an odd or even child using the `odd` and `even` modifiers:

 
```
<table>
  <!-- ... -->
  <tbody>
    {#each people as person}
      <!-- Use a white background for odd rows, and slate-50 for even rows -->
      <tr class="odd:bg-white even:bg-slate-50">
        <td>{person.name}</td>
        <td>{person.title}</td>
        <td>{person.email}</td>
      </tr>
    {/each}
  </tbody>
</table>
```
 Tailwind also includes modifiers for other structural pseudo-classes like `:only-child`, `:first-of-type`, `:empty`, and more.

 See the [pseudo-class reference](hover-focus-and-other-states#pseudo-class-reference) for a complete list of available pseudo-class modifiers.

 ### Form states

 Style form elements in different states using modifiers like `required`, `invalid`, and `disabled`:

 
```
<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Username</span>
    <!-- Using form state modifiers, the classes can be identical for every input -->
    <input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
      invalid:border-pink-500 invalid:text-pink-600
      focus:invalid:border-pink-500 focus:invalid:ring-pink-500
    "/>
  </label>
  <!-- ... -->
</form>
```
 Using modifiers for this sort of thing can reduce the amount of conditional logic in your templates, letting you use the same set of classes regardless of what state an input is in and letting the browser apply the right styles for you.

 Tailwind also includes modifiers for other form states like `:read-only`, `:indeterminate`, `:checked`, and more.

 See the [pseudo-class reference](hover-focus-and-other-states#disabled) for a complete list of available pseudo-class modifiers.

 ### Styling based on parent state (group-{modifier})

 When you need to style an element based on the state of some *parent* element, mark the parent with the `group` class, and use `group-*` modifiers like `group-hover` to style the target element:

 
```
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>
```
 This pattern works with every pseudo-class modifier, for example `group-focus`, `group-active`, or even `group-odd`.

 #### Differentiating nested groups

 When nesting groups, you can style something based on the state of a *specific* parent group by giving that parent a unique group name using a `group/{name}` class, and including that name in modifiers using classes like `group-hover/{name}`:

 
```
<ul role="list">
  {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
      <img src="{person.imageUrl}" alt="" />
      <div>
        <a href="{person.url}">{person.name}</a>
        <p>{person.title}</p>
      </div>
      <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ...">
          <!-- ... -->
        </svg>
      </a>
    </li>
  {/each}
</ul>
```
 Groups can be named however you like and don’t need to be configured in any way — just name your groups directly in your markup and Tailwind will automatically generate the necessary CSS.

 #### Arbitrary groups

 You can create one-off `group-*` modifiers on the fly by providing your own selector as an [arbitrary value](adding-custom-styles#using-arbitrary-values) between square brackets:

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

 ### Styling based on sibling state (peer-{modifier})

 When you need to style an element based on the state of a *sibling* element, mark the sibling with the `peer` class, and use `peer-*` modifiers like `peer-invalid` to style the target element:

 
```
<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer ..."/>
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
      Please provide a valid email address.
    </p>
  </label>
</form>
```
 This makes it possible to do all sorts of neat tricks, like [floating labels](https://www.youtube.com/watch?v=nJzKi6oIvBA) for example without any JS.

 This pattern works with every pseudo-class modifier, for example `peer-focus`, `peer-required`, and `peer-disabled`.

 It’s important to note that the `peer` marker can only be used on *previous* siblings because of how the [general sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) works in CSS.

 

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


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

 When using multiple peers, you can style something on the state of a *specific* peer by giving that peer a unique name using a `peer/{name}` class, and including that name in modifiers using classes like `peer-checked/{name}`:

 
```
<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>

  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>
```
 Peers can be named however you like and don’t need to be configured in any way — just name your peers directly in your markup and Tailwind will automatically generate the necessary CSS.

 #### Arbitrary peers

 You can create one-off `peer-*` modifiers on the fly by providing your own selector as an [arbitrary value](adding-custom-styles#using-arbitrary-values) between square brackets:

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

 Pseudo-elements
---------------

 ### Before and after

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

 
```
<label class="block">
  <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
    Email
  </span>
  <input type="email" name="email" class="mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="you@example.com" />
</label>
```
 When using these modifiers, Tailwind will automatically add `content: ''` by default so you don’t have to specify it unless you want a different value:

 
```
<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  When you look
  <span class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block">
    <span class="relative text-white">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>
```
 It’s worth noting that you don’t really need `::before` and `::after` pseudo-elements for most things in Tailwind projects — it’s usually simpler to just use a real HTML element.

 For example, here’s the same design from above but using a `<span>` instead of the `::before` pseudo-element, which is a little easier to read and is actually less code:

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

```
 Save `before` and `after` for situations where it’s important that the content of the pseudo-element is not actually in the DOM and can’t be selected by the user.

 Note that if you’ve disabled our [preflight base styles](preflight), the content property will not be set to an empty string by default, and you will need to include `content-['']` any time you use the `before` and `after` modifiers.

 
If you’ve disabled preflight make sure to set the content manually


 
```
<div class="before:content-[''] before:block ...">
  <!-- ... -->
</div>
```
 ### Placeholder text

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

 
```
<label class="relative block">
  <span class="sr-only">Search</span>
  <span class="absolute inset-y-0 left-0 flex items-center pl-2">
    <svg class="h-5 w-5 fill-slate-300" viewBox="0 0 20 20"><!-- ... --></svg>
  </span>
  <input class="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm" placeholder="Search for anything..." type="text" name="search"/>
</label>
```
 ### File input buttons

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

 
```
<form class="flex items-center space-x-6">
  <div class="shrink-0">
    <img class="h-16 w-16 object-cover rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" />
  </div>
  <label class="block">
    <span class="sr-only">Choose profile photo</span>
    <input type="file" class="block w-full text-sm text-slate-500
      file:mr-4 file:py-2 file:px-4
      file:rounded-full file:border-0
      file:text-sm file:font-semibold
      file:bg-violet-50 file:text-violet-700
      hover:file:bg-violet-100
    "/>
  </label>
</form>
```
 Note that Tailwind’s [border reset](preflight#border-styles-are-reset-globally) is not applied to file input buttons. This means that to add a border to a file input button, you need to explicitly set the <border-style> using a class like `file:border-solid` alongside any <border-width> utility:

 
```
<input type="file" class="file:border file:border-solid ..." />
```
 ### List markers

 Style the counters or bullets in lists using the `marker` modifier:

 
```
<ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-500">
  <li>5 cups chopped Porcini mushrooms</li>
  <li>1/2 cup of olive oil</li>
  <li>3lb of celery</li>
</ul><ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-400">
  <li>5 cups chopped Porcini mushrooms</li>
  <li>1/2 cup of olive oil</li>
  <li>3lb of celery</li>
</ul>
```
 We’ve designed the `marker` modifier to be inheritable, so although you can use it directly on an `<li>` element, you can also use it on a parent to avoid repeating yourself.

 ### Highlighted text

 Style the active text selection using the `selection` modifier:

 
```
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
  <p>
    So I started to walk into the water. I won't lie to you boys, I was
    terrified. But I pressed on, and as I made my way past the breakers
    a strange calm came over me. I don't know if it was divine intervention
    or the kinship of all living things but I tell you Jerry at that moment,
    I <em>was</em> a marine biologist.
  </p>
</div>
```
 We’ve designed the `selection` modifier to be inheritable, so you can add it anywhere in the tree and it will be applied to all descendant elements.

 This makes it easy to set the selection color to match your brand across your entire site:

 
```
<html>
<head>
  <!-- ... -->
</head>
<body class="selection:bg-pink-300">
  <!-- ... -->
</body>
</html>
```
 ### First-line and first-letter

 Style the first line in a block of content using the `first-line` modifier, and the first letter using the `first-letter` modifier:

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

 Style the backdrop of a [native `<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) using the `backdrop` modifier:

 
```
<dialog class="backdrop:bg-gray-50">
  <form method="dialog">
    <!-- ... -->
  </form>
</dialog>
```
 If you’re using native `<dialog>` elements in your project, you may also want to read about [styling open/closed states](hover-focus-and-other-states#open-closed-state) using the `open` modifier.

 Media and feature queries
-------------------------

 ### Responsive breakpoints

 To style an element at a specific breakpoint, use responsive modifiers like `md` and `lg`.

 For example, this will render a 3-column grid on mobile, a 4-column grid on medium-width screens, and a 6-column grid on large-width screens:

 
```
<div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
  <!-- ... -->
</div>
```
 Check out the [Responsive Design](responsive-design) documentation for an in-depth look at how these features work.

 ### Prefers color scheme

 The `prefers-color-scheme` media query tells you whether the user prefers a light theme or dark theme, and is usually configured at the operating system level.

 Use utilities with no modifier to target light mode, and use the `dark` modifier to provide overrides for dark mode:

 
```
<div class="bg-white dark:bg-slate-900 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>
```
 Check out the [Dark Mode](dark-mode) documentation for an in-depth look at how this feature works.

 ### Prefers reduced motion

 The `prefers-reduced-motion` media query tells you if the user has requested that you minimize non-essential motion.

 Use the `motion-reduce` modifier to conditionally add styles when the user has requested reduced motion:

 
```
<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="motion-reduce:hidden animate-spin ..." viewBox="0 0 24 24"><!-- ... --></svg>
  Processing...
</button>
```
 Tailwind also includes a `motion-safe` modifier that only adds styles when the user has *not* requested reduced motion. This can be useful when using the `motion-reduce` helper would mean having to “undo” a lot of styles:

 
```
<!-- Using `motion-reduce` can mean lots of "undoing" styles -->
<button class="hover:-translate-y-0.5 transition motion-reduce:hover:translate-y-0 motion-reduce:transition-none ...">
  Save changes
</button>

<!-- Using `motion-safe` is less code in these situations -->
<button class="motion-safe:hover:-translate-x-0.5 motion-safe:transition ...">
  Save changes
</button>
```
 ### Prefers contrast

 The `prefers-contrast` media query tells you if the user has requested more or less contrast.

 Use the `contrast-more` modifier to conditionally add styles when the user has requested more contrast:

 
```
<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Social Security Number</span>
    <input class="border-slate-200 placeholder-slate-400 contrast-more:border-slate-400 contrast-more:placeholder-slate-500"/>
    <p class="mt-2 opacity-10 contrast-more:opacity-100 text-slate-600 text-sm">
      We need this to steal your identity.
    </p>
  </label>
</form>
```
 Tailwind also includes a `contrast-less` modifier you can use to conditionally add styles when the user has requested less contrast.

 ### Viewport orientation

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

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

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

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

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

 
```
<div class="flex supports-[display:grid]:grid ...">
  <!-- ... -->
</div>
```
 Under the hood the `supports-[...]` modifier generates [`@supports rules`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) and takes anything you’d use with `@supports (...)` between the square brackets, like a property/value pair, and even expressions using `and` and `or`.

 For terseness, if you only need to check if a property is supported (and not a specific value), you can just specify the property name:

 
```
<div class="bg-black/75 supports-[backdrop-filter]:bg-black/25 supports-[backdrop-filter]:backdrop-blur ...">
  <!-- ... -->
</div>
```
 You can configure shortcuts for common `@supports` rules you’re using in your project in the `theme.supports` section of your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    supports: {
      grid: 'display: grid',
    },
  },
}
```

 You can then use these custom `supports-*` modifiers in your project:

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

 ### ARIA states

 Use the `aria-*` modifier to conditionally style things based on [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes).

 For example, to apply the `bg-sky-700` class when the `aria-checked` attribute is set to `true`, use the `aria-checked:bg-sky-700` class:

 
```
<div aria-checked="true" class="bg-gray-600 aria-checked:bg-sky-700">
  <!-- ... -->
</div>
```
 By default we’ve included modifiers for the most common boolean ARIA attributes:

 

| Modifier | CSS |
| --- | --- |
| `aria-checked` | `&[aria-checked=“true”]` |
| `aria-disabled` | `&[aria-disabled=“true”]` |
| `aria-expanded` | `&[aria-expanded=“true”]` |
| `aria-hidden` | `&[aria-hidden=“true”]` |
| `aria-pressed` | `&[aria-pressed=“true”]` |
| `aria-readonly` | `&[aria-readonly=“true”]` |
| `aria-required` | `&[aria-required=“true”]` |
| `aria-selected` | `&[aria-selected=“true”]` |

 You can customize which `aria-*` modifiers are available by editing `theme.aria` or `theme.extend.aria` in your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      aria: {
        asc: 'sort="ascending"',
        desc: 'sort="descending"',
      },
    },
  },
};
```

 If you need to use a one-off `aria` modifier that doesn’t make sense to include in your theme, or for more complex ARIA attributes that take specific values, use square brackets to generate a property on the fly using any arbitrary value.

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

 ### Data attributes

 Use the `data-*` modifier to conditionally apply styles based on [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).

 Since there are no standard `data-*` attributes by definition, by default we only support arbitrary values out of the box, for example:

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

<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
  <!-- ... -->
</div>
```
 You can configure shortcuts for common data attribute selectors you’re using in your project in the `theme.data` section of your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    data: {
      checked: 'ui~="checked"',
    },
  },
}
```

 You can then use these custom `data-*` modifiers in your project:

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

 Use the `rtl` and `ltr` modifiers to conditionally add styles in right-to-left and left-to-right modes respectively when building multi-directional layouts:

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

```
 Note that the `ltr` modifier will not take effect unless the `dir` attribute is explicitly set to `ltr`, so if you are building a multi-directional site make sure to always set a direction, not just in `rtl` mode.

 
Always set the direction, even if left-to-right is your default


 
```
<html dir="ltr">
  <!-- ... -->
</html>
```
 Remember, these modifiers are only useful if you are building a site that needs to support *both* left-to-right and right-to-left layouts. If you’re building a site that only needs to support a single direction, you don’t need these modifiers — just apply the styles that make sense for your content.

 ### Open/closed state

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

 
```
<div class="max-w-lg mx-auto p-8">
  <details class="open:bg-white dark:open:bg-slate-900 open:ring-1 open:ring-black/5 dark:open:ring-white/10 open:shadow-lg p-6 rounded-lg" open>
    <summary class="text-sm leading-6 text-slate-900 dark:text-white font-semibold select-none">
      Why do they call it Ovaltine?
    </summary>
    <div class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
      <p>The mug is round. The jar is round. They should call it Roundtine.</p>
    </div>
  </details>
</div>

```
 Custom modifiers
----------------

 ### Using arbitrary variants

 Just like [arbitrary values](adding-custom-styles#using-arbitrary-values) let you use custom values with your utility classes, arbitrary variants let you write custom selector modifiers directly in your HTML.

 Arbitrary variants are just format strings that represent the selector, wrapped in square brackets. For example, this arbitrary modifier selects an element only when it is the third child:

 The format string is the same as what you’d use with the [`addVariant` plugin API](plugins#adding-variants), with the `&` representing the selector being modified.

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

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

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

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

 You can even combine at-rules and regular selector modifiers by including the selector modifier within curly braces after the at-rule:

 ### Creating a plugin

 If you find yourself using the same arbitrary modifier multiple times in your project, it might be worth extracting it to a plugin using the `addVariant` API:

 

tailwind.config.js



```
let plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addVariant }) {
      // Add a `third` variant, ie. `third:pb-0`
      addVariant('third', '&:nth-child(3)')
    })
  ]
}
```

 Learn more in the [adding variant plugins](plugins#adding-variants) documentation.

 Advanced topics
---------------

 ### Using with your own classes

 All of Tailwind’s modifiers are available to use with your own custom classes as long as you’ve defined them in one of Tailwind’s [layers](adding-custom-styles#using-css-and-layer) or added them using a [plugin](adding-custom-styles#writing-plugins):

 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}
```

 

HTML



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

 ### Ordering stacked modifiers

 When stacking modifiers, they are applied from the inside-out, like nested function calls:

 
```
// These modifiers:
'dark:group-hover:focus:opacity-100'

// ...are applied like this:
dark(groupHover(focus('opacity-100')))
```
 For the most part this doesn’t actually matter, but there are a few situations where the order you use actually generates meaningfully different CSS.

 For example, if you have `darkMode` configured to `class`, combining the `dark` and `group-hover` modifiers generates a different result depending on the order you use:

 
```
/* dark:group-hover:opacity-100 */
.dark .group:hover .dark\:group-hover\:opacity-100 {
  opacity: 1;
}

/* group-hover:dark:opacity-100 */
.group:hover .dark .group-hover\:dark\:opacity-100 {
  opacity: 1;
}
```
 In the first example, the `dark` element needs to be a parent of the `group` element, but in the second example it’s reversed.

 Another place this is important is when using modifiers like `prose-headings` that are included with the official typography plugin:

 
```
/* prose-headings:hover:underline */
.prose-headings\:hover\:underline:hover :is(:where(h1, h2, h3, h4, th)) {
  text-decoration: underline;
}

/* hover:prose-headings:underline */
.hover\:prose-headings\:underline :is(:where(h1, h2, h3, h4, th)):hover {
  text-decoration: underline;
}
```
 In the first example, every single heading is underlined when you hover over the article itself, whereas in the second example each heading is only underlined when you hover over that heading.

 Appendix
--------

 ### Quick reference

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

 

| Modifier | CSS |
| --- | --- |
| [hover](#hover) | `&:hover` |
| [focus](#focus) | `&:focus` |
| [focus-within](#focus-within) | `&:focus-within` |
| [focus-visible](#focus-visible) | `&:focus-visible` |
| [active](#active) | `&:active` |
| [visited](#visited) | `&:visited` |
| [target](#target) | `&:target` |
| [first](#first) | `&:first-child` |
| [last](#last) | `&:last-child` |
| [only](#only) | `&:only-child` |
| [odd](#odd) | `&:nth-child(odd)` |
| [even](#even) | `&:nth-child(even)` |
| [first-of-type](#first-of-type) | `&:first-of-type` |
| [last-of-type](#last-of-type) | `&:last-of-type` |
| [only-of-type](#only-of-type) | `&:only-of-type` |
| [empty](#empty) | `&:empty` |
| [disabled](#disabled) | `&:disabled` |
| [enabled](#enabled) | `&:enabled` |
| [checked](#checked) | `&:checked` |
| [indeterminate](#indeterminate) | `&:indeterminate` |
| [default](#default) | `&:default` |
| [required](#required) | `&:required` |
| [valid](#valid) | `&:valid` |
| [invalid](#invalid) | `&:invalid` |
| [in-range](#in-range) | `&:in-range` |
| [out-of-range](#out-of-range) | `&:out-of-range` |
| [placeholder-shown](#placeholder-shown) | `&:placeholder-shown` |
| [autofill](#autofill) | `&:autofill` |
| [read-only](#read-only) | `&:read-only` |
| [before](#before-and-after) | `&::before` |
| [after](#before-and-after) | `&::after` |
| [first-letter](#first-line-and-first-letter) | `&::first-letter` |
| [first-line](#first-line-and-first-letter) | `&::first-line` |
| [marker](#highlighted-text) | `&::marker` |
| [selection](#selection) | `&::selection` |
| [file](#file-input-buttons) | `&::file-selector-button` |
| [backdrop](#dialog-backdrops) | `&::backdrop` |
| [placeholder](#placeholder) | `&::placeholder` |
| [sm](#responsive-breakpoints) | `@media (min-width: 640px)` |
| [md](#responsive-breakpoints) | `@media (min-width: 768px)` |
| [lg](#responsive-breakpoints) | `@media (min-width: 1024px)` |
| [xl](#responsive-breakpoints) | `@media (min-width: 1280px)` |
| [2xl](#responsive-breakpoints) | `@media (min-width: 1536px)` |
| [min-[…]](#responsive-breakpoints) | `@media (min-width: …)` |
| [max-sm](#responsive-breakpoints) | `@media not all and (min-width: 640px)` |
| [max-md](#responsive-breakpoints) | `@media not all and (min-width: 768px)` |
| [max-lg](#responsive-breakpoints) | `@media not all and (min-width: 1024px)` |
| [max-xl](#responsive-breakpoints) | `@media not all and (min-width: 1280px)` |
| [max-2xl](#responsive-breakpoints) | `@media not all and (min-width: 1536px)` |
| [max-[…]](#responsive-breakpoints) | `@media (max-width: …)` |
| [dark](#prefers-color-scheme) | `@media (prefers-color-scheme: dark)` |
| [portrait](#viewport-orientation) | `@media (orientation: portrait)` |
| [landscape](#viewport-orientation) | `@media (orientation: landscape)` |
| [motion-safe](#prefers-reduced-motion) | `@media (prefers-reduced-motion: no-preference)` |
| [motion-reduce](#prefers-reduced-motion) | `@media (prefers-reduced-motion: reduce)` |
| [contrast-more](#prefers-contrast) | `@media (prefers-contrast: more)` |
| [contrast-less](#prefers-contrast) | `@media (prefers-contrast: less)` |
| [print](#print-styles) | `@media print` |
| [supports-[…]](#supports) | `@supports (…)` |
| [aria-checked](#aria-states) | `&[aria-checked=“true”]` |
| [aria-disabled](#aria-states) | `&[aria-disabled=“true”]` |
| [aria-expanded](#aria-states) | `&[aria-expanded=“true”]` |
| [aria-hidden](#aria-states) | `&[aria-hidden=“true”]` |
| [aria-pressed](#aria-states) | `&[aria-pressed=“true”]` |
| [aria-readonly](#aria-states) | `&[aria-readonly=“true”]` |
| [aria-required](#aria-states) | `&[aria-required=“true”]` |
| [aria-selected](#aria-states) | `&[aria-selected=“true”]` |
| [aria-[…]](#aria-states) | `&[aria-…]` |
| [data-[…]](#data-attributes) | `&[data-…]` |
| [rtl](#rtl-support) | `[dir=“rtl”] &` |
| [ltr](#rtl-support) | `[dir=“ltr”] &` |
| [open](#open-closed-state) | `&[open]` |

 ### Pseudo-class reference

 This is a comprehensive list of examples for all the pseudo-class modifiers included in Tailwind to complement the [pseudo-classes documentation](hover-focus-and-other-states#pseudo-classes) at the beginning of this guide.

 #### hover (:hover)

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

 
```
<div class="bg-black hover:bg-white ...">
  <!-- ... -->
</div>
```
 #### focus (:focus)

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

 
```
<input class="border-gray-300 focus:border-blue-400 ..." />
```
 #### focus-within (:focus-within)

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

 
```
<div class="focus-within:shadow-lg ...">
  <input type="text" />
</div>
```
 #### focus-visible (:focus-visible)

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

 
```
<button class="focus:outline-none focus-visible:ring ...">
  Submit
</button>
```
 #### active (:active)

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

 
```
<button class="bg-blue-500 active:bg-blue-600 ...">
  Submit
</button>
```
 #### visited (:visited)

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

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

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

 
```
<div id="about" class="target:shadow-lg ...">
  <!-- ... -->
</div>
```
 #### first (:first-child)

 Style an element if it’s the first child using the `first` modifier:

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

 Style an element if it’s the last child using the `last` modifier:

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

 Style an element if it’s the only child using the `only` modifier:

 
```
<ul>
  {#each people as person}
    <li class="py-4 only:py-0 ...">
      <!-- ... -->
    </li>
  {/each}
</ul>
```
 #### odd (:nth-child(odd))

 Style an element if it’s an oddly numbered child using the `odd` modifier:

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

 Style an element if it’s an evenly numbered child using the `even` modifier:

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

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

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

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

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

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

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

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

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

 Style an input when it’s disabled using the `disabled` modifier:

 
```
<input class="disabled:opacity-75 ..." />
```
 #### enabled (:enabled)

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

 
```
<input class="enabled:hover:border-gray-400 disabled:opacity-75 ..." />
```
 #### checked (:checked)

 Style a checkbox or radio button when it’s checked using the `checked` modifier:

 
```
<input type="checkbox" class="appearance-none checked:bg-blue-500 ..." />
```
 #### indeterminate (:indeterminate)

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

 
```
<input type="checkbox" class="appearance-none indeterminate:bg-gray-300 ..." />
```
 #### default (:default)

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

 
```
<input type="checkbox" class="default:ring-2 ..." />
```
 #### required (:required)

 Style an input when it’s required using the `required` modifier:

 
```
<input class="required:border-red-500 ..." />
```
 #### valid (:valid)

 Style an input when it’s valid using the `valid` modifier:

 
```
<input class="valid:border-green-500 ..." />
```
 #### invalid (:invalid)

 Style an input when it’s invalid using the `invalid` modifier:

 
```
<input class="invalid:border-red-500 ..." />
```
 #### in-range (:in-range)

 Style an input when it’s value is within a specified range limit using the `in-range` modifier:

 
```
<input min="1" max="5" class="in-range:border-green-500 ..." />
```
 #### out-of-range (:out-of-range)

 Style an input when it’s value is outside of a specified range limit using the `out-of-range` modifier:

 
```
<input min="1" max="5" class="out-of-range:border-red-500 ..." />
```
 #### placeholder-shown (:placeholder-shown)

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

 
```
<input class="placeholder-shown:border-gray-500 ..." placeholder="you@example.com" />
```
 #### autofill (:autofill)

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

 
```
<input class="autofill:bg-yellow-200 ..." />
```
 #### read-only (:read-only)

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

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







 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/hover-focus-and-other-states>

Dark Mode
=========


Using Tailwind CSS to style your site in dark mode.


Basic usage
-----------

 Now that dark mode is a first-class feature of many operating systems, it’s becoming more and more common to design a dark version of your website to go along with the default design.

 To make this as easy as possible, Tailwind includes a `dark` variant that lets you style your site differently when dark mode is enabled:

 
```
<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>
```
 By default this uses the `prefers-color-scheme` CSS media feature, but you can also build sites that support toggling dark mode manually using the [‘class’ strategy](dark-mode#toggling-dark-mode-manually).

 Toggling dark mode manually
---------------------------

 If you want to support toggling dark mode manually instead of relying on the operating system preference, use the `class` strategy instead of the `media` strategy:

 

tailwind.config.js



```
module.exports = {
  darkMode: 'class',
  // ...
}
```

 Now instead of `dark:{class}` classes being applied based on `prefers-color-scheme`, they will be applied whenever `dark` class is present earlier in the HTML tree.

 
```
<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>
```
 If you’ve set [a prefix](configuration#prefix) in your Tailwind config, be sure to add that to the `dark` class. For example, if you have a prefix of `tw-`, you’ll need to use the `tw-dark` class to enable dark mode.

 How you add the `dark` class to the `html` element is up to you, but a common approach is to use a bit of JS that reads a preference from somewhere (like `localStorage`) and updates the DOM accordingly.

 ### Supporting system preference and manual selection

 The `class` strategy can be used to support both the user’s system preference *or* a manually selected mode by using the [`Window.matchMedia()` API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).

 Here’s a simple example of how you can support light mode, dark mode, as well as respecting the operating system preference:

 

spaghetti.js



```
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')
```

 Again you can manage this however you like, even storing the preference server-side in a database and rendering the class on the server — it’s totally up to you.

 ### Customizing the class name

 Some frameworks (like NativeScript) have their own approach to enabling dark mode and add a different class name when dark mode is active.

 You can customize the dark mode selector name by setting `darkMode` to an array with your custom selector as the second item:

 

tailwind.config.js



```
module.exports = {
  darkMode: ['class', '[data-mode="dark"]'],
  // ...
}
```








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/dark-mode>

Reusing Styles
==============


Managing duplication and creating reusable abstractions.


Tailwind encourages a <utility-first> workflow, where designs are implemented using only low-level utility classes. This is a powerful way to avoid premature abstraction and the pain points that come with it.

 But of course as a project grows, you’ll inevitably find yourself repeating common utility combinations to recreate the same design in many different places.

 For example, in the template below you can see the utility classes for each avatar image are repeated five separate times:

 
```
<div>
  <div class="flex items-center space-x-2 text-base">
    <h4 class="font-semibold text-slate-900">Contributors</h4>
    <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">204</span>
  </div>
  <div class="mt-3 flex -space-x-2 overflow-hidden">
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
  </div>
  <div class="mt-3 text-sm font-medium">
    <a href="#" class="text-blue-500">+ 198 others</a>
  </div>
</div>
```
 Don’t panic! In this guide, you’ll learn about different strategies for reusing styles in your project, as well as best practices for when to employ each one.

 Using editor and language features
----------------------------------

 A lot of the time, duplication like this isn’t even a real problem because it’s all together in one place, or doesn’t even actually exist because you’re iterating over an array of items and only writing the markup once.

 If the styles you need to reuse only need to be reused within a single file, multi-cursor editing and loops are the simplest way to manage any duplication.

 ### Multi-cursor editing

 When duplication is localized to a group of elements in a single file, the easiest way to deal with it to use [multi-cursor editing](https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor) to quickly select and edit the class list for each element at once:

 
```
<nav class="flex justify-center space-x-4">
  <a href="/dashboard" class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">Home</a>
  <a href="/team" class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">Team</a>
  <a href="/projects" class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">Projects</a>
  <a href="/reports" class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">Reports</a>
</nav>

```
 You’d be surprised at how often this ends up being the best solution. If you can quickly edit all of the duplicated class lists simultaneously, there’s no benefit to introducing any additional abstraction.

 ### Loops

 Before you assume you’re going to need to extract a component or create a custom class for something, make sure you’re *actually* using it more than once in your template.

 A lot of the time a design element that shows up more than once in the rendered page is only actually authored once because the actual markup is rendered in a loop.

 For example, the duplicate avatars at the beginning of this guide would almost certainly be rendered in a loop in a real project:

 
```
<div>
  <div class="flex items-center space-x-2 text-base">
    <h4 class="font-semibold text-slate-900">Contributors</h4>
    <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">204</span>
  </div>
  <div class="mt-3 flex -space-x-2 overflow-hidden">
    {#each contributors as user}
      <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="{user.avatarUrl}" alt="{user.handle}"/>
    {/each}
  </div>
  <div class="mt-3 text-sm font-medium">
    <a href="#" class="text-blue-500">+ 198 others</a>
  </div>
</div>
```
 You could even rewrite the navigation example using a loop or `map` if you preferred as well:

 
```
<nav className="flex sm:justify-center space-x-4">
  {[
    ['Home', '/dashboard'],
    ['Team', '/team'],
    ['Projects', '/projects'],
    ['Reports', '/reports'],
  ].map(([title, url]) => (
    <a href={url} className="rounded-lg px-3 py-2 text-slate-700 font-medium hover:bg-slate-100 hover:text-slate-900">{title}</a>
  ))}
</nav>
```
 When elements are rendered in a loop like this, the actual class list is only written once so there’s no actual duplication problem to solve.

 Extracting components and partials
----------------------------------

 If you need to reuse some styles across multiple files, the best strategy is to create a *component* if you’re using a front-end framework like React, Svelte, or Vue, or a *template partial* if you’re using a templating language like Blade, ERB, Twig, or Nunjucks.

 

VacationCard.vue



```
<template>
  <div>
    <img class="rounded" :src="img" :alt="imgAlt">
    <div class="mt-2">
      <div>
        <div class="text-xs text-slate-600 uppercase font-bold tracking-wider">{{ eyebrow }}</div>
        <div class="font-bold text-slate-700 leading-snug">
          <a :href="url" class="hover:underline">{{ title }}</a>
        </div>
        <div class="mt-2 text-sm text-slate-600">{{ pricing }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['img', 'imgAlt', 'eyebrow', 'title', 'pricing', 'url']
  }
</script>
```

 Now you can use this component in as many places as you like, while still having a single source of truth for the styles so they can easily be updated together in one place.

 ### Compared to CSS abstractions

 Unless a component is a single HTML element, the information needed to define it can’t be captured in CSS alone. For anything even remotely complex, the HTML structure is just as important as the CSS.

 

Don’t rely on CSS classes to extract complex components


 
```
<!-- Even with custom CSS, you still need to duplicate this HTML structure -->
<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification { /* ... */ }
  .chat-notification-logo-wrapper { /* ... */ }
  .chat-notification-logo { /* ... */ }
  .chat-notification-content { /* ... */ }
  .chat-notification-title { /* ... */ }
  .chat-notification-message { /* ... */ }
</style>
```
 Even if you create classes for the different elements in a component like this, *you still have to duplicate the HTML every time you want to use this component*. Sure you can update the font-size for every instance in a single place, but what if you need to turn the title into a link?

 Components and template partials solve this problem much better than CSS-only abstractions because a component can encapsulate the HTML *and* the styles. Changing the font-size for every instance is just as easy as it is with CSS, but now you can turn all of the titles into links in a single place too.

 

Create a template partial or JavaScript component


 

Notification.jsx



```
function Notification({ imageUrl, imageAlt, title, message }) {
  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
      <div className="shrink-0">
        <img className="h-12 w-12" src={imageUrl.src} alt={imageAlt}>
      </div>
      <div>
        <div className="text-xl font-medium text-black">{title}</div>
        <p className="text-slate-500">{message}</p>
      </div>
    </div>
  )
}
```

 When you create components and template partials like this, there’s no reason to use anything other than utility classes because you already have a single source of truth for the styles.

 Extracting classes with @apply
------------------------------

 If you’re using a traditional templating language like ERB or Twig, creating a template partial for something as small as a button can feel like overkill compared to a simple CSS class like `btn`.

 While it’s highly recommended that you create proper template partials for more complex components, you can use Tailwind’s `@apply` directive to extract repeated utility patterns to custom CSS classes when a template partial feels heavy-handed.

 Here’s what a `btn-primary` class might look like using `@apply` to compose it from existing utilities:

 

HTML



```
<!-- Before extracting a custom class -->
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
  Save changes
</button>

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>
```

  

CSS



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}
```

 Learn more about `@apply` and `@layer` in the [Functions & Directives](functions-and-directives#layer) documentation.

 ### Avoiding premature abstraction

 Whatever you do, **don’t use `@apply` just to make things look “cleaner”**. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse.

 If you start using `@apply` for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you, for example:

 * **You have to think up class names all the time** — nothing will slow you down or drain your energy like coming up with a class name for something that doesn’t deserve to be named.
* **You have to jump between multiple files to make changes** — which is a way bigger workflow killer than you’d think before co-locating everything together.
* **Changing styles is scarier** — CSS is global, are you *sure* you can change the min-width value in that class without breaking something in another part of the site?
* **Your CSS bundle will be bigger** — oof.

 If you’re going to use `@apply`, use it for very small, highly reusable things like buttons and form controls — and even then only if you’re not using a framework like React where a component would be a better choice.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/reusing-styles>

Adding Custom Styles
====================


Best practices for adding your own custom styles to Tailwind.


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 to the `theme` section of your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}
```

 Learn more about customizing your theme in the [Theme Configuration](theme) documentation.

 Using arbitrary values
----------------------

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

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

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

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

 
```
<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
  <!-- ... -->
</div>
```
 It’s even possible to use the [`theme` function](functions-and-directives#theme) to reference the design tokens in your `tailwind.config.js` file:

 
```
<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
  <!-- ... -->
</div>
```
 When using a CSS variable as an arbitrary value, wrapping your variable in `var(...)` isn’t needed — just providing the actual variable name is enough:

 
```
<div class="bg-[--my-color]">
  <!-- ... -->
</div>
```
 ### 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:

 
```
<div class="[mask-type:luminance]">
  <!-- ... -->
</div>
```
 This is *really* like inline styles, but again with the benefit that you can use modifiers:

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

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

 Learn more in the [arbitrary variants](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:

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

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

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

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

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

 
```
<div class="text-[var(--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:

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

<!-- Will generate a color utility -->
<div class="text-[color:var(--my-var)]">...</div>
```
 Using CSS and @layer
--------------------

 When you need to add truly custom CSS rules to a Tailwind project, the easiest approach is to just add the custom CSS to your stylesheet:

 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

.my-custom-style {
  /* ... */
}
```

 For more power, you can also use the `@layer` directive to add styles to Tailwind’s `base`, `components`, and `utilities` layers:

 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .my-custom-style {
    /* ... */
  }
}
```

 Why does Tailwind group styles into “layers”?In CSS, the order of the rules in your stylesheet decides which declaration wins when two selectors have the same specificity:



```
.btn {
  background: blue;
  /* ... */
}

.bg-black {
  background: black;
}
```

Here, both buttons will be black since `.bg-black` comes after `.btn` in the CSS:



```
<button class="btn bg-black">...</button>
<button class="bg-black btn">...</button>
```

To manage this, Tailwind organizes the styles it generates into three different “layers” — a concept popularized by [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/#what-is-itcss).


* The `base` layer is for things like reset rules or default styles applied to plain HTML elements.
* The `components` layer is for class-based styles that you want to be able to override with utilities.
* The `utilities` layer is for small, single-purpose classes that should always take precedence over any other styles.


Being explicit about this makes it easier to understand how your styles will interact with each other, and using the `@layer` directive lets you control the final declaration order while still organizing your actual code in whatever way you like.

 The `@layer` directive helps you control declaration order by automatically relocating your styles to the corresponding `@tailwind` directive, and also enables features like [modifiers](adding-custom-styles#using-modifiers-with-custom-css) and [tree-shaking](adding-custom-styles#removing-unused-custom-css) for your own custom CSS.

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

 
```
<!doctype html>
<html lang="en" class="text-gray-900 bg-gray-100 font-serif">
  <!-- ... -->
</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:

 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  /* ... */
}
```

 Use the [`theme`](functions-and-directives#theme) function or [`@apply`](functions-and-directives#apply) directive when adding custom base styles if you want to refer to any of the values defined in your <theme>.

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

 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }
  /* ... */
}
```

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

 
```
<!-- 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 [Reusing Styles](reusing-styles) for our recommendations.

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

 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

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

 Use the [`theme`](functions-and-directives#theme) function or [`@apply`](functions-and-directives#apply) directive when adding custom component styles if you want to refer to any of the values defined in your <theme>.

 ### Adding custom utilities

 Add any of your own custom utility classes to Tailwind’s `utilities` layer:

 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}
```

 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.

 ### Using modifiers with custom CSS

 Any custom styles you add to Tailwind with `@layer` will automatically support Tailwind’s modifier syntax for handling things like hover states, responsive breakpoints, dark mode, and more.

 

CSS



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}
```

 

HTML



```
<div class="lg:dark:content-auto">
  <!-- ... -->
</div>
```

 Learn more about how these modifiers work in the [Hover, Focus, and Other States](hover-focus-and-other-states) documentation.

 ### Removing unused custom CSS

 Any custom styles you add to the `base`, `components`, or `utilities` layers will only be included in your compiled CSS if those styles are actually used in your HTML.

 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* This won't be included in your compiled CSS unless you actually use it */
  .card {
    /* ... */
  }
}
```

 If you want to add some custom CSS that should always be included, add it to your stylesheet without using the `@layer` directive:

 

main.css



```
@tailwind base;
@tailwind components;

/* This will always be included in your compiled CSS */
.card {
  /* ... */
}

@tailwind utilities;
```

 Make sure to put your custom styles where they need to go to get the precedence behavior you want. In the example above, we’ve added the `.card` class before `@tailwind utilities` to make sure utilities can still override it.

 ### Using multiple CSS files

 If you are writing a lot of CSS and organizing it into multiple files, make sure those files are combined into a single stylesheet before processing them with Tailwind, or you’ll see errors about using `@layer` without the corresponding `@tailwind` directive.

 The easiest way to do this is using the [postcss-import](https://github.com/postcss/postcss-import) plugin:

 

postcss.config.js



```
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

```

 Learn more in our [build-time imports](https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports) documentation.

 ### Layers and per-component CSS

 Component frameworks like Vue and Svelte support adding per-component styles within a `<style>` block that lives in each component file.

 While you can use features like `@apply` and `theme` inside component styles like this, the `@layer` directive will not work and you’ll see an error about `@layer` being used without a matching `@tailwind` directive:

 

Don’t use `@layer` in component styles


 

Card.svelte



```
<div>
  <slot></slot>
</div>

<style>
  /* Won't work because this file is processed in isolation */
  @layer components {
    div {
      background-color: theme('colors.white');
      border-radius: theme('borderRadius.lg');
      padding: theme('spacing.6');
      box-shadow: theme('boxShadow.xl');
    }
  }
</style>
```

 This is because under-the-hood, frameworks like Vue and Svelte are processing every single `<style>` block independently, and running your PostCSS plugin chain against each one in isolation.

 That means if you have 10 components that each have a `<style>` block, Tailwind is being run 10 separate times, and each run has zero knowledge about the other runs. Because of this, Tailwind can’t take the styles you define in a `@layer` and move them to the corresponding `@tailwind` directive, because as far as Tailwind can tell there is no `@tailwind` directive to move it to.

 One solution to this is to simply *not* use `@layer` inside your component styles:

 

Add your styles without using `@layer`


 

Card.svelte



```
<div>
  <slot></slot>
</div>

<style>
  div {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }
</style>
```

 You lose the ability to control the precedence of your styles, but unfortunately that’s totally out of our control because of how these tools work.

 Our recommendation is that you just don’t use component styles like this at all and instead use Tailwind the way it’s intended to be used — as a single global stylesheet where you use the classes directly in your HTML:

 

Use Tailwind’s utilities instead of component styles


 

Card.svelte



```
<div class="bg-white rounded-lg p-6 shadow-xl">
  <slot></slot>
</div>
```

 Writing plugins
---------------

 You can also add custom styles to your project using Tailwind’s plugin system instead of using a CSS file:

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addBase, addComponents, addUtilities, theme }) {
      addBase({
        'h1': {
          fontSize: theme('fontSize.2xl'),
        },
        'h2': {
          fontSize: theme('fontSize.xl'),
        },
      })
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          padding: theme('spacing.6'),
          boxShadow: theme('boxShadow.xl'),
        }
      })
      addUtilities({
        '.content-auto': {
          contentVisibility: 'auto',
        }
      })
    })
  ]
}
```

 Learn more about writing your own plugins in the [Plugins](plugins) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/adding-custom-styles>

Configuration
=============


A guide to configuring and customizing your Tailwind installation.


Because Tailwind is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind.

 By default, Tailwind will look for an optional `tailwind.config.js` file at the root of your project where you can define any customizations.

 

tailwind.config.js



```
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}
```

 Every section of the config file is optional, so you only have to specify what you’d like to change. Any missing sections will fall back to Tailwind’s [default configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js).

 Creating your configuration file
--------------------------------

 Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package:

 
```
npx tailwindcss init
```
 This will create a minimal `tailwind.config.js` file at the root of your project:

 

tailwind.config.js



```
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

 ### Using a different file name

 To use a name other than `tailwind.config.js`, pass it as an argument on the command-line:

 
```
npx tailwindcss init tailwindcss-config.js
```
 When you use a custom file name, you will need to specify it as a command-line argument when compiling your CSS with the Tailwind CLI tool:

 
```
npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css
```
 If you’re using Tailwind as a PostCSS plugin, you will need to specify your custom configuration path in your PostCSS configuration:

 

postcss.config.js



```
module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
  },
}
```

 Alternatively, you can specify your custom configuration path using the `@config` directive:

 
```
@config "./tailwindcss-config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;
```
 Learn more about the `@config` directive in the [Functions & Directives](functions-and-directives#config) documentation.

 ### Generating a PostCSS configuration file

 Use the `-p` flag if you’d like to also generate a basic `postcss.config.js` file alongside your `tailwind.config.js` file:

 
```
npx tailwindcss init -p
```
 This will generate a `postcss.config.js` file in your project that looks like this:

 

postcss.config.js



```
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

 ### Scaffolding the entire default configuration

 For most users we encourage you to keep your config file as minimal as possible, and only specify the things you want to customize.

 If you’d rather scaffold a complete configuration file that includes all of Tailwind’s default configuration, use the `--full` option:

 
```
npx tailwindcss init --full
```
 You’ll get a file that matches the [default configuration file](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js) Tailwind uses internally.

 Configuration options
---------------------

 ### Content

 The `content` section is where you configure the paths to all of your HTML templates, JS components, and any other files that contain Tailwind class names.

 

tailwind.config.js



```
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}
```

 Learn more about configuring your content sources in the [Content Configuration](content-configuration) documentation.

 ### Theme

 The `theme` section is where you define your color palette, fonts, type scale, border sizes, breakpoints — anything related to the visual design of your site.

 

tailwind.config.js



```
module.exports = {
  // ...
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}
```

 Learn more about the default theme and how to customize it in the [theme configuration guide](theme).

 ### Plugins

 The `plugins` section allows you to register plugins with Tailwind that can be used to generate extra utilities, components, base styles, or custom variants.

 

tailwind.config.js



```
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}
```

 Learn more about writing your own plugins in the [plugin authoring guide](plugins).

 ### Presets

 The `presets` section allows you to specify your own custom base configuration instead of using Tailwind’s default base configuration.

 

tailwind.config.js



```
module.exports = {
  // ...
  presets: [
    require('@acmecorp/base-tailwind-config')
  ],

  // Project-specific customizations
  theme: {
    //...
  },
}
```

 Learn more about presets in the [presets documentation](presets).

 ### Prefix

 The `prefix` option allows you to add a custom prefix to all of Tailwind’s generated utility classes. This can be really useful when layering Tailwind on top of existing CSS where there might be naming conflicts.

 For example, you could add a `tw-` prefix by setting the `prefix` option like so:

 

tailwind.config.js



```
module.exports = {
  prefix: 'tw-',
}
```

 Now every class will be generated with the configured prefix:

 
```
.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* etc. */
```
 It’s important to understand that this prefix is added *after* any variant modifiers. That means that classes with responsive or state modifiers like `sm:` or `hover:` will still have the responsive or state modifier *first*, with your custom prefix appearing after the colon:

 
```
<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>
```
 The dash modifier for negative values should be added before your prefix, so `-mt-8` would become `-tw-mt-8` if you’ve configured `tw-` as your prefix:

 
```
<div class="-tw-mt-8">
  <!-- -->
</div>
```
 Prefixes are only added to classes generated by Tailwind; **no prefix will be added to your own custom classes.**

 That means if you add your own custom utility like this:

 
```
@layer utilities {
  .bg-brand-gradient { /* ... */ }
}
```
 …the generated variants will not have your configured prefix:

 
```
.bg-brand-gradient { /* ... */ }
.hover\:bg-brand-gradient:hover { /* ... */ }
```
 If you’d like to prefix your own utilities as well, just add the prefix to the class definition:

 
```
@layer utilities {
  .tw-bg-brand-gradient { /* ... */ }
}
```
 ### Important

 The `important` option lets you control whether or not Tailwind’s utilities should be marked with `!important`. This can be really useful when using Tailwind with existing CSS that has high specificity selectors.

 To generate utilities as `!important`, set the `important` key in your configuration options to `true`:

 

tailwind.config.js



```
module.exports = {
  important: true,
}
```

 Now all of Tailwind’s utility classes will be generated as `!important`:

 
```
.leading-none {
  line-height: 1 !important;
}
.leading-tight {
  line-height: 1.25 !important;
}
.leading-snug {
  line-height: 1.375 !important;
}
/* etc. */
```
 This also applies to any custom utilities you define in your CSS using the `@layer utilities` directive:

 
```
/* Input */
@layer utilities {
  .bg-brand-gradient {
    background-image: linear-gradient(#3490dc, #6574cd);
  }
}

/* Output */
.bg-brand-gradient {
  background-image: linear-gradient(#3490dc, #6574cd) !important;
}
```
 #### Selector strategy

 Setting `important` to `true` can introduce some issues when incorporating third-party JS libraries that add inline styles to your elements. In those cases, Tailwind’s `!important` utilities defeat the inline styles, which can break your intended design.

 To get around this, you can set `important` to an ID selector like `#app` instead:

 

tailwind.config.js



```
module.exports = {
  // ...
  important: '#app',
}
```

 This configuration will prefix all of your utilities with the given selector, effectively increasing their specificity without actually making them `!important`.

 After you specify the `important` selector, you’ll need to ensure that the root element of your site matches it. Using the example above, we would need to set our root element’s `id` attribute to `app` in order for styles to work properly.

 After your configuration is all set up and your root element matches the selector in your Tailwind config, all of Tailwind’s utilities will have a high enough specificity to defeat other classes used in your project, **without** interfering with inline styles:

 
```
<html>
<!-- ... -->
<style>
  .high-specificity .nested .selector {
    color: blue;
  }
</style>
<body id="app">
  <div class="high-specificity">
    <div class="nested">
      <!-- Will be red-500 -->
      <div class="selector text-red-500"><!-- ... --></div>
    </div>
  </div>

  <!-- Will be #bada55 -->
  <div class="text-red-500" style="color: #bada55;"><!-- ... --></div>
</body>
</html>
```
 When using the selector strategy, be sure that the template file that includes your root selector is included in your [content configuration](https://tailwindcss.com/docs/optimizing-for-production#basic-usage), otherwise all of your CSS will be removed when building for production.

 #### Important modifier

 Alternatively, you can make any utility important by adding a `!` character to the beginning:

 
```
<p class="font-bold !font-medium">
  This will be medium even though bold comes later in the CSS.
</p>
```
 The `!` always goes at the beginning of the utility name, after any variants, but before any prefix:

 
```
<div class="sm:hover:!tw-font-bold">
```
 This can be useful in rare situations where you need to increase specificity because you’re at war with some styles you don’t control.

 ### Separator

 The `separator` option lets you customize which character should be used to separate modifiers (screen sizes, `hover`, `focus`, etc.) from utility names (`text-center`, `items-end`, etc.).

 We use a colon by default (`:`), but it can be useful to change this if you’re using a templating language like [Pug](https://pugjs.org) that doesn’t support special characters in class names.

 

tailwind.config.js



```
module.exports = {
  separator: '_',
}
```

 ### Core Plugins

 The `corePlugins` section lets you completely disable classes that Tailwind would normally generate by default if you don’t need them for your project.

 To disable specific core plugins, provide an object for `corePlugins` that sets those plugins to `false`:

 

tailwind.config.js



```
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}
```

 If you’d like to safelist which core plugins should be enabled, provide an array that includes a list of the core plugins you’d like to use:

 

tailwind.config.js



```
module.exports = {
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
    // ...
  ]
}
```

 If you’d like to disable all of Tailwind’s core plugins and simply use Tailwind as a tool for processing your own custom plugins, provide an empty array:

 

tailwind.config.js



```
module.exports = {
  corePlugins: []
}
```

 Here’s a list of every core plugin for reference:

 

| Core Plugin | Description |
| --- | --- |
| `accentColor` | The `accent-color` utilities like `accent-green-800` |
| `accessibility` | The `sr-only` and `not-sr-only` utilities |
| `alignContent` | The `align-content` utilities like `content-between` |
| `alignItems` | The `align-items` utilities like `items-center` |
| `alignSelf` | The `align-self` utilities like `self-end` |
| `animation` | The `animation` utilities like `animate-ping` |
| `appearance` | The `appearance` utilities like `appearance-none` |
| `aspectRatio` | The `aspect-ratio` utilities like `aspect-square` |
| `backdropBlur` | The `backdrop-blur` utilities like `backdrop-blur-md` |
| `backdropBrightness` | The `backdrop-brightness` utilities like `backdrop-brightness-100` |
| `backdropContrast` | The `backdrop-contrast` utilities like `backdrop-contrast-100` |
| `backdropFilter` | The `backdrop-filter` utilities like `backdrop-filter` |
| `backdropGrayscale` | The `backdrop-grayscale` utilities like `backdrop-grayscale-0` |
| `backdropHueRotate` | The `backdrop-hue-rotate` utilities like `backdrop-hue-rotate-30` |
| `backdropInvert` | The `backdrop-invert` utilities like `backdrop-invert-0` |
| `backdropOpacity` | The `backdrop-opacity` utilities like `backdrop-opacity-50` |
| `backdropSaturate` | The `backdrop-saturate` utilities like `backdrop-saturate-100` |
| `backdropSepia` | The `backdrop-sepia` utilities like `backdrop-sepia-0` |
| `backgroundAttachment` | The `background-attachment` utilities like `bg-local` |
| `backgroundBlendMode` | The `background-blend-mode` utilities like `bg-blend-color-burn` |
| `backgroundClip` | The `background-clip` utilities like `bg-clip-padding` |
| `backgroundColor` | The `background-color` utilities like `bg-green-800` |
| `backgroundImage` | The `background-image` utilities like `bg-gradient-to-br` |
| `backgroundOpacity` | The `background-color` opacity utilities like `bg-opacity-25` |
| `backgroundOrigin` | The `background-origin` utilities like `bg-origin-padding` |
| `backgroundPosition` | The `background-position` utilities like `bg-left-top` |
| `backgroundRepeat` | The `background-repeat` utilities like `bg-repeat-x` |
| `backgroundSize` | The `background-size` utilities like `bg-cover` |
| `blur` | The `blur` utilities like `blur-md` |
| `borderCollapse` | The `border-collapse` utilities like `border-collapse` |
| `borderColor` | The `border-color` utilities like `border-e-green-800` |
| `borderOpacity` | The `border-color` opacity utilities like `border-opacity-25` |
| `borderRadius` | The `border-radius` utilities like `rounded-ss-lg` |
| `borderSpacing` | The `border-spacing` utilities like `border-spacing-x-28` |
| `borderStyle` | The `border-style` utilities like `border-dotted` |
| `borderWidth` | The `border-width` utilities like `border-e-4` |
| `boxDecorationBreak` | The `box-decoration-break` utilities like `decoration-clone` |
| `boxShadow` | The `box-shadow` utilities like `shadow-lg` |
| `boxShadowColor` | The `box-shadow-color` utilities like `shadow-green-800` |
| `boxSizing` | The `box-sizing` utilities like `box-border` |
| `breakAfter` | The `break-after` utilities like `break-after-avoid-page` |
| `breakBefore` | The `break-before` utilities like `break-before-avoid-page` |
| `breakInside` | The `break-inside` utilities like `break-inside-avoid` |
| `brightness` | The `brightness` utilities like `brightness-100` |
| `captionSide` | The `caption-side` utilities like `caption-top` |
| `caretColor` | The `caret-color` utilities like `caret-green-800` |
| `clear` | The `clear` utilities like `clear-right` |
| `columns` | The `columns` utilities like `columns-auto` |
| `container` | The `container` component |
| `content` | The `content` utilities like `content-none` |
| `contrast` | The `contrast` utilities like `contrast-100` |
| `cursor` | The `cursor` utilities like `cursor-grab` |
| `display` | The `display` utilities like `table-column-group` |
| `divideColor` | The between elements `border-color` utilities like `divide-slate-500` |
| `divideOpacity` | The `divide-opacity` utilities like `divide-opacity-50` |
| `divideStyle` | The `divide-style` utilities like `divide-dotted` |
| `divideWidth` | The between elements `border-width` utilities like `divide-x-2` |
| `dropShadow` | The `drop-shadow` utilities like `drop-shadow-lg` |
| `fill` | The `fill` utilities like `fill-green-700` |
| `filter` | The `filter` utilities like `filter` |
| `flex` | The `flex` utilities like `flex-auto` |
| `flexBasis` | The `flex-basis` utilities like `basis-px` |
| `flexDirection` | The `flex-direction` utilities like `flex-row-reverse` |
| `flexGrow` | The `flex-grow` utilities like `flex-grow` |
| `flexShrink` | The `flex-shrink` utilities like `flex-shrink` |
| `flexWrap` | The `flex-wrap` utilities like `flex-wrap-reverse` |
| `float` | The `float` utilities like `float-left` |
| `fontFamily` | The `font-family` utilities like `font-serif` |
| `fontSize` | The `font-size` utilities like `text-3xl` |
| `fontSmoothing` | The `font-smoothing` utilities like `antialiased` |
| `fontStyle` | The `font-style` utilities like `italic` |
| `fontVariantNumeric` | The `font-variant-numeric` utilities like `oldstyle-nums` |
| `fontWeight` | The `font-weight` utilities like `font-medium` |
| `gap` | The `gap` utilities like `gap-x-28` |
| `gradientColorStops` | The `gradient-color-stops` utilities like `via-emerald-700` |
| `grayscale` | The `grayscale` utilities like `grayscale-0` |
| `gridAutoColumns` | The `grid-auto-columns` utilities like `auto-cols-min` |
| `gridAutoFlow` | The `grid-auto-flow` utilities like `grid-flow-dense` |
| `gridAutoRows` | The `grid-auto-rows` utilities like `auto-rows-min` |
| `gridColumn` | The `grid-column` utilities like `col-span-6` |
| `gridColumnEnd` | The `grid-column-end` utilities like `col-end-7` |
| `gridColumnStart` | The `grid-column-start` utilities like `col-start-7` |
| `gridRow` | The `grid-row` utilities like `row-span-3` |
| `gridRowEnd` | The `grid-row-end` utilities like `row-end-4` |
| `gridRowStart` | The `grid-row-start` utilities like `row-start-4` |
| `gridTemplateColumns` | The `grid-template-columns` utilities like `grid-cols-7` |
| `gridTemplateRows` | The `grid-template-rows` utilities like `grid-rows-4` |
| `height` | The `height` utilities like `h-72` |
| `hueRotate` | The `hue-rotate` utilities like `hue-rotate-30` |
| `hyphens` | The `hyphens` utilities like `hyphens-manual` |
| `inset` | The `inset` utilities like `end-44` |
| `invert` | The `invert` utilities like `invert-0` |
| `isolation` | The `isolation` utilities like `isolate` |
| `justifyContent` | The `justify-content` utilities like `justify-center` |
| `justifyItems` | The `justify-items` utilities like `justify-items-end` |
| `justifySelf` | The `justify-self` utilities like `justify-self-end` |
| `letterSpacing` | The `letter-spacing` utilities like `tracking-normal` |
| `lineClamp` | The `line-clamp` utilities like `line-clamp-4` |
| `lineHeight` | The `line-height` utilities like `leading-9` |
| `listStyleImage` | The `list-style-image` utilities like `list-image-none` |
| `listStylePosition` | The `list-style-position` utilities like `list-inside` |
| `listStyleType` | The `list-style-type` utilities like `list-disc` |
| `margin` | The `margin` utilities like `me-28` |
| `maxHeight` | The `max-height` utilities like `max-h-40` |
| `maxWidth` | The `max-width` utilities like `max-w-6xl` |
| `minHeight` | The `min-height` utilities like `min-h-screen` |
| `minWidth` | The `min-width` utilities like `min-w-min` |
| `mixBlendMode` | The `mix-blend-mode` utilities like `mix-blend-hard-light` |
| `objectFit` | The `object-fit` utilities like `object-fill` |
| `objectPosition` | The `object-position` utilities like `object-left-top` |
| `opacity` | The `opacity` utilities like `opacity-50` |
| `order` | The `order` utilities like `order-8` |
| `outlineColor` | The `outline-color` utilities like `outline-green-800` |
| `outlineOffset` | The `outline-offset` utilities like `outline-offset-2` |
| `outlineStyle` | The `outline-style` utilities like `outline-dashed` |
| `outlineWidth` | The `outline-width` utilities like `outline-2` |
| `overflow` | The `overflow` utilities like `overflow-x-hidden` |
| `overscrollBehavior` | The `overscroll-behavior` utilities like `overscroll-y-contain` |
| `padding` | The `padding` utilities like `pe-28` |
| `placeContent` | The `place-content` utilities like `place-content-between` |
| `placeItems` | The `place-items` utilities like `place-items-center` |
| `placeSelf` | The `place-self` utilities like `place-self-end` |
| `placeholderColor` | The placeholder `color` utilities like `placeholder-red-600` |
| `placeholderOpacity` | The placeholder `color` opacity utilities like `placeholder-opacity-25` |
| `pointerEvents` | The `pointer-events` utilities like `pointer-events-none` |
| `position` | The `position` utilities like `absolute` |
| `preflight` | Tailwind's base/reset styles |
| `resize` | The `resize` utilities like `resize-y` |
| `ringColor` | The `ring-color` utilities like `ring-green-800` |
| `ringOffsetColor` | The `ring-offset-color` utilities like `ring-offset-green-800` |
| `ringOffsetWidth` | The `ring-offset-width` utilities like `ring-offset-2` |
| `ringOpacity` | The `ring-opacity` utilities like `ring-opacity-50` |
| `ringWidth` | The `ring-width` utilities like `ring-4` |
| `rotate` | The `rotate` utilities like `rotate-6` |
| `saturate` | The `saturate` utilities like `saturate-100` |
| `scale` | The `scale` utilities like `scale-x-95` |
| `scrollBehavior` | The `scroll-behavior` utilities like `scroll-auto` |
| `scrollMargin` | The `scroll-margin` utilities like `scroll-me-28` |
| `scrollPadding` | The `scroll-padding` utilities like `scroll-pe-28` |
| `scrollSnapAlign` | The `scroll-snap-align` utilities like `snap-end` |
| `scrollSnapStop` | The `scroll-snap-stop` utilities like `snap-normal` |
| `scrollSnapType` | The `scroll-snap-type` utilities like `snap-y` |
| `sepia` | The `sepia` utilities like `sepia-0` |
| `skew` | The `skew` utilities like `skew-x-12` |
| `space` | The "space-between" utilities like `space-x-4` |
| `stroke` | The `stroke` utilities like `stroke-green-700` |
| `strokeWidth` | The `stroke-width` utilities like `stroke-1` |
| `tableLayout` | The `table-layout` utilities like `table-auto` |
| `textAlign` | The `text-align` utilities like `text-right` |
| `textColor` | The `text-color` utilities like `text-green-800` |
| `textDecoration` | The `text-decoration` utilities like `overline` |
| `textDecorationColor` | The `text-decoration-color` utilities like `decoration-green-800` |
| `textDecorationStyle` | The `text-decoration-style` utilities like `decoration-dotted` |
| `textDecorationThickness` | The `text-decoration-thickness` utilities like `decoration-4` |
| `textIndent` | The `text-indent` utilities like `indent-28` |
| `textOpacity` | The `text-opacity` utilities like `text-opacity-50` |
| `textOverflow` | The `text-overflow` utilities like `overflow-ellipsis` |
| `textTransform` | The `text-transform` utilities like `lowercase` |
| `textUnderlineOffset` | The `text-underline-offset` utilities like `underline-offset-2` |
| `touchAction` | The `touch-action` utilities like `touch-pan-right` |
| `transform` | The `transform` utility (for enabling transform features) |
| `transformOrigin` | The `transform-origin` utilities like `origin-bottom-right` |
| `transitionDelay` | The `transition-delay` utilities like `delay-200` |
| `transitionDuration` | The `transition-duration` utilities like `duration-200` |
| `transitionProperty` | The `transition-property` utilities like `transition-colors` |
| `transitionTimingFunction` | The `transition-timing-function` utilities like `ease-in` |
| `translate` | The `translate` utilities like `translate-x-full` |
| `userSelect` | The `user-select` utilities like `select-text` |
| `verticalAlign` | The `vertical-align` utilities like `align-bottom` |
| `visibility` | The `visibility` utilities like `invisible` |
| `whitespace` | The `whitespace` utilities like `whitespace-pre` |
| `width` | The `width` utilities like `w-1.5` |
| `willChange` | The `will-change` utilities like `will-change-scroll` |
| `wordBreak` | The `word-break` utilities like `break-words` |
| `zIndex` | The `z-index` utilities like `z-30` |

 Using multiple configurations
-----------------------------

 For projects that need to generate multiple CSS files using different Tailwind configurations, use the `@config` directive to specify which config file should be used for each CSS entry point:

 Learn more about the `@config` directive in the [Functions & Directives](functions-and-directives#config) documentation.

 Referencing in JavaScript
-------------------------

 It can often be useful to reference your configuration values in your own client-side JavaScript — for example to access some of your theme values when dynamically applying inline styles in a React or Vue component.

 To make this easy, Tailwind provides a `resolveConfig` helper you can use to generate a fully merged version of your configuration object:

 
```
import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
```
 Note that this will transitively pull in a lot of our build-time dependencies, resulting in bigger client-side bundle size. To avoid this, we recommend using a tool like [babel-plugin-preval](https://github.com/kentcdodds/babel-plugin-preval) to generate a static version of your configuration at build-time.

 TypeScript types
----------------

 We ship first-party TypeScript types for the `tailwind.config.js` file which give you all sorts of useful IDE support, and makes it a lot easier to make changes to your configuration without referencing the documentation quite as much.

 Configuration files generated with Tailwind CLI include the necessary type annotation by default, but to configure TypeScript types manually, just add the type annotation above your configuration object:

 

tailwind.config.js



```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/configuration>

Content Configuration
=====================


Configuring the content sources for your project.


The `content` section of your `tailwind.config.js` file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names.

 

tailwind.config.js



```
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}
```

 This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project.

 Configuring source paths
------------------------

 Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, then generating all of the corresponding CSS for those styles.

 In order for Tailwind to generate all of the CSS you need, it needs to know about every single file in your project that contains any Tailwind class names.

 Configure the paths to all of your content files in the `content` section of your configuration file:

 

tailwind.config.js



```
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}'
  ],
  // ...
}
```

 Paths are configured as [glob patterns](https://en.wikipedia.org/wiki/Glob_(programming)), making it easy to match all of the content files in your project without a ton of configuration:

 * Use `*` to match anything except slashes and hidden files
* Use `**` to match zero or more directories
* Use comma separate values between `{}` to match against a list of options

 Tailwind uses the [fast-glob](https://github.com/mrmlnc/fast-glob) library under-the-hood — check out their documentation for other supported pattern features.

 Paths are relative to your project root, *not* your `tailwind.config.js` file, so if your `tailwind.config.js` file is in a custom location, you should still write your paths relative to the root of your project.

 ### Pattern recommendations

 For the best performance and to avoid false positives, be as specific as possible with your content configuration.

 If you use a really broad pattern like this one, Tailwind will even scan `node_modules` for content which is probably not what you want:

 

Don’t use extremely broad patterns


 

tailwind.config.js



```
module.exports = {
  content: [
    './**/*.{html,js}',
  ],
  // ...
}
```

 If you have any files you need to scan that are at the root of your project (often an `index.html` file), list that file independently so your other patterns can be more specific:

 

Be specific with your content patterns


 

tailwind.config.js



```
module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './index.html',
  ],
  // ...
}
```

 Some frameworks hide their main HTML entry point in a different place than the rest of your templates (often `public/index.html`), so if you are adding Tailwind classes to that file make sure it’s included in your configuration as well:

 

Remember to include your HTML entry point if applicable


 

tailwind.config.js



```
module.exports = {
  content: [
    './public/index.html',
    './src/**/*.{html,js}',
  ],
  // ...
}

```

 If you have any JavaScript files that manipulate your HTML to add classes, make sure you include those as well:

 

tailwind.config.js



```
module.exports = {
  content: [
    // ...
    './src/**/*.js',
  ],
  // ...
}
```

 

src/spaghetti.js



```
// ...
menuButton.addEventListener('click', function () {
  let classList = document.getElementById('nav').classList
  classList.toggle('hidden')
  classList.toggle('block')
})
// ...
```

 It’s also important that you don’t scan any CSS files — configure Tailwind to scan your *templates* where your class names are being used, never the CSS file that Tailwind is generating.

 

Never include CSS files in your content configuration


 

tailwind.config.js



```
module.exports = {
  content: [
    './src/**/*.css',
  ],
  // ...
}
```

 ### Class detection in-depth

 The way Tailwind scans your source code for classes is intentionally very simple — we don’t actually parse or execute any of your code in the language it’s written in, we just use regular expressions to extract every string that could possibly be a class name.

 For example, here’s some HTML with every potential class name string individually highlighted:

 
```
<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="/img/shopping.jpg" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">
      Marketing
    </div>
    <a href="/get-started" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">
      Finding customers for your new business
    </a>
    <p class="mt-2 text-gray-600">
      Getting a new business off the ground is a lot of hard work.
      Here are five ideas you can use to find your first customers.
    </p>
  </div>
</div>
```
 We don’t just limit our search to `class="..."` attributes because you could be using classes anywhere, like in some JavaScript for toggling a menu:

 

spaghetti.js



```
<script>
  menuButton.addEventListener('click', function () {
    let classList = document.getElementById('nav').classList
    classList.toggle('hidden')
    classList.toggle('block')
  })
</script>
```

 By using this very simple approach, Tailwind works extremely reliably with any programming language, like JSX for example:

 

Button.jsx



```
const sizes = {
  md: 'px-4 py-2 rounded-md text-base',
  lg: 'px-5 py-3 rounded-lg text-lg',
}

const colors = {
  indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
  cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}

export default function Button({ color, size, children }) {
  let colorClasses = colors[color]
  let sizeClasses = sizes[size]

  return (
    <button type="button" className={`font-bold ${sizeClasses} ${colorClasses}`}>
      {children}
    </button>
  )
}
```

 ### Dynamic class names

 The most important implication of how Tailwind extracts class names is that it will only find classes that exist *as complete unbroken strings* in your source files.

 If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

 

Don’t construct class names dynamically


 
```
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
```
 In the example above, the strings `text-red-600` and `text-green-600` do not exist, so Tailwind will not generate those classes.

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

 

Always use complete class names


 
```
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
```
 If you’re using a component library like React or Vue, this means you shouldn’t use props to dynamically construct classes:

 

Don’t use props to build class names dynamically


 
```
function Button({ color, children }) {
  return (
    <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>
      {children}
    </button>
  )
}
```
 Instead, map props to complete class names that are statically detectable at build-time:

 

Always map props to static class names


 
```
function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500',
    red: 'bg-red-600 hover:bg-red-500',
  }

  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}
```
 This has the added benefit of letting you map different prop values to different color shades for example:

 
```
function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500 text-white',
    red: 'bg-red-500 hover:bg-red-400 text-white',
    yellow: 'bg-yellow-300 hover:bg-yellow-400 text-black',
  }

  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}
```
 As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time.

 ### Working with third-party libraries

 If you’re working with any third-party libraries (for example [Select2](https://select2.org/)) and styling that library with your own custom CSS, we recommend writing those styles *without* using Tailwind’s `@layer` feature:

 

main.css



```
@tailwind base;
@tailwind components;

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

@tailwind utilities;
```

 This will ensure that Tailwind *always* includes those styles in your CSS, which is a lot easier than configuring Tailwind to scan the source code of a third-party library.

 If you’ve created your own reusable set of components that are styled with Tailwind and are importing them in multiple projects, make sure to configure Tailwind to scan those components for class names:

 

tailwind.config.js



```
module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './node_modules/@my-company/tailwind-components/**/*.js',
  ],
  // ...
}

```

 This will make sure Tailwind generates all of the CSS needed for those components as well.

 If you’re working in a monorepo with workspaces, you may need to use `require.resolve` to make sure Tailwind can see your content files:

 

tailwind.config.js



```
const path = require('path');

module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    path.join(path.dirname(require.resolve('@my-company/tailwind-components')), '**/*.js'),
  ],
  // ...
}

```

 ### Using relative paths

 By default Tailwind resolves non-absolute content paths relative to the current working directory, not the `tailwind.config.js` file. This can lead to unexpected results if you run Tailwind from a different directory.

 To always resolve paths relative to the `tailwind.config.js` file, use the object notation for your `content` configuration and set the `relative` property to `true`:

 

tailwind.config.js



```
module.exports = {
  content: {
    relative: true,
    files: [
      './pages/**/*.{html,js}',
      './components/**/*.{html,js}',
    ],
  },
  // ...
}

```

 This will likely become the default behavior in the next major version of the framework.

 ### Configuring raw content

 If for whatever reason you need to configure Tailwind to scan some raw content rather than the contents of a file, use an object with a `raw` key instead of a path:

 

tailwind.config.js



```
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
    { raw: '<div class="font-bold">', extension: 'html' },
  ],
  // ...
}
```

 There aren’t many valid use-cases for this — [safelisting](content-configuration#safelisting-classes) is usually what you really want instead.

 Safelisting classes
-------------------

 For the smallest file size and best development experience, we highly recommend relying on your `content` configuration to tell Tailwind which classes to generate as much as possible.

 Safelisting is a last-resort, and should only be used in situations where it’s impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature.

 If you need to make sure Tailwind generates certain class names that don’t exist in your content files, use the `safelist` option:

 

tailwind.config.js



```
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
  ]
  // ...
}
```

 One example of where this can be useful is if your site displays user-generated content and you want users to be able to use a constrained set of Tailwind classes in their content that might not exist in your own site’s source files.

 ### Using regular expressions

 Tailwind supports pattern-based safelisting for situations where you need to safelist a lot of classes:

 

tailwind.config.js



```
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'text-2xl',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
    },
  ],
  // ...
}
```

 Patterns can only match against base utility names like `/bg-red-.+/`, and won’t match if the pattern includes a variant modifier like `/hover:bg-red-.+/`.

 If you want to force Tailwind to generate variants for any matched classes, include them using the `variants` option:

 

tailwind.config.js



```
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'text-2xl',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
      variants: ['lg', 'hover', 'focus', 'lg:hover'],
    },
  ],
  // ...
}
```

 ### Discarding classes

 Since Tailwind uses a very simple approach to detecting class names in your content, you may find that some classes are being generated that you don’t actually need.

 For example, this HTML would still generate the `container` class, even though that class is not actually being used:

 
```
<div class="text-lg leading-8 text-gray-600">
  Every custom pool we design starts as a used shipping container, and is
  retrofitted with state of the art technology and finishes to turn it into
  a beautiful and functional way to entertain your guests all summer long.
</div>
```
 You may also want to prevent Tailwind from generating certain classes when those classes would conflict with some existing CSS, but you don’t want to go so far as to prefix all of your Tailwind classes.

 In these situations, you can use the `blocklist` option to tell Tailwind to ignore specific classes that it detects in your content:

 

tailwind.config.js



```
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  blocklist: [
    'container',
    'collapse',
  ],
  // ...
}
```

 The `blocklist` option only affects CSS that would be generated by Tailwind, not custom CSS you’ve authored yourself or are importing from another library.

 Unlike `safelist`, the `blocklist` option only supports strings, and you cannot block classes using regular expressions.

 Transforming source files
-------------------------

 If you’re authoring content in a format that *compiles* to HTML (like Markdown), it often makes sense to compile that content to HTML *before* scanning it for class names.

 Use the `content.transform` option to transform any content matching a specific file extension before extracting classes:

 

tailwind.config.js



```
const remark = require('remark')

module.exports = {
  content: {
    files: ['./src/**/*.{html,md}'],
    transform: {
      md: (content) => {
        return remark().process(content)
      }
    }
  },
  // ...
}
```

 When using `content.transform`, you’ll need to provide your source paths using `content.files` instead of as a top-level array under `content`.

 Customizing extraction logic
----------------------------

 Use the `extract` option to override the logic Tailwind uses to detect class names for specific file extensions:

 

tailwind.config.js



```
module.exports = {
  content: {
    files: ['./src/**/*.{html,wtf}'],
    extract: {
      wtf: (content) => {
        return content.match(/[^<>"'`\s]*/)
      }
    }
  },
  // ...
}
```

 This is an advanced feature and most users won’t need it — the default extraction logic in Tailwind works extremely well for almost all projects.

 As with transforming, when using `content.extract`, you’ll need to provide your source paths using `content.files` instead of as a top-level array under `content`.

 Troubleshooting
---------------

 ### Classes aren’t generated

 If Tailwind isn’t generating classes, make sure your `content` configuration is correct and matches all of the right source files.

 A common mistake is missing a file extension, for example if you’re using `jsx` instead of `js` for your React components:

 

tailwind.config.js



```
module.exports = {
  content: [
    './src/**/*.{html,js}',
    './src/**/*.{html,js,jsx}'
  ],
  // ...
}

```

 Or creating a new folder mid-project that wasn’t covered originally and forgetting to add it to your configuration:

 

tailwind.config.js



```
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
    './util/**/*.{html,js}'
  ],
  // ...
}

```

 It could also be that you are trying to use dynamic class names, which won’t work because Tailwind doesn’t actually evaluate your source code and can only detect static unbroken class strings.

 

Don’t construct class names dynamically


 
```
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
```
 Make sure you always use complete class names in your code:

 

Always use complete class names


 
```
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
```
 Read our documentation on [dynamic class names](content-configuration#dynamic-class-names) for more details.

 ### Styles rebuild in an infinite loop

 If your CSS seems to be rebuilding in an infinite loop, there’s a good chance it’s because your build tool doesn’t support the `glob` option when [registering PostCSS dependencies](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#31-rebuild-when-dependencies-change).

 Many build tools (such as webpack) don’t support this option, and as a result we can only tell them to watch specific files or *entire directories*. We can’t tell webpack to *only* watch `*.html` files in a directory for example.

 That means that if building your CSS causes *any* files in those directories to change, a rebuild will be triggered, even if the changed file doesn’t match the extension in your glob.

 

tailwind.config.js



```
module.exports = {
  content: [
    // With some build tools, your CSS will rebuild
    // any time *any* file in `src` changes.
    './src/**/*.{html,js}',
  ],
  // ...
}
```

 So if you are watching `src/**/*.html` for changes, but you are writing your CSS output file to `src/css/styles.css`, you will get an infinite rebuild loop using some tools.

 Ideally we could warn you about this in the console, but many tools support it perfectly fine (including our own CLI tool), and we have no reliable way to detect what build tool you are using.

 To solve this problem, use more specific paths in your `content` config, making sure to only include directories that won’t change when your CSS builds:

 

tailwind.config.js



```
module.exports = {
  content: [
    './src/**/*.{html,js}',
    './src/pages/**/*.{html,js}',
    './src/components/**/*.{html,js}',
    './src/layouts/**/*.{html,js}',
    './src/index.html',
  ],
  // ...
}

```

 If necessary, adjust your actual project directory structure to make sure you can target your template files without accidentally catching your CSS file or other build artifacts like manifest files.

 If you absolutely can’t change your content config or directory structure, your best bet is to compile your CSS separately with a tool that has complete glob support. We recommend using [Tailwind CLI](https://tailwindcss.com/docs/installation), which is a fast, simple, purpose-built tool for compiling your CSS with Tailwind.

 ### It just isn’t working properly

 If you are experiencing weird, hard to describe issues with the output, or things just don’t seem like they are working at all, there’s a good chance it’s due to your build tool not supporting PostCSS dependency messages properly *(or at all)*. One known example of this currently is [Stencil](https://github.com/ionic-team/stencil-postcss/issues/38).

 When you are having these sorts of issues, we recommend using [Tailwind CLI](https://tailwindcss.com/docs/installation) to compile your CSS separately instead of trying to integrate Tailwind into your existing tooling.

 You can use packages like `npm-run-all` or `concurrently` to compile your CSS alongside your usual development command by adding some scripts to your project like this:

 
```
// package.json
{
  // ...
  "scripts": {
    "start": "concurrently \"npm run start:css\" \"react-scripts start\"",
    "start:css": "tailwindcss -o src/tailwind.css --watch",
    "build": "npm run build:css && react-scripts build",
    "build:css": "NODE_ENV=production tailwindcss -o src/tailwind.css -m",
  },
}
```
 Either way, please be sure to [check for an existing issue](https://github.com/tailwindlabs/tailwindcss/issues) or [open a new one](https://github.com/tailwindlabs/tailwindcss/issues/new/choose) so we can figure out the problem and try to improve compatibility with whatever tool you are using.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/content-configuration>

Theme Configuration
===================


Customizing the default theme for your project.


The `theme` section of your `tailwind.config.js` file is where you define your project’s color palette, type scale, fonts, breakpoints, border radius values, and more.

 

tailwind.config.js



```
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}
```

 We provide a sensible [default theme](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js) with a very generous set of values to get you started, but don’t be afraid to change it or extend it; you’re encouraged to customize it as much as you need to fit the goals of your design.

 Theme structure
---------------

 The `theme` object contains keys for `screens`, `colors`, and `spacing`, as well as a key for each customizable [core plugin](configuration#core-plugins).

 See the [theme configuration reference](theme#configuration-reference) or the [default theme](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js#L7) for a complete list of theme options.

 ### Screens

 The `screens` key allows you to customize the responsive breakpoints in your project.

 

tailwind.config.js



```
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}
```

 To learn more, see the [breakpoint customization documentation](/docs/screens).

 ### Colors

 The `colors` key allows you to customize the global color palette for your project.

 

tailwind.config.js



```
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}
```

 By default, these colors are inherited by all color-related core plugins, like `backgroundColor`, `borderColor`, `textColor`, and others.

 To learn more, see the [color customization documentation](/docs/customizing-colors).

 ### Spacing

 The `spacing` key allows you to customize the global spacing and sizing scale for your project.

 

tailwind.config.js



```
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem',
      11: '2.75rem',
      12: '3rem',
      14: '3.5rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
      28: '7rem',
      32: '8rem',
      36: '9rem',
      40: '10rem',
      44: '11rem',
      48: '12rem',
      52: '13rem',
      56: '14rem',
      60: '15rem',
      64: '16rem',
      72: '18rem',
      80: '20rem',
      96: '24rem',
    },
  }
}
```

 By default, these values are inherited by the `padding`, `margin`, `width`, `height`, `maxHeight`, `flex-basis`, `gap`, `inset`, `space`, `translate`, `scrollMargin`, `scrollPadding`, and `textIndent` core plugins.

 To learn more, see the [spacing customization documentation](customizing-spacing).

 ### Core plugins

 The rest of the `theme` section is used to configure which values are available for each individual core plugin.

 For example, the `borderRadius` key lets you customize which border radius utilities will be generated:

 
```
module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '.125rem',
      DEFAULT: '.25rem',
      'lg': '.5rem',
      'full': '9999px',
    },
  }
}
```
 The keys determine the suffix for the generated classes, and the values determine the value of the actual CSS declaration.

 The example `borderRadius` configuration above would generate the following CSS classes:

 
```
.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: .125rem }
.rounded      { border-radius: .25rem }
.rounded-lg   { border-radius: .5rem }
.rounded-full { border-radius: 9999px }
```
 You’ll notice that using a key of `DEFAULT` in the theme configuration created the class `rounded` with no suffix. This is a common convention in Tailwind and is supported by all core plugins.

 To learn more about customizing a specific core plugin, visit the documentation for that plugin.

 For a complete reference of available theme properties and their default values, [see the default theme configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js).

 Customizing the default theme
-----------------------------

 Out of the box, your project will automatically inherit the values from [the default theme configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js). If you would like to customize the default theme, you have a few different options depending on your goals.

 ### Extending the default theme

 If you’d like to preserve the default values for a theme option but also add new values, add your extensions under the `extend` key in the `theme` section of your configuration file.

 For example, if you wanted to add an extra breakpoint but preserve the existing ones, you could extend the `screens` property:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      // Adds a new breakpoint in addition to the default breakpoints
      screens: {
        '3xl': '1600px',
      }
    }
  }
}
```

 ### Overriding the default theme

 To override an option in the default theme, add your overrides directly under the `theme` section of your `tailwind.config.js`:

 

tailwind.config.js



```
module.exports = {
  theme: {
    // Replaces all of the default `opacity` values
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    }
  }
}
```

 This will completely replace Tailwind’s default configuration for that key, so in the example above none of the default opacity utilities would be generated.

 Any keys you **do not** provide will be inherited from the default theme, so in the above example, the default theme configuration for things like colors, spacing, border-radius, background-position, etc. would be preserved.

 You can of course both override some parts of the default theme and extend other parts of the default theme within the same configuration:

 

tailwind.config.js



```
module.exports = {
  theme: {
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    },
    extend: {
      screens: {
        '3xl': '1600px',
      }
    }
  }
}
```

 ### Referencing other values

 If you need to reference another value in your theme, you can do so by providing a closure instead of a static value. The closure will receive an object that includes a `theme()` function that you can use to look up other values in your theme using dot notation.

 For example, you could generate `background-size` utilities for every value in your spacing scale by referencing `theme('spacing')` in your `backgroundSize` configuration:

 

tailwind.config.js



```
module.exports = {
  theme: {
    spacing: {
      // ...
    },
    backgroundSize: ({ theme }) => ({
      auto: 'auto',
      cover: 'cover',
      contain: 'contain',
      ...theme('spacing')
    })
  }
}
```

 The `theme()` function attempts to find the value you are looking for from the fully merged theme object, so it can reference your own customizations as well as the default theme values. It also works recursively, so as long as there is a static value at the end of the chain it will be able to resolve the value you are looking for.

 Note that you can only use this kind of closure with top-level theme keys, not the keys inside of each section.

 

You can’t use functions for individual values


 

tailwind.config.js



```
module.exports = {
  theme: {
    fill: {
      gray: ({ theme }) => theme('colors.gray')
    }
  }
}
```

 

Use functions for top-level theme keys


 

tailwind.config.js



```
module.exports = {
  theme: {
    fill: ({ theme }) => ({
      gray: theme('colors.gray')
    })
  }
}
```

 ### Referencing the default theme

 If you’d like to reference a value in the default theme for any reason, you can import it from `tailwindcss/defaultTheme`.

 One example of where this is useful is if you’d like to add a font family to one of Tailwind’s default font stacks:

 

tailwind.config.js



```
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}
```

 ### Disabling an entire core plugin

 If you don’t want to generate any classes for a certain core plugin, it’s better to set that plugin to false in your `corePlugins` configuration than to provide an empty object for that key in your `theme` configuration.

 

Don’t assign an empty object in your theme configuration


 

tailwind.config.js



```
module.exports = {
  theme: {
    opacity: {},
  }
}
```

 

Do disable the plugin in your corePlugins configuration


 

tailwind.config.js



```
module.exports = {
  corePlugins: {
    opacity: false,
  }
}
```

 The end result is the same, but since many core plugins expose no configuration they can only be disabled using `corePlugins` anyways, so it’s better to be consistent.

 Configuration reference
-----------------------

 Except for `screens`, `colors`, and `spacing`, all of the keys in the `theme` object map to one of Tailwind’s [core plugins](configuration#core-plugins). Since many plugins are responsible for CSS properties that only accept a static set of values (like `float` for example), note that not every plugin has a corresponding key in the `theme` object.

 All of these keys are also available under the `theme.extend` key to enable [extending the default theme](theme#extending-the-default-theme).

 

| Key | Description |
| --- | --- |
| `accentColor` | Values for the `accent-color` property |
| `animation` | Values for the `animation` property |
| `aria` | Values for the `aria` property |
| `aspectRatio` | Values for the `aspect-ratio` property |
| `backdropBlur` | Values for the `backdropBlur` plugin |
| `backdropBrightness` | Values for the `backdropBrightness` plugin |
| `backdropContrast` | Values for the `backdropContrast` plugin |
| `backdropGrayscale` | Values for the `backdropGrayscale` plugin |
| `backdropHueRotate` | Values for the `backdropHueRotate` plugin |
| `backdropInvert` | Values for the `backdropInvert` plugin |
| `backdropOpacity` | Values for the `backdropOpacity` plugin |
| `backdropSaturate` | Values for the `backdropSaturate` plugin |
| `backdropSepia` | Values for the `backdropSepia` plugin |
| `backgroundColor` | Values for the `background-color` property |
| `backgroundImage` | Values for the `background-image` property |
| `backgroundOpacity` | Values for the `background-opacity` property |
| `backgroundPosition` | Values for the `background-position` property |
| `backgroundSize` | Values for the `background-size` property |
| `blur` | Values for the `blur` plugin |
| `borderColor` | Values for the `border-color` property |
| `borderOpacity` | Values for the `borderOpacity` plugin |
| `borderRadius` | Values for the `border-radius` property |
| `borderSpacing` | Values for the `border-spacing` property |
| `borderWidth` | Values for the `borderWidth` plugin |
| `boxShadow` | Values for the `box-shadow` property |
| `boxShadowColor` | Values for the `boxShadowColor` plugin |
| `brightness` | Values for the `brightness` plugin |
| `caretColor` | Values for the `caret-color` property |
| `colors` | Your project's color palette |
| `columns` | Values for the `columns` property |
| `container` | Configuration for the `container` plugin |
| `content` | Values for the `content` property |
| `contrast` | Values for the `contrast` plugin |
| `cursor` | Values for the `cursor` property |
| `divideColor` | Values for the `divideColor` plugin |
| `divideOpacity` | Values for the `divideOpacity` plugin |
| `divideWidth` | Values for the `divideWidth` plugin |
| `dropShadow` | Values for the `dropShadow` plugin |
| `fill` | Values for the `fill` plugin |
| `flex` | Values for the `flex` property |
| `flexBasis` | Values for the `flex-basis` property |
| `flexGrow` | Values for the `flex-grow` property |
| `flexShrink` | Values for the `flex-shrink` property |
| `fontFamily` | Values for the `font-family` property |
| `fontSize` | Values for the `font-size` property |
| `fontWeight` | Values for the `font-weight` property |
| `gap` | Values for the `gap` property |
| `gradientColorStops` | Values for the `gradientColorStops` plugin |
| `gradientColorStopPositions` | Values for the `gradient-color-stop-positions` property |
| `grayscale` | Values for the `grayscale` plugin |
| `gridAutoColumns` | Values for the `grid-auto-columns` property |
| `gridAutoRows` | Values for the `grid-auto-rows` property |
| `gridColumn` | Values for the `grid-column` property |
| `gridColumnEnd` | Values for the `grid-column-end` property |
| `gridColumnStart` | Values for the `grid-column-start` property |
| `gridRow` | Values for the `grid-row` property |
| `gridRowEnd` | Values for the `grid-row-end` property |
| `gridRowStart` | Values for the `grid-row-start` property |
| `gridTemplateColumns` | Values for the `grid-template-columns` property |
| `gridTemplateRows` | Values for the `grid-template-rows` property |
| `height` | Values for the `height` property |
| `hueRotate` | Values for the `hueRotate` plugin |
| `inset` | Values for the `top`, `right`, `bottom`, and `left` properties |
| `invert` | Values for the `invert` plugin |
| `keyframes` | Keyframe values used in the `animation` plugin |
| `letterSpacing` | Values for the `letter-spacing` property |
| `lineHeight` | Values for the `line-height` property |
| `listStyleType` | Values for the `list-style-type` property |
| `listStyleImage` | Values for the `list-style-image` property |
| `margin` | Values for the `margin` property |
| `lineClamp` | Values for the `line-clamp` property |
| `maxHeight` | Values for the `max-height` property |
| `maxWidth` | Values for the `max-width` property |
| `minHeight` | Values for the `min-height` property |
| `minWidth` | Values for the `min-width` property |
| `objectPosition` | Values for the `object-position` property |
| `opacity` | Values for the `opacity` property |
| `order` | Values for the `order` property |
| `outlineColor` | Values for the `outline-color` property |
| `outlineOffset` | Values for the `outline-offset` property |
| `outlineWidth` | Values for the `outline-width` property |
| `padding` | Values for the `padding` property |
| `placeholderColor` | Values for the `placeholderColor` plugin |
| `placeholderOpacity` | Values for the `placeholderOpacity` plugin |
| `ringColor` | Values for the `ringColor` plugin |
| `ringOffsetColor` | Values for the `ringOffsetColor` plugin |
| `ringOffsetWidth` | Values for the `ringOffsetWidth` plugin |
| `ringOpacity` | Values for the `ringOpacity` plugin |
| `ringWidth` | Values for the `ringWidth` plugin |
| `rotate` | Values for the `rotate` plugin |
| `saturate` | Values for the `saturate` plugin |
| `scale` | Values for the `scale` plugin |
| `screens` | Your project's responsive breakpoints |
| `scrollMargin` | Values for the `scroll-margin` property |
| `scrollPadding` | Values for the `scroll-padding` property |
| `sepia` | Values for the `sepia` plugin |
| `skew` | Values for the `skew` plugin |
| `space` | Values for the `space` plugin |
| `spacing` | Your project's spacing scale |
| `stroke` | Values for the `stroke` property |
| `strokeWidth` | Values for the `stroke-width` property |
| `supports` | Values for the `supports` property |
| `data` | Values for the `data` property |
| `textColor` | Values for the `text-color` property |
| `textDecorationColor` | Values for the `text-decoration-color` property |
| `textDecorationThickness` | Values for the `text-decoration-thickness` property |
| `textIndent` | Values for the `text-indent` property |
| `textOpacity` | Values for the `textOpacity` plugin |
| `textUnderlineOffset` | Values for the `text-underline-offset` property |
| `transformOrigin` | Values for the `transform-origin` property |
| `transitionDelay` | Values for the `transition-delay` property |
| `transitionDuration` | Values for the `transition-duration` property |
| `transitionProperty` | Values for the `transition-property` property |
| `transitionTimingFunction` | Values for the `transition-timing-function` property |
| `translate` | Values for the `translate` plugin |
| `width` | Values for the `width` property |
| `willChange` | Values for the `will-change` property |
| `zIndex` | Values for the `z-index` property |








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/theme>

Customizing Screens
===================


Customizing the default breakpoints for your project.


Configuring custom screens
--------------------------

 You define your project’s breakpoints in the `theme.screens` section of your `tailwind.config.js` file. The keys become your [responsive modifiers](responsive-design) (like `md:text-center`), and the values are the `min-width` where that breakpoint should start.

 The default breakpoints are inspired by common device resolutions:

 

tailwind.config.js



```
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}
```

 Feel free to have as few or as many screens as you want, naming them in whatever way you’d prefer for your project.

 ### Overriding the defaults

 To completely replace the default breakpoints, add your custom `screens` configuration directly under the `theme` key:

 

tailwind.config.js



```
module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}
```

 Any default screens you haven’t overridden (such as `xl` using the above example) will be removed and will not be available as screen modifiers.

 ### Overriding a single screen

 To override a single screen size (like `lg`), add your custom `screens` value under the `theme.extend` key:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '992px',
        // => @media (min-width: 992px) { ... }
      },
    },
  },
}
```

 This will replace the default `screens` value with the same name, without changing the order of your breakpoints.

 ### Adding larger breakpoints

 The easiest way to add an additional larger breakpoint is using the `extend` key:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  plugins: [],
}
```

 This will add your custom screen to the end of the default breakpoint list.

 ### Adding smaller breakpoints

 If you want to add an additional small breakpoint, you can’t use `extend` because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system.

 Instead, override the entire `screens` key, re-specifying the default breakpoints:

 

tailwind.config.js



```
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  plugins: [],
}
```

 We expose the default theme at `tailwindcss/defaultTheme` so you don’t have to maintain the list of default breakpoints yourself.

 ### Using custom screen names

 You can name your custom screens whatever you like, and are not limited to following the `sm`/`md`/`lg`/`xl`/`2xl` convention that Tailwind uses by default.

 

tailwind.config.js



```
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}
```

 Your responsive modifiers will reflect these custom screen names, so using them in your HTML would now look like this:

 
```
<div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4">
  <!-- ... -->
</div>
```
 Advanced configuration
----------------------

 By default, breakpoints are min-width to encourage a [mobile-first](responsive-design#working-mobile-first) workflow. If you need more control over your media queries, you can also define them using an object syntax that lets you specify explicit min-width and max-width values.

 ### Max-width breakpoints

 If you want to work with max-width breakpoints instead of min-width, you can specify your screens as objects with a `max` key:

 

tailwind.config.js



```
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      // => @media (max-width: 1535px) { ... }

      'xl': {'max': '1279px'},
      // => @media (max-width: 1279px) { ... }

      'lg': {'max': '1023px'},
      // => @media (max-width: 1023px) { ... }

      'md': {'max': '767px'},
      // => @media (max-width: 767px) { ... }

      'sm': {'max': '639px'},
      // => @media (max-width: 639px) { ... }
    }
  }
}
```

 Make sure to list max-width breakpoints in descending order so that they override each other as expected.

 ### Fixed-range breakpoints

 If you want your breakpoints to specify both a `min-width` and a `max-width`, use the `min` and `max` keys together:

 

tailwind.config.js



```
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'md': {'min': '768px', 'max': '1023px'},
      // => @media (min-width: 768px and max-width: 1023px) { ... }

      'lg': {'min': '1024px', 'max': '1279px'},
      // => @media (min-width: 1024px and max-width: 1279px) { ... }

      'xl': {'min': '1280px', 'max': '1535px'},
      // => @media (min-width: 1280px and max-width: 1535px) { ... }

      '2xl': {'min': '1536px'},
      // => @media (min-width: 1536px) { ... }
    },
  }
}
```

 Unlike regular min-width or max-width breakpoints, breakpoints defined this way will only take effect when the viewport size is explicitly within the defined range.

 
```
<div class="md:text-center">
  This text will be centered on medium screens, but revert back
  to the default (left-aligned) at all other screen sizes.
</div>
```
 ### Multi-range breakpoints

 Sometimes it can be useful to have a single breakpoint definition apply in multiple ranges.

 For example, say you have a sidebar and want your breakpoints to be based on the content-area width rather than the entire viewport. You can simulate this by having one of your breakpoints fall back to a smaller breakpoint when the sidebar becomes visible and shrinks the content area:

 

tailwind.config.js



```
module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // Sidebar appears at 768px, so revert to `sm:` styles between 768px
        // and 868px, after which the main content area is wide enough again to
        // apply the `md:` styles.
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}
```

 ### Custom media queries

 If you want full control over the generated media query, use the `raw` key:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
      }
    }
  }
}
```

 Media queries defined using the `raw` key will be output as-is, and the `min` and `max` keys will be ignored.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/screens>

Customizing Colors
==================


Customizing the default color palette for your project.


Default color palette
---------------------

 Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.

  

Slate




50
#f8fafc





100
#f1f5f9





200
#e2e8f0





300
#cbd5e1





400
#94a3b8





500
#64748b





600
#475569





700
#334155





800
#1e293b





900
#0f172a





950
#020617





Gray




50
#f9fafb





100
#f3f4f6





200
#e5e7eb





300
#d1d5db





400
#9ca3af





500
#6b7280





600
#4b5563





700
#374151





800
#1f2937





900
#111827





950
#030712





Zinc




50
#fafafa





100
#f4f4f5





200
#e4e4e7





300
#d4d4d8





400
#a1a1aa





500
#71717a





600
#52525b





700
#3f3f46





800
#27272a





900
#18181b





950
#09090b





Neutral




50
#fafafa





100
#f5f5f5





200
#e5e5e5





300
#d4d4d4





400
#a3a3a3





500
#737373





600
#525252





700
#404040





800
#262626





900
#171717





950
#0a0a0a





Stone




50
#fafaf9





100
#f5f5f4





200
#e7e5e4





300
#d6d3d1





400
#a8a29e





500
#78716c





600
#57534e





700
#44403c





800
#292524





900
#1c1917





950
#0c0a09





Red




50
#fef2f2





100
#fee2e2





200
#fecaca





300
#fca5a5





400
#f87171





500
#ef4444





600
#dc2626





700
#b91c1c





800
#991b1b





900
#7f1d1d





950
#450a0a





Orange




50
#fff7ed





100
#ffedd5





200
#fed7aa





300
#fdba74





400
#fb923c





500
#f97316





600
#ea580c





700
#c2410c





800
#9a3412





900
#7c2d12





950
#431407





Amber




50
#fffbeb





100
#fef3c7





200
#fde68a





300
#fcd34d





400
#fbbf24





500
#f59e0b





600
#d97706





700
#b45309





800
#92400e





900
#78350f





950
#451a03





Yellow




50
#fefce8





100
#fef9c3





200
#fef08a





300
#fde047





400
#facc15





500
#eab308





600
#ca8a04





700
#a16207





800
#854d0e





900
#713f12





950
#422006





Lime




50
#f7fee7





100
#ecfccb





200
#d9f99d





300
#bef264





400
#a3e635





500
#84cc16





600
#65a30d





700
#4d7c0f





800
#3f6212





900
#365314





950
#1a2e05





Green




50
#f0fdf4





100
#dcfce7





200
#bbf7d0





300
#86efac





400
#4ade80





500
#22c55e





600
#16a34a





700
#15803d





800
#166534





900
#14532d





950
#052e16





Emerald




50
#ecfdf5





100
#d1fae5





200
#a7f3d0





300
#6ee7b7





400
#34d399





500
#10b981





600
#059669





700
#047857





800
#065f46





900
#064e3b





950
#022c22





Teal




50
#f0fdfa





100
#ccfbf1





200
#99f6e4





300
#5eead4





400
#2dd4bf





500
#14b8a6





600
#0d9488





700
#0f766e





800
#115e59





900
#134e4a





950
#042f2e





Cyan




50
#ecfeff





100
#cffafe





200
#a5f3fc





300
#67e8f9





400
#22d3ee





500
#06b6d4





600
#0891b2





700
#0e7490





800
#155e75





900
#164e63





950
#083344





Sky




50
#f0f9ff





100
#e0f2fe





200
#bae6fd





300
#7dd3fc





400
#38bdf8





500
#0ea5e9





600
#0284c7





700
#0369a1





800
#075985





900
#0c4a6e





950
#082f49





Blue




50
#eff6ff





100
#dbeafe





200
#bfdbfe





300
#93c5fd





400
#60a5fa





500
#3b82f6





600
#2563eb





700
#1d4ed8





800
#1e40af





900
#1e3a8a





950
#172554





Indigo




50
#eef2ff





100
#e0e7ff





200
#c7d2fe





300
#a5b4fc





400
#818cf8





500
#6366f1





600
#4f46e5





700
#4338ca





800
#3730a3





900
#312e81





950
#1e1b4b





Violet




50
#f5f3ff





100
#ede9fe





200
#ddd6fe





300
#c4b5fd





400
#a78bfa





500
#8b5cf6





600
#7c3aed





700
#6d28d9





800
#5b21b6





900
#4c1d95





950
#2e1065





Purple




50
#faf5ff





100
#f3e8ff





200
#e9d5ff





300
#d8b4fe





400
#c084fc





500
#a855f7





600
#9333ea





700
#7e22ce





800
#6b21a8





900
#581c87





950
#3b0764





Fuchsia




50
#fdf4ff





100
#fae8ff





200
#f5d0fe





300
#f0abfc





400
#e879f9





500
#d946ef





600
#c026d3





700
#a21caf





800
#86198f





900
#701a75





950
#4a044e





Pink




50
#fdf2f8





100
#fce7f3





200
#fbcfe8





300
#f9a8d4





400
#f472b6





500
#ec4899





600
#db2777





700
#be185d





800
#9d174d





900
#831843





950
#500724





Rose




50
#fff1f2





100
#ffe4e6





200
#fecdd3





300
#fda4af





400
#fb7185





500
#f43f5e





600
#e11d48





700
#be123c





800
#9f1239





900
#881337





950
#4c0519




  But when you do need to customize your palette, you can configure your colors under the `colors` key in the `theme` section of your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}
```

 When it comes to building a custom color palette, you can either [configure your own custom colors](customizing-colors#using-custom-colors) from scratch if you know exactly what you want, or [curate your colors](customizing-colors#using-the-default-colors) from our extensive included color palette if you want a head start.

 Using custom colors
-------------------

 If you’d like to completely replace the default color palette with your own custom colors, add your colors directly under the `theme.colors` section of your configuration file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}
```

 By default, these colors will be made available everywhere in the framework where you use colors, like the [text color](text-color) utilities, [border color](border-color) utilities, [background color](background-color) utilities, and more.

 
```
<div class="bg-midnight text-tahiti">
  <!-- ... -->
</div>
```
 Don’t forget to include values like `transparent` and `currentColor` if you want to use them in your project.

 ### Color object syntax

 When your palette includes multiple shades of the same color, it can be convenient to group them together using our nested color object syntax:

 

tailwind.config.js



```
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
      },
      // ...
    },
  },
}
```

 The nested keys will be combined with the parent key to form class names like `bg-tahiti-400`.

 Like many other places in Tailwind, the special `DEFAULT` key can be used when you want to define a value with no suffix:

 

tailwind.config.js



```
module.exports = {
  theme: {
    colors: {
      // ...
      'tahiti': {
        light: '#67e8f9',
        DEFAULT: '#06b6d4',
        dark: '#0e7490',
      },
      // ...
    },
  },
}
```

 This will create classes like `bg-tahiti`, `bg-tahiti-light`, and `bg-tahiti-dark`.

 ### Arbitrary values

 If you need a one-off custom color in your project, consider using Tailwind’s arbitrary value notation to generate a class for that color on-demand instead of adding it to your theme:

 
```
<button class="bg-[#1da1f2] text-white ...">
  <svg><!-- ... --></svg>
  Share on Twitter
</button>
```
 Learn more in the [using arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.

 ### Generating colors

 If you’re wondering how to automatically generate the 50–950 shades of your own custom colors, bad news — color is complicated and despite trying dozens of different tools, we’ve yet to find one that does a good job generating color palettes like this automatically.

 We picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.

 Two useful tools we *can* recommend are [Palettte](https://palettte.app/) and [ColorBox](https://colorbox.io/) — they won’t do the work for you but their interfaces are well-designed for doing this sort of work.

 Using the default colors
------------------------

 If you don’t have a set of completely custom colors in mind for your project, you can curate your colors from our default palette by importing `tailwindcss/colors` in your configuration file and choosing the colors you want to use:

 

tailwind.config.js



```
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
    },
  },
}
```

 This can be helpful if you want to deliberately limit your color palette and reduce the number of class names suggested by [IntelliSense](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code).

 ### Aliasing color names

 You can also alias the colors in our default palette to make the names simpler and easier to remember:

 

tailwind.config.js



```
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.slate,
      green: colors.emerald,
      purple: colors.violet,
      yellow: colors.amber,
      pink: colors.fuchsia,
    },
  },
}

```

 This is especially common for grays, as you usually only use one set in any given project and it’s nice to be able to type `bg-gray-300` instead of `bg-neutral-300` for example.

 ### Adding additional colors

 If you’d like to add a brand new color to the default palette, add it in the `theme.extend.colors` section of your configuration file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        brown: {
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
        },
      }
    },
  },
}
```

 You can also use `theme.extend.colors` to add additional shades to an existing color if it’s needed for your design:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          950: '#17275c',
        },
      }
    },
  },
}
```

 ### Disabling a default color

 If you’d like to disable any of the default colors, the best approach is to override the default color palette and just include the colors you *do* want:

 

tailwind.config.js



```
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
    },
  },
}
```

 Naming your colors
------------------

 Tailwind uses literal color names *(like red, green, etc.)* and a numeric scale *(where 50 is light and 900 is dark)* by default. We think this is the best choice for most projects, and have found it easier to maintain than using abstract names like `primary` or `danger`.

 That said, you can name your colors in Tailwind whatever you like, and if you’re working on a project that needs to support multiple themes for example, it might make sense to use more abstract names:

 

tailwind.config.js



```
module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}
```

 You can configure those colors explicitly like we have above, or you can pull in colors from our default color palette and alias them:

 

tailwind.config.js



```
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}
```

 Again, we recommend sticking to the default naming convention for most projects, and only using abstract names if you have a really good reason.

 Using CSS variables
-------------------

 If you’d like to define your colors as CSS variables, you’ll need to define those variables as just the color *channels* if you want them to work with the [opacity modifier syntax](text-color#changing-the-opacity):

 

Define your CSS variables as channels with no color space function


 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: 255 115 179;
    --color-secondary: 111 114 185;
    /* ... */
  }
}

```

 

Don’t include the color space function or opacity modifiers won’t work


 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: rgb(255 115 179);
    --color-secondary: rgb(111 114 185);
    /* ... */
  }
}

```

 Then define your colors in your configuration file, being sure to include the color space you’re using, and the special `<alpha-value>` placeholder that Tailwind will use to inject the alpha value when using an opacity modifier:

 

tailwind.config.js



```
module.exports = {
  theme: {
    colors: {
      // Using modern `rgb`
      primary: 'rgb(var(--color-primary) / <alpha-value>)',
      secondary: 'rgb(var(--color-secondary) / <alpha-value>)',

      // Using modern `hsl`
      primary: 'hsl(var(--color-primary) / <alpha-value>)',
      secondary: 'hsl(var(--color-secondary) / <alpha-value>)',

      // Using legacy `rgba`
      primary: 'rgba(var(--color-primary), <alpha-value>)',
      secondary: 'rgba(var(--color-secondary), <alpha-value>)',
    }
  }
}
```

 When defining your colors this way, make sure that the format of your CSS variables is correct for the color function you are using. You’ll want to use spaces if using the modern [space-separated syntax](https://css-tricks.com/the-expanding-gamut-of-color-on-the-web/#aa-a-tale-of-new-syntaxes), and commas if using legacy functions like `rgba` or `hsla`:

 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* For rgb(255 115 179 / <alpha-value>) */
    --color-primary: 255 115 179;

    /* For hsl(198deg 93% 60% / <alpha-value>) */
    --color-primary: 198deg 93% 60%;

    /* For rgba(255, 115, 179, <alpha-value>) */
    --color-primary: 255, 115, 179;
  }
}
```








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/customizing-colors>

Customizing Spacing
===================


Customizing the default spacing and sizing scale for your project.


Use the `spacing` key in the `theme` section of your `tailwind.config.js` file to customize Tailwind’s [default spacing/sizing scale](customizing-spacing#default-spacing-scale).

 

tailwind.config.js



```
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}
```

 By default the spacing scale is inherited by the `padding`, `margin`, `width`, `height`, `maxHeight`, `gap`, `inset`, `space`, and `translate` core plugins.

 Extending the default spacing scale
-----------------------------------

 As described in the [theme documentation](theme#extending-the-default-theme), if you’d like to extend the default spacing scale, you can do so using the `theme.extend.spacing` section of your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      }
    }
  }
}
```

 This will generate classes like `p-13`, `m-15`, and `h-128` in addition to all of Tailwind’s default spacing/sizing utilities.

 Overriding the default spacing scale
------------------------------------

 As described in the [theme documentation](theme#overriding-the-default-theme), if you’d like to override the default spacing scale, you can do so using the `theme.spacing` section of your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    spacing: {
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '24px',
    }
  }
}
```

 This will disable Tailwind’s default spacing scale and generate classes like `p-sm`, `m-md`, `w-lg`, and `h-xl` instead.

 Default spacing scale
---------------------

 By default, Tailwind includes a generous and comprehensive numeric spacing scale. The values are proportional, so `16` is twice as much spacing as `8` for example. One spacing unit is equal to `0.25rem`, which translates to `4px` by default in common browsers.

 

| Name | Size | Pixels | Preview |
| --- | --- | --- | --- |
| 0 | 0px | 0px |  |
| px | 1px | 1px |  |
| 0.5 | 0.125rem | 2px |  |
| 1 | 0.25rem | 4px |  |
| 1.5 | 0.375rem | 6px |  |
| 2 | 0.5rem | 8px |  |
| 2.5 | 0.625rem | 10px |  |
| 3 | 0.75rem | 12px |  |
| 3.5 | 0.875rem | 14px |  |
| 4 | 1rem | 16px |  |
| 5 | 1.25rem | 20px |  |
| 6 | 1.5rem | 24px |  |
| 7 | 1.75rem | 28px |  |
| 8 | 2rem | 32px |  |
| 9 | 2.25rem | 36px |  |
| 10 | 2.5rem | 40px |  |
| 11 | 2.75rem | 44px |  |
| 12 | 3rem | 48px |  |
| 14 | 3.5rem | 56px |  |
| 16 | 4rem | 64px |  |
| 20 | 5rem | 80px |  |
| 24 | 6rem | 96px |  |
| 28 | 7rem | 112px |  |
| 32 | 8rem | 128px |  |
| 36 | 9rem | 144px |  |
| 40 | 10rem | 160px |  |
| 44 | 11rem | 176px |  |
| 48 | 12rem | 192px |  |
| 52 | 13rem | 208px |  |
| 56 | 14rem | 224px |  |
| 60 | 15rem | 240px |  |
| 64 | 16rem | 256px |  |
| 72 | 18rem | 288px |  |
| 80 | 20rem | 320px |  |
| 96 | 24rem | 384px |  |








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/customizing-spacing>

Plugins
=======


Extending Tailwind with reusable third-party plugins.


Overview
--------

 Plugins let you register new styles for Tailwind to inject into the user’s stylesheet using JavaScript instead of CSS.

 To get started with your first plugin, import Tailwind’s `plugin` function from `tailwindcss/plugin`. Then inside your `plugins` array, call the imported `plugin` function with an anonymous function as the first argument.

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, e, config }) {
      // Add your custom styles here
    }),
  ]
}
```

 Plugin functions receive a single object argument that can be [destructured](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) into several helper functions:

 * `addUtilities()`, for registering new static utility styles
* `matchUtilities()`, for registering new dynamic utility styles
* `addComponents()`, for registering new static component styles
* `matchComponents()`, for registering new dynamic component styles
* `addBase()`, for registering new base styles
* `addVariant()`, for registering custom static variants
* `matchVariant()`, for registering custom dynamic variants
* `theme()`, for looking up values in the user’s theme configuration
* `config()`, for looking up values in the user’s Tailwind configuration
* `corePlugins()`, for checking if a core plugin is enabled
* `e()`, for manually escaping strings meant to be used in class names

 Official plugins
----------------

 We’ve developed a handful of official plugins for popular features that for one reason or another don’t belong in core yet.

 Plugins can be added to your project by installing them via npm, then adding them to your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ]
}
```

 ### Typography

 The `@tailwindcss/typography` plugin adds a set of `prose` classes that can be used to quickly add sensible typographic styles to content blocks that come from sources like markdown or a CMS database.

 
```
<article class="prose lg:prose-xl">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children, with the food earning such an iconic status in our culture that kids will often dress
    up as warm, cheesy loaf for Halloween.
  </p>
  <p>
    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
    springing up around the country.
  </p>
  <!-- ... -->
</article>
```
 [Learn more about the typography plugin →](typography-plugin)

 ### Forms

 The `@tailwindcss/forms` plugin adds an opinionated form reset layer that makes it easier to style form elements with utility classes.

 
```
<!-- You can actually customize padding on a select element: -->
<select class="px-4 py-3 rounded-full">
  <!-- ... -->
</select>

<!-- Or change a checkbox color using text color utilities: -->
<input type="checkbox" class="rounded text-pink-500" />
```
 [Learn more about the forms plugin →](https://github.com/tailwindlabs/tailwindcss-forms)

 ### Aspect ratio

 The `@tailwindcss/aspect-ratio` plugin is an alternative to native `aspect-ratio` support that works in older browsers, and adds `aspect-w-{n}` and `aspect-h-{n}` classes that can be combined to give an element a fixed aspect ratio.

 
```
<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
```
 [Learn more about the aspect ratio plugin →](https://github.com/tailwindlabs/tailwindcss-aspect-ratio)

 ### Container queries

 The `@tailwindcss/container-queries` plugin adds new `@{size}` variants like `@sm` and `@md` that let you style an element based on the dimensions of a parent marked with `@container` instead of the viewport.

 
```
<div class="@container">
  <div class="@lg:text-sky-400">
    <!-- ... -->
  </div>
</div>
```
 [Learn more about the container queries plugin →](https://github.com/tailwindlabs/tailwindcss-container-queries)

 Adding utilities
----------------

 The `addUtilities` and `matchUtilities` functions allow you to register new styles in Tailwind’s `utilities` layer.

 Like with the utilities Tailwind includes by default, utilities added by a plugin will only be included in the generated CSS if they are actually being used in the project.

 ### Static utilities

 Use the `addUtilities` function to register simple static utilities that don’t support user-provided values:

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.content-auto': {
          'content-visibility': 'auto',
        },
        '.content-hidden': {
          'content-visibility': 'hidden',
        },
        '.content-visible': {
          'content-visibility': 'visible',
        },
      })
    })
  ]
}
```

 Learn more about how to represent your styles in JavaScript in the [CSS-in-JS syntax](plugins#css-in-js-syntax) reference.

 ### Dynamic utilities

 Use the `matchUtilities` function to register utilities that map to values defined in the user’s `theme` configuration:

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    tabSize: {
      1: '1',
      2: '2',
      4: '4',
      8: '8',
    }
  },
  plugins: [
    plugin(function({ matchUtilities, theme }) {
      matchUtilities(
        {
          tab: (value) => ({
            tabSize: value
          }),
        },
        { values: theme('tabSize') }
      )
    })
  ]
}
```

 Utilities defined this way also support [arbitrary values](adding-custom-styles#using-arbitrary-values), which means you can use values not present in the theme using square bracket notation:

 
```
<div class="tab-[13]">
  <!-- ... -->
</div>
```
 ### Prefix and important

 By default, plugin utilities automatically respect the user’s [`prefix`](configuration#prefix) and [`important`](configuration#important) preferences.

 That means that given this Tailwind configuration:

 

tailwind.config.js



```
module.exports = {
  prefix: 'tw-',
  important: true,
  // ...
}
```

 …the example plugin above would generate the following CSS:

 
```
.tw-content-auto {
  content-visibility: auto !important;
}
.tw-content-hidden {
  content-visibility: hidden !important;
}
.tw-content-visible {
  content-visibility: visible !important;
}
```
 ### Using with modifiers

 Any custom utilities added using `addUtilities` can automatically be used with modifiers:

 
```
<div class="content-auto lg:content-visible">
  <!-- ... -->
</div>
```
 Learn more in the [Hover, Focus, and Other States](hover-focus-and-other-states) documentation.

 ### Providing default values

 Utility plugins can provide default values by including a configuration object as the second argument to the `plugin` function:

 

./plugins/tab-size.js



```
const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ matchUtilities, theme }) {
  matchUtilities(
    {
      tab: (value) => ({
        tabSize: value
      }),
    },
    { values: theme('tabSize') }
  )
}, {
  theme: {
    tabSize: {
      1: '1',
      2: '2',
      4: '4',
      8: '8',
    }
  }
})
```

 These values behave just like the values in the default configuration, and can be overridden or extended by the end user.

 Adding components
-----------------

 The `addComponents` function allows you to register new styles in Tailwind’s `components` layer.

 Use it to add more opinionated, complex classes like buttons, form controls, alerts, etc; the sort of pre-built components you often see in other frameworks that you might need to override with utility classes.

 To add new component styles from a plugin, call `addComponents`, passing in your styles using [CSS-in-JS syntax](plugins#css-in-js-syntax):

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-blue': {
          backgroundColor: '#3490dc',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#2779bd'
          },
        },
        '.btn-red': {
          backgroundColor: '#e3342f',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#cc1f1a'
          },
        },
      })
    })
  ]
}
```

 Like with other component classes in Tailwind, component classes added by a plugin will only be included in the generated CSS if they are actually being used in the project.

 ### Prefix and important

 By default, component classes automatically respect the user’s `prefix` preference, but *they are not affected* by the user’s `important` preference.

 That means that given this Tailwind configuration:

 

tailwind.config.js



```
module.exports = {
  prefix: 'tw-',
  important: true,
  // ...
}
```

 …the example plugin above would generate the following CSS:

 
```
.tw-btn {
  padding: .5rem 1rem;
  border-radius: .25rem;
  font-weight: 600;
}
.tw-btn-blue {
  background-color: #3490dc;
  color: #fff;
}
.tw-btn-blue:hover {
  background-color: #2779bd;
}
.tw-btn-red {
  background-color: #e3342f;
  color: #fff;
}
.tw-btn-red:hover {
  background-color: #cc1f1a;
}
```
 Although there’s rarely a good reason to make component declarations important, if you really need to do it you can always add `!important` manually:

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.btn': {
          padding: '.5rem 1rem !important',
          borderRadius: '.25rem !important',
          fontWeight: '600 !important',
        },
        // ...
      })
    })
  ]
}
```

 All classes in a selector will be prefixed by default, so if you add a more complex style like:

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  prefix: 'tw-',
  plugins: [
    plugin(function({ addComponents }) {
      const components = {
        // ...
        '.navbar-inverse a.nav-link': {
            color: '#fff',
        }
      }

      addComponents(components)
    })
  ]
}
```

 …the following CSS would be generated:

 
```
.tw-navbar-inverse a.tw-nav-link {
    color: #fff;
}
```
 ### Using with modifiers

 Any component classes added using `addComponents` can automatically be used with modifiers:

 
```
<div class="btn md:btn-lg">
  <!-- ... -->
</div>
```
 Learn more in the [Hover, Focus, and Other States](hover-focus-and-other-states) documentation.

 Adding base styles
------------------

 The `addBase` function allows you to register new styles in Tailwind’s `base` layer. Use it to add things like base typography styles, opinionated global resets, or `@font-face` rules.

 To add new base styles from a plugin, call `addBase`, passing in your styles using [CSS-in-JS syntax](plugins#css-in-js-syntax):

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addBase, theme }) {
      addBase({
        'h1': { fontSize: theme('fontSize.2xl') },
        'h2': { fontSize: theme('fontSize.xl') },
        'h3': { fontSize: theme('fontSize.lg') },
      })
    })
  ]
}
```

 Since base styles are meant to target bare selectors like `div` or `h1`, they do not respect the user’s `prefix` or `important` configuration.

 Adding variants
---------------

 The `addVariant` and `matchVariant` functions allow you to register your own custom [modifiers](hover-focus-and-other-states) that can be used just like built-in variants like `hover`, `focus`, or `supports`.

 ### Static variants

 Use the `addVariant` function for simple custom variants, passing in the name of your custom variant, and a format string that represents how the selector should be modified.

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('optional', '&:optional')
      addVariant('hocus', ['&:hover', '&:focus'])
      addVariant('inverted-colors', '@media (inverted-colors: inverted)')
    })
  ]
}
```

 The first argument is the modifier name that users will use in their HTML, so the above example would make it possible to write classes like these:

 
```
<form class="flex inverted-colors:outline ...">
  <input class="optional:border-gray-300 ..." />
  <button class="bg-blue-500 hocus:bg-blue-600">...</button>
</form>
```
 ### Dynamic variants

 Use the `matchVariant` function to register new parameterized variants like the built-in `supports-*`, `data-*`, and `aria-*` variants:

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ matchVariant }) {
      matchVariant(
        'nth',
        (value) => {
          return `&:nth-child(${value})`;
        },
        {
          values: {
            1: '1',
            2: '2',
            3: '3',
          }
        }
      );
    })
  ]
}
```

 Variants defined with `matchVariant` also support arbitrary values using square bracket notation:

 
```
<div class="nth-[3n+1]:bg-blue-500 ...">
  <!-- ... -->
</div>
```
 Use the `sort` option to control the source order of the generated CSS if needed to avoid precedence issues with other values that come from the same variant:

 
```
matchVariant("min", (value) => `@media (min-width: ${value})`, {
  sort(a, z) {
    return parseInt(a.value) - parseInt(z.value);
  },
});
```
 ### Parent and sibling states

 Your custom modifiers won’t automatically work with Tailwind’s [parent](hover-focus-and-other-states#styling-based-on-parent-state) and [sibling](hover-focus-and-other-states#styling-based-on-sibling-state) state modifiers.

 To support the `group-*` and `peer-*` versions of your own custom modifiers, register them as separate variants using the special `:merge` directive to ensure the `.group` and `.peer` classes only appear once in the final selector.

 

tailwind.config.js



```
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('optional', '&:optional')
      addVariant('group-optional', ':merge(.group):optional &')
      addVariant('peer-optional', ':merge(.peer):optional ~ &')
    })
  ]
}

```

 Extending the configuration
---------------------------

 Plugins can merge their own set of configuration values into the user’s `tailwind.config.js` configuration by providing an object as the second argument to the `plugin` function:

 

./plugins/tab-size.js



```
const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ matchUtilities, theme }) {
  matchUtilities(
    {
      tab: (value) => ({
        tabSize: value
      }),
    },
    { values: theme('tabSize') }
  )
}, {
  theme: {
    tabSize: {
      1: '1',
      2: '2',
      4: '4',
      8: '8',
    }
  }
})
```

 This can be useful for things like providing default `theme` values for the classes your plugin generates.

 Exposing options
----------------

 Sometimes it makes sense for a plugin to be configurable in a way that doesn’t really belong under `theme`, like perhaps you want users to be able to customize the class name your plugin uses.

 For cases like this, you can use `plugin.withOptions` to define a plugin that can be invoked with a configuration object. This API is similar to the regular `plugin` API, except each argument should be a function that receives the user’s `options` and returns the value that you would have normally passed in using the regular API:

 

./plugins/markdown.js



```
const plugin = require('tailwindcss/plugin')

module.exports = plugin.withOptions(function (options = {}) {
  return function({ addComponents }) {
    const className = options.className ?? 'markdown'

    addComponents({
      [`.${className}`]: {
        // ...
      }
    })
  }
}, function (options) {
  return {
    theme: {
      markdown: {
        // ...
      }
    },
  }
})
```

 The user would invoke your plugin passing along their options when registering it in their `plugins` configuration:

 

tailwind.config.js



```
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('./plugins/markdown.js')({
      className: 'wysiwyg'
    })
  ],
}
```

 The user can also register plugins created this way normally without invoking them if they don’t need to pass in any custom options:

 

tailwind.config.js



```
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('./plugins/markdown.js')
  ],
}
```

 CSS-in-JS syntax
----------------

 Tailwind’s plugin system expects CSS rules written as JavaScript objects, using the same sort of syntax you might recognize from CSS-in-JS libraries like [Emotion](https://emotion.sh/docs/object-styles), powered by [postcss-js](https://github.com/postcss/postcss-js) under-the-hood.

 Consider this simple CSS rule:

 
```
.card {
  background-color: #fff;
  border-radius: .25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
```
 Translating this to a CSS-in-JS object would look like this:

 
```
addComponents({
  '.card': {
    'background-color': '#fff',
    'border-radius': '.25rem',
    'box-shadow': '0 2px 4px rgba(0,0,0,0.2)',
  }
})
```
 For convenience, property names can also be written in camelCase and will be automatically translated to dash-case:

 
```
addComponents({
  '.card': {
    backgroundColor: '#fff',
    borderRadius: '.25rem',
    boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
  }
})
```
 Nesting is also supported (powered by [postcss-nested](https://github.com/postcss/postcss-nested)), using the same syntax you might be familiar with from Sass or Less:

 
```
addComponents({
  '.card': {
    backgroundColor: '#fff',
    borderRadius: '.25rem',
    boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
    '&:hover': {
      boxShadow: '0 10px 15px rgba(0,0,0,0.2)',
    },
    '@media (min-width: 500px)': {
      borderRadius: '.5rem',
    }
  }
})
```
 Multiple rules can be defined in the same object:

 
```
addComponents({
  '.btn': {
    padding: '.5rem 1rem',
    borderRadius: '.25rem',
    fontWeight: '600',
  },
  '.btn-blue': {
    backgroundColor: '#3490dc',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#2779bd'
    },
  },
  '.btn-red': {
    backgroundColor: '#e3342f',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#cc1f1a'
    },
  },
})
```
 …or as an array of objects in case you need to repeat the same key:

 
```
addComponents([
  {
    '@media (min-width: 500px)': {
      // ...
    }
  },
  {
    '@media (min-width: 500px)': {
      // ...
    }
  },
  {
    '@media (min-width: 500px)': {
      // ...
    }
  },
])
```







 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/plugins>

Presets
=======


Creating your own reusable configuration presets.


By default, any configuration you add in your own `tailwind.config.js` file is intelligently merged with the [default configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js), with your own configuration acting as a set of overrides and extensions.

 The `presets` option lets you specify a *different* configuration to use as your base, making it easy to package up a set of customizations that you’d like to reuse across projects.

 

tailwind.config.js



```
module.exports = {
  presets: [
    require('@acmecorp/tailwind-base')
  ],
  // ...
}
```

 This can be very useful for teams that manage multiple Tailwind projects for the same brand where they want a single source of truth for colors, fonts, and other common customizations.

 Creating a preset
-----------------

 Presets are just regular Tailwind configuration objects, taking the exact same shape as the configuration you would add in your `tailwind.config.js` file.

 

my-preset.js



```
// Example preset
module.exports = {
  theme: {
    colors: {
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
    },
    extend: {
      flexGrow: {
        2: '2',
        3: '3',
      },
      zIndex: {
        60: '60',
        70: '70',
        80: '80',
        90: '90',
        100: '100',
      },
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}
```

 As you can see, presets can contain all of the configuration options you’re used to, including theme overrides and extensions, adding plugins, configuring a prefix, and so on. Read about [how configurations are merged](presets#merging-logic-in-depth) for more details.

 Assuming this preset was saved at `./my-preset.js`, you would use it by adding it to the `tailwind.config.js` file in your actual project under the `presets` key:

 

tailwind.config.js



```
module.exports = {
  presets: [
    require('./my-preset.js')
  ],
  // Customizations specific to this project would go here
  theme: {
    extend: {
      minHeight: {
        48: '12rem',
      }
    }
  },
}
```

 By default, presets themselves extend Tailwind’s [default configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js) just like your own configuration would. If you’d like to create a preset that completely replaces the default configuration, include an empty `presets` key in the preset itself:

 
```
// Example preset
module.exports = {
  presets: [],
  theme: {
    // ...
  },
  plugins: [
    // ...
  ],
}
```
 For more information, read about [disabling the default configuration](presets#disabling-the-default-configuration).

 Merging logic in-depth
----------------------

 Project-specific configurations (those found in your `tailwind.config.js` file) are merged against presets the same way they are merged against the default configuration.

 The following options in `tailwind.config.js` simply **replace** the same option if present in a preset:

 * `content`
* `darkMode`
* `prefix`
* `important`
* `variantOrder`
* `separator`
* `safelist`

 The remaining options are each carefully merged in the way that makes the most sense for that option, explained in more detail below.

 ### Theme

 The `theme` object is merged shallowly, with top-level keys in `tailwind.config.js` replacing the same top-level keys in any presets. The exception to this is the `extend` key, which is collected across all configurations and applied on top of the rest of the theme configuration.

 Learn more about how the `theme` option works in the [theme configuration documentation](theme).

 ### Presets

 The `presets` array is merged across configurations, allowing presets to include their own presets, which can also include their own presets.

 ### Plugins

 The `plugins` array is merged across configurations to make it possible for a preset to register plugins while also allowing you to add additional plugins at the project-level.

 This means it’s not possible to disable a plugin that has been added by a preset. If you find yourself wanting to disable a plugin in a preset, it’s a sign that you should probably remove that plugin from the preset and include it on a project-by-project basis instead, or [split your preset into two presets](presets#extending-multiple-presets).

 ### Core plugins

 The `corePlugins` option behaves differently depending on whether you configure it as an object or as an array.

 If you configure `corePlugins` as an object, it is merged across configurations.

 

my-preset.js



```
module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}
```

 

tailwind.config.js



```
module.exports = {
  presets: [
    require('./my-preset.js'),
  ],
  // This configuration will be merged
  corePlugins: {
    cursor: false
  }
}
```

 If you configure `corePlugins` as an array, it replaces any `corePlugins` configuration provided by your configured preset(s).

 

my-preset.js



```
module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}
```

 

tailwind.config.js



```
module.exports = {
  presets: [
    require('./example-preset.js'),
  ],
  // This will replace the configuration in the preset
  corePlugins: ['float', 'padding', 'margin']
}
```

 Extending multiple presets
--------------------------

 The `presets` option is an array and can accept multiple presets. This is useful if you want to split your reusable customizations up into composable chunks that can be imported independently.

 

tailwind.config.js



```
module.exports = {
  presets: [
    require('@acmecorp/tailwind-colors'),
    require('@acmecorp/tailwind-fonts'),
    require('@acmecorp/tailwind-spacing'),
  ]
}
```

 When adding multiple presets, it’s important to note that if they overlap in any way, they are resolved the same way your own customizations are resolved against a preset, and the last configuration wins.

 For example, if both of these configurations provided a custom color palette (and were not using `extend`), the color palette from `configuration-b` would be used:

 

tailwind.config.js



```
module.exports = {
  presets: [
    require('@acmecorp/configuration-a'),
    require('@acmecorp/configuration-b'),
  ]
}
```

 Disabling the default configuration
-----------------------------------

 If you’d like to completely disable the default configuration and start with no base configuration at all, set `presets` to an empty array:

 

tailwind.config.js



```
module.exports = {
  presets: [],
  // ...
}
```

 This will completely disable all of Tailwind’s defaults, so no colors, font families, font sizes, spacing values, etc. will be generated at all.

 You can also do this from within a preset if you’d like your preset to provide a complete design system on its own that doesn’t extend Tailwind’s defaults:

 

my-preset.js



```
module.exports = {
  presets: [],
  // ...
}
```

 

tailwind.config.js



```
module.exports = {
  presets: [
    require('./my-preset.js')
  ],
  // ...
}
```








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/presets>

Preflight
=========


An opinionated set of base styles for Tailwind projects.


Overview
--------

 Built on top of [modern-normalize](https://github.com/sindresorhus/modern-normalize), Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

 Tailwind automatically injects these styles when you include `@tailwind base` in your CSS:

 
```
@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;
```
 While most of the styles in Preflight are meant to go unnoticed — they simply make things behave more like you’d expect them to — some are more opinionated and can be surprising when you first encounter them.

 For a complete reference of all the styles applied by Preflight, [see the stylesheet](https://unpkg.com/tailwindcss@%5E3/src/css/preflight.css).

 Default margins are removed
---------------------------

 Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc.

 
```
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
```
 This makes it harder to accidentally rely on margin values applied by the user-agent stylesheet that are not part of your spacing scale.

 Headings are unstyled
---------------------

 All heading elements are completely unstyled by default, and have the same font-size and font-weight as normal text.

 
```
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
```
 The reason for this is two-fold:

 * **It helps you avoid accidentally deviating from your type scale**. By default, browsers assign sizes to headings that don’t exist in Tailwind’s default type scale, and aren’t guaranteed to exist in your own type scale.
* **In UI development, headings should often be visually de-emphasized**. Making headings unstyled by default means any styling you apply to headings happens consciously and deliberately.

 You can always add default header styles to your project by [adding your own base styles](/docs/adding-custom-styles#adding-base-styles).

 If you’d like to selectively introduce sensible default heading styles into article-style parts of a page, we recommend the [@tailwindcss/typography plugin](typography-plugin).

 Lists are unstyled
------------------

 Ordered and unordered lists are unstyled by default, with no bullets/numbers and no margin or padding.

 
```
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
```
 If you’d like to style a list, you can do so using the <list-style-type> and <list-style-position> utilities:

 
```
<ul class="list-disc list-inside">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
```
 You can always add default list styles to your project by [adding your own base styles](/docs/adding-custom-styles#adding-base-styles).

 If you’d like to selectively introduce default list styles into article-style parts of a page, we recommend the [@tailwindcss/typography plugin](typography-plugin).

 ### Accessibility considerations

 Unstyled lists are [not announced as lists by VoiceOver](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/). If your content is truly a list but you would like to keep it unstyled, [add a “list” role](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html) to the element:

 
```
<ul role="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
```
 Images are block-level
----------------------

 Images and other replaced elements (like `svg`, `video`, `canvas`, and others) are `display: block` by default.

 
```
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}
```
 This helps to avoid unexpected alignment issues that you often run into using the browser default of `display: inline`.

 If you ever need to make one of these elements `inline` instead of `block`, simply use the `inline` utility:

 
```
<img class="inline" src="..." alt="...">
```
 Images are constrained to the parent width
------------------------------------------

 Images and videos are constrained to the parent width in a way that preserves their intrinsic aspect ratio.

 
```
img,
video {
  max-width: 100%;
  height: auto;
}
```
 This prevents them from overflowing their containers and makes them responsive by default. If you ever need to override this behavior, use the `max-w-none` utility:

 
```
<img class="max-w-none" src="..." alt="...">
```
 Border styles are reset globally
--------------------------------

 In order to make it easy to add a border by simply adding the `border` class, Tailwind overrides the default border styles for all elements with the following rules:

 
```
*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}
```
 Since the `border` class only sets the `border-width` property, this reset ensures that adding that class always adds a solid 1px border using your configured default border color.

 This can cause some unexpected results when integrating certain third-party libraries, like [Google maps](https://github.com/tailwindlabs/tailwindcss/issues/484) for example.

 When you run into situations like this, you can work around them by overriding the Preflight styles with your own custom CSS:

 
```
.google-map * {
  border-style: none;
}
```
 Extending Preflight
-------------------

 If you’d like to add your own base styles on top of Preflight, simply add them to your CSS using the `@layer base` directive:

 
```
@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  a {
    @apply text-blue-600 underline;
  }
}

@tailwind components;

@tailwind utilities;
```
 Learn more in the [adding base styles documentation](/docs/adding-custom-styles#adding-base-styles).

 Disabling Preflight
-------------------

 If you’d like to completely disable Preflight — perhaps because you’re integrating Tailwind into an existing project or because you’d like to provide your own base styles — all you need to do is set `preflight` to `false` in the `corePlugins` section of your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  corePlugins: {
    preflight: false,
  }
}

```








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/preflight>

Aspect Ratio
============


Utilities for controlling the aspect ratio of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| aspect-auto | aspect-ratio: auto;  |
| aspect-square | aspect-ratio: 1 / 1;  |
| aspect-video | aspect-ratio: 16 / 9;  |






Basic usage
-----------

 ### Setting the aspect ratio

 Use the `aspect-{ratio}` utilities to set the desired aspect ratio of an element.

  
```
<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>
```
 Tailwind doesn’t include a large set of aspect ratio values out of the box since it’s easier to just use arbitrary values. See the [arbitrary values](aspect-ratio#arbitrary-values) section for more information.

 ### Browser support

 The `aspect-{ratio}` utilities use the native `aspect-ratio` CSS property, which was not supported in Safari until version 15. Until Safari 15 is popularized, Tailwind’s [aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) plugin is a good alternative.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:aspect-square` to only apply the `aspect-square` utility on hover.



```
<iframe class="w-full aspect-video hover:aspect-square" src="https://www.youtube.com/..."></iframe>
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:aspect-square` to apply the `aspect-square` utility at only medium screen sizes and above.



```
<iframe class="w-full aspect-video md:aspect-square" src="https://www.youtube.com/..."></iframe>
```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides a minimal set of `aspect-ratio` utilities. You can customize these values by editing `theme.aspectRatio` or `theme.extend.aspectRatio` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      aspectRatio: {
        '4/3': '4 / 3',
      },
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `aspect-ratio` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<iframe class="w-full aspect-[4/3]" src="https://www.youtube.com/..."></iframe>
```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/aspect-ratio>

Container
=========


A component for fixing an element's width to the current breakpoint.


Quick reference
---------------









| Class | Breakpoint | Properties |
| --- | --- | --- |
| container | None | width: 100%; |
| sm (640px) | max-width: 640px; |
| md (768px) | max-width: 768px; |
| lg (1024px) | max-width: 1024px; |
| xl (1280px) | max-width: 1280px; |
| 2xl (1536px) | max-width: 1536px; |






Basic usage
-----------

 ### Using the container

 The `container` class sets the `max-width` of an element to match the `min-width` of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.

 Note that unlike containers you might have used in other frameworks, **Tailwind’s container does not center itself automatically and does not have any built-in horizontal padding.**

 To center a container, use the `mx-auto` utility:

 
```
<div class="container mx-auto">
  <!-- ... -->
</div>
```
 To add horizontal padding, use the `px-{size}` utilities:

 
```
<div class="container mx-auto px-4">
  <!-- ... -->
</div>
```
 If you’d like to center your containers by default or include default horizontal padding, see the [customization options](container#customizing) below.

 Applying conditionally
----------------------

 ### Responsive variants

 The `container` class also includes responsive variants like `md:container` by default that allow you to make something behave like a container at only a certain breakpoint and up:

 
```
<!-- Full-width fluid until the `md` breakpoint, then lock to container -->
<div class="md:container md:mx-auto">
  <!-- ... -->
</div>
```
 Customizing
-----------

 ### Centering by default

 To center containers by default, set the `center` option to `true` in the `theme.container` section of your config file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}
```

 ### Adding horizontal padding

 To add horizontal padding by default, specify the amount of padding you’d like using the `padding` option in the `theme.container` section of your config file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}
```

 If you want to specify a different padding amount for each breakpoint, use an object to provide a `default` value and any breakpoint-specific overrides:

 

tailwind.config.js



```
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};
```








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/container>

Columns
=======


Utilities for controlling the number of columns within an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| columns-1 | columns: 1;  |
| columns-2 | columns: 2;  |
| columns-3 | columns: 3;  |
| columns-4 | columns: 4;  |
| columns-5 | columns: 5;  |
| columns-6 | columns: 6;  |
| columns-7 | columns: 7;  |
| columns-8 | columns: 8;  |
| columns-9 | columns: 9;  |
| columns-10 | columns: 10;  |
| columns-11 | columns: 11;  |
| columns-12 | columns: 12;  |
| columns-auto | columns: auto;  |
| columns-3xs | columns: 16rem; /\* 256px \*/ |
| columns-2xs | columns: 18rem; /\* 288px \*/ |
| columns-xs | columns: 20rem; /\* 320px \*/ |
| columns-sm | columns: 24rem; /\* 384px \*/ |
| columns-md | columns: 28rem; /\* 448px \*/ |
| columns-lg | columns: 32rem; /\* 512px \*/ |
| columns-xl | columns: 36rem; /\* 576px \*/ |
| columns-2xl | columns: 42rem; /\* 672px \*/ |
| columns-3xl | columns: 48rem; /\* 768px \*/ |
| columns-4xl | columns: 56rem; /\* 896px \*/ |
| columns-5xl | columns: 64rem; /\* 1024px \*/ |
| columns-6xl | columns: 72rem; /\* 1152px \*/ |
| columns-7xl | columns: 80rem; /\* 1280px \*/ |






Basic usage
-----------

 ### Adding based on column count

 Use the `columns-{count}` utilities to set the number of columns that should be created for the content within an element. The column width will be automatically adjusted to accommodate that number.

 
```
<div class="columns-3 ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>
```
 ### Adding based on column width

 Use the `columns-{width}` utilities to set the ideal column width for the content within an element, with the number of columns (the count) automatically adjusting to accommodate that value.

 This “t-shirt” scale is the same as the <max-width> scale, with the addition of `2xs` and `3xs`, since smaller columns may be desirable.

  
```
<div class="columns-3xs ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>
```
 ### Setting the column gap

 To specify the width between columns, you can use the [gap-x](gap) utilities:

 
```
<div class="gap-8 columns-3 ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:columns-3` to only apply the `columns-3` utility on hover.



```
<div class="columns-2 hover:columns-3">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:columns-3` to apply the `columns-3` utility at only medium screen sizes and above.



```
<div class="columns-2 md:columns-3">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides a column count scale from `1-12` as well as a column t-shirt scale from `3xs-7xl`. You can customize these values by editing `theme.columns` or `theme.extend.columns` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      columns: {
        '4xs': '14rem',
      }
    },
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `columns` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="columns-[10rem]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/columns>

Break After
===========


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


Quick reference
---------------





| Class | Properties |
| --- | --- |
| 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;  |






Basic usage
-----------

 ### Setting the break-after behavior

 Use the `break-after-{value}` utilities to control how a column or page break should behave after an element. For example, use the `break-after-column` utility to force a column break after an element.

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

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:break-after-column` to only apply the `break-after-column` utility on hover.



```
<div class="hover:break-after-column">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:break-after-column` to apply the `break-after-column` utility at only medium screen sizes and above.



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

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/break-after>

Break Before
============


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


Quick reference
---------------





| Class | Properties |
| --- | --- |
| break-before-auto | break-before: auto;  |
| break-before-avoid | break-before: avoid;  |
| break-before-all | break-before: all;  |
| break-before-avoid-page | break-before: avoid-page;  |
| break-before-page | break-before: page;  |
| break-before-left | break-before: left;  |
| break-before-right | break-before: right;  |
| break-before-column | break-before: column;  |






Basic usage
-----------

 ### Setting the break-before behavior

 Use the `break-before-{value}` utilities to control how a column or page break should behave before an element. For example, use the `break-before-column` utility to force a column break before an element.

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

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:break-before-column` to only apply the `break-before-column` utility on hover.



```
<div class="hover:break-before-column">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:break-before-column` to apply the `break-before-column` utility at only medium screen sizes and above.



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

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/break-before>

Break Inside
============


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


Quick reference
---------------





| Class | Properties |
| --- | --- |
| 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;  |






Basic usage
-----------

 ### Setting the break-inside behavior

 Use the `break-inside-{value}` utilities to control how a column or page break should behave within an element. For example, use the `break-inside-avoid-column` utility to avoid a column break within an element.

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

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:break-inside-avoid-column` to only apply the `break-inside-avoid-column` utility on hover.



```
<div class="hover:break-inside-avoid-column">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:break-inside-avoid-column` to apply the `break-inside-avoid-column` utility at only medium screen sizes and above.



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

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/break-inside>

Box Decoration Break
====================


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


Quick reference
---------------





| Class | Properties |
| --- | --- |
| box-decoration-clone | box-decoration-break: clone;  |
| box-decoration-slice | box-decoration-break: slice;  |






Basic usage
-----------

 ### Setting the box decoration break

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

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

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:box-decoration-slice` to only apply the `box-decoration-slice` utility on hover.



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

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:box-decoration-slice` to apply the `box-decoration-slice` utility at only medium screen sizes and above.



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

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/box-decoration-break>

Floats
======


Utilities for controlling the wrapping of content around an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| float-right | float: right;  |
| float-left | float: left;  |
| float-none | float: none;  |






Basic usage
-----------

 ### Floating elements to the right

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

  
```
<img class="float-right ..." src="path/to/image.jpg">
<p>Maybe we can live without libraries, people like you and me. ...</p>
```
 ### Floating elements to the left

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

  
```
<img class="float-left ..." src="path/to/image.jpg">
<p>Maybe we can live without libraries, people like you and me. ...</p>
```
 ### Disabling a float

 Use `float-none` to reset any floats that are applied to an element. This is the default value for the float property.

  
```
<img class="float-none ..." src="path/to/image.jpg">
<p>Maybe we can live without libraries, people like you and me. ...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:float-right` to only apply the `float-right` utility on hover.



```
<img class="float-right hover:float-left" src="path/to/image.jpg">
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:float-right` to apply the `float-right` utility at only medium screen sizes and above.



```
<img class="float-right md:float-left" src="path/to/image.jpg">
```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/float>

Display
=======


Utilities for controlling the display box type of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| block | display: block;  |
| inline-block | display: inline-block;  |
| inline | display: inline;  |
| flex | display: flex;  |
| inline-flex | display: inline-flex;  |
| table | display: table;  |
| inline-table | display: inline-table;  |
| table-caption | display: table-caption;  |
| table-cell | display: table-cell;  |
| table-column | display: table-column;  |
| table-column-group | display: table-column-group;  |
| table-footer-group | display: table-footer-group;  |
| table-header-group | display: table-header-group;  |
| table-row-group | display: table-row-group;  |
| table-row | display: table-row;  |
| flow-root | display: flow-root;  |
| grid | display: grid;  |
| inline-grid | display: inline-grid;  |
| contents | display: contents;  |
| list-item | display: list-item;  |
| hidden | display: none;  |






Basic usage
-----------

 ### Block & Inline

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

 
```
<div>
  When controlling the flow of text, using the CSS property
  <span class="inline">display: inline</span>
  will cause the text inside the element to wrap normally.

  While using the property <span class="inline-block">display: inline-block</span>
  will wrap the element to prevent the text inside from extending beyond its parent.

  Lastly, using the property <span class="block">display: block</span>
  will put the element on its own line and fill its parent.
</div>
```
 ### Flow Root

 Use `flow-root` to create a block-level element with its own [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context).

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

 Use `flex` to create a block-level flex container.

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

 Use `inline-flex` to create an inline flex container that flows with text.

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

 Use `grid` to create a grid container.

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

 Use `inline-grid` to create an inline grid container.

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

 Use `contents` to create a “phantom” container whose children act like direct children of the parent.

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

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

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

 Use `hidden` to set an element to `display: none` and remove it from the page layout (compare with `invisible` from the [visibility](visibility#invisible) documentation).

 
```
<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:inline-flex` to only apply the `inline-flex` utility on hover.



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

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:inline-flex` to apply the `inline-flex` utility at only medium screen sizes and above.



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

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/display>

Box Sizing
==========


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


Quick reference
---------------





| Class | Properties |
| --- | --- |
| box-border | box-sizing: border-box;  |
| box-content | box-sizing: content-box;  |






Basic usage
-----------

 ### Including borders and padding

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

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

 Tailwind makes this the default for all elements in our [preflight base styles](preflight).

 
```
<div class="box-border h-32 w-32 p-4 border-4 ...">
  <!-- ... -->
</div>
```
 ### Excluding borders and padding

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

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

 
```
<div class="box-content h-32 w-32 p-4 border-4 ...">
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:box-content` to only apply the `box-content` utility on hover.



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

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:box-content` to apply the `box-content` utility at only medium screen sizes and above.



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

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/box-sizing>

Clear
=====


Utilities for controlling the wrapping of content around an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| clear-left | clear: left;  |
| clear-right | clear: right;  |
| clear-both | clear: both;  |
| clear-none | clear: none;  |






Basic usage
-----------

 ### Clearing left-floated elements

 Use `clear-left` to position an element below any preceding left-floated elements.

  
```
<img class="float-left ..." src="path/to/image.jpg">
<img class="float-right ..." src="path/to/image.jpg">
<p class="clear-left ...">Maybe we can live without libraries...</p>
```
 ### Clearing right-floated elements

 Use `clear-right` to position an element below any preceding right-floated elements.

  
```
<img class="float-left ..." src="path/to/image.jpg">
<img class="float-right ..." src="path/to/image.jpg">
<p class="clear-right ...">Maybe we can live without libraries...</p>
```
 ### Clearing all floated elements

 Use `clear-both` to position an element below all preceding floated elements.

  
```
<img class="float-left ..." src="path/to/image.jpg">
<img class="float-right ..." src="path/to/image.jpg">
<p class="clear-both ...">Maybe we can live without libraries...</p>
```
 ### Disabling applied clears

 Use `clear-none` to reset any clears that are applied to an element. This is the default value for the clear property.

  
```
<img class="float-left ..." src="path/to/image.jpg">
<img class="float-right ..." src="path/to/image.jpg">
<p class="clear-none ...">Maybe we can live without libraries...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:clear-none` to only apply the `clear-none` utility on hover.



```
<p class="clear-left hover:clear-none">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:clear-none` to apply the `clear-none` utility at only medium screen sizes and above.



```
<p class="clear-left md:clear-none">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/clear>

Isolation
=========


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


Quick reference
---------------





| Class | Properties |
| --- | --- |
| isolate | isolation: isolate;  |
| isolation-auto | isolation: auto;  |






Basic usage
-----------

 ### Setting the stacking context

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

 
```
<div class="isolate ...">
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:isolation-auto` to only apply the `isolation-auto` utility on hover.



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

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:isolation-auto` to apply the `isolation-auto` utility at only medium screen sizes and above.



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

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/isolation>

Object Fit
==========


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


Quick reference
---------------





| Class | Properties |
| --- | --- |
| object-contain | object-fit: contain;  |
| object-cover | object-fit: cover;  |
| object-fill | object-fit: fill;  |
| object-none | object-fit: none;  |
| object-scale-down | object-fit: scale-down;  |






Basic usage
-----------

 ### Resizing to cover a container

 Resize an element’s content to cover its container using `object-cover`.

 
```
<div class="bg-indigo-300 ...">
  <img class="object-cover h-48 w-96 ...">
</div>
```
 ### Containing an element

 Resize an element’s content to stay contained within its container using `object-contain`.

 
```
<div class="bg-purple-300 ...">
  <img class="object-contain h-48 w-96 ...">
</div>
```
 ### Stretching to fit a container

 Stretch an element’s content to fit its container using `object-fill`.

 
```
<div class="bg-sky-300 ...">
  <img class="object-fill h-48 w-96 ...">
</div>
```
 ### Scaling down if too large

 Display an element’s content at its original size but scale it down to fit its container if necessary using `object-scale-down`.

 
```
<div class="bg-cyan-300">
  <img class="object-scale-down h-48 w-96 ...">
</div>
```
 ### Using an element’s original size

 Display an element’s content at its original size ignoring the container size using `object-none`.

 
```
<div class="bg-yellow-300">
  <img class="object-none h-48 w-96 ...">
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:object-scale-down` to only apply the `object-scale-down` utility on hover.



```
<img class="object-contain hover:object-scale-down">
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:object-scale-down` to apply the `object-scale-down` utility at only medium screen sizes and above.



```
<img class="object-contain md:object-scale-down">
```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/object-fit>

Object Position
===============


Utilities for controlling how a replaced element's content should be positioned within its container.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| object-bottom | object-position: bottom;  |
| object-center | object-position: center;  |
| object-left | object-position: left;  |
| object-left-bottom | object-position: left bottom;  |
| object-left-top | object-position: left top;  |
| object-right | object-position: right;  |
| object-right-bottom | object-position: right bottom;  |
| object-right-top | object-position: right top;  |
| object-top | object-position: top;  |






Basic usage
-----------

 ### Positioning a replaced element

 Use the `object-{side}` utilities to specify how a replaced element’s content should be positioned within its container.

 
```
<img class="object-none object-left-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-left bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-center bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-left-bottom bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-bottom bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right-bottom bg-yellow-300 w-24 h-24 ..." src="...">
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:object-top` to only apply the `object-top` utility on hover.



```
<img class="object-center hover:object-top" src="...">
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:object-top` to apply the `object-top` utility at only medium screen sizes and above.



```
<img class="object-center md:object-top" src="...">
```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides nine object position utilities. You can customize these values by editing `theme.objectPosition` or `theme.extend.objectPosition` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      objectPosition: {
        'center-bottom': 'center bottom',
      }
    },
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `object-position` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<img class="object-[center_bottom]" src="...">
```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/object-position>

Overflow
========


Utilities for controlling how an element handles content that is too large for the container.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| overflow-auto | overflow: auto;  |
| overflow-hidden | overflow: hidden;  |
| overflow-clip | overflow: clip;  |
| overflow-visible | overflow: visible;  |
| overflow-scroll | overflow: scroll;  |
| overflow-x-auto | overflow-x: auto;  |
| overflow-y-auto | overflow-y: auto;  |
| overflow-x-hidden | overflow-x: hidden;  |
| overflow-y-hidden | overflow-y: hidden;  |
| overflow-x-clip | overflow-x: clip;  |
| overflow-y-clip | overflow-y: clip;  |
| overflow-x-visible | overflow-x: visible;  |
| overflow-y-visible | overflow-y: visible;  |
| overflow-x-scroll | overflow-x: scroll;  |
| overflow-y-scroll | overflow-y: scroll;  |






Basic usage
-----------

 ### Showing content that overflows

 Use `overflow-visible` to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.

 
```
<div class="overflow-visible ..."></div>
```
 ### Hiding content that overflows

 Use `overflow-hidden` to clip any content within an element that overflows the bounds of that element.

 
```
<div class="overflow-hidden ..."></div>
```
 ### Scrolling if needed

 Use `overflow-auto` to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike `overflow-scroll`, which always shows scrollbars, this utility will only show them if scrolling is necessary.

 
```
<div class="overflow-auto ..."></div>
```
 ### Scrolling horizontally if needed

 Use `overflow-x-auto` to allow horizontal scrolling if needed.

 
```
<div class="overflow-x-auto ..."></div>
```
 ### Scrolling vertically if needed

 Use `overflow-y-auto` to allow vertical scrolling if needed.

 
```
<div class="overflow-y-auto h-32 ..."></div>
```
 ### Scrolling horizontally always

 Use `overflow-x-scroll` to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

 
```
<div class="overflow-x-scroll ..."></div>
```
 ### Scrolling vertically always

 Use `overflow-y-scroll` to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

 
```
<div class="overflow-y-scroll ..."></div>
```
 ### Scrolling in all directions

 Use `overflow-scroll` to add scrollbars to an element. Unlike `overflow-auto`, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting.

 
```
<div class="overflow-scroll ..."></div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:overflow-scroll` to only apply the `overflow-scroll` utility on hover.



```
<div class="overflow-auto hover:overflow-scroll">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:overflow-scroll` to apply the `overflow-scroll` utility at only medium screen sizes and above.



```
<div class="overflow-auto md:overflow-scroll">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/overflow>

Overscroll Behavior
===================


Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| overscroll-auto | overscroll-behavior: auto;  |
| overscroll-contain | overscroll-behavior: contain;  |
| overscroll-none | overscroll-behavior: none;  |
| overscroll-y-auto | overscroll-behavior-y: auto;  |
| overscroll-y-contain | overscroll-behavior-y: contain;  |
| overscroll-y-none | overscroll-behavior-y: none;  |
| overscroll-x-auto | overscroll-behavior-x: auto;  |
| overscroll-x-contain | overscroll-behavior-x: contain;  |
| overscroll-x-none | overscroll-behavior-x: none;  |






Basic usage
-----------

 ### Preventing parent overscrolling

 Use `overscroll-contain` to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve “bounce” effects when scrolling past the end of the container in operating systems that support it.

 
```
<div class="overscroll-contain ...">Well, let me tell you something, ...</div>
```
 ### Preventing overscroll bouncing

 Use `overscroll-none` to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent “bounce” effects when scrolling past the end of the container.

 
```
<div class="overscroll-none ...">Well, let me tell you something, ...</div>
```
 ### Using the default overscroll behavior

 Use `overscroll-auto` to make it possible for the user to continue scrolling a parent scroll area when they reach the boundary of the primary scroll area.

 
```
<div class="overscroll-auto ...">Well, let me tell you something, ...</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:overscroll-contain` to only apply the `overscroll-contain` utility on hover.



```
<div class="overscroll-auto hover:overscroll-contain">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:overscroll-contain` to apply the `overscroll-contain` utility at only medium screen sizes and above.



```
<div class="overscroll-auto md:overscroll-contain">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/overscroll-behavior>

Position
========


Utilities for controlling how an element is positioned in the DOM.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| static | position: static;  |
| fixed | position: fixed;  |
| absolute | position: absolute;  |
| relative | position: relative;  |
| sticky | position: sticky;  |






Basic usage
-----------

 ### Statically positioning elements

 Use `static` to position an element according to the normal flow of the document.

 Any [offsets](top-right-bottom-left) will be ignored and the element will not act as a position reference for absolutely positioned children.

 
```
<div class="static ...">
  <p>Static parent</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>Absolute child</p>
  </div>
</div>
```
 ### Relatively positioning elements

 Use `relative` to position an element according to the normal flow of the document.

 Any [offsets](top-right-bottom-left) are calculated relative to the element’s normal position and the element *will* act as a position reference for absolutely positioned children.

 
```
<div class="relative ...">
  <p>Relative parent</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>Absolute child</p>
  </div>
</div>
```
 ### Absolutely positioning elements

 Use `absolute` to position an element *outside* of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

 Any [offsets](top-right-bottom-left) are calculated relative to the nearest parent that has a position other than `static`, and the element *will* act as a position reference for other absolutely positioned children.

 
```
<div class="static ...">
  <!-- Static parent -->
  <div class="static ..."><p>Static child</p></div>
  <div class="inline-block ..."><p>Static sibling</p></div>
  <!-- Static parent -->
  <div class="absolute ..."><p>Absolute child</p></div>
  <div class="inline-block ..."><p>Static sibling</p></div>
</div>
```
 ### Fixed positioning elements

 Use `fixed` to position an element relative to the browser window.

 Any [offsets](top-right-bottom-left) are calculated relative to the viewport and the element *will* act as a position reference for absolutely positioned children.

 
```
<div class="relative">
  <div class="fixed top-0 left-0 right-0">Contacts</div>
  <div>
    <div>
      <img src="..." />
      <strong>Andrew Alfred</strong>
    </div>
    <div>
      <img src="..." />
      <strong>Debra Houston</strong>
    </div>
    <!-- ... -->
  </div>
</div>
```
 ### Sticky positioning elements

 Use `sticky` to position an element as `relative` until it crosses a specified threshold, then treat it as fixed until its parent is off screen.

 Any [offsets](top-right-bottom-left) are calculated relative to the element’s normal position and the element *will* act as a position reference for absolutely positioned children.

 
```
<div>
  <div>
    <div class="sticky top-0 ...">A</div>
    <div>
      <div>
        <img src="..." />
        <strong>Andrew Alfred</strong>
      </div>
      <div>
        <img src="..." />
        <strong>Aisha Houston</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <div>
    <div class="sticky top-0">B</div>
    <div>
      <div>
        <img src="..." />
        <strong>Bob Alfred</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:absolute` to only apply the `absolute` utility on hover.



```
<div class="relative hover:absolute">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:absolute` to apply the `absolute` utility at only medium screen sizes and above.



```
<div class="relative md:absolute">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/position>

Top / Right / Bottom / Left
===========================


Utilities for controlling the placement of positioned elements.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| inset-0 | inset: 0px;  |
| inset-x-0 | left: 0px; right: 0px;  |
| inset-y-0 | top: 0px; bottom: 0px;  |
| start-0 | inset-inline-start: 0px;  |
| end-0 | inset-inline-end: 0px;  |
| top-0 | top: 0px;  |
| right-0 | right: 0px;  |
| bottom-0 | bottom: 0px;  |
| left-0 | left: 0px;  |
| inset-px | inset: 1px;  |
| inset-x-px | left: 1px; right: 1px;  |
| inset-y-px | top: 1px; bottom: 1px;  |
| start-px | inset-inline-start: 1px;  |
| end-px | inset-inline-end: 1px;  |
| top-px | top: 1px;  |
| right-px | right: 1px;  |
| bottom-px | bottom: 1px;  |
| left-px | left: 1px;  |
| inset-0.5 | inset: 0.125rem; /\* 2px \*/ |
| inset-x-0.5 | left: 0.125rem; /\* 2px \*/ right: 0.125rem; /\* 2px \*/ |
| inset-y-0.5 | top: 0.125rem; /\* 2px \*/ bottom: 0.125rem; /\* 2px \*/ |
| start-0.5 | inset-inline-start: 0.125rem; /\* 2px \*/ |
| end-0.5 | inset-inline-end: 0.125rem; /\* 2px \*/ |
| top-0.5 | top: 0.125rem; /\* 2px \*/ |
| right-0.5 | right: 0.125rem; /\* 2px \*/ |
| bottom-0.5 | bottom: 0.125rem; /\* 2px \*/ |
| left-0.5 | left: 0.125rem; /\* 2px \*/ |
| inset-1 | inset: 0.25rem; /\* 4px \*/ |
| inset-x-1 | left: 0.25rem; /\* 4px \*/ right: 0.25rem; /\* 4px \*/ |
| inset-y-1 | top: 0.25rem; /\* 4px \*/ bottom: 0.25rem; /\* 4px \*/ |
| start-1 | inset-inline-start: 0.25rem; /\* 4px \*/ |
| end-1 | inset-inline-end: 0.25rem; /\* 4px \*/ |
| top-1 | top: 0.25rem; /\* 4px \*/ |
| right-1 | right: 0.25rem; /\* 4px \*/ |
| bottom-1 | bottom: 0.25rem; /\* 4px \*/ |
| left-1 | left: 0.25rem; /\* 4px \*/ |
| inset-1.5 | inset: 0.375rem; /\* 6px \*/ |
| inset-x-1.5 | left: 0.375rem; /\* 6px \*/ right: 0.375rem; /\* 6px \*/ |
| inset-y-1.5 | top: 0.375rem; /\* 6px \*/ bottom: 0.375rem; /\* 6px \*/ |
| start-1.5 | inset-inline-start: 0.375rem; /\* 6px \*/ |
| end-1.5 | inset-inline-end: 0.375rem; /\* 6px \*/ |
| top-1.5 | top: 0.375rem; /\* 6px \*/ |
| right-1.5 | right: 0.375rem; /\* 6px \*/ |
| bottom-1.5 | bottom: 0.375rem; /\* 6px \*/ |
| left-1.5 | left: 0.375rem; /\* 6px \*/ |
| inset-2 | inset: 0.5rem; /\* 8px \*/ |
| inset-x-2 | left: 0.5rem; /\* 8px \*/ right: 0.5rem; /\* 8px \*/ |
| inset-y-2 | top: 0.5rem; /\* 8px \*/ bottom: 0.5rem; /\* 8px \*/ |
| start-2 | inset-inline-start: 0.5rem; /\* 8px \*/ |
| end-2 | inset-inline-end: 0.5rem; /\* 8px \*/ |
| top-2 | top: 0.5rem; /\* 8px \*/ |
| right-2 | right: 0.5rem; /\* 8px \*/ |
| bottom-2 | bottom: 0.5rem; /\* 8px \*/ |
| left-2 | left: 0.5rem; /\* 8px \*/ |
| inset-2.5 | inset: 0.625rem; /\* 10px \*/ |
| inset-x-2.5 | left: 0.625rem; /\* 10px \*/ right: 0.625rem; /\* 10px \*/ |
| inset-y-2.5 | top: 0.625rem; /\* 10px \*/ bottom: 0.625rem; /\* 10px \*/ |
| start-2.5 | inset-inline-start: 0.625rem; /\* 10px \*/ |
| end-2.5 | inset-inline-end: 0.625rem; /\* 10px \*/ |
| top-2.5 | top: 0.625rem; /\* 10px \*/ |
| right-2.5 | right: 0.625rem; /\* 10px \*/ |
| bottom-2.5 | bottom: 0.625rem; /\* 10px \*/ |
| left-2.5 | left: 0.625rem; /\* 10px \*/ |
| inset-3 | inset: 0.75rem; /\* 12px \*/ |
| inset-x-3 | left: 0.75rem; /\* 12px \*/ right: 0.75rem; /\* 12px \*/ |
| inset-y-3 | top: 0.75rem; /\* 12px \*/ bottom: 0.75rem; /\* 12px \*/ |
| start-3 | inset-inline-start: 0.75rem; /\* 12px \*/ |
| end-3 | inset-inline-end: 0.75rem; /\* 12px \*/ |
| top-3 | top: 0.75rem; /\* 12px \*/ |
| right-3 | right: 0.75rem; /\* 12px \*/ |
| bottom-3 | bottom: 0.75rem; /\* 12px \*/ |
| left-3 | left: 0.75rem; /\* 12px \*/ |
| inset-3.5 | inset: 0.875rem; /\* 14px \*/ |
| inset-x-3.5 | left: 0.875rem; /\* 14px \*/ right: 0.875rem; /\* 14px \*/ |
| inset-y-3.5 | top: 0.875rem; /\* 14px \*/ bottom: 0.875rem; /\* 14px \*/ |
| start-3.5 | inset-inline-start: 0.875rem; /\* 14px \*/ |
| end-3.5 | inset-inline-end: 0.875rem; /\* 14px \*/ |
| top-3.5 | top: 0.875rem; /\* 14px \*/ |
| right-3.5 | right: 0.875rem; /\* 14px \*/ |
| bottom-3.5 | bottom: 0.875rem; /\* 14px \*/ |
| left-3.5 | left: 0.875rem; /\* 14px \*/ |
| inset-4 | inset: 1rem; /\* 16px \*/ |
| inset-x-4 | left: 1rem; /\* 16px \*/ right: 1rem; /\* 16px \*/ |
| inset-y-4 | top: 1rem; /\* 16px \*/ bottom: 1rem; /\* 16px \*/ |
| start-4 | inset-inline-start: 1rem; /\* 16px \*/ |
| end-4 | inset-inline-end: 1rem; /\* 16px \*/ |
| top-4 | top: 1rem; /\* 16px \*/ |
| right-4 | right: 1rem; /\* 16px \*/ |
| bottom-4 | bottom: 1rem; /\* 16px \*/ |
| left-4 | left: 1rem; /\* 16px \*/ |
| inset-5 | inset: 1.25rem; /\* 20px \*/ |
| inset-x-5 | left: 1.25rem; /\* 20px \*/ right: 1.25rem; /\* 20px \*/ |
| inset-y-5 | top: 1.25rem; /\* 20px \*/ bottom: 1.25rem; /\* 20px \*/ |
| start-5 | inset-inline-start: 1.25rem; /\* 20px \*/ |
| end-5 | inset-inline-end: 1.25rem; /\* 20px \*/ |
| top-5 | top: 1.25rem; /\* 20px \*/ |
| right-5 | right: 1.25rem; /\* 20px \*/ |
| bottom-5 | bottom: 1.25rem; /\* 20px \*/ |
| left-5 | left: 1.25rem; /\* 20px \*/ |
| inset-6 | inset: 1.5rem; /\* 24px \*/ |
| inset-x-6 | left: 1.5rem; /\* 24px \*/ right: 1.5rem; /\* 24px \*/ |
| inset-y-6 | top: 1.5rem; /\* 24px \*/ bottom: 1.5rem; /\* 24px \*/ |
| start-6 | inset-inline-start: 1.5rem; /\* 24px \*/ |
| end-6 | inset-inline-end: 1.5rem; /\* 24px \*/ |
| top-6 | top: 1.5rem; /\* 24px \*/ |
| right-6 | right: 1.5rem; /\* 24px \*/ |
| bottom-6 | bottom: 1.5rem; /\* 24px \*/ |
| left-6 | left: 1.5rem; /\* 24px \*/ |
| inset-7 | inset: 1.75rem; /\* 28px \*/ |
| inset-x-7 | left: 1.75rem; /\* 28px \*/ right: 1.75rem; /\* 28px \*/ |
| inset-y-7 | top: 1.75rem; /\* 28px \*/ bottom: 1.75rem; /\* 28px \*/ |
| start-7 | inset-inline-start: 1.75rem; /\* 28px \*/ |
| end-7 | inset-inline-end: 1.75rem; /\* 28px \*/ |
| top-7 | top: 1.75rem; /\* 28px \*/ |
| right-7 | right: 1.75rem; /\* 28px \*/ |
| bottom-7 | bottom: 1.75rem; /\* 28px \*/ |
| left-7 | left: 1.75rem; /\* 28px \*/ |
| inset-8 | inset: 2rem; /\* 32px \*/ |
| inset-x-8 | left: 2rem; /\* 32px \*/ right: 2rem; /\* 32px \*/ |
| inset-y-8 | top: 2rem; /\* 32px \*/ bottom: 2rem; /\* 32px \*/ |
| start-8 | inset-inline-start: 2rem; /\* 32px \*/ |
| end-8 | inset-inline-end: 2rem; /\* 32px \*/ |
| top-8 | top: 2rem; /\* 32px \*/ |
| right-8 | right: 2rem; /\* 32px \*/ |
| bottom-8 | bottom: 2rem; /\* 32px \*/ |
| left-8 | left: 2rem; /\* 32px \*/ |
| inset-9 | inset: 2.25rem; /\* 36px \*/ |
| inset-x-9 | left: 2.25rem; /\* 36px \*/ right: 2.25rem; /\* 36px \*/ |
| inset-y-9 | top: 2.25rem; /\* 36px \*/ bottom: 2.25rem; /\* 36px \*/ |
| start-9 | inset-inline-start: 2.25rem; /\* 36px \*/ |
| end-9 | inset-inline-end: 2.25rem; /\* 36px \*/ |
| top-9 | top: 2.25rem; /\* 36px \*/ |
| right-9 | right: 2.25rem; /\* 36px \*/ |
| bottom-9 | bottom: 2.25rem; /\* 36px \*/ |
| left-9 | left: 2.25rem; /\* 36px \*/ |
| inset-10 | inset: 2.5rem; /\* 40px \*/ |
| inset-x-10 | left: 2.5rem; /\* 40px \*/ right: 2.5rem; /\* 40px \*/ |
| inset-y-10 | top: 2.5rem; /\* 40px \*/ bottom: 2.5rem; /\* 40px \*/ |
| start-10 | inset-inline-start: 2.5rem; /\* 40px \*/ |
| end-10 | inset-inline-end: 2.5rem; /\* 40px \*/ |
| top-10 | top: 2.5rem; /\* 40px \*/ |
| right-10 | right: 2.5rem; /\* 40px \*/ |
| bottom-10 | bottom: 2.5rem; /\* 40px \*/ |
| left-10 | left: 2.5rem; /\* 40px \*/ |
| inset-11 | inset: 2.75rem; /\* 44px \*/ |
| inset-x-11 | left: 2.75rem; /\* 44px \*/ right: 2.75rem; /\* 44px \*/ |
| inset-y-11 | top: 2.75rem; /\* 44px \*/ bottom: 2.75rem; /\* 44px \*/ |
| start-11 | inset-inline-start: 2.75rem; /\* 44px \*/ |
| end-11 | inset-inline-end: 2.75rem; /\* 44px \*/ |
| top-11 | top: 2.75rem; /\* 44px \*/ |
| right-11 | right: 2.75rem; /\* 44px \*/ |
| bottom-11 | bottom: 2.75rem; /\* 44px \*/ |
| left-11 | left: 2.75rem; /\* 44px \*/ |
| inset-12 | inset: 3rem; /\* 48px \*/ |
| inset-x-12 | left: 3rem; /\* 48px \*/ right: 3rem; /\* 48px \*/ |
| inset-y-12 | top: 3rem; /\* 48px \*/ bottom: 3rem; /\* 48px \*/ |
| start-12 | inset-inline-start: 3rem; /\* 48px \*/ |
| end-12 | inset-inline-end: 3rem; /\* 48px \*/ |
| top-12 | top: 3rem; /\* 48px \*/ |
| right-12 | right: 3rem; /\* 48px \*/ |
| bottom-12 | bottom: 3rem; /\* 48px \*/ |
| left-12 | left: 3rem; /\* 48px \*/ |
| inset-14 | inset: 3.5rem; /\* 56px \*/ |
| inset-x-14 | left: 3.5rem; /\* 56px \*/ right: 3.5rem; /\* 56px \*/ |
| inset-y-14 | top: 3.5rem; /\* 56px \*/ bottom: 3.5rem; /\* 56px \*/ |
| start-14 | inset-inline-start: 3.5rem; /\* 56px \*/ |
| end-14 | inset-inline-end: 3.5rem; /\* 56px \*/ |
| top-14 | top: 3.5rem; /\* 56px \*/ |
| right-14 | right: 3.5rem; /\* 56px \*/ |
| bottom-14 | bottom: 3.5rem; /\* 56px \*/ |
| left-14 | left: 3.5rem; /\* 56px \*/ |
| inset-16 | inset: 4rem; /\* 64px \*/ |
| inset-x-16 | left: 4rem; /\* 64px \*/ right: 4rem; /\* 64px \*/ |
| inset-y-16 | top: 4rem; /\* 64px \*/ bottom: 4rem; /\* 64px \*/ |
| start-16 | inset-inline-start: 4rem; /\* 64px \*/ |
| end-16 | inset-inline-end: 4rem; /\* 64px \*/ |
| top-16 | top: 4rem; /\* 64px \*/ |
| right-16 | right: 4rem; /\* 64px \*/ |
| bottom-16 | bottom: 4rem; /\* 64px \*/ |
| left-16 | left: 4rem; /\* 64px \*/ |
| inset-20 | inset: 5rem; /\* 80px \*/ |
| inset-x-20 | left: 5rem; /\* 80px \*/ right: 5rem; /\* 80px \*/ |
| inset-y-20 | top: 5rem; /\* 80px \*/ bottom: 5rem; /\* 80px \*/ |
| start-20 | inset-inline-start: 5rem; /\* 80px \*/ |
| end-20 | inset-inline-end: 5rem; /\* 80px \*/ |
| top-20 | top: 5rem; /\* 80px \*/ |
| right-20 | right: 5rem; /\* 80px \*/ |
| bottom-20 | bottom: 5rem; /\* 80px \*/ |
| left-20 | left: 5rem; /\* 80px \*/ |
| inset-24 | inset: 6rem; /\* 96px \*/ |
| inset-x-24 | left: 6rem; /\* 96px \*/ right: 6rem; /\* 96px \*/ |
| inset-y-24 | top: 6rem; /\* 96px \*/ bottom: 6rem; /\* 96px \*/ |
| start-24 | inset-inline-start: 6rem; /\* 96px \*/ |
| end-24 | inset-inline-end: 6rem; /\* 96px \*/ |
| top-24 | top: 6rem; /\* 96px \*/ |
| right-24 | right: 6rem; /\* 96px \*/ |
| bottom-24 | bottom: 6rem; /\* 96px \*/ |
| left-24 | left: 6rem; /\* 96px \*/ |
| inset-28 | inset: 7rem; /\* 112px \*/ |
| inset-x-28 | left: 7rem; /\* 112px \*/ right: 7rem; /\* 112px \*/ |
| inset-y-28 | top: 7rem; /\* 112px \*/ bottom: 7rem; /\* 112px \*/ |
| start-28 | inset-inline-start: 7rem; /\* 112px \*/ |
| end-28 | inset-inline-end: 7rem; /\* 112px \*/ |
| top-28 | top: 7rem; /\* 112px \*/ |
| right-28 | right: 7rem; /\* 112px \*/ |
| bottom-28 | bottom: 7rem; /\* 112px \*/ |
| left-28 | left: 7rem; /\* 112px \*/ |
| inset-32 | inset: 8rem; /\* 128px \*/ |
| inset-x-32 | left: 8rem; /\* 128px \*/ right: 8rem; /\* 128px \*/ |
| inset-y-32 | top: 8rem; /\* 128px \*/ bottom: 8rem; /\* 128px \*/ |
| start-32 | inset-inline-start: 8rem; /\* 128px \*/ |
| end-32 | inset-inline-end: 8rem; /\* 128px \*/ |
| top-32 | top: 8rem; /\* 128px \*/ |
| right-32 | right: 8rem; /\* 128px \*/ |
| bottom-32 | bottom: 8rem; /\* 128px \*/ |
| left-32 | left: 8rem; /\* 128px \*/ |
| inset-36 | inset: 9rem; /\* 144px \*/ |
| inset-x-36 | left: 9rem; /\* 144px \*/ right: 9rem; /\* 144px \*/ |
| inset-y-36 | top: 9rem; /\* 144px \*/ bottom: 9rem; /\* 144px \*/ |
| start-36 | inset-inline-start: 9rem; /\* 144px \*/ |
| end-36 | inset-inline-end: 9rem; /\* 144px \*/ |
| top-36 | top: 9rem; /\* 144px \*/ |
| right-36 | right: 9rem; /\* 144px \*/ |
| bottom-36 | bottom: 9rem; /\* 144px \*/ |
| left-36 | left: 9rem; /\* 144px \*/ |
| inset-40 | inset: 10rem; /\* 160px \*/ |
| inset-x-40 | left: 10rem; /\* 160px \*/ right: 10rem; /\* 160px \*/ |
| inset-y-40 | top: 10rem; /\* 160px \*/ bottom: 10rem; /\* 160px \*/ |
| start-40 | inset-inline-start: 10rem; /\* 160px \*/ |
| end-40 | inset-inline-end: 10rem; /\* 160px \*/ |
| top-40 | top: 10rem; /\* 160px \*/ |
| right-40 | right: 10rem; /\* 160px \*/ |
| bottom-40 | bottom: 10rem; /\* 160px \*/ |
| left-40 | left: 10rem; /\* 160px \*/ |
| inset-44 | inset: 11rem; /\* 176px \*/ |
| inset-x-44 | left: 11rem; /\* 176px \*/ right: 11rem; /\* 176px \*/ |
| inset-y-44 | top: 11rem; /\* 176px \*/ bottom: 11rem; /\* 176px \*/ |
| start-44 | inset-inline-start: 11rem; /\* 176px \*/ |
| end-44 | inset-inline-end: 11rem; /\* 176px \*/ |
| top-44 | top: 11rem; /\* 176px \*/ |
| right-44 | right: 11rem; /\* 176px \*/ |
| bottom-44 | bottom: 11rem; /\* 176px \*/ |
| left-44 | left: 11rem; /\* 176px \*/ |
| inset-48 | inset: 12rem; /\* 192px \*/ |
| inset-x-48 | left: 12rem; /\* 192px \*/ right: 12rem; /\* 192px \*/ |
| inset-y-48 | top: 12rem; /\* 192px \*/ bottom: 12rem; /\* 192px \*/ |
| start-48 | inset-inline-start: 12rem; /\* 192px \*/ |
| end-48 | inset-inline-end: 12rem; /\* 192px \*/ |
| top-48 | top: 12rem; /\* 192px \*/ |
| right-48 | right: 12rem; /\* 192px \*/ |
| bottom-48 | bottom: 12rem; /\* 192px \*/ |
| left-48 | left: 12rem; /\* 192px \*/ |
| inset-52 | inset: 13rem; /\* 208px \*/ |
| inset-x-52 | left: 13rem; /\* 208px \*/ right: 13rem; /\* 208px \*/ |
| inset-y-52 | top: 13rem; /\* 208px \*/ bottom: 13rem; /\* 208px \*/ |
| start-52 | inset-inline-start: 13rem; /\* 208px \*/ |
| end-52 | inset-inline-end: 13rem; /\* 208px \*/ |
| top-52 | top: 13rem; /\* 208px \*/ |
| right-52 | right: 13rem; /\* 208px \*/ |
| bottom-52 | bottom: 13rem; /\* 208px \*/ |
| left-52 | left: 13rem; /\* 208px \*/ |
| inset-56 | inset: 14rem; /\* 224px \*/ |
| inset-x-56 | left: 14rem; /\* 224px \*/ right: 14rem; /\* 224px \*/ |
| inset-y-56 | top: 14rem; /\* 224px \*/ bottom: 14rem; /\* 224px \*/ |
| start-56 | inset-inline-start: 14rem; /\* 224px \*/ |
| end-56 | inset-inline-end: 14rem; /\* 224px \*/ |
| top-56 | top: 14rem; /\* 224px \*/ |
| right-56 | right: 14rem; /\* 224px \*/ |
| bottom-56 | bottom: 14rem; /\* 224px \*/ |
| left-56 | left: 14rem; /\* 224px \*/ |
| inset-60 | inset: 15rem; /\* 240px \*/ |
| inset-x-60 | left: 15rem; /\* 240px \*/ right: 15rem; /\* 240px \*/ |
| inset-y-60 | top: 15rem; /\* 240px \*/ bottom: 15rem; /\* 240px \*/ |
| start-60 | inset-inline-start: 15rem; /\* 240px \*/ |
| end-60 | inset-inline-end: 15rem; /\* 240px \*/ |
| top-60 | top: 15rem; /\* 240px \*/ |
| right-60 | right: 15rem; /\* 240px \*/ |
| bottom-60 | bottom: 15rem; /\* 240px \*/ |
| left-60 | left: 15rem; /\* 240px \*/ |
| inset-64 | inset: 16rem; /\* 256px \*/ |
| inset-x-64 | left: 16rem; /\* 256px \*/ right: 16rem; /\* 256px \*/ |
| inset-y-64 | top: 16rem; /\* 256px \*/ bottom: 16rem; /\* 256px \*/ |
| start-64 | inset-inline-start: 16rem; /\* 256px \*/ |
| end-64 | inset-inline-end: 16rem; /\* 256px \*/ |
| top-64 | top: 16rem; /\* 256px \*/ |
| right-64 | right: 16rem; /\* 256px \*/ |
| bottom-64 | bottom: 16rem; /\* 256px \*/ |
| left-64 | left: 16rem; /\* 256px \*/ |
| inset-72 | inset: 18rem; /\* 288px \*/ |
| inset-x-72 | left: 18rem; /\* 288px \*/ right: 18rem; /\* 288px \*/ |
| inset-y-72 | top: 18rem; /\* 288px \*/ bottom: 18rem; /\* 288px \*/ |
| start-72 | inset-inline-start: 18rem; /\* 288px \*/ |
| end-72 | inset-inline-end: 18rem; /\* 288px \*/ |
| top-72 | top: 18rem; /\* 288px \*/ |
| right-72 | right: 18rem; /\* 288px \*/ |
| bottom-72 | bottom: 18rem; /\* 288px \*/ |
| left-72 | left: 18rem; /\* 288px \*/ |
| inset-80 | inset: 20rem; /\* 320px \*/ |
| inset-x-80 | left: 20rem; /\* 320px \*/ right: 20rem; /\* 320px \*/ |
| inset-y-80 | top: 20rem; /\* 320px \*/ bottom: 20rem; /\* 320px \*/ |
| start-80 | inset-inline-start: 20rem; /\* 320px \*/ |
| end-80 | inset-inline-end: 20rem; /\* 320px \*/ |
| top-80 | top: 20rem; /\* 320px \*/ |
| right-80 | right: 20rem; /\* 320px \*/ |
| bottom-80 | bottom: 20rem; /\* 320px \*/ |
| left-80 | left: 20rem; /\* 320px \*/ |
| inset-96 | inset: 24rem; /\* 384px \*/ |
| inset-x-96 | left: 24rem; /\* 384px \*/ right: 24rem; /\* 384px \*/ |
| inset-y-96 | top: 24rem; /\* 384px \*/ bottom: 24rem; /\* 384px \*/ |
| start-96 | inset-inline-start: 24rem; /\* 384px \*/ |
| end-96 | inset-inline-end: 24rem; /\* 384px \*/ |
| top-96 | top: 24rem; /\* 384px \*/ |
| right-96 | right: 24rem; /\* 384px \*/ |
| bottom-96 | bottom: 24rem; /\* 384px \*/ |
| left-96 | left: 24rem; /\* 384px \*/ |
| inset-auto | inset: auto;  |
| inset-1/2 | inset: 50%;  |
| inset-1/3 | inset: 33.333333%;  |
| inset-2/3 | inset: 66.666667%;  |
| inset-1/4 | inset: 25%;  |
| inset-2/4 | inset: 50%;  |
| inset-3/4 | inset: 75%;  |
| inset-full | inset: 100%;  |
| inset-x-auto | left: auto; right: auto;  |
| inset-x-1/2 | left: 50%; right: 50%;  |
| inset-x-1/3 | left: 33.333333%; right: 33.333333%;  |
| inset-x-2/3 | left: 66.666667%; right: 66.666667%;  |
| inset-x-1/4 | left: 25%; right: 25%;  |
| inset-x-2/4 | left: 50%; right: 50%;  |
| inset-x-3/4 | left: 75%; right: 75%;  |
| inset-x-full | left: 100%; right: 100%;  |
| inset-y-auto | top: auto; bottom: auto;  |
| inset-y-1/2 | top: 50%; bottom: 50%;  |
| inset-y-1/3 | top: 33.333333%; bottom: 33.333333%;  |
| inset-y-2/3 | top: 66.666667%; bottom: 66.666667%;  |
| inset-y-1/4 | top: 25%; bottom: 25%;  |
| inset-y-2/4 | top: 50%; bottom: 50%;  |
| inset-y-3/4 | top: 75%; bottom: 75%;  |
| inset-y-full | top: 100%; bottom: 100%;  |
| start-auto | inset-inline-start: auto;  |
| start-1/2 | inset-inline-start: 50%;  |
| start-1/3 | inset-inline-start: 33.333333%;  |
| start-2/3 | inset-inline-start: 66.666667%;  |
| start-1/4 | inset-inline-start: 25%;  |
| start-2/4 | inset-inline-start: 50%;  |
| start-3/4 | inset-inline-start: 75%;  |
| start-full | inset-inline-start: 100%;  |
| end-auto | inset-inline-end: auto;  |
| end-1/2 | inset-inline-end: 50%;  |
| end-1/3 | inset-inline-end: 33.333333%;  |
| end-2/3 | inset-inline-end: 66.666667%;  |
| end-1/4 | inset-inline-end: 25%;  |
| end-2/4 | inset-inline-end: 50%;  |
| end-3/4 | inset-inline-end: 75%;  |
| end-full | inset-inline-end: 100%;  |
| top-auto | top: auto;  |
| top-1/2 | top: 50%;  |
| top-1/3 | top: 33.333333%;  |
| top-2/3 | top: 66.666667%;  |
| top-1/4 | top: 25%;  |
| top-2/4 | top: 50%;  |
| top-3/4 | top: 75%;  |
| top-full | top: 100%;  |
| right-auto | right: auto;  |
| right-1/2 | right: 50%;  |
| right-1/3 | right: 33.333333%;  |
| right-2/3 | right: 66.666667%;  |
| right-1/4 | right: 25%;  |
| right-2/4 | right: 50%;  |
| right-3/4 | right: 75%;  |
| right-full | right: 100%;  |
| bottom-auto | bottom: auto;  |
| bottom-1/2 | bottom: 50%;  |
| bottom-1/3 | bottom: 33.333333%;  |
| bottom-2/3 | bottom: 66.666667%;  |
| bottom-1/4 | bottom: 25%;  |
| bottom-2/4 | bottom: 50%;  |
| bottom-3/4 | bottom: 75%;  |
| bottom-full | bottom: 100%;  |
| left-auto | left: auto;  |
| left-1/2 | left: 50%;  |
| left-1/3 | left: 33.333333%;  |
| left-2/3 | left: 66.666667%;  |
| left-1/4 | left: 25%;  |
| left-2/4 | left: 50%;  |
| left-3/4 | left: 75%;  |
| left-full | left: 100%;  |






Basic usage
-----------

 ### Placing a positioned element

 Use the `{top|right|bottom|left|inset}-{size}` utilities to set the horizontal or vertical position of a [positioned element](position).

 
```
<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute left-0 top-0 h-16 w-16 ...">01</div>
</div>

<!-- Span top edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 top-0 h-16 ...">02</div>
</div>

<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute top-0 right-0 h-16 w-16 ...">03</div>
</div>

<!-- Span left edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 left-0 w-16 ...">04</div>
</div>

<!-- Fill entire parent -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-0 ...">05</div>
</div>

<!-- Span right edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 right-0 w-16 ...">06</div>
</div>

<!-- Pin to bottom left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 left-0 h-16 w-16 ...">07</div>
</div>

<!-- Span bottom edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 bottom-0 h-16 ...">08</div>
</div>

<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 right-0 h-16 w-16 ...">09</div>
</div>
```
 ### Using negative values

 To use a negative top/right/bottom/left value, prefix the class name with a dash to convert it to a negative value.

 
```
<div class="relative h-32 w-32 ...">
  <div class="absolute h-14 w-14 -left-4 -top-4 ..."></div>
</div>
```
 ### Using logical properties

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

 
```
<div dir="ltr">
  <div class="relative h-32 w-32 ...">
    <div class="absolute h-14 w-14 top-0 start-0 ..."></div>
  </div>
<div>

<div dir="rtl">
  <div class="relative h-32 w-32 ...">
    <div class="absolute h-14 w-14 top-0 start-0 ..."></div>
  </div>
<div>
```
 For more control, you can also use the [LTR and RTL modifiers](hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:top-6` to only apply the `top-6` utility on hover.



```
<div class="top-4 hover:top-6">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:top-6` to apply the `top-6` utility at only medium screen sizes and above.



```
<div class="top-4 md:top-6">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides top/right/bottom/left/inset utilities for a combination of the [default spacing scale](customizing-spacing#default-spacing-scale), `auto`, `full` as well as some additional fraction values.

 You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '3px': '3px',
      }
    }
  }
}

```

 Alternatively, you can customize just the top/right/bottom/left/inset scale by editing `theme.inset` or `theme.extend.inset` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      inset: {
        '3px': '3px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `top/right/bottom/left` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



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

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/top-right-bottom-left>

Visibility
==========


Utilities for controlling the visibility of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| visible | visibility: visible;  |
| invisible | visibility: hidden;  |
| collapse | visibility: collapse;  |






Basic usage
-----------

 ### Making elements invisible

 Use `invisible` to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with `hidden` from the [display](display#hidden) documentation).

 
```
<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="invisible ...">02</div>
  <div>03</div>
</div>
```
 ### Collapsing elements

 Use `collapse` to hide table rows, row groups, columns, and column groups as if they were set to `display: none`, but without impacting the size of other rows and columns.

 This makes it possible to dynamically toggle rows and columns without affecting the table layout.

 
```
<table>
  <thead>
    <tr>
      <th>Invoice #</th>
      <th>Client</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#100</td>
      <td>Pendant Publishing</td>
      <td>$2,000.00</td>
    </tr>
    <tr class="collapse">
      <td>#101</td>
      <td>Kruger Industrial Smoothing</td>
      <td>$545.00</td>
    </tr>
    <tr>
      <td>#102</td>
      <td>J. Peterman</td>
      <td>$10,000.25</td>
    </tr>
  </tbody>
</table>
```
 ### Making elements visible

 Use `visible` to make an element visible. This is mostly useful for undoing the `invisible` utility at different screen sizes.

 
```
<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="visible ...">02</div>
  <div>03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:invisible` to only apply the `invisible` utility on hover.



```
<div class="visible hover:invisible">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:invisible` to apply the `invisible` utility at only medium screen sizes and above.



```
<div class="visible md:invisible">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/visibility>

Z-Index
=======


Utilities for controlling the stack order of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| z-0 | z-index: 0;  |
| z-10 | z-index: 10;  |
| z-20 | z-index: 20;  |
| z-30 | z-index: 30;  |
| z-40 | z-index: 40;  |
| z-50 | z-index: 50;  |
| z-auto | z-index: auto;  |






Basic usage
-----------

 ### Setting the z-index

 Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the `z-{index}` utilities.

 
```
<div class="z-40 ...">05</div>
<div class="z-30 ...">04</div>
<div class="z-20 ...">03</div>
<div class="z-10 ...">02</div>
<div class="z-0 ...">01</div>
```
 ### Using negative values

 To use a negative z-index value, prefix the class name with a dash to convert it to a negative value.

 
```
<div class="-z-50">
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:z-50` to only apply the `z-50` utility on hover.



```
<div class="z-0 hover:z-50">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:z-50` to apply the `z-50` utility at only medium screen sizes and above.



```
<div class="z-0 md:z-50">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides six numeric `z-index` utilities and an `auto` utility. You can customize these values by editing `theme.zIndex` or `theme.extend.zIndex` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      zIndex: {
        '100': '100',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `z-index` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="z-[100]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/z-index>

Flex Basis
==========


Utilities for controlling the initial size of flex items.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| basis-0 | flex-basis: 0px;  |
| basis-1 | flex-basis: 0.25rem; /\* 4px \*/ |
| basis-2 | flex-basis: 0.5rem; /\* 8px \*/ |
| basis-3 | flex-basis: 0.75rem; /\* 12px \*/ |
| basis-4 | flex-basis: 1rem; /\* 16px \*/ |
| basis-5 | flex-basis: 1.25rem; /\* 20px \*/ |
| basis-6 | flex-basis: 1.5rem; /\* 24px \*/ |
| basis-7 | flex-basis: 1.75rem; /\* 28px \*/ |
| basis-8 | flex-basis: 2rem; /\* 32px \*/ |
| basis-9 | flex-basis: 2.25rem; /\* 36px \*/ |
| basis-10 | flex-basis: 2.5rem; /\* 40px \*/ |
| basis-11 | flex-basis: 2.75rem; /\* 44px \*/ |
| basis-12 | flex-basis: 3rem; /\* 48px \*/ |
| basis-14 | flex-basis: 3.5rem; /\* 56px \*/ |
| basis-16 | flex-basis: 4rem; /\* 64px \*/ |
| basis-20 | flex-basis: 5rem; /\* 80px \*/ |
| basis-24 | flex-basis: 6rem; /\* 96px \*/ |
| basis-28 | flex-basis: 7rem; /\* 112px \*/ |
| basis-32 | flex-basis: 8rem; /\* 128px \*/ |
| basis-36 | flex-basis: 9rem; /\* 144px \*/ |
| basis-40 | flex-basis: 10rem; /\* 160px \*/ |
| basis-44 | flex-basis: 11rem; /\* 176px \*/ |
| basis-48 | flex-basis: 12rem; /\* 192px \*/ |
| basis-52 | flex-basis: 13rem; /\* 208px \*/ |
| basis-56 | flex-basis: 14rem; /\* 224px \*/ |
| basis-60 | flex-basis: 15rem; /\* 240px \*/ |
| basis-64 | flex-basis: 16rem; /\* 256px \*/ |
| basis-72 | flex-basis: 18rem; /\* 288px \*/ |
| basis-80 | flex-basis: 20rem; /\* 320px \*/ |
| basis-96 | flex-basis: 24rem; /\* 384px \*/ |
| basis-auto | flex-basis: auto;  |
| basis-px | flex-basis: 1px;  |
| basis-0.5 | flex-basis: 0.125rem; /\* 2px \*/ |
| basis-1.5 | flex-basis: 0.375rem; /\* 6px \*/ |
| basis-2.5 | flex-basis: 0.625rem; /\* 10px \*/ |
| basis-3.5 | flex-basis: 0.875rem; /\* 14px \*/ |
| basis-1/2 | flex-basis: 50%;  |
| basis-1/3 | flex-basis: 33.333333%;  |
| basis-2/3 | flex-basis: 66.666667%;  |
| basis-1/4 | flex-basis: 25%;  |
| basis-2/4 | flex-basis: 50%;  |
| basis-3/4 | flex-basis: 75%;  |
| basis-1/5 | flex-basis: 20%;  |
| basis-2/5 | flex-basis: 40%;  |
| basis-3/5 | flex-basis: 60%;  |
| basis-4/5 | flex-basis: 80%;  |
| basis-1/6 | flex-basis: 16.666667%;  |
| basis-2/6 | flex-basis: 33.333333%;  |
| basis-3/6 | flex-basis: 50%;  |
| basis-4/6 | flex-basis: 66.666667%;  |
| basis-5/6 | flex-basis: 83.333333%;  |
| basis-1/12 | flex-basis: 8.333333%;  |
| basis-2/12 | flex-basis: 16.666667%;  |
| basis-3/12 | flex-basis: 25%;  |
| basis-4/12 | flex-basis: 33.333333%;  |
| basis-5/12 | flex-basis: 41.666667%;  |
| basis-6/12 | flex-basis: 50%;  |
| basis-7/12 | flex-basis: 58.333333%;  |
| basis-8/12 | flex-basis: 66.666667%;  |
| basis-9/12 | flex-basis: 75%;  |
| basis-10/12 | flex-basis: 83.333333%;  |
| basis-11/12 | flex-basis: 91.666667%;  |
| basis-full | flex-basis: 100%;  |






Basic usage
-----------

 ### Setting the flex basis

 Use the `basis-{size}` utilities to set the initial size of flex items.

 
```
<div class="flex flex-row">
  <div class="basis-1/4">01</div>
  <div class="basis-1/4">02</div>
  <div class="basis-1/2">03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:basis-1/2` to only apply the `basis-1/2` utility on hover.



```
<div class="basis-1/3 hover:basis-1/2">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:basis-1/3` to apply the `basis-1/3` utility at only medium screen sizes and above.



```
<div class="flex flex-row">
  <div class="basis-1/4 md:basis-1/3">01</div>
  <div class="basis-1/4 md:basis-1/3">02</div>
  <div class="basis-1/2 md:basis-1/3">03</div>
</div>
```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 The default flex basis scale is a combination of the [default spacing scale](customizing-spacing#default-spacing-scale) as well as a set of percentage based values.

 You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '112': '28rem',
        '128': '32rem',
      }
    }
  }
}

```

 Alternatively, you can customize just the flex basis scale by editing `theme.flexBasis` or `theme.extend.flexBasis` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      flexBasis: {
        '1/7': '14.2857143%',
        '2/7': '28.5714286%',
        '3/7': '42.8571429%',
        '4/7': '57.1428571%',
        '5/7': '71.4285714%',
        '6/7': '85.7142857%',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `flex-basis` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="basis-[14.2857143%]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/flex-basis>

Flex Direction
==============


Utilities for controlling the direction of flex items.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| flex-row | flex-direction: row;  |
| flex-row-reverse | flex-direction: row-reverse;  |
| flex-col | flex-direction: column;  |
| flex-col-reverse | flex-direction: column-reverse;  |






Basic usage
-----------

 ### Row

 Use `flex-row` to position flex items horizontally in the same direction as text:

 
```
<div class="flex flex-row ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Row reversed

 Use `flex-row-reverse` to position flex items horizontally in the opposite direction:

 
```
<div class="flex flex-row-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Column

 Use `flex-col` to position flex items vertically:

 
```
<div class="flex flex-col ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Column reversed

 Use `flex-col-reverse` to position flex items vertically in the opposite direction:

 
```
<div class="flex flex-col-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:flex-row` to only apply the `flex-row` utility on hover.



```
<div class="flex flex-col hover:flex-row">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:flex-row` to apply the `flex-row` utility at only medium screen sizes and above.



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

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/flex-direction>

Flex Wrap
=========


Utilities for controlling how flex items wrap.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| flex-wrap | flex-wrap: wrap;  |
| flex-wrap-reverse | flex-wrap: wrap-reverse;  |
| flex-nowrap | flex-wrap: nowrap;  |






Basic usage
-----------

 ### Don’t wrap

 Use `flex-nowrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:

 
```
<div class="flex flex-nowrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Wrap normally

 Use `flex-wrap` to allow flex items to wrap:

 
```
<div class="flex flex-wrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Wrap reversed

 Use `flex-wrap-reverse` to wrap flex items in the reverse direction:

 
```
<div class="flex flex-wrap-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:flex-wrap-reverse` to only apply the `flex-wrap-reverse` utility on hover.



```
<div class="flex flex-wrap hover:flex-wrap-reverse">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:flex-wrap-reverse` to apply the `flex-wrap-reverse` utility at only medium screen sizes and above.



```
<div class="flex flex-wrap md:flex-wrap-reverse">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/flex-wrap>

Flex
====


Utilities for controlling how flex items both grow and shrink.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| flex-1 | flex: 1 1 0%;  |
| flex-auto | flex: 1 1 auto;  |
| flex-initial | flex: 0 1 auto;  |
| flex-none | flex: none;  |






Basic usage
-----------

 ### Initial

 Use `flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size:

  
```
<div class="flex">
  <div class="flex-none w-14 h-14">
    01
  </div>
  <div class="flex-initial w-64 ...">
    02
  </div>
  <div class="flex-initial w-32 ...">
    03
  </div>
</div>
```
 ### Flex 1

 Use `flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size:

  
```
<div class="flex">
  <div class="flex-none ...">
    01
  </div>
  <div class="flex-1 w-64 ...">
    02
  </div>
  <div class="flex-1 w-32 ...">
    03
  </div>
</div>
```
 ### Auto

 Use `flex-auto` to allow a flex item to grow and shrink, taking into account its initial size:

  
```
<div class="flex ...">
  <div class="flex-none ...">
    01
  </div>
  <div class="flex-auto w-64 ...">
    02
  </div>
  <div class="flex-auto w-32 ...">
    03
  </div>
</div>
```
 ### None

 Use `flex-none` to prevent a flex item from growing or shrinking:

  
```
<div class="flex ...">
  <div class="flex-none w-14 h-14 ...">
    01
  </div>
  <div class="flex-none ...">
    02
  </div>
  <div class="flex-1 ...">
    03
  </div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:flex-1` to only apply the `flex-1` utility on hover.



```
<div class="flex-none hover:flex-1">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:flex-1` to apply the `flex-1` utility at only medium screen sizes and above.



```
<div class="flex-none md:flex-1">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides four `flex` utilities. You can customize these values by editing `theme.flex` or `theme.extend.flex` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      flex: {
        '2': '2 2 0%'
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `flex` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="flex-[2_2_0%]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/flex>

Flex Grow
=========


Utilities for controlling how flex items grow.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| grow | flex-grow: 1;  |
| grow-0 | flex-grow: 0;  |






Basic usage
-----------

 ### Grow

 Use `grow` to allow a flex item to grow to fill any available space:

  
```
<div class="flex ...">
  <div class="flex-none w-14 h-14 ...">
    01
  </div>
  <div class="grow h-14 ...">
    02
  </div>
  <div class="flex-none w-14 h-14 ...">
    03
  </div>
</div>
```
 ### Don’t grow

 Use `grow-0` to prevent a flex item from growing:

  
```
<div class="flex ...">
  <div class="grow h-14 ...">
    01
  </div>
  <div class="grow-0 h-14 ...">
    02
  </div>
  <div class="grow h-14 ...">
    03
  </div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:grow-0` to only apply the `grow-0` utility on hover.



```
<div class="grow hover:grow-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:grow-0` to apply the `grow-0` utility at only medium screen sizes and above.



```
<div class="grow md:grow-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides two `grow` utilities. You can customize these values by editing `theme.flexGrow` or `theme.extend.flexGrow` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      flexGrow: {
        2: '2'
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `flex-grow` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="grow-[2]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/flex-grow>

Flex Shrink
===========


Utilities for controlling how flex items shrink.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| shrink | flex-shrink: 1;  |
| shrink-0 | flex-shrink: 0;  |






Basic usage
-----------

 ### Shrink

 Use `shrink` to allow a flex item to shrink if needed:

  
```
<div class="flex ...">
  <div class="flex-none w-14 h-14 ...">
    01
  </div>
  <div class="shrink w-64 h-14 ...">
    02
  </div>
  <div class="flex-none w-14 h-14 ...">
    03
  </div>
</div>
```
 ### Don’t shrink

 Use `shrink-0` to prevent a flex item from shrinking:

  
```
<div class="flex ...">
  <div class="flex-1 h-16 ...">
    01
  </div>
  <div class="shrink-0 h-16 w-32 ...">
    02
  </div>
  <div class="flex-1 h-16 ...">
    03
  </div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:shrink-0` to only apply the `shrink-0` utility on hover.



```
<div class="shrink hover:shrink-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:shrink-0` to apply the `shrink-0` utility at only medium screen sizes and above.



```
<div class="shrink md:shrink-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides two `shrink` utilities. You can customize these values by editing `theme.flexShrink` or `theme.extend.flexShrink` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      flexShrink: {
        2: '2'
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `flex-shrink` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="shrink-[2]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/flex-shrink>

Order
=====


Utilities for controlling the order of flex and grid items.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| order-1 | order: 1;  |
| order-2 | order: 2;  |
| order-3 | order: 3;  |
| order-4 | order: 4;  |
| order-5 | order: 5;  |
| order-6 | order: 6;  |
| order-7 | order: 7;  |
| order-8 | order: 8;  |
| order-9 | order: 9;  |
| order-10 | order: 10;  |
| order-11 | order: 11;  |
| order-12 | order: 12;  |
| order-first | order: -9999;  |
| order-last | order: 9999;  |
| order-none | order: 0;  |






Basic usage
-----------

 ### Ordering flex and grid items

 Use `order-{order}` to render flex and grid items in a different order than they appear in the DOM.

 
```
<div class="flex justify-between ...">
  <div class="order-last">01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Using negative values

 To use a negative order value, prefix the class name with a dash to convert it to a negative value.

 
```
<div class="-order-1">
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:order-last` to only apply the `order-last` utility on hover.



```
<div class="order-first hover:order-last">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:order-last` to apply the `order-last` utility at only medium screen sizes and above.



```
<div class="order-first md:order-last">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides utilities for `order-first`, `order-last`, `order-none`, and an `order-{number}` utility for the numbers 1 through 12. You can customize these values by editing `theme.order` or `theme.extend.order` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      order: {
        '13': '13'
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `order` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="order-[13]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/order>

Grid Template Columns
=====================


Utilities for specifying the columns in a grid layout.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr));  |
| grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr));  |
| grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr));  |
| grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr));  |
| grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr));  |
| grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr));  |
| grid-cols-7 | grid-template-columns: repeat(7, minmax(0, 1fr));  |
| grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr));  |
| grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr));  |
| grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr));  |
| grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr));  |
| grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr));  |
| grid-cols-none | grid-template-columns: none;  |






Basic usage
-----------

 ### Specifying the columns in a grid

 Use the `grid-cols-{n}` utilities to create grids with *n* equally sized columns.

 
```
<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:grid-cols-6` to only apply the `grid-cols-6` utility on hover.



```
<div class="grid grid-cols-1 hover:grid-cols-6">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:grid-cols-6` to apply the `grid-cols-6` utility at only medium screen sizes and above.



```
<div class="grid grid-cols-1 md:grid-cols-6">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes `grid-template-column` utilities for creating basic grids with up to 12 equal width columns. You can customize these values by editing `theme.gridTemplateColumns` or `theme.extend.gridTemplateColumns` in your `tailwind.config.js` file.

 You have direct access to the `grid-template-columns` CSS property here so you can make your custom column values as generic or as complicated and site-specific as you like.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        // Simple 16 column grid
        '16': 'repeat(16, minmax(0, 1fr))',

        // Complex site-specific column configuration
        'footer': '200px minmax(900px, 1fr) 100px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `grid-template-columns` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="grid grid-cols-[200px_minmax(900px,_1fr)_100px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/grid-template-columns>

Grid Column Start / End
=======================


Utilities for controlling how elements are sized and placed across grid columns.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| col-auto | grid-column: auto;  |
| col-span-1 | grid-column: span 1 / span 1;  |
| col-span-2 | grid-column: span 2 / span 2;  |
| col-span-3 | grid-column: span 3 / span 3;  |
| col-span-4 | grid-column: span 4 / span 4;  |
| col-span-5 | grid-column: span 5 / span 5;  |
| col-span-6 | grid-column: span 6 / span 6;  |
| col-span-7 | grid-column: span 7 / span 7;  |
| col-span-8 | grid-column: span 8 / span 8;  |
| col-span-9 | grid-column: span 9 / span 9;  |
| col-span-10 | grid-column: span 10 / span 10;  |
| col-span-11 | grid-column: span 11 / span 11;  |
| col-span-12 | grid-column: span 12 / span 12;  |
| col-span-full | grid-column: 1 / -1;  |
| col-start-1 | grid-column-start: 1;  |
| col-start-2 | grid-column-start: 2;  |
| col-start-3 | grid-column-start: 3;  |
| col-start-4 | grid-column-start: 4;  |
| col-start-5 | grid-column-start: 5;  |
| col-start-6 | grid-column-start: 6;  |
| col-start-7 | grid-column-start: 7;  |
| col-start-8 | grid-column-start: 8;  |
| col-start-9 | grid-column-start: 9;  |
| col-start-10 | grid-column-start: 10;  |
| col-start-11 | grid-column-start: 11;  |
| col-start-12 | grid-column-start: 12;  |
| col-start-13 | grid-column-start: 13;  |
| col-start-auto | grid-column-start: auto;  |
| col-end-1 | grid-column-end: 1;  |
| col-end-2 | grid-column-end: 2;  |
| col-end-3 | grid-column-end: 3;  |
| col-end-4 | grid-column-end: 4;  |
| col-end-5 | grid-column-end: 5;  |
| col-end-6 | grid-column-end: 6;  |
| col-end-7 | grid-column-end: 7;  |
| col-end-8 | grid-column-end: 8;  |
| col-end-9 | grid-column-end: 9;  |
| col-end-10 | grid-column-end: 10;  |
| col-end-11 | grid-column-end: 11;  |
| col-end-12 | grid-column-end: 12;  |
| col-end-13 | grid-column-end: 13;  |
| col-end-auto | grid-column-end: auto;  |






Basic usage
-----------

 ### Spanning columns

 Use the `col-span-{n}` utilities to make an element span *n* columns.

 
```
<div class="grid grid-cols-3 gap-4">
  <div class="...">01</div>
  <div class="...">02</div>
  <div class="...">03</div>
  <div class="col-span-2 ...">04</div>
  <div class="...">05</div>
  <div class="...">06</div>
  <div class="col-span-2 ...">07</div>
</div>
```
 ### Starting and ending lines

 Use the `col-start-{n}` and `col-end-{n}` utilities to make an element start or end at the *nth* grid line. These can also be combined with the `col-span-{n}` utilities to span a specific number of columns.

 Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7.

 
```
<div class="grid grid-cols-6 gap-4">
  <div class="col-start-2 col-span-4 ...">01</div>
  <div class="col-start-1 col-end-3 ...">02</div>
  <div class="col-end-7 col-span-2 ...">03</div>
  <div class="col-start-1 col-end-7 ...">04</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:col-span-6` to only apply the `col-span-6` utility on hover.



```
<div class="col-span-2 hover:col-span-6">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:col-span-6` to apply the `col-span-6` utility at only medium screen sizes and above.



```
<div class="col-span-2 md:col-span-6">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes grid-column utilities for working with grids with up to 12 columns. You change, add, or remove these by customizing the `gridColumn`, `gridColumnStart`, and `gridColumnEnd` sections of your Tailwind theme config.

 For creating more `col-{value}` utilities that control the `grid-column` shorthand property directly, customize the `gridColumn` section of your Tailwind theme config:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gridColumn: {
        'span-16': 'span 16 / span 16',
      }
    }
  }
}

```

 We use this internally for our `col-span-{n}` utilities. Note that since this configures the `grid-column` shorthand property directly, we include the word `span` directly in the value name, it’s *not* baked into the class name automatically. That means you are free to add entries that do whatever you want here — they don’t just have to be `span` utilities.

 To add new `col-start-{n}` utilities, use the `gridColumnStart` section of your Tailwind theme config:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gridColumnStart: {
        '13': '13',
        '14': '14',
        '15': '15',
        '16': '16',
        '17': '17',
      }
    }
  }
}

```

 To add new `col-end-{n}` utilities, use the `gridColumnEnd` section of your Tailwind theme config:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gridColumnEnd: {
        '13': '13',
        '14': '14',
        '15': '15',
        '16': '16',
        '17': '17',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `grid-column/grid-column-start/grid-column-end` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="col-[16_/_span_16]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/grid-column>

Place Items
===========


Utilities for controlling how items are justified and aligned at the same time.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| place-items-start | place-items: start;  |
| place-items-end | place-items: end;  |
| place-items-center | place-items: center;  |
| place-items-baseline | place-items: baseline;  |
| place-items-stretch | place-items: stretch;  |






Basic usage
-----------

 ### Start

 Use `place-items-start` to place grid items on the start of their grid areas on both axes:

 
```
<div class="grid grid-cols-3 gap-4 place-items-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 ### End

 Use `place-items-end` to place grid items on the end of their grid areas on both axes:

 
```
<div class="grid grid-cols-3 gap-4 place-items-end h-56 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 ### Center

 Use `place-items-center` to place grid items on the center of their grid areas on both axes:

 
```
<div class="grid grid-cols-3 gap-4 place-items-center h-56 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 ### Stretch

 Use `place-items-stretch` to stretch items along their grid areas on both axes:

 
```
<div class="grid grid-cols-3 gap-4 place-items-stretch h-56 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:place-items-center` to only apply the `place-items-center` utility on hover.



```
<div class="grid place-items-start hover:place-items-center">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:place-items-center` to apply the `place-items-center` utility at only medium screen sizes and above.



```
<div class="grid place-items-start md:place-items-center">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/place-items>

Grid Auto Flow
==============


Utilities for controlling how elements in a grid are auto-placed.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| grid-flow-row | grid-auto-flow: row;  |
| grid-flow-col | grid-auto-flow: column;  |
| grid-flow-dense | grid-auto-flow: dense;  |
| grid-flow-row-dense | grid-auto-flow: row dense;  |
| grid-flow-col-dense | grid-auto-flow: column dense;  |






Basic usage
-----------

 ### Controlling grid element placement

 Use the `grid-flow-{keyword}` utilities to control how the auto-placement algorithm works for a grid layout.

 
```
<div class="grid grid-flow-row-dense grid-cols-3 grid-rows-3 ...">
  <div class="col-span-2">01</div>
  <div class="col-span-2">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:grid-flow-row` to only apply the `grid-flow-row` utility on hover.



```
<div class="grid grid-flow-col hover:grid-flow-row">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:grid-flow-row` to apply the `grid-flow-row` utility at only medium screen sizes and above.



```
<div class="grid grid-flow-col md:grid-flow-row">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/grid-auto-flow>

Grid Auto Columns
=================


Utilities for controlling the size of implicitly-created grid columns.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| auto-cols-auto | grid-auto-columns: auto;  |
| auto-cols-min | grid-auto-columns: min-content;  |
| auto-cols-max | grid-auto-columns: max-content;  |
| auto-cols-fr | grid-auto-columns: minmax(0, 1fr);  |






Basic usage
-----------

 ### Sizing implicitly-created grid columns

 Use the `auto-cols-{size}` utilities to control the size of implicitly-created grid columns.

 
```
<div class="grid grid-flow-col auto-cols-max">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:auto-cols-min` to only apply the `auto-cols-min` utility on hover.



```
<div class="grid grid-flow-col auto-cols-max hover:auto-cols-min">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:auto-cols-min` to apply the `auto-cols-min` utility at only medium screen sizes and above.



```
<div class="grid grid-flow-col auto-cols-max md:auto-cols-min">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes four general purpose `grid-auto-columns` utilities. You can customize these values by editing `theme.gridAutoColumns` or `theme.extend.gridAutoColumns` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gridAutoColumns: {
        '2fr': 'minmax(0, 2fr)',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `grid-auto-columns` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="grid grid-flow-col auto-cols-[minmax(0,_2fr)]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/grid-auto-columns>

Gap
===


Utilities for controlling gutters between grid and flexbox items.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| gap-0 | gap: 0px;  |
| gap-x-0 | column-gap: 0px;  |
| gap-y-0 | row-gap: 0px;  |
| gap-px | gap: 1px;  |
| gap-x-px | column-gap: 1px;  |
| gap-y-px | row-gap: 1px;  |
| gap-0.5 | gap: 0.125rem; /\* 2px \*/ |
| gap-x-0.5 | column-gap: 0.125rem; /\* 2px \*/ |
| gap-y-0.5 | row-gap: 0.125rem; /\* 2px \*/ |
| gap-1 | gap: 0.25rem; /\* 4px \*/ |
| gap-x-1 | column-gap: 0.25rem; /\* 4px \*/ |
| gap-y-1 | row-gap: 0.25rem; /\* 4px \*/ |
| gap-1.5 | gap: 0.375rem; /\* 6px \*/ |
| gap-x-1.5 | column-gap: 0.375rem; /\* 6px \*/ |
| gap-y-1.5 | row-gap: 0.375rem; /\* 6px \*/ |
| gap-2 | gap: 0.5rem; /\* 8px \*/ |
| gap-x-2 | column-gap: 0.5rem; /\* 8px \*/ |
| gap-y-2 | row-gap: 0.5rem; /\* 8px \*/ |
| gap-2.5 | gap: 0.625rem; /\* 10px \*/ |
| gap-x-2.5 | column-gap: 0.625rem; /\* 10px \*/ |
| gap-y-2.5 | row-gap: 0.625rem; /\* 10px \*/ |
| gap-3 | gap: 0.75rem; /\* 12px \*/ |
| gap-x-3 | column-gap: 0.75rem; /\* 12px \*/ |
| gap-y-3 | row-gap: 0.75rem; /\* 12px \*/ |
| gap-3.5 | gap: 0.875rem; /\* 14px \*/ |
| gap-x-3.5 | column-gap: 0.875rem; /\* 14px \*/ |
| gap-y-3.5 | row-gap: 0.875rem; /\* 14px \*/ |
| gap-4 | gap: 1rem; /\* 16px \*/ |
| gap-x-4 | column-gap: 1rem; /\* 16px \*/ |
| gap-y-4 | row-gap: 1rem; /\* 16px \*/ |
| gap-5 | gap: 1.25rem; /\* 20px \*/ |
| gap-x-5 | column-gap: 1.25rem; /\* 20px \*/ |
| gap-y-5 | row-gap: 1.25rem; /\* 20px \*/ |
| gap-6 | gap: 1.5rem; /\* 24px \*/ |
| gap-x-6 | column-gap: 1.5rem; /\* 24px \*/ |
| gap-y-6 | row-gap: 1.5rem; /\* 24px \*/ |
| gap-7 | gap: 1.75rem; /\* 28px \*/ |
| gap-x-7 | column-gap: 1.75rem; /\* 28px \*/ |
| gap-y-7 | row-gap: 1.75rem; /\* 28px \*/ |
| gap-8 | gap: 2rem; /\* 32px \*/ |
| gap-x-8 | column-gap: 2rem; /\* 32px \*/ |
| gap-y-8 | row-gap: 2rem; /\* 32px \*/ |
| gap-9 | gap: 2.25rem; /\* 36px \*/ |
| gap-x-9 | column-gap: 2.25rem; /\* 36px \*/ |
| gap-y-9 | row-gap: 2.25rem; /\* 36px \*/ |
| gap-10 | gap: 2.5rem; /\* 40px \*/ |
| gap-x-10 | column-gap: 2.5rem; /\* 40px \*/ |
| gap-y-10 | row-gap: 2.5rem; /\* 40px \*/ |
| gap-11 | gap: 2.75rem; /\* 44px \*/ |
| gap-x-11 | column-gap: 2.75rem; /\* 44px \*/ |
| gap-y-11 | row-gap: 2.75rem; /\* 44px \*/ |
| gap-12 | gap: 3rem; /\* 48px \*/ |
| gap-x-12 | column-gap: 3rem; /\* 48px \*/ |
| gap-y-12 | row-gap: 3rem; /\* 48px \*/ |
| gap-14 | gap: 3.5rem; /\* 56px \*/ |
| gap-x-14 | column-gap: 3.5rem; /\* 56px \*/ |
| gap-y-14 | row-gap: 3.5rem; /\* 56px \*/ |
| gap-16 | gap: 4rem; /\* 64px \*/ |
| gap-x-16 | column-gap: 4rem; /\* 64px \*/ |
| gap-y-16 | row-gap: 4rem; /\* 64px \*/ |
| gap-20 | gap: 5rem; /\* 80px \*/ |
| gap-x-20 | column-gap: 5rem; /\* 80px \*/ |
| gap-y-20 | row-gap: 5rem; /\* 80px \*/ |
| gap-24 | gap: 6rem; /\* 96px \*/ |
| gap-x-24 | column-gap: 6rem; /\* 96px \*/ |
| gap-y-24 | row-gap: 6rem; /\* 96px \*/ |
| gap-28 | gap: 7rem; /\* 112px \*/ |
| gap-x-28 | column-gap: 7rem; /\* 112px \*/ |
| gap-y-28 | row-gap: 7rem; /\* 112px \*/ |
| gap-32 | gap: 8rem; /\* 128px \*/ |
| gap-x-32 | column-gap: 8rem; /\* 128px \*/ |
| gap-y-32 | row-gap: 8rem; /\* 128px \*/ |
| gap-36 | gap: 9rem; /\* 144px \*/ |
| gap-x-36 | column-gap: 9rem; /\* 144px \*/ |
| gap-y-36 | row-gap: 9rem; /\* 144px \*/ |
| gap-40 | gap: 10rem; /\* 160px \*/ |
| gap-x-40 | column-gap: 10rem; /\* 160px \*/ |
| gap-y-40 | row-gap: 10rem; /\* 160px \*/ |
| gap-44 | gap: 11rem; /\* 176px \*/ |
| gap-x-44 | column-gap: 11rem; /\* 176px \*/ |
| gap-y-44 | row-gap: 11rem; /\* 176px \*/ |
| gap-48 | gap: 12rem; /\* 192px \*/ |
| gap-x-48 | column-gap: 12rem; /\* 192px \*/ |
| gap-y-48 | row-gap: 12rem; /\* 192px \*/ |
| gap-52 | gap: 13rem; /\* 208px \*/ |
| gap-x-52 | column-gap: 13rem; /\* 208px \*/ |
| gap-y-52 | row-gap: 13rem; /\* 208px \*/ |
| gap-56 | gap: 14rem; /\* 224px \*/ |
| gap-x-56 | column-gap: 14rem; /\* 224px \*/ |
| gap-y-56 | row-gap: 14rem; /\* 224px \*/ |
| gap-60 | gap: 15rem; /\* 240px \*/ |
| gap-x-60 | column-gap: 15rem; /\* 240px \*/ |
| gap-y-60 | row-gap: 15rem; /\* 240px \*/ |
| gap-64 | gap: 16rem; /\* 256px \*/ |
| gap-x-64 | column-gap: 16rem; /\* 256px \*/ |
| gap-y-64 | row-gap: 16rem; /\* 256px \*/ |
| gap-72 | gap: 18rem; /\* 288px \*/ |
| gap-x-72 | column-gap: 18rem; /\* 288px \*/ |
| gap-y-72 | row-gap: 18rem; /\* 288px \*/ |
| gap-80 | gap: 20rem; /\* 320px \*/ |
| gap-x-80 | column-gap: 20rem; /\* 320px \*/ |
| gap-y-80 | row-gap: 20rem; /\* 320px \*/ |
| gap-96 | gap: 24rem; /\* 384px \*/ |
| gap-x-96 | column-gap: 24rem; /\* 384px \*/ |
| gap-y-96 | row-gap: 24rem; /\* 384px \*/ |






Basic usage
-----------

 ### Setting the gap between elements

 Use `gap-{size}` to change the gap between both rows and columns in grid and flexbox layouts.

 
```
<div class="grid gap-4 grid-cols-2">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```
 ### Changing row and column gaps independently

 Use `gap-x-{size}` and `gap-y-{size}` to change the gap between rows and columns independently.

 
```
<div class="grid gap-x-8 gap-y-4 grid-cols-3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:gap-6` to only apply the `gap-6` utility on hover.



```
<div class="grid gap-4 hover:gap-6">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:gap-6` to apply the `gap-6` utility at only medium screen sizes and above.



```
<div class="grid gap-4 md:gap-6">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind’s gap scale uses the [default spacing scale](customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '11': '2.75rem',
      }
    }
  }
}

```

 Alternatively, you can customize just the gap scale by editing `theme.gap` or `theme.extend.gap` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gap: {
        '11': '2.75rem',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `gap` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="grid gap-[2.75rem]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/gap>

Justify Content
===============


Utilities for controlling how flex and grid items are positioned along a container's main axis.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| justify-normal | justify-content: normal;  |
| justify-start | justify-content: flex-start;  |
| justify-end | justify-content: flex-end;  |
| justify-center | justify-content: center;  |
| justify-between | justify-content: space-between;  |
| justify-around | justify-content: space-around;  |
| justify-evenly | justify-content: space-evenly;  |
| justify-stretch | justify-content: stretch;  |






Basic usage
-----------

 ### Start

 Use `justify-start` to justify items against the start of the container’s main axis:

 
```
<div class="flex justify-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Center

 Use `justify-center` to justify items along the center of the container’s main axis:

 
```
<div class="flex justify-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### End

 Use `justify-end` to justify items against the end of the container’s main axis:

 
```
<div class="flex justify-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Space between

 Use `justify-between` to justify items along the container’s main axis such that there is an equal amount of space between each item:

 
```
<div class="flex justify-between ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Space around

 Use `justify-around` to justify items along the container’s main axis such that there is an equal amount of space on each side of each item:

 
```
<div class="flex justify-around ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Space evenly

 Use `justify-evenly` to justify items along the container’s main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `justify-around`:

 
```
<div class="flex justify-evenly ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Stretch

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

 
```
<div class="grid grid-flow-col justify-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Normal

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

 
```
<div class="flex justify-normal ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:justify-between` to only apply the `justify-between` utility on hover.



```
<div class="flex justify-start hover:justify-between">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:justify-between` to apply the `justify-between` utility at only medium screen sizes and above.



```
<div class="flex justify-start md:justify-between">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/justify-content>

Justify Items
=============


Utilities for controlling how grid items are aligned along their inline axis.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| justify-items-start | justify-items: start;  |
| justify-items-end | justify-items: end;  |
| justify-items-center | justify-items: center;  |
| justify-items-stretch | justify-items: stretch;  |






Basic usage
-----------

 ### Start

 Use `justify-items-start` to justify grid items against the start of their inline axis:

 
```
<div class="grid justify-items-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 ### End

 Use `justify-items-end` to justify grid items against the end of their inline axis:

 
```
<div class="grid justify-items-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 ### Center

 Use `justify-items-center` to justify grid items along their inline axis:

 
```
<div class="grid justify-items-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 ### Stretch

 Use `justify-items-stretch` to stretch items along their inline axis:

 
```
<div class="grid justify-items-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:justify-items-center` to only apply the `justify-items-center` utility on hover.



```
<div class="grid justify-items-start hover:justify-items-center">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:justify-items-center` to apply the `justify-items-center` utility at only medium screen sizes and above.



```
<div class="grid justify-items-start md:justify-items-center">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/justify-items>

Place Content
=============


Utilities for controlling how content is justified and aligned at the same time.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| place-content-center | place-content: center;  |
| place-content-start | place-content: start;  |
| place-content-end | place-content: end;  |
| place-content-between | place-content: space-between;  |
| place-content-around | place-content: space-around;  |
| place-content-evenly | place-content: space-evenly;  |
| place-content-baseline | place-content: baseline;  |
| place-content-stretch | place-content: stretch;  |






Basic usage
-----------

 ### Center

 Use `place-content-center` to pack items in the center of the block axis:

 
```
<div class="grid grid-cols-2 gap-4 place-content-center h-48 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```
 ### Start

 Use `place-content-start` to pack items against the start of the block axis:

 
```
<div class="grid grid-cols-2 gap-4 place-content-start h-48 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```
 ### End

 Use `place-content-end` to to pack items against the end of the block axis:

 
```
<div class="grid grid-cols-2 gap-4 place-content-end h-48 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```
 ### Space between

 Use `place-content-between` to distribute grid items along the block axis so that that there is an equal amount of space between each row on the block axis.

 
```
<div class="grid grid-cols-2 gap-4 place-content-between h-48 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```
 ### Space around

 Use `place-content-around` distribute grid items such that there is an equal amount of space around each row on the block axis:

 
```
<div class="grid grid-cols-2 gap-4 place-content-around h-48 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```
 ### Space evenly

 Use `place-content-evenly` to distribute grid items such that they are evenly spaced on the block axis:

 
```
<div class="grid grid-cols-2 gap-4 place-content-evenly h-48 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```
 ### Stretch

 Use `place-content-stretch` to stretch grid items along their grid areas on the block axis:

 
```
<div class="grid grid-cols-2 gap-4 place-content-stretch h-48 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:place-content-center` to only apply the `place-content-center` utility on hover.



```
<div class="grid place-content-start hover:place-content-center">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:place-content-center` to apply the `place-content-center` utility at only medium screen sizes and above.



```
<div class="grid place-content-start md:place-content-center">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/place-content>

Place Self
==========


Utilities for controlling how an individual item is justified and aligned at the same time.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| place-self-auto | place-self: auto;  |
| place-self-start | place-self: start;  |
| place-self-end | place-self: end;  |
| place-self-center | place-self: center;  |
| place-self-stretch | place-self: stretch;  |






Basic usage
-----------

 ### Auto

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

 
```
<div class="grid grid-cols-3 gap-4 ...">
  <div>01</div>
  <div class="place-self-auto ...">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 ### Start

 Use `place-self-start` to align an item to the start on both axes:

 
```
<div class="grid grid-cols-3 gap-4 ...">
  <div>01</div>
  <div class="place-self-start ...">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 ### Center

 Use `place-self-center` to align an item at the center on both axes:

 
```
<div class="grid grid-cols-3 gap-4 ...">
  <div>01</div>
  <div class="place-self-center ...">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 ### End

 Use `place-self-end` to align an item to the end on both axes:

 
```
<div class="grid grid-cols-3 gap-4 ...">
  <div>01</div>
  <div class="place-self-end ...">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 ### Stretch

 Use `place-self-stretch` to stretch an item on both axes:

 
```
<div class="grid grid-cols-3 gap-2 ...">
  <div>01</div>
  <div class="place-self-stretch ...">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:place-self-end` to only apply the `place-self-end` utility on hover.



```
<div class="place-self-start hover:place-self-end">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:place-self-end` to apply the `place-self-end` utility at only medium screen sizes and above.



```
<div class="place-self-start md:place-self-end">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/place-self>

Space Between
=============


Utilities for controlling the space between child elements.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| space-x-0 > \* + \* | margin-left: 0px;  |
| space-y-0 > \* + \* | margin-top: 0px;  |
| space-x-0.5 > \* + \* | margin-left: 0.125rem; /\* 2px \*/ |
| space-y-0.5 > \* + \* | margin-top: 0.125rem; /\* 2px \*/ |
| space-x-1 > \* + \* | margin-left: 0.25rem; /\* 4px \*/ |
| space-y-1 > \* + \* | margin-top: 0.25rem; /\* 4px \*/ |
| space-x-1.5 > \* + \* | margin-left: 0.375rem; /\* 6px \*/ |
| space-y-1.5 > \* + \* | margin-top: 0.375rem; /\* 6px \*/ |
| space-x-2 > \* + \* | margin-left: 0.5rem; /\* 8px \*/ |
| space-y-2 > \* + \* | margin-top: 0.5rem; /\* 8px \*/ |
| space-x-2.5 > \* + \* | margin-left: 0.625rem; /\* 10px \*/ |
| space-y-2.5 > \* + \* | margin-top: 0.625rem; /\* 10px \*/ |
| space-x-3 > \* + \* | margin-left: 0.75rem; /\* 12px \*/ |
| space-y-3 > \* + \* | margin-top: 0.75rem; /\* 12px \*/ |
| space-x-3.5 > \* + \* | margin-left: 0.875rem; /\* 14px \*/ |
| space-y-3.5 > \* + \* | margin-top: 0.875rem; /\* 14px \*/ |
| space-x-4 > \* + \* | margin-left: 1rem; /\* 16px \*/ |
| space-y-4 > \* + \* | margin-top: 1rem; /\* 16px \*/ |
| space-x-5 > \* + \* | margin-left: 1.25rem; /\* 20px \*/ |
| space-y-5 > \* + \* | margin-top: 1.25rem; /\* 20px \*/ |
| space-x-6 > \* + \* | margin-left: 1.5rem; /\* 24px \*/ |
| space-y-6 > \* + \* | margin-top: 1.5rem; /\* 24px \*/ |
| space-x-7 > \* + \* | margin-left: 1.75rem; /\* 28px \*/ |
| space-y-7 > \* + \* | margin-top: 1.75rem; /\* 28px \*/ |
| space-x-8 > \* + \* | margin-left: 2rem; /\* 32px \*/ |
| space-y-8 > \* + \* | margin-top: 2rem; /\* 32px \*/ |
| space-x-9 > \* + \* | margin-left: 2.25rem; /\* 36px \*/ |
| space-y-9 > \* + \* | margin-top: 2.25rem; /\* 36px \*/ |
| space-x-10 > \* + \* | margin-left: 2.5rem; /\* 40px \*/ |
| space-y-10 > \* + \* | margin-top: 2.5rem; /\* 40px \*/ |
| space-x-11 > \* + \* | margin-left: 2.75rem; /\* 44px \*/ |
| space-y-11 > \* + \* | margin-top: 2.75rem; /\* 44px \*/ |
| space-x-12 > \* + \* | margin-left: 3rem; /\* 48px \*/ |
| space-y-12 > \* + \* | margin-top: 3rem; /\* 48px \*/ |
| space-x-14 > \* + \* | margin-left: 3.5rem; /\* 56px \*/ |
| space-y-14 > \* + \* | margin-top: 3.5rem; /\* 56px \*/ |
| space-x-16 > \* + \* | margin-left: 4rem; /\* 64px \*/ |
| space-y-16 > \* + \* | margin-top: 4rem; /\* 64px \*/ |
| space-x-20 > \* + \* | margin-left: 5rem; /\* 80px \*/ |
| space-y-20 > \* + \* | margin-top: 5rem; /\* 80px \*/ |
| space-x-24 > \* + \* | margin-left: 6rem; /\* 96px \*/ |
| space-y-24 > \* + \* | margin-top: 6rem; /\* 96px \*/ |
| space-x-28 > \* + \* | margin-left: 7rem; /\* 112px \*/ |
| space-y-28 > \* + \* | margin-top: 7rem; /\* 112px \*/ |
| space-x-32 > \* + \* | margin-left: 8rem; /\* 128px \*/ |
| space-y-32 > \* + \* | margin-top: 8rem; /\* 128px \*/ |
| space-x-36 > \* + \* | margin-left: 9rem; /\* 144px \*/ |
| space-y-36 > \* + \* | margin-top: 9rem; /\* 144px \*/ |
| space-x-40 > \* + \* | margin-left: 10rem; /\* 160px \*/ |
| space-y-40 > \* + \* | margin-top: 10rem; /\* 160px \*/ |
| space-x-44 > \* + \* | margin-left: 11rem; /\* 176px \*/ |
| space-y-44 > \* + \* | margin-top: 11rem; /\* 176px \*/ |
| space-x-48 > \* + \* | margin-left: 12rem; /\* 192px \*/ |
| space-y-48 > \* + \* | margin-top: 12rem; /\* 192px \*/ |
| space-x-52 > \* + \* | margin-left: 13rem; /\* 208px \*/ |
| space-y-52 > \* + \* | margin-top: 13rem; /\* 208px \*/ |
| space-x-56 > \* + \* | margin-left: 14rem; /\* 224px \*/ |
| space-y-56 > \* + \* | margin-top: 14rem; /\* 224px \*/ |
| space-x-60 > \* + \* | margin-left: 15rem; /\* 240px \*/ |
| space-y-60 > \* + \* | margin-top: 15rem; /\* 240px \*/ |
| space-x-64 > \* + \* | margin-left: 16rem; /\* 256px \*/ |
| space-y-64 > \* + \* | margin-top: 16rem; /\* 256px \*/ |
| space-x-72 > \* + \* | margin-left: 18rem; /\* 288px \*/ |
| space-y-72 > \* + \* | margin-top: 18rem; /\* 288px \*/ |
| space-x-80 > \* + \* | margin-left: 20rem; /\* 320px \*/ |
| space-y-80 > \* + \* | margin-top: 20rem; /\* 320px \*/ |
| space-x-96 > \* + \* | margin-left: 24rem; /\* 384px \*/ |
| space-y-96 > \* + \* | margin-top: 24rem; /\* 384px \*/ |
| space-x-px > \* + \* | margin-left: 1px;  |
| space-y-px > \* + \* | margin-top: 1px;  |
| space-y-reverse > \* + \* | --tw-space-y-reverse: 1;  |
| space-x-reverse > \* + \* | --tw-space-x-reverse: 1;  |






Basic usage
-----------

 ### Add horizontal space between children

 Control the horizontal space between elements using the `space-x-{amount}` utilities.

 
```
<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Add vertical space between children

 Control the vertical space between elements using the `space-y-{amount}` utilities.

 
```
<div class="flex flex-col space-y-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Reversing children order

 If your elements are in reverse order (using say `flex-row-reverse` or `flex-col-reverse`), use the `space-x-reverse` or `space-y-reverse` utilities to ensure the space is added to the correct side of each element.

 
```
<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Using negative values

 To use a negative space value, prefix the class name with a dash to convert it to a negative value.

 
```
<div class="flex -space-x-4 ...">
  <!-- ... -->
</div>
```
 Limitations
-----------

 These utilities are really just a shortcut for adding margin to all-but-the-first-item in a group, and aren’t designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.

 For those situations, it’s better to use the [gap utilities](gap) when possible, or add margin to every element with a matching negative margin on the parent:

 
```
<div class="flow-root">
  <div class="-m-2 flex flex-wrap">
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
  </div>
</div>
```
 ### Cannot be paired with divide utilities

 The `space-*` utilities are not designed to work together with the [divide utilities](divide-width). For those situations, consider adding margin/padding utilities to the children instead.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:space-x-8` to only apply the `space-x-8` utility on hover.



```
<div class="flex space-x-2 hover:space-x-8">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:space-x-8` to apply the `space-x-8` utility at only medium screen sizes and above.



```
<div class="flex space-x-2 md:space-x-8">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind’s space scale uses the [default spacing scale](customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

```

 Alternatively, you can customize just the space scale by editing `theme.space` or `theme.extend.space` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      space: {
        '5px': '5px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `space-{x|y}` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="space-y-[5px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/space>

Min-Width
=========


Utilities for setting the minimum width of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| min-w-0 | min-width: 0px;  |
| min-w-full | min-width: 100%;  |
| min-w-min | min-width: min-content;  |
| min-w-max | min-width: max-content;  |
| min-w-fit | min-width: fit-content;  |






Basic usage
-----------

 ### Setting the minimum width

 Set the minimum width of an element using the `min-w-{width}` utilities.

 
```
<span class="min-w-full ...">
  <!-- ... -->
</span>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:min-w-0` to only apply the `min-w-0` utility on hover.



```
<div class="w-24 min-w-full hover:min-w-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:min-w-0` to apply the `min-w-0` utility at only medium screen sizes and above.



```
<div class="w-24 min-w-full md:min-w-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 You can customize your `min-width` scale by editing `theme.minWidth` or `theme.extend.minWidth` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    minWidth: {
      '1/2': '50%',
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `min-width` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="min-w-[50%]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/min-width>

Grid Template Rows
==================


Utilities for specifying the rows in a grid layout.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr));  |
| grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr));  |
| grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr));  |
| grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr));  |
| grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr));  |
| grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr));  |
| grid-rows-none | grid-template-rows: none;  |






Basic usage
-----------

 ### Specifying the rows in a grid

 Use the `grid-rows-{n}` utilities to create grids with *n* equally sized rows.

 
```
<div class="grid grid-rows-4 grid-flow-col gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:grid-rows-6` to only apply the `grid-rows-6` utility on hover.



```
<div class="grid grid-rows-2 hover:grid-rows-6">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:grid-rows-6` to apply the `grid-rows-6` utility at only medium screen sizes and above.



```
<div class="grid grid-rows-2 md:grid-rows-6">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes `grid-template-row` utilities for creating basic grids with up to 6 equal width rows. You can customize these values by editing `theme.gridTemplateRows` or `theme.extend.gridTemplateRows` in your `tailwind.config.js` file.

 You have direct access to the `grid-template-rows` CSS property here so you can make your custom rows values as generic or as complicated and site-specific as you like.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gridTemplateRows: {
        // Simple 8 row grid
        '8': 'repeat(8, minmax(0, 1fr))',

        // Complex site-specific row configuration
        'layout': '200px minmax(900px, 1fr) 100px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `grid-template-rows` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="grid grid-rows-[200px_minmax(900px,_1fr)_100px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/grid-template-rows>

Grid Row Start / End
====================


Utilities for controlling how elements are sized and placed across grid rows.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| row-auto | grid-row: auto;  |
| row-span-1 | grid-row: span 1 / span 1;  |
| row-span-2 | grid-row: span 2 / span 2;  |
| row-span-3 | grid-row: span 3 / span 3;  |
| row-span-4 | grid-row: span 4 / span 4;  |
| row-span-5 | grid-row: span 5 / span 5;  |
| row-span-6 | grid-row: span 6 / span 6;  |
| row-span-full | grid-row: 1 / -1;  |
| row-start-1 | grid-row-start: 1;  |
| row-start-2 | grid-row-start: 2;  |
| row-start-3 | grid-row-start: 3;  |
| row-start-4 | grid-row-start: 4;  |
| row-start-5 | grid-row-start: 5;  |
| row-start-6 | grid-row-start: 6;  |
| row-start-7 | grid-row-start: 7;  |
| row-start-auto | grid-row-start: auto;  |
| row-end-1 | grid-row-end: 1;  |
| row-end-2 | grid-row-end: 2;  |
| row-end-3 | grid-row-end: 3;  |
| row-end-4 | grid-row-end: 4;  |
| row-end-5 | grid-row-end: 5;  |
| row-end-6 | grid-row-end: 6;  |
| row-end-7 | grid-row-end: 7;  |
| row-end-auto | grid-row-end: auto;  |






Basic usage
-----------

 ### Spanning rows

 Use the `row-span-{n}` utilities to make an element span *n* rows.

 
```
<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-span-3 ...">01</div>
  <div class="col-span-2 ...">02</div>
  <div class="row-span-2 col-span-2 ...">03</div>
</div>
```
 ### Starting and ending lines

 Use the `row-start-{n}` and `row-end-{n}` utilities to make an element start or end at the *nth* grid line. These can also be combined with the `row-span-{n}` utilities to span a specific number of rows.

 Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.

 
```
<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-start-2 row-span-2 ...">01</div>
  <div class="row-end-3 row-span-2 ...">02</div>
  <div class="row-start-1 row-end-4 ...">03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:row-span-4` to only apply the `row-span-4` utility on hover.



```
<div class="row-span-3 hover:row-span-4">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:row-span-4` to apply the `row-span-4` utility at only medium screen sizes and above.



```
<div class="row-span-3 md:row-span-4">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes grid-row utilities for working with grids with up to 6 explicit rows. You can customize these values by editing `theme.gridRow`, `theme.extend.gridRow`, `theme.gridRowStart`, `theme.extend.gridRowStart`, `theme.gridRowEnd`, and `theme.extend.gridRowEnd` in your `tailwind.config.js` file.

 For creating more `row-{value}` utilities that control the `grid-row` shorthand property directly, customize the `gridRow` section of your Tailwind theme config:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gridRow: {
        'span-16': 'span 16 / span 16',
      }
    }
  }
}

```

 We use this internally for our `row-span-{n}` utilities. Note that since this configures the `grid-row` shorthand property directly, we include the word `span` directly in the value name, it’s *not* baked into the class name automatically. That means you are free to add entries that do whatever you want here — they don’t just have to be `span` utilities.

 To add new `row-start-{n}` utilities, use the `gridRowStart` section of your Tailwind theme config:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gridRowStart: {
        '8': '8',
        '9': '9',
        '10': '10',
        '11': '11',
        '12': '12',
        '13': '13',
      }
    }
  }
}

```

 To add new `row-end-{n}` utilities, use the `gridRowEnd` section of your Tailwind theme config:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gridRowEnd: {
        '8': '8',
        '9': '9',
        '10': '10',
        '11': '11',
        '12': '12',
        '13': '13',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `grid-row/grid-row-start/grid-row-end` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="row-[span_16_/_span_16]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/grid-row>

Grid Auto Rows
==============


Utilities for controlling the size of implicitly-created grid rows.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| auto-rows-auto | grid-auto-rows: auto;  |
| auto-rows-min | grid-auto-rows: min-content;  |
| auto-rows-max | grid-auto-rows: max-content;  |
| auto-rows-fr | grid-auto-rows: minmax(0, 1fr);  |






Basic usage
-----------

 ### Sizing implicitly-created grid rows

 Use the `auto-rows-{size}` utilities to control the size of implicitly-created grid rows.

 
```
<div class="grid grid-flow-row auto-rows-max">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:auto-rows-min` to only apply the `auto-rows-min` utility on hover.



```
<div class="grid grid-flow-row auto-rows-max hover:auto-rows-min">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:auto-rows-min` to apply the `auto-rows-min` utility at only medium screen sizes and above.



```
<div class="grid grid-flow-row auto-rows-max md:auto-rows-min">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes four general purpose `grid-auto-rows` utilities. You can customize these values by editing `theme.gridAutoRows` or `theme.extend.gridAutoRows` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gridAutoRows: {
        '2fr': 'minmax(0, 2fr)',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `grid-auto-rows` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="grid grid-flow-row auto-rows-[minmax(0,_2fr)]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/grid-auto-rows>

Justify Self
============


Utilities for controlling how an individual grid item is aligned along its inline axis.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| justify-self-auto | justify-self: auto;  |
| justify-self-start | justify-self: start;  |
| justify-self-end | justify-self: end;  |
| justify-self-center | justify-self: center;  |
| justify-self-stretch | justify-self: stretch;  |






Basic usage
-----------

 ### Auto

 Use `justify-self-auto` to align an item based on the value of the grid’s `justify-items` property:

 
```
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-auto ...">02</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```
 ### Start

 Use `justify-self-start` to align a grid item to the start its inline axis:

 
```
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-start ...">02</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```
 ### Center

 Use `justify-self-center` to align a grid item along the center its inline axis:

 
```
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center ...">02</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```
 ### End

 Use `justify-self-end` to align a grid item to the end its inline axis:

 
```
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end ...">02</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```
 ### Stretch

 Use `justify-self-stretch` to stretch a grid item to fill the grid area on its inline axis:

 
```
<div class="grid justify-items-start ...">
  <!-- ... -->
  <div class="justify-self-stretch ...">02</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:justify-self-end` to only apply the `justify-self-end` utility on hover.



```
<div class="justify-self-start hover:justify-self-end">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:justify-self-end` to apply the `justify-self-end` utility at only medium screen sizes and above.



```
<div class="justify-self-start md:justify-self-end">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/justify-self>

Align Content
=============


Utilities for controlling how rows are positioned in multi-row flex and grid containers.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| 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;  |






Basic usage
-----------

 ### Start

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

 
```
<div class="h-56 grid grid-cols-3 gap-4 content-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```
 ### Center

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

 
```
<div class="h-56 grid grid-cols-3 gap-4 content-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```
 ### End

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

 
```
<div class="h-56 grid grid-cols-3 gap-4 content-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```
 ### Space between

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

 
```
<div class="h-56 grid grid-cols-3 gap-4 content-between ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```
 ### Space around

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

 
```
<div class="h-56 grid grid-cols-3 gap-4 content-around ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```
 ### Space evenly

 Use `content-evenly` to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `content-around`:

 
```
<div class="h-56 grid grid-cols-3 gap-4 content-evenly ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```
 ### Stretch

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

 
```
<div class="h-56 grid grid-cols-3 gap-4 content-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```
 ### Normal

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

 
```
<div class="h-56 grid grid-cols-3 gap-4 content-normal ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:content-around` to only apply the `content-around` utility on hover.



```
<div class="grid content-start hover:content-around">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above.



```
<div class="grid content-start md:content-around">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/align-content>

Align Items
===========


Utilities for controlling how flex and grid items are positioned along a container's cross axis.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| items-start | align-items: flex-start;  |
| items-end | align-items: flex-end;  |
| items-center | align-items: center;  |
| items-baseline | align-items: baseline;  |
| items-stretch | align-items: stretch;  |






Basic usage
-----------

 ### Stretch

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

 
```
<div class="flex items-stretch ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>
```
 ### Start

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

 
```
<div class="flex items-start ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>
```
 ### Center

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

 
```
<div class="flex items-center ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>
```
 ### End

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

 
```
<div class="flex items-end ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>
```
 ### Baseline

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

 
```
<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>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:items-center` to only apply the `items-center` utility on hover.



```
<div class="flex items-stretch hover:items-center">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:items-center` to apply the `items-center` utility at only medium screen sizes and above.



```
<div class="flex items-stretch md:items-center">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/align-items>

Align Self
==========


Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| self-auto | align-self: auto;  |
| self-start | align-self: flex-start;  |
| self-end | align-self: flex-end;  |
| self-center | align-self: center;  |
| self-stretch | align-self: stretch;  |
| self-baseline | align-self: baseline;  |






Basic usage
-----------

 ### Auto

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

 
```
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-auto ...">02</div>
  <div>03</div>
</div>
```
 ### Start

 Use `self-start` to align an item to the start of the container’s cross axis, despite the container’s `align-items` value:

 
```
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-start ...">02</div>
  <div>03</div>
</div>
```
 ### Center

 Use `self-center` to align an item along the center of the container’s cross axis, despite the container’s `align-items` value:

 
```
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-center ...">02</div>
  <div>03</div>
</div>
```
 ### End

 Use `self-end` to align an item to the end of the container’s cross axis, despite the container’s `align-items` value:

 
```
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-end ...">02</div>
  <div>03</div>
</div>
```
 ### Stretch

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

 
```
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-stretch ...">02</div>
  <div>03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:self-end` to only apply the `self-end` utility on hover.



```
<div class="self-auto hover:self-end">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:self-end` to apply the `self-end` utility at only medium screen sizes and above.



```
<div class="self-auto md:self-end">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/align-self>

Padding
=======


Utilities for controlling an element's padding.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| p-0 | padding: 0px;  |
| px-0 | padding-left: 0px; padding-right: 0px;  |
| py-0 | padding-top: 0px; padding-bottom: 0px;  |
| ps-0 | padding-inline-start: 0px;  |
| pe-0 | padding-inline-end: 0px;  |
| pt-0 | padding-top: 0px;  |
| pr-0 | padding-right: 0px;  |
| pb-0 | padding-bottom: 0px;  |
| pl-0 | padding-left: 0px;  |
| p-px | padding: 1px;  |
| px-px | padding-left: 1px; padding-right: 1px;  |
| py-px | padding-top: 1px; padding-bottom: 1px;  |
| ps-px | padding-inline-start: 1px;  |
| pe-px | padding-inline-end: 1px;  |
| pt-px | padding-top: 1px;  |
| pr-px | padding-right: 1px;  |
| pb-px | padding-bottom: 1px;  |
| pl-px | padding-left: 1px;  |
| p-0.5 | padding: 0.125rem; /\* 2px \*/ |
| px-0.5 | padding-left: 0.125rem; /\* 2px \*/ padding-right: 0.125rem; /\* 2px \*/ |
| py-0.5 | padding-top: 0.125rem; /\* 2px \*/ padding-bottom: 0.125rem; /\* 2px \*/ |
| ps-0.5 | padding-inline-start: 0.125rem; /\* 2px \*/ |
| pe-0.5 | padding-inline-end: 0.125rem; /\* 2px \*/ |
| pt-0.5 | padding-top: 0.125rem; /\* 2px \*/ |
| pr-0.5 | padding-right: 0.125rem; /\* 2px \*/ |
| pb-0.5 | padding-bottom: 0.125rem; /\* 2px \*/ |
| pl-0.5 | padding-left: 0.125rem; /\* 2px \*/ |
| p-1 | padding: 0.25rem; /\* 4px \*/ |
| px-1 | padding-left: 0.25rem; /\* 4px \*/ padding-right: 0.25rem; /\* 4px \*/ |
| py-1 | padding-top: 0.25rem; /\* 4px \*/ padding-bottom: 0.25rem; /\* 4px \*/ |
| ps-1 | padding-inline-start: 0.25rem; /\* 4px \*/ |
| pe-1 | padding-inline-end: 0.25rem; /\* 4px \*/ |
| pt-1 | padding-top: 0.25rem; /\* 4px \*/ |
| pr-1 | padding-right: 0.25rem; /\* 4px \*/ |
| pb-1 | padding-bottom: 0.25rem; /\* 4px \*/ |
| pl-1 | padding-left: 0.25rem; /\* 4px \*/ |
| p-1.5 | padding: 0.375rem; /\* 6px \*/ |
| px-1.5 | padding-left: 0.375rem; /\* 6px \*/ padding-right: 0.375rem; /\* 6px \*/ |
| py-1.5 | padding-top: 0.375rem; /\* 6px \*/ padding-bottom: 0.375rem; /\* 6px \*/ |
| ps-1.5 | padding-inline-start: 0.375rem; /\* 6px \*/ |
| pe-1.5 | padding-inline-end: 0.375rem; /\* 6px \*/ |
| pt-1.5 | padding-top: 0.375rem; /\* 6px \*/ |
| pr-1.5 | padding-right: 0.375rem; /\* 6px \*/ |
| pb-1.5 | padding-bottom: 0.375rem; /\* 6px \*/ |
| pl-1.5 | padding-left: 0.375rem; /\* 6px \*/ |
| p-2 | padding: 0.5rem; /\* 8px \*/ |
| px-2 | padding-left: 0.5rem; /\* 8px \*/ padding-right: 0.5rem; /\* 8px \*/ |
| py-2 | padding-top: 0.5rem; /\* 8px \*/ padding-bottom: 0.5rem; /\* 8px \*/ |
| ps-2 | padding-inline-start: 0.5rem; /\* 8px \*/ |
| pe-2 | padding-inline-end: 0.5rem; /\* 8px \*/ |
| pt-2 | padding-top: 0.5rem; /\* 8px \*/ |
| pr-2 | padding-right: 0.5rem; /\* 8px \*/ |
| pb-2 | padding-bottom: 0.5rem; /\* 8px \*/ |
| pl-2 | padding-left: 0.5rem; /\* 8px \*/ |
| p-2.5 | padding: 0.625rem; /\* 10px \*/ |
| px-2.5 | padding-left: 0.625rem; /\* 10px \*/ padding-right: 0.625rem; /\* 10px \*/ |
| py-2.5 | padding-top: 0.625rem; /\* 10px \*/ padding-bottom: 0.625rem; /\* 10px \*/ |
| ps-2.5 | padding-inline-start: 0.625rem; /\* 10px \*/ |
| pe-2.5 | padding-inline-end: 0.625rem; /\* 10px \*/ |
| pt-2.5 | padding-top: 0.625rem; /\* 10px \*/ |
| pr-2.5 | padding-right: 0.625rem; /\* 10px \*/ |
| pb-2.5 | padding-bottom: 0.625rem; /\* 10px \*/ |
| pl-2.5 | padding-left: 0.625rem; /\* 10px \*/ |
| p-3 | padding: 0.75rem; /\* 12px \*/ |
| px-3 | padding-left: 0.75rem; /\* 12px \*/ padding-right: 0.75rem; /\* 12px \*/ |
| py-3 | padding-top: 0.75rem; /\* 12px \*/ padding-bottom: 0.75rem; /\* 12px \*/ |
| ps-3 | padding-inline-start: 0.75rem; /\* 12px \*/ |
| pe-3 | padding-inline-end: 0.75rem; /\* 12px \*/ |
| pt-3 | padding-top: 0.75rem; /\* 12px \*/ |
| pr-3 | padding-right: 0.75rem; /\* 12px \*/ |
| pb-3 | padding-bottom: 0.75rem; /\* 12px \*/ |
| pl-3 | padding-left: 0.75rem; /\* 12px \*/ |
| p-3.5 | padding: 0.875rem; /\* 14px \*/ |
| px-3.5 | padding-left: 0.875rem; /\* 14px \*/ padding-right: 0.875rem; /\* 14px \*/ |
| py-3.5 | padding-top: 0.875rem; /\* 14px \*/ padding-bottom: 0.875rem; /\* 14px \*/ |
| ps-3.5 | padding-inline-start: 0.875rem; /\* 14px \*/ |
| pe-3.5 | padding-inline-end: 0.875rem; /\* 14px \*/ |
| pt-3.5 | padding-top: 0.875rem; /\* 14px \*/ |
| pr-3.5 | padding-right: 0.875rem; /\* 14px \*/ |
| pb-3.5 | padding-bottom: 0.875rem; /\* 14px \*/ |
| pl-3.5 | padding-left: 0.875rem; /\* 14px \*/ |
| p-4 | padding: 1rem; /\* 16px \*/ |
| px-4 | padding-left: 1rem; /\* 16px \*/ padding-right: 1rem; /\* 16px \*/ |
| py-4 | padding-top: 1rem; /\* 16px \*/ padding-bottom: 1rem; /\* 16px \*/ |
| ps-4 | padding-inline-start: 1rem; /\* 16px \*/ |
| pe-4 | padding-inline-end: 1rem; /\* 16px \*/ |
| pt-4 | padding-top: 1rem; /\* 16px \*/ |
| pr-4 | padding-right: 1rem; /\* 16px \*/ |
| pb-4 | padding-bottom: 1rem; /\* 16px \*/ |
| pl-4 | padding-left: 1rem; /\* 16px \*/ |
| p-5 | padding: 1.25rem; /\* 20px \*/ |
| px-5 | padding-left: 1.25rem; /\* 20px \*/ padding-right: 1.25rem; /\* 20px \*/ |
| py-5 | padding-top: 1.25rem; /\* 20px \*/ padding-bottom: 1.25rem; /\* 20px \*/ |
| ps-5 | padding-inline-start: 1.25rem; /\* 20px \*/ |
| pe-5 | padding-inline-end: 1.25rem; /\* 20px \*/ |
| pt-5 | padding-top: 1.25rem; /\* 20px \*/ |
| pr-5 | padding-right: 1.25rem; /\* 20px \*/ |
| pb-5 | padding-bottom: 1.25rem; /\* 20px \*/ |
| pl-5 | padding-left: 1.25rem; /\* 20px \*/ |
| p-6 | padding: 1.5rem; /\* 24px \*/ |
| px-6 | padding-left: 1.5rem; /\* 24px \*/ padding-right: 1.5rem; /\* 24px \*/ |
| py-6 | padding-top: 1.5rem; /\* 24px \*/ padding-bottom: 1.5rem; /\* 24px \*/ |
| ps-6 | padding-inline-start: 1.5rem; /\* 24px \*/ |
| pe-6 | padding-inline-end: 1.5rem; /\* 24px \*/ |
| pt-6 | padding-top: 1.5rem; /\* 24px \*/ |
| pr-6 | padding-right: 1.5rem; /\* 24px \*/ |
| pb-6 | padding-bottom: 1.5rem; /\* 24px \*/ |
| pl-6 | padding-left: 1.5rem; /\* 24px \*/ |
| p-7 | padding: 1.75rem; /\* 28px \*/ |
| px-7 | padding-left: 1.75rem; /\* 28px \*/ padding-right: 1.75rem; /\* 28px \*/ |
| py-7 | padding-top: 1.75rem; /\* 28px \*/ padding-bottom: 1.75rem; /\* 28px \*/ |
| ps-7 | padding-inline-start: 1.75rem; /\* 28px \*/ |
| pe-7 | padding-inline-end: 1.75rem; /\* 28px \*/ |
| pt-7 | padding-top: 1.75rem; /\* 28px \*/ |
| pr-7 | padding-right: 1.75rem; /\* 28px \*/ |
| pb-7 | padding-bottom: 1.75rem; /\* 28px \*/ |
| pl-7 | padding-left: 1.75rem; /\* 28px \*/ |
| p-8 | padding: 2rem; /\* 32px \*/ |
| px-8 | padding-left: 2rem; /\* 32px \*/ padding-right: 2rem; /\* 32px \*/ |
| py-8 | padding-top: 2rem; /\* 32px \*/ padding-bottom: 2rem; /\* 32px \*/ |
| ps-8 | padding-inline-start: 2rem; /\* 32px \*/ |
| pe-8 | padding-inline-end: 2rem; /\* 32px \*/ |
| pt-8 | padding-top: 2rem; /\* 32px \*/ |
| pr-8 | padding-right: 2rem; /\* 32px \*/ |
| pb-8 | padding-bottom: 2rem; /\* 32px \*/ |
| pl-8 | padding-left: 2rem; /\* 32px \*/ |
| p-9 | padding: 2.25rem; /\* 36px \*/ |
| px-9 | padding-left: 2.25rem; /\* 36px \*/ padding-right: 2.25rem; /\* 36px \*/ |
| py-9 | padding-top: 2.25rem; /\* 36px \*/ padding-bottom: 2.25rem; /\* 36px \*/ |
| ps-9 | padding-inline-start: 2.25rem; /\* 36px \*/ |
| pe-9 | padding-inline-end: 2.25rem; /\* 36px \*/ |
| pt-9 | padding-top: 2.25rem; /\* 36px \*/ |
| pr-9 | padding-right: 2.25rem; /\* 36px \*/ |
| pb-9 | padding-bottom: 2.25rem; /\* 36px \*/ |
| pl-9 | padding-left: 2.25rem; /\* 36px \*/ |
| p-10 | padding: 2.5rem; /\* 40px \*/ |
| px-10 | padding-left: 2.5rem; /\* 40px \*/ padding-right: 2.5rem; /\* 40px \*/ |
| py-10 | padding-top: 2.5rem; /\* 40px \*/ padding-bottom: 2.5rem; /\* 40px \*/ |
| ps-10 | padding-inline-start: 2.5rem; /\* 40px \*/ |
| pe-10 | padding-inline-end: 2.5rem; /\* 40px \*/ |
| pt-10 | padding-top: 2.5rem; /\* 40px \*/ |
| pr-10 | padding-right: 2.5rem; /\* 40px \*/ |
| pb-10 | padding-bottom: 2.5rem; /\* 40px \*/ |
| pl-10 | padding-left: 2.5rem; /\* 40px \*/ |
| p-11 | padding: 2.75rem; /\* 44px \*/ |
| px-11 | padding-left: 2.75rem; /\* 44px \*/ padding-right: 2.75rem; /\* 44px \*/ |
| py-11 | padding-top: 2.75rem; /\* 44px \*/ padding-bottom: 2.75rem; /\* 44px \*/ |
| ps-11 | padding-inline-start: 2.75rem; /\* 44px \*/ |
| pe-11 | padding-inline-end: 2.75rem; /\* 44px \*/ |
| pt-11 | padding-top: 2.75rem; /\* 44px \*/ |
| pr-11 | padding-right: 2.75rem; /\* 44px \*/ |
| pb-11 | padding-bottom: 2.75rem; /\* 44px \*/ |
| pl-11 | padding-left: 2.75rem; /\* 44px \*/ |
| p-12 | padding: 3rem; /\* 48px \*/ |
| px-12 | padding-left: 3rem; /\* 48px \*/ padding-right: 3rem; /\* 48px \*/ |
| py-12 | padding-top: 3rem; /\* 48px \*/ padding-bottom: 3rem; /\* 48px \*/ |
| ps-12 | padding-inline-start: 3rem; /\* 48px \*/ |
| pe-12 | padding-inline-end: 3rem; /\* 48px \*/ |
| pt-12 | padding-top: 3rem; /\* 48px \*/ |
| pr-12 | padding-right: 3rem; /\* 48px \*/ |
| pb-12 | padding-bottom: 3rem; /\* 48px \*/ |
| pl-12 | padding-left: 3rem; /\* 48px \*/ |
| p-14 | padding: 3.5rem; /\* 56px \*/ |
| px-14 | padding-left: 3.5rem; /\* 56px \*/ padding-right: 3.5rem; /\* 56px \*/ |
| py-14 | padding-top: 3.5rem; /\* 56px \*/ padding-bottom: 3.5rem; /\* 56px \*/ |
| ps-14 | padding-inline-start: 3.5rem; /\* 56px \*/ |
| pe-14 | padding-inline-end: 3.5rem; /\* 56px \*/ |
| pt-14 | padding-top: 3.5rem; /\* 56px \*/ |
| pr-14 | padding-right: 3.5rem; /\* 56px \*/ |
| pb-14 | padding-bottom: 3.5rem; /\* 56px \*/ |
| pl-14 | padding-left: 3.5rem; /\* 56px \*/ |
| p-16 | padding: 4rem; /\* 64px \*/ |
| px-16 | padding-left: 4rem; /\* 64px \*/ padding-right: 4rem; /\* 64px \*/ |
| py-16 | padding-top: 4rem; /\* 64px \*/ padding-bottom: 4rem; /\* 64px \*/ |
| ps-16 | padding-inline-start: 4rem; /\* 64px \*/ |
| pe-16 | padding-inline-end: 4rem; /\* 64px \*/ |
| pt-16 | padding-top: 4rem; /\* 64px \*/ |
| pr-16 | padding-right: 4rem; /\* 64px \*/ |
| pb-16 | padding-bottom: 4rem; /\* 64px \*/ |
| pl-16 | padding-left: 4rem; /\* 64px \*/ |
| p-20 | padding: 5rem; /\* 80px \*/ |
| px-20 | padding-left: 5rem; /\* 80px \*/ padding-right: 5rem; /\* 80px \*/ |
| py-20 | padding-top: 5rem; /\* 80px \*/ padding-bottom: 5rem; /\* 80px \*/ |
| ps-20 | padding-inline-start: 5rem; /\* 80px \*/ |
| pe-20 | padding-inline-end: 5rem; /\* 80px \*/ |
| pt-20 | padding-top: 5rem; /\* 80px \*/ |
| pr-20 | padding-right: 5rem; /\* 80px \*/ |
| pb-20 | padding-bottom: 5rem; /\* 80px \*/ |
| pl-20 | padding-left: 5rem; /\* 80px \*/ |
| p-24 | padding: 6rem; /\* 96px \*/ |
| px-24 | padding-left: 6rem; /\* 96px \*/ padding-right: 6rem; /\* 96px \*/ |
| py-24 | padding-top: 6rem; /\* 96px \*/ padding-bottom: 6rem; /\* 96px \*/ |
| ps-24 | padding-inline-start: 6rem; /\* 96px \*/ |
| pe-24 | padding-inline-end: 6rem; /\* 96px \*/ |
| pt-24 | padding-top: 6rem; /\* 96px \*/ |
| pr-24 | padding-right: 6rem; /\* 96px \*/ |
| pb-24 | padding-bottom: 6rem; /\* 96px \*/ |
| pl-24 | padding-left: 6rem; /\* 96px \*/ |
| p-28 | padding: 7rem; /\* 112px \*/ |
| px-28 | padding-left: 7rem; /\* 112px \*/ padding-right: 7rem; /\* 112px \*/ |
| py-28 | padding-top: 7rem; /\* 112px \*/ padding-bottom: 7rem; /\* 112px \*/ |
| ps-28 | padding-inline-start: 7rem; /\* 112px \*/ |
| pe-28 | padding-inline-end: 7rem; /\* 112px \*/ |
| pt-28 | padding-top: 7rem; /\* 112px \*/ |
| pr-28 | padding-right: 7rem; /\* 112px \*/ |
| pb-28 | padding-bottom: 7rem; /\* 112px \*/ |
| pl-28 | padding-left: 7rem; /\* 112px \*/ |
| p-32 | padding: 8rem; /\* 128px \*/ |
| px-32 | padding-left: 8rem; /\* 128px \*/ padding-right: 8rem; /\* 128px \*/ |
| py-32 | padding-top: 8rem; /\* 128px \*/ padding-bottom: 8rem; /\* 128px \*/ |
| ps-32 | padding-inline-start: 8rem; /\* 128px \*/ |
| pe-32 | padding-inline-end: 8rem; /\* 128px \*/ |
| pt-32 | padding-top: 8rem; /\* 128px \*/ |
| pr-32 | padding-right: 8rem; /\* 128px \*/ |
| pb-32 | padding-bottom: 8rem; /\* 128px \*/ |
| pl-32 | padding-left: 8rem; /\* 128px \*/ |
| p-36 | padding: 9rem; /\* 144px \*/ |
| px-36 | padding-left: 9rem; /\* 144px \*/ padding-right: 9rem; /\* 144px \*/ |
| py-36 | padding-top: 9rem; /\* 144px \*/ padding-bottom: 9rem; /\* 144px \*/ |
| ps-36 | padding-inline-start: 9rem; /\* 144px \*/ |
| pe-36 | padding-inline-end: 9rem; /\* 144px \*/ |
| pt-36 | padding-top: 9rem; /\* 144px \*/ |
| pr-36 | padding-right: 9rem; /\* 144px \*/ |
| pb-36 | padding-bottom: 9rem; /\* 144px \*/ |
| pl-36 | padding-left: 9rem; /\* 144px \*/ |
| p-40 | padding: 10rem; /\* 160px \*/ |
| px-40 | padding-left: 10rem; /\* 160px \*/ padding-right: 10rem; /\* 160px \*/ |
| py-40 | padding-top: 10rem; /\* 160px \*/ padding-bottom: 10rem; /\* 160px \*/ |
| ps-40 | padding-inline-start: 10rem; /\* 160px \*/ |
| pe-40 | padding-inline-end: 10rem; /\* 160px \*/ |
| pt-40 | padding-top: 10rem; /\* 160px \*/ |
| pr-40 | padding-right: 10rem; /\* 160px \*/ |
| pb-40 | padding-bottom: 10rem; /\* 160px \*/ |
| pl-40 | padding-left: 10rem; /\* 160px \*/ |
| p-44 | padding: 11rem; /\* 176px \*/ |
| px-44 | padding-left: 11rem; /\* 176px \*/ padding-right: 11rem; /\* 176px \*/ |
| py-44 | padding-top: 11rem; /\* 176px \*/ padding-bottom: 11rem; /\* 176px \*/ |
| ps-44 | padding-inline-start: 11rem; /\* 176px \*/ |
| pe-44 | padding-inline-end: 11rem; /\* 176px \*/ |
| pt-44 | padding-top: 11rem; /\* 176px \*/ |
| pr-44 | padding-right: 11rem; /\* 176px \*/ |
| pb-44 | padding-bottom: 11rem; /\* 176px \*/ |
| pl-44 | padding-left: 11rem; /\* 176px \*/ |
| p-48 | padding: 12rem; /\* 192px \*/ |
| px-48 | padding-left: 12rem; /\* 192px \*/ padding-right: 12rem; /\* 192px \*/ |
| py-48 | padding-top: 12rem; /\* 192px \*/ padding-bottom: 12rem; /\* 192px \*/ |
| ps-48 | padding-inline-start: 12rem; /\* 192px \*/ |
| pe-48 | padding-inline-end: 12rem; /\* 192px \*/ |
| pt-48 | padding-top: 12rem; /\* 192px \*/ |
| pr-48 | padding-right: 12rem; /\* 192px \*/ |
| pb-48 | padding-bottom: 12rem; /\* 192px \*/ |
| pl-48 | padding-left: 12rem; /\* 192px \*/ |
| p-52 | padding: 13rem; /\* 208px \*/ |
| px-52 | padding-left: 13rem; /\* 208px \*/ padding-right: 13rem; /\* 208px \*/ |
| py-52 | padding-top: 13rem; /\* 208px \*/ padding-bottom: 13rem; /\* 208px \*/ |
| ps-52 | padding-inline-start: 13rem; /\* 208px \*/ |
| pe-52 | padding-inline-end: 13rem; /\* 208px \*/ |
| pt-52 | padding-top: 13rem; /\* 208px \*/ |
| pr-52 | padding-right: 13rem; /\* 208px \*/ |
| pb-52 | padding-bottom: 13rem; /\* 208px \*/ |
| pl-52 | padding-left: 13rem; /\* 208px \*/ |
| p-56 | padding: 14rem; /\* 224px \*/ |
| px-56 | padding-left: 14rem; /\* 224px \*/ padding-right: 14rem; /\* 224px \*/ |
| py-56 | padding-top: 14rem; /\* 224px \*/ padding-bottom: 14rem; /\* 224px \*/ |
| ps-56 | padding-inline-start: 14rem; /\* 224px \*/ |
| pe-56 | padding-inline-end: 14rem; /\* 224px \*/ |
| pt-56 | padding-top: 14rem; /\* 224px \*/ |
| pr-56 | padding-right: 14rem; /\* 224px \*/ |
| pb-56 | padding-bottom: 14rem; /\* 224px \*/ |
| pl-56 | padding-left: 14rem; /\* 224px \*/ |
| p-60 | padding: 15rem; /\* 240px \*/ |
| px-60 | padding-left: 15rem; /\* 240px \*/ padding-right: 15rem; /\* 240px \*/ |
| py-60 | padding-top: 15rem; /\* 240px \*/ padding-bottom: 15rem; /\* 240px \*/ |
| ps-60 | padding-inline-start: 15rem; /\* 240px \*/ |
| pe-60 | padding-inline-end: 15rem; /\* 240px \*/ |
| pt-60 | padding-top: 15rem; /\* 240px \*/ |
| pr-60 | padding-right: 15rem; /\* 240px \*/ |
| pb-60 | padding-bottom: 15rem; /\* 240px \*/ |
| pl-60 | padding-left: 15rem; /\* 240px \*/ |
| p-64 | padding: 16rem; /\* 256px \*/ |
| px-64 | padding-left: 16rem; /\* 256px \*/ padding-right: 16rem; /\* 256px \*/ |
| py-64 | padding-top: 16rem; /\* 256px \*/ padding-bottom: 16rem; /\* 256px \*/ |
| ps-64 | padding-inline-start: 16rem; /\* 256px \*/ |
| pe-64 | padding-inline-end: 16rem; /\* 256px \*/ |
| pt-64 | padding-top: 16rem; /\* 256px \*/ |
| pr-64 | padding-right: 16rem; /\* 256px \*/ |
| pb-64 | padding-bottom: 16rem; /\* 256px \*/ |
| pl-64 | padding-left: 16rem; /\* 256px \*/ |
| p-72 | padding: 18rem; /\* 288px \*/ |
| px-72 | padding-left: 18rem; /\* 288px \*/ padding-right: 18rem; /\* 288px \*/ |
| py-72 | padding-top: 18rem; /\* 288px \*/ padding-bottom: 18rem; /\* 288px \*/ |
| ps-72 | padding-inline-start: 18rem; /\* 288px \*/ |
| pe-72 | padding-inline-end: 18rem; /\* 288px \*/ |
| pt-72 | padding-top: 18rem; /\* 288px \*/ |
| pr-72 | padding-right: 18rem; /\* 288px \*/ |
| pb-72 | padding-bottom: 18rem; /\* 288px \*/ |
| pl-72 | padding-left: 18rem; /\* 288px \*/ |
| p-80 | padding: 20rem; /\* 320px \*/ |
| px-80 | padding-left: 20rem; /\* 320px \*/ padding-right: 20rem; /\* 320px \*/ |
| py-80 | padding-top: 20rem; /\* 320px \*/ padding-bottom: 20rem; /\* 320px \*/ |
| ps-80 | padding-inline-start: 20rem; /\* 320px \*/ |
| pe-80 | padding-inline-end: 20rem; /\* 320px \*/ |
| pt-80 | padding-top: 20rem; /\* 320px \*/ |
| pr-80 | padding-right: 20rem; /\* 320px \*/ |
| pb-80 | padding-bottom: 20rem; /\* 320px \*/ |
| pl-80 | padding-left: 20rem; /\* 320px \*/ |
| p-96 | padding: 24rem; /\* 384px \*/ |
| px-96 | padding-left: 24rem; /\* 384px \*/ padding-right: 24rem; /\* 384px \*/ |
| py-96 | padding-top: 24rem; /\* 384px \*/ padding-bottom: 24rem; /\* 384px \*/ |
| ps-96 | padding-inline-start: 24rem; /\* 384px \*/ |
| pe-96 | padding-inline-end: 24rem; /\* 384px \*/ |
| pt-96 | padding-top: 24rem; /\* 384px \*/ |
| pr-96 | padding-right: 24rem; /\* 384px \*/ |
| pb-96 | padding-bottom: 24rem; /\* 384px \*/ |
| pl-96 | padding-left: 24rem; /\* 384px \*/ |






Basic usage
-----------

 ### Add padding to a single side

 Control the padding on one side of an element using the `p{t|r|b|l}-{size}` utilities.

 For example, `pt-6` would add `1.5rem` of padding to the top of an element, `pr-4` would add `1rem` of padding to the right of an element, `pb-8` would add `2rem` of padding to the bottom of an element, and `pl-2` would add `0.5rem` of padding to the left of an element.

 
```
<div class="pt-6 ...">pt-6</div>
<div class="pr-4 ...">pr-4</div>
<div class="pb-8 ...">pb-8</div>
<div class="pl-2 ...">pl-2</div>
```
 ### Add horizontal padding

 Control the horizontal padding of an element using the `px-{size}` utilities.

 
```
<div class="px-8 ...">px-8</div>
```
 ### Add vertical padding

 Control the vertical padding of an element using the `py-{size}` utilities.

 
```
<div class="py-8 ...">py-8</div>
```
 ### Add padding to all sides

 Control the padding on all sides of an element using the `p-{size}` utilities.

 
```
<div class="p-8 ...">p-8</div>
```
 ### Using logical properties

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

 
```
<div dir="ltr">
  <div class="ps-8 ...">ps-8</div>
  <div class="pe-8 ...">pe-8</div>
<div>

<div dir="rtl">
  <div class="ps-8 ...">ps-8</div>
  <div class="pe-8 ...">pe-8</div>
<div>
```
 For more control, you can also use the [LTR and RTL modifiers](hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:py-8` to only apply the `py-8` utility on hover.



```
<div class="py-4 hover:py-8">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:py-8` to apply the `py-8` utility at only medium screen sizes and above.



```
<div class="py-4 md:py-8">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind’s padding scale uses the [default spacing scale](customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

```

 Alternatively, you can customize just the padding scale by editing `theme.padding` or `theme.extend.padding` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      padding: {
        '5px': '5px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `padding` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="p-[5px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/padding>

Margin
======


Utilities for controlling an element's margin.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| m-0 | margin: 0px;  |
| mx-0 | margin-left: 0px; margin-right: 0px;  |
| my-0 | margin-top: 0px; margin-bottom: 0px;  |
| ms-0 | margin-inline-start: 0px;  |
| me-0 | margin-inline-end: 0px;  |
| mt-0 | margin-top: 0px;  |
| mr-0 | margin-right: 0px;  |
| mb-0 | margin-bottom: 0px;  |
| ml-0 | margin-left: 0px;  |
| m-px | margin: 1px;  |
| mx-px | margin-left: 1px; margin-right: 1px;  |
| my-px | margin-top: 1px; margin-bottom: 1px;  |
| ms-px | margin-inline-start: 1px;  |
| me-px | margin-inline-end: 1px;  |
| mt-px | margin-top: 1px;  |
| mr-px | margin-right: 1px;  |
| mb-px | margin-bottom: 1px;  |
| ml-px | margin-left: 1px;  |
| m-0.5 | margin: 0.125rem; /\* 2px \*/ |
| mx-0.5 | margin-left: 0.125rem; /\* 2px \*/ margin-right: 0.125rem; /\* 2px \*/ |
| my-0.5 | margin-top: 0.125rem; /\* 2px \*/ margin-bottom: 0.125rem; /\* 2px \*/ |
| ms-0.5 | margin-inline-start: 0.125rem; /\* 2px \*/ |
| me-0.5 | margin-inline-end: 0.125rem; /\* 2px \*/ |
| mt-0.5 | margin-top: 0.125rem; /\* 2px \*/ |
| mr-0.5 | margin-right: 0.125rem; /\* 2px \*/ |
| mb-0.5 | margin-bottom: 0.125rem; /\* 2px \*/ |
| ml-0.5 | margin-left: 0.125rem; /\* 2px \*/ |
| m-1 | margin: 0.25rem; /\* 4px \*/ |
| mx-1 | margin-left: 0.25rem; /\* 4px \*/ margin-right: 0.25rem; /\* 4px \*/ |
| my-1 | margin-top: 0.25rem; /\* 4px \*/ margin-bottom: 0.25rem; /\* 4px \*/ |
| ms-1 | margin-inline-start: 0.25rem; /\* 4px \*/ |
| me-1 | margin-inline-end: 0.25rem; /\* 4px \*/ |
| mt-1 | margin-top: 0.25rem; /\* 4px \*/ |
| mr-1 | margin-right: 0.25rem; /\* 4px \*/ |
| mb-1 | margin-bottom: 0.25rem; /\* 4px \*/ |
| ml-1 | margin-left: 0.25rem; /\* 4px \*/ |
| m-1.5 | margin: 0.375rem; /\* 6px \*/ |
| mx-1.5 | margin-left: 0.375rem; /\* 6px \*/ margin-right: 0.375rem; /\* 6px \*/ |
| my-1.5 | margin-top: 0.375rem; /\* 6px \*/ margin-bottom: 0.375rem; /\* 6px \*/ |
| ms-1.5 | margin-inline-start: 0.375rem; /\* 6px \*/ |
| me-1.5 | margin-inline-end: 0.375rem; /\* 6px \*/ |
| mt-1.5 | margin-top: 0.375rem; /\* 6px \*/ |
| mr-1.5 | margin-right: 0.375rem; /\* 6px \*/ |
| mb-1.5 | margin-bottom: 0.375rem; /\* 6px \*/ |
| ml-1.5 | margin-left: 0.375rem; /\* 6px \*/ |
| m-2 | margin: 0.5rem; /\* 8px \*/ |
| mx-2 | margin-left: 0.5rem; /\* 8px \*/ margin-right: 0.5rem; /\* 8px \*/ |
| my-2 | margin-top: 0.5rem; /\* 8px \*/ margin-bottom: 0.5rem; /\* 8px \*/ |
| ms-2 | margin-inline-start: 0.5rem; /\* 8px \*/ |
| me-2 | margin-inline-end: 0.5rem; /\* 8px \*/ |
| mt-2 | margin-top: 0.5rem; /\* 8px \*/ |
| mr-2 | margin-right: 0.5rem; /\* 8px \*/ |
| mb-2 | margin-bottom: 0.5rem; /\* 8px \*/ |
| ml-2 | margin-left: 0.5rem; /\* 8px \*/ |
| m-2.5 | margin: 0.625rem; /\* 10px \*/ |
| mx-2.5 | margin-left: 0.625rem; /\* 10px \*/ margin-right: 0.625rem; /\* 10px \*/ |
| my-2.5 | margin-top: 0.625rem; /\* 10px \*/ margin-bottom: 0.625rem; /\* 10px \*/ |
| ms-2.5 | margin-inline-start: 0.625rem; /\* 10px \*/ |
| me-2.5 | margin-inline-end: 0.625rem; /\* 10px \*/ |
| mt-2.5 | margin-top: 0.625rem; /\* 10px \*/ |
| mr-2.5 | margin-right: 0.625rem; /\* 10px \*/ |
| mb-2.5 | margin-bottom: 0.625rem; /\* 10px \*/ |
| ml-2.5 | margin-left: 0.625rem; /\* 10px \*/ |
| m-3 | margin: 0.75rem; /\* 12px \*/ |
| mx-3 | margin-left: 0.75rem; /\* 12px \*/ margin-right: 0.75rem; /\* 12px \*/ |
| my-3 | margin-top: 0.75rem; /\* 12px \*/ margin-bottom: 0.75rem; /\* 12px \*/ |
| ms-3 | margin-inline-start: 0.75rem; /\* 12px \*/ |
| me-3 | margin-inline-end: 0.75rem; /\* 12px \*/ |
| mt-3 | margin-top: 0.75rem; /\* 12px \*/ |
| mr-3 | margin-right: 0.75rem; /\* 12px \*/ |
| mb-3 | margin-bottom: 0.75rem; /\* 12px \*/ |
| ml-3 | margin-left: 0.75rem; /\* 12px \*/ |
| m-3.5 | margin: 0.875rem; /\* 14px \*/ |
| mx-3.5 | margin-left: 0.875rem; /\* 14px \*/ margin-right: 0.875rem; /\* 14px \*/ |
| my-3.5 | margin-top: 0.875rem; /\* 14px \*/ margin-bottom: 0.875rem; /\* 14px \*/ |
| ms-3.5 | margin-inline-start: 0.875rem; /\* 14px \*/ |
| me-3.5 | margin-inline-end: 0.875rem; /\* 14px \*/ |
| mt-3.5 | margin-top: 0.875rem; /\* 14px \*/ |
| mr-3.5 | margin-right: 0.875rem; /\* 14px \*/ |
| mb-3.5 | margin-bottom: 0.875rem; /\* 14px \*/ |
| ml-3.5 | margin-left: 0.875rem; /\* 14px \*/ |
| m-4 | margin: 1rem; /\* 16px \*/ |
| mx-4 | margin-left: 1rem; /\* 16px \*/ margin-right: 1rem; /\* 16px \*/ |
| my-4 | margin-top: 1rem; /\* 16px \*/ margin-bottom: 1rem; /\* 16px \*/ |
| ms-4 | margin-inline-start: 1rem; /\* 16px \*/ |
| me-4 | margin-inline-end: 1rem; /\* 16px \*/ |
| mt-4 | margin-top: 1rem; /\* 16px \*/ |
| mr-4 | margin-right: 1rem; /\* 16px \*/ |
| mb-4 | margin-bottom: 1rem; /\* 16px \*/ |
| ml-4 | margin-left: 1rem; /\* 16px \*/ |
| m-5 | margin: 1.25rem; /\* 20px \*/ |
| mx-5 | margin-left: 1.25rem; /\* 20px \*/ margin-right: 1.25rem; /\* 20px \*/ |
| my-5 | margin-top: 1.25rem; /\* 20px \*/ margin-bottom: 1.25rem; /\* 20px \*/ |
| ms-5 | margin-inline-start: 1.25rem; /\* 20px \*/ |
| me-5 | margin-inline-end: 1.25rem; /\* 20px \*/ |
| mt-5 | margin-top: 1.25rem; /\* 20px \*/ |
| mr-5 | margin-right: 1.25rem; /\* 20px \*/ |
| mb-5 | margin-bottom: 1.25rem; /\* 20px \*/ |
| ml-5 | margin-left: 1.25rem; /\* 20px \*/ |
| m-6 | margin: 1.5rem; /\* 24px \*/ |
| mx-6 | margin-left: 1.5rem; /\* 24px \*/ margin-right: 1.5rem; /\* 24px \*/ |
| my-6 | margin-top: 1.5rem; /\* 24px \*/ margin-bottom: 1.5rem; /\* 24px \*/ |
| ms-6 | margin-inline-start: 1.5rem; /\* 24px \*/ |
| me-6 | margin-inline-end: 1.5rem; /\* 24px \*/ |
| mt-6 | margin-top: 1.5rem; /\* 24px \*/ |
| mr-6 | margin-right: 1.5rem; /\* 24px \*/ |
| mb-6 | margin-bottom: 1.5rem; /\* 24px \*/ |
| ml-6 | margin-left: 1.5rem; /\* 24px \*/ |
| m-7 | margin: 1.75rem; /\* 28px \*/ |
| mx-7 | margin-left: 1.75rem; /\* 28px \*/ margin-right: 1.75rem; /\* 28px \*/ |
| my-7 | margin-top: 1.75rem; /\* 28px \*/ margin-bottom: 1.75rem; /\* 28px \*/ |
| ms-7 | margin-inline-start: 1.75rem; /\* 28px \*/ |
| me-7 | margin-inline-end: 1.75rem; /\* 28px \*/ |
| mt-7 | margin-top: 1.75rem; /\* 28px \*/ |
| mr-7 | margin-right: 1.75rem; /\* 28px \*/ |
| mb-7 | margin-bottom: 1.75rem; /\* 28px \*/ |
| ml-7 | margin-left: 1.75rem; /\* 28px \*/ |
| m-8 | margin: 2rem; /\* 32px \*/ |
| mx-8 | margin-left: 2rem; /\* 32px \*/ margin-right: 2rem; /\* 32px \*/ |
| my-8 | margin-top: 2rem; /\* 32px \*/ margin-bottom: 2rem; /\* 32px \*/ |
| ms-8 | margin-inline-start: 2rem; /\* 32px \*/ |
| me-8 | margin-inline-end: 2rem; /\* 32px \*/ |
| mt-8 | margin-top: 2rem; /\* 32px \*/ |
| mr-8 | margin-right: 2rem; /\* 32px \*/ |
| mb-8 | margin-bottom: 2rem; /\* 32px \*/ |
| ml-8 | margin-left: 2rem; /\* 32px \*/ |
| m-9 | margin: 2.25rem; /\* 36px \*/ |
| mx-9 | margin-left: 2.25rem; /\* 36px \*/ margin-right: 2.25rem; /\* 36px \*/ |
| my-9 | margin-top: 2.25rem; /\* 36px \*/ margin-bottom: 2.25rem; /\* 36px \*/ |
| ms-9 | margin-inline-start: 2.25rem; /\* 36px \*/ |
| me-9 | margin-inline-end: 2.25rem; /\* 36px \*/ |
| mt-9 | margin-top: 2.25rem; /\* 36px \*/ |
| mr-9 | margin-right: 2.25rem; /\* 36px \*/ |
| mb-9 | margin-bottom: 2.25rem; /\* 36px \*/ |
| ml-9 | margin-left: 2.25rem; /\* 36px \*/ |
| m-10 | margin: 2.5rem; /\* 40px \*/ |
| mx-10 | margin-left: 2.5rem; /\* 40px \*/ margin-right: 2.5rem; /\* 40px \*/ |
| my-10 | margin-top: 2.5rem; /\* 40px \*/ margin-bottom: 2.5rem; /\* 40px \*/ |
| ms-10 | margin-inline-start: 2.5rem; /\* 40px \*/ |
| me-10 | margin-inline-end: 2.5rem; /\* 40px \*/ |
| mt-10 | margin-top: 2.5rem; /\* 40px \*/ |
| mr-10 | margin-right: 2.5rem; /\* 40px \*/ |
| mb-10 | margin-bottom: 2.5rem; /\* 40px \*/ |
| ml-10 | margin-left: 2.5rem; /\* 40px \*/ |
| m-11 | margin: 2.75rem; /\* 44px \*/ |
| mx-11 | margin-left: 2.75rem; /\* 44px \*/ margin-right: 2.75rem; /\* 44px \*/ |
| my-11 | margin-top: 2.75rem; /\* 44px \*/ margin-bottom: 2.75rem; /\* 44px \*/ |
| ms-11 | margin-inline-start: 2.75rem; /\* 44px \*/ |
| me-11 | margin-inline-end: 2.75rem; /\* 44px \*/ |
| mt-11 | margin-top: 2.75rem; /\* 44px \*/ |
| mr-11 | margin-right: 2.75rem; /\* 44px \*/ |
| mb-11 | margin-bottom: 2.75rem; /\* 44px \*/ |
| ml-11 | margin-left: 2.75rem; /\* 44px \*/ |
| m-12 | margin: 3rem; /\* 48px \*/ |
| mx-12 | margin-left: 3rem; /\* 48px \*/ margin-right: 3rem; /\* 48px \*/ |
| my-12 | margin-top: 3rem; /\* 48px \*/ margin-bottom: 3rem; /\* 48px \*/ |
| ms-12 | margin-inline-start: 3rem; /\* 48px \*/ |
| me-12 | margin-inline-end: 3rem; /\* 48px \*/ |
| mt-12 | margin-top: 3rem; /\* 48px \*/ |
| mr-12 | margin-right: 3rem; /\* 48px \*/ |
| mb-12 | margin-bottom: 3rem; /\* 48px \*/ |
| ml-12 | margin-left: 3rem; /\* 48px \*/ |
| m-14 | margin: 3.5rem; /\* 56px \*/ |
| mx-14 | margin-left: 3.5rem; /\* 56px \*/ margin-right: 3.5rem; /\* 56px \*/ |
| my-14 | margin-top: 3.5rem; /\* 56px \*/ margin-bottom: 3.5rem; /\* 56px \*/ |
| ms-14 | margin-inline-start: 3.5rem; /\* 56px \*/ |
| me-14 | margin-inline-end: 3.5rem; /\* 56px \*/ |
| mt-14 | margin-top: 3.5rem; /\* 56px \*/ |
| mr-14 | margin-right: 3.5rem; /\* 56px \*/ |
| mb-14 | margin-bottom: 3.5rem; /\* 56px \*/ |
| ml-14 | margin-left: 3.5rem; /\* 56px \*/ |
| m-16 | margin: 4rem; /\* 64px \*/ |
| mx-16 | margin-left: 4rem; /\* 64px \*/ margin-right: 4rem; /\* 64px \*/ |
| my-16 | margin-top: 4rem; /\* 64px \*/ margin-bottom: 4rem; /\* 64px \*/ |
| ms-16 | margin-inline-start: 4rem; /\* 64px \*/ |
| me-16 | margin-inline-end: 4rem; /\* 64px \*/ |
| mt-16 | margin-top: 4rem; /\* 64px \*/ |
| mr-16 | margin-right: 4rem; /\* 64px \*/ |
| mb-16 | margin-bottom: 4rem; /\* 64px \*/ |
| ml-16 | margin-left: 4rem; /\* 64px \*/ |
| m-20 | margin: 5rem; /\* 80px \*/ |
| mx-20 | margin-left: 5rem; /\* 80px \*/ margin-right: 5rem; /\* 80px \*/ |
| my-20 | margin-top: 5rem; /\* 80px \*/ margin-bottom: 5rem; /\* 80px \*/ |
| ms-20 | margin-inline-start: 5rem; /\* 80px \*/ |
| me-20 | margin-inline-end: 5rem; /\* 80px \*/ |
| mt-20 | margin-top: 5rem; /\* 80px \*/ |
| mr-20 | margin-right: 5rem; /\* 80px \*/ |
| mb-20 | margin-bottom: 5rem; /\* 80px \*/ |
| ml-20 | margin-left: 5rem; /\* 80px \*/ |
| m-24 | margin: 6rem; /\* 96px \*/ |
| mx-24 | margin-left: 6rem; /\* 96px \*/ margin-right: 6rem; /\* 96px \*/ |
| my-24 | margin-top: 6rem; /\* 96px \*/ margin-bottom: 6rem; /\* 96px \*/ |
| ms-24 | margin-inline-start: 6rem; /\* 96px \*/ |
| me-24 | margin-inline-end: 6rem; /\* 96px \*/ |
| mt-24 | margin-top: 6rem; /\* 96px \*/ |
| mr-24 | margin-right: 6rem; /\* 96px \*/ |
| mb-24 | margin-bottom: 6rem; /\* 96px \*/ |
| ml-24 | margin-left: 6rem; /\* 96px \*/ |
| m-28 | margin: 7rem; /\* 112px \*/ |
| mx-28 | margin-left: 7rem; /\* 112px \*/ margin-right: 7rem; /\* 112px \*/ |
| my-28 | margin-top: 7rem; /\* 112px \*/ margin-bottom: 7rem; /\* 112px \*/ |
| ms-28 | margin-inline-start: 7rem; /\* 112px \*/ |
| me-28 | margin-inline-end: 7rem; /\* 112px \*/ |
| mt-28 | margin-top: 7rem; /\* 112px \*/ |
| mr-28 | margin-right: 7rem; /\* 112px \*/ |
| mb-28 | margin-bottom: 7rem; /\* 112px \*/ |
| ml-28 | margin-left: 7rem; /\* 112px \*/ |
| m-32 | margin: 8rem; /\* 128px \*/ |
| mx-32 | margin-left: 8rem; /\* 128px \*/ margin-right: 8rem; /\* 128px \*/ |
| my-32 | margin-top: 8rem; /\* 128px \*/ margin-bottom: 8rem; /\* 128px \*/ |
| ms-32 | margin-inline-start: 8rem; /\* 128px \*/ |
| me-32 | margin-inline-end: 8rem; /\* 128px \*/ |
| mt-32 | margin-top: 8rem; /\* 128px \*/ |
| mr-32 | margin-right: 8rem; /\* 128px \*/ |
| mb-32 | margin-bottom: 8rem; /\* 128px \*/ |
| ml-32 | margin-left: 8rem; /\* 128px \*/ |
| m-36 | margin: 9rem; /\* 144px \*/ |
| mx-36 | margin-left: 9rem; /\* 144px \*/ margin-right: 9rem; /\* 144px \*/ |
| my-36 | margin-top: 9rem; /\* 144px \*/ margin-bottom: 9rem; /\* 144px \*/ |
| ms-36 | margin-inline-start: 9rem; /\* 144px \*/ |
| me-36 | margin-inline-end: 9rem; /\* 144px \*/ |
| mt-36 | margin-top: 9rem; /\* 144px \*/ |
| mr-36 | margin-right: 9rem; /\* 144px \*/ |
| mb-36 | margin-bottom: 9rem; /\* 144px \*/ |
| ml-36 | margin-left: 9rem; /\* 144px \*/ |
| m-40 | margin: 10rem; /\* 160px \*/ |
| mx-40 | margin-left: 10rem; /\* 160px \*/ margin-right: 10rem; /\* 160px \*/ |
| my-40 | margin-top: 10rem; /\* 160px \*/ margin-bottom: 10rem; /\* 160px \*/ |
| ms-40 | margin-inline-start: 10rem; /\* 160px \*/ |
| me-40 | margin-inline-end: 10rem; /\* 160px \*/ |
| mt-40 | margin-top: 10rem; /\* 160px \*/ |
| mr-40 | margin-right: 10rem; /\* 160px \*/ |
| mb-40 | margin-bottom: 10rem; /\* 160px \*/ |
| ml-40 | margin-left: 10rem; /\* 160px \*/ |
| m-44 | margin: 11rem; /\* 176px \*/ |
| mx-44 | margin-left: 11rem; /\* 176px \*/ margin-right: 11rem; /\* 176px \*/ |
| my-44 | margin-top: 11rem; /\* 176px \*/ margin-bottom: 11rem; /\* 176px \*/ |
| ms-44 | margin-inline-start: 11rem; /\* 176px \*/ |
| me-44 | margin-inline-end: 11rem; /\* 176px \*/ |
| mt-44 | margin-top: 11rem; /\* 176px \*/ |
| mr-44 | margin-right: 11rem; /\* 176px \*/ |
| mb-44 | margin-bottom: 11rem; /\* 176px \*/ |
| ml-44 | margin-left: 11rem; /\* 176px \*/ |
| m-48 | margin: 12rem; /\* 192px \*/ |
| mx-48 | margin-left: 12rem; /\* 192px \*/ margin-right: 12rem; /\* 192px \*/ |
| my-48 | margin-top: 12rem; /\* 192px \*/ margin-bottom: 12rem; /\* 192px \*/ |
| ms-48 | margin-inline-start: 12rem; /\* 192px \*/ |
| me-48 | margin-inline-end: 12rem; /\* 192px \*/ |
| mt-48 | margin-top: 12rem; /\* 192px \*/ |
| mr-48 | margin-right: 12rem; /\* 192px \*/ |
| mb-48 | margin-bottom: 12rem; /\* 192px \*/ |
| ml-48 | margin-left: 12rem; /\* 192px \*/ |
| m-52 | margin: 13rem; /\* 208px \*/ |
| mx-52 | margin-left: 13rem; /\* 208px \*/ margin-right: 13rem; /\* 208px \*/ |
| my-52 | margin-top: 13rem; /\* 208px \*/ margin-bottom: 13rem; /\* 208px \*/ |
| ms-52 | margin-inline-start: 13rem; /\* 208px \*/ |
| me-52 | margin-inline-end: 13rem; /\* 208px \*/ |
| mt-52 | margin-top: 13rem; /\* 208px \*/ |
| mr-52 | margin-right: 13rem; /\* 208px \*/ |
| mb-52 | margin-bottom: 13rem; /\* 208px \*/ |
| ml-52 | margin-left: 13rem; /\* 208px \*/ |
| m-56 | margin: 14rem; /\* 224px \*/ |
| mx-56 | margin-left: 14rem; /\* 224px \*/ margin-right: 14rem; /\* 224px \*/ |
| my-56 | margin-top: 14rem; /\* 224px \*/ margin-bottom: 14rem; /\* 224px \*/ |
| ms-56 | margin-inline-start: 14rem; /\* 224px \*/ |
| me-56 | margin-inline-end: 14rem; /\* 224px \*/ |
| mt-56 | margin-top: 14rem; /\* 224px \*/ |
| mr-56 | margin-right: 14rem; /\* 224px \*/ |
| mb-56 | margin-bottom: 14rem; /\* 224px \*/ |
| ml-56 | margin-left: 14rem; /\* 224px \*/ |
| m-60 | margin: 15rem; /\* 240px \*/ |
| mx-60 | margin-left: 15rem; /\* 240px \*/ margin-right: 15rem; /\* 240px \*/ |
| my-60 | margin-top: 15rem; /\* 240px \*/ margin-bottom: 15rem; /\* 240px \*/ |
| ms-60 | margin-inline-start: 15rem; /\* 240px \*/ |
| me-60 | margin-inline-end: 15rem; /\* 240px \*/ |
| mt-60 | margin-top: 15rem; /\* 240px \*/ |
| mr-60 | margin-right: 15rem; /\* 240px \*/ |
| mb-60 | margin-bottom: 15rem; /\* 240px \*/ |
| ml-60 | margin-left: 15rem; /\* 240px \*/ |
| m-64 | margin: 16rem; /\* 256px \*/ |
| mx-64 | margin-left: 16rem; /\* 256px \*/ margin-right: 16rem; /\* 256px \*/ |
| my-64 | margin-top: 16rem; /\* 256px \*/ margin-bottom: 16rem; /\* 256px \*/ |
| ms-64 | margin-inline-start: 16rem; /\* 256px \*/ |
| me-64 | margin-inline-end: 16rem; /\* 256px \*/ |
| mt-64 | margin-top: 16rem; /\* 256px \*/ |
| mr-64 | margin-right: 16rem; /\* 256px \*/ |
| mb-64 | margin-bottom: 16rem; /\* 256px \*/ |
| ml-64 | margin-left: 16rem; /\* 256px \*/ |
| m-72 | margin: 18rem; /\* 288px \*/ |
| mx-72 | margin-left: 18rem; /\* 288px \*/ margin-right: 18rem; /\* 288px \*/ |
| my-72 | margin-top: 18rem; /\* 288px \*/ margin-bottom: 18rem; /\* 288px \*/ |
| ms-72 | margin-inline-start: 18rem; /\* 288px \*/ |
| me-72 | margin-inline-end: 18rem; /\* 288px \*/ |
| mt-72 | margin-top: 18rem; /\* 288px \*/ |
| mr-72 | margin-right: 18rem; /\* 288px \*/ |
| mb-72 | margin-bottom: 18rem; /\* 288px \*/ |
| ml-72 | margin-left: 18rem; /\* 288px \*/ |
| m-80 | margin: 20rem; /\* 320px \*/ |
| mx-80 | margin-left: 20rem; /\* 320px \*/ margin-right: 20rem; /\* 320px \*/ |
| my-80 | margin-top: 20rem; /\* 320px \*/ margin-bottom: 20rem; /\* 320px \*/ |
| ms-80 | margin-inline-start: 20rem; /\* 320px \*/ |
| me-80 | margin-inline-end: 20rem; /\* 320px \*/ |
| mt-80 | margin-top: 20rem; /\* 320px \*/ |
| mr-80 | margin-right: 20rem; /\* 320px \*/ |
| mb-80 | margin-bottom: 20rem; /\* 320px \*/ |
| ml-80 | margin-left: 20rem; /\* 320px \*/ |
| m-96 | margin: 24rem; /\* 384px \*/ |
| mx-96 | margin-left: 24rem; /\* 384px \*/ margin-right: 24rem; /\* 384px \*/ |
| my-96 | margin-top: 24rem; /\* 384px \*/ margin-bottom: 24rem; /\* 384px \*/ |
| ms-96 | margin-inline-start: 24rem; /\* 384px \*/ |
| me-96 | margin-inline-end: 24rem; /\* 384px \*/ |
| mt-96 | margin-top: 24rem; /\* 384px \*/ |
| mr-96 | margin-right: 24rem; /\* 384px \*/ |
| mb-96 | margin-bottom: 24rem; /\* 384px \*/ |
| ml-96 | margin-left: 24rem; /\* 384px \*/ |
| m-auto | margin: auto;  |
| mx-auto | margin-left: auto; margin-right: auto;  |
| my-auto | margin-top: auto; margin-bottom: auto;  |
| ms-auto | margin-inline-start: auto;  |
| me-auto | margin-inline-end: auto;  |
| mt-auto | margin-top: auto;  |
| mr-auto | margin-right: auto;  |
| mb-auto | margin-bottom: auto;  |
| ml-auto | margin-left: auto;  |






Basic usage
-----------

 ### Add margin to a single side

 Control the margin on one side of an element using the `m{t|r|b|l}-{size}` utilities.

 For example, `mt-6` would add `1.5rem` of margin to the top of an element, `mr-4` would add `1rem` of margin to the right of an element, `mb-8` would add `2rem` of margin to the bottom of an element, and `ml-2` would add `0.5rem` of margin to the left of an element.

 
```
<div class="mt-6 ...">mt-6</div>
<div class="mr-4 ...">mr-4</div>
<div class="mb-8 ...">mb-8</div>
<div class="ml-2 ...">ml-2</div>
```
 ### Add horizontal margin

 Control the horizontal margin of an element using the `mx-{size}` utilities.

 
```
<div class="mx-8 ...">mx-8</div>
```
 ### Add vertical margin

 Control the vertical margin of an element using the `my-{size}` utilities.

 
```
<div class="my-8 ...">my-8</div>
```
 ### Add margin to all sides

 Control the margin on all sides of an element using the `m-{size}` utilities.

 
```
<div class="m-8 ...">m-8</div>
```
 ### Using negative values

 To use a negative margin value, prefix the class name with a dash to convert it to a negative value.

 
```
<div class="w-36 h-16 bg-sky-400 opacity-20 ..."></div>
<div class="-mt-8 bg-sky-300 ...">-mt-8</div>
```
 ### Using logical properties

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

 
```
<div dir="ltr">
  <div class="ms-8 ...">ms-8</div>
  <div class="me-8 ...">me-8</div>
<div>

<div dir="rtl">
  <div class="ms-8 ...">ms-8</div>
  <div class="me-8 ...">me-8</div>
<div>
```
 For more control, you can also use the [LTR and RTL modifiers](hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:mt-8` to only apply the `mt-8` utility on hover.



```
<div class="mt-4 hover:mt-8">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:mt-8` to apply the `mt-8` utility at only medium screen sizes and above.



```
<div class="mt-4 md:mt-8">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind’s margin scale uses the [default spacing scale](customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

```

 Alternatively, you can customize just the margin scale by editing `theme.margin` or `theme.extend.margin` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      margin: {
        '5px': '5px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `margin` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="m-[5px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/margin>

Width
=====


Utilities for setting the width of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| w-0 | width: 0px;  |
| w-px | width: 1px;  |
| w-0.5 | width: 0.125rem; /\* 2px \*/ |
| w-1 | width: 0.25rem; /\* 4px \*/ |
| w-1.5 | width: 0.375rem; /\* 6px \*/ |
| w-2 | width: 0.5rem; /\* 8px \*/ |
| w-2.5 | width: 0.625rem; /\* 10px \*/ |
| w-3 | width: 0.75rem; /\* 12px \*/ |
| w-3.5 | width: 0.875rem; /\* 14px \*/ |
| w-4 | width: 1rem; /\* 16px \*/ |
| w-5 | width: 1.25rem; /\* 20px \*/ |
| w-6 | width: 1.5rem; /\* 24px \*/ |
| w-7 | width: 1.75rem; /\* 28px \*/ |
| w-8 | width: 2rem; /\* 32px \*/ |
| w-9 | width: 2.25rem; /\* 36px \*/ |
| w-10 | width: 2.5rem; /\* 40px \*/ |
| w-11 | width: 2.75rem; /\* 44px \*/ |
| w-12 | width: 3rem; /\* 48px \*/ |
| w-14 | width: 3.5rem; /\* 56px \*/ |
| w-16 | width: 4rem; /\* 64px \*/ |
| w-20 | width: 5rem; /\* 80px \*/ |
| w-24 | width: 6rem; /\* 96px \*/ |
| w-28 | width: 7rem; /\* 112px \*/ |
| w-32 | width: 8rem; /\* 128px \*/ |
| w-36 | width: 9rem; /\* 144px \*/ |
| w-40 | width: 10rem; /\* 160px \*/ |
| w-44 | width: 11rem; /\* 176px \*/ |
| w-48 | width: 12rem; /\* 192px \*/ |
| w-52 | width: 13rem; /\* 208px \*/ |
| w-56 | width: 14rem; /\* 224px \*/ |
| w-60 | width: 15rem; /\* 240px \*/ |
| w-64 | width: 16rem; /\* 256px \*/ |
| w-72 | width: 18rem; /\* 288px \*/ |
| w-80 | width: 20rem; /\* 320px \*/ |
| w-96 | width: 24rem; /\* 384px \*/ |
| w-auto | width: auto;  |
| w-1/2 | width: 50%;  |
| w-1/3 | width: 33.333333%;  |
| w-2/3 | width: 66.666667%;  |
| w-1/4 | width: 25%;  |
| w-2/4 | width: 50%;  |
| w-3/4 | width: 75%;  |
| w-1/5 | width: 20%;  |
| w-2/5 | width: 40%;  |
| w-3/5 | width: 60%;  |
| w-4/5 | width: 80%;  |
| w-1/6 | width: 16.666667%;  |
| w-2/6 | width: 33.333333%;  |
| w-3/6 | width: 50%;  |
| w-4/6 | width: 66.666667%;  |
| w-5/6 | width: 83.333333%;  |
| w-1/12 | width: 8.333333%;  |
| w-2/12 | width: 16.666667%;  |
| w-3/12 | width: 25%;  |
| w-4/12 | width: 33.333333%;  |
| w-5/12 | width: 41.666667%;  |
| w-6/12 | width: 50%;  |
| w-7/12 | width: 58.333333%;  |
| w-8/12 | width: 66.666667%;  |
| w-9/12 | width: 75%;  |
| w-10/12 | width: 83.333333%;  |
| w-11/12 | width: 91.666667%;  |
| w-full | width: 100%;  |
| w-screen | width: 100vw;  |
| w-min | width: min-content;  |
| w-max | width: max-content;  |
| w-fit | width: fit-content;  |






Basic usage
-----------

 ### Fixed widths

 Use `w-{number}` or `w-px` to set an element to a fixed width.

 
```
<div class="w-96 ..."></div>
<div class="w-80 ..."></div>
<div class="w-64 ..."></div>
<div class="w-48 ..."></div>
<div class="w-40 ..."></div>
<div class="w-32 ..."></div>
<div class="w-24 ..."></div>
```
 ### Percentage widths

 Use `w-{fraction}` or `w-full` to set an element to a percentage based width.

 
```
<div class="flex ...">
  <div class="w-1/2 ... ">w-1/2</div>
  <div class="w-1/2 ... ">w-1/2</div>
</div>
<div class="flex ...">
  <div class="w-2/5 ...">w-2/5</div>
  <div class="w-3/5 ...">w-3/5</div>
</div>
<div class="flex ...">
  <div class="w-1/3 ...">w-1/3</div>
  <div class="w-2/3 ...">w-2/3</div>
</div>
<div class="flex ...">
  <div class="w-1/4 ...">w-1/4</div>
  <div class="w-3/4 ...">w-3/4</div>
</div>
<div class="flex ...">
  <div class="w-1/5 ...">w-1/5</div>
  <div class="w-4/5 ...">w-4/5</div>
</div>
<div class="flex ...">
  <div class="w-1/6 ...">w-1/6</div>
  <div class="w-5/6 ...">w-5/6</div>
</div>
<div class="w-full ...">w-full</div>
```
 ### Viewport width

 Use `w-screen` to make an element span the entire width of the viewport.

 
```
<div class="w-screen">
  <!-- ... -->
</div>
```
 ### Resetting the width

 The `w-auto` utility can be useful if you need to remove an element’s assigned width under a specific condition, like at a particular breakpoint:

 
```
<div class="w-full md:w-auto">
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:w-full` to only apply the `w-full` utility on hover.



```
<div class="w-1/2 hover:w-full">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:w-full` to apply the `w-full` utility at only medium screen sizes and above.



```
<div class="w-1/2 md:w-full">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind’s width scale is a combination of the [default spacing scale](customizing-spacing#default-spacing-scale) as well as some additional values specific to widths.

 You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

```

 To customize width separately, use the `theme.width` section of your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      width: {
        '128': '32rem',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `width` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="w-[32rem]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/width>

Max-Width
=========


Utilities for setting the maximum width of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| max-w-0 | max-width: 0rem; /\* 0px \*/ |
| max-w-none | max-width: none;  |
| max-w-xs | max-width: 20rem; /\* 320px \*/ |
| max-w-sm | max-width: 24rem; /\* 384px \*/ |
| max-w-md | max-width: 28rem; /\* 448px \*/ |
| max-w-lg | max-width: 32rem; /\* 512px \*/ |
| max-w-xl | max-width: 36rem; /\* 576px \*/ |
| max-w-2xl | max-width: 42rem; /\* 672px \*/ |
| max-w-3xl | max-width: 48rem; /\* 768px \*/ |
| max-w-4xl | max-width: 56rem; /\* 896px \*/ |
| max-w-5xl | max-width: 64rem; /\* 1024px \*/ |
| max-w-6xl | max-width: 72rem; /\* 1152px \*/ |
| max-w-7xl | max-width: 80rem; /\* 1280px \*/ |
| max-w-full | max-width: 100%;  |
| max-w-min | max-width: min-content;  |
| max-w-max | max-width: max-content;  |
| max-w-fit | max-width: fit-content;  |
| max-w-prose | max-width: 65ch;  |
| max-w-screen-sm | max-width: 640px;  |
| max-w-screen-md | max-width: 768px;  |
| max-w-screen-lg | max-width: 1024px;  |
| max-w-screen-xl | max-width: 1280px;  |
| max-w-screen-2xl | max-width: 1536px;  |






Basic usage
-----------

 ### Setting the maximum width

 Set the maximum width of an element using the `max-w-{size}` utilities.

  
```
<div class="max-w-md ...">
  <!-- ... -->
</div>
```
 ### Reading width

 The `max-w-prose` utility gives an element a max-width optimized for readability and adapts based on the font size.

 
```
<div class="text-sm max-w-prose ...">
  <p>Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollar idea right there. Just sell the tops.</p>
</div>

<div class="text-base max-w-prose ...">
  <p>Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollar idea right there. Just sell the tops.</p>
</div>

<div class="text-xl max-w-prose ...">
  <p>Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollar idea right there. Just sell the tops.</p>
</div>
```
 ### Constraining to your breakpoints

 The `max-w-screen-{breakpoint}` classes can be used to give an element a max-width matching a specific breakpoint. These values are automatically derived from the [`theme.screens` section](theme#screens) of your `tailwind.config.js` file.

 
```
<div class="max-w-screen-2xl">
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:max-w-lg` to only apply the `max-w-lg` utility on hover.



```
<div class="max-w-sm hover:max-w-lg">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:max-w-lg` to apply the `max-w-lg` utility at only medium screen sizes and above.



```
<div class="max-w-sm md:max-w-lg">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 You can customize your `max-width` scale by editing `theme.maxWidth` or `theme.extend.maxWidth` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      maxWidth: {
        '1/2': '50%',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `max-width` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="max-w-[50%]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/max-width>

Height
======


Utilities for setting the height of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| h-0 | height: 0px;  |
| h-px | height: 1px;  |
| h-0.5 | height: 0.125rem; /\* 2px \*/ |
| h-1 | height: 0.25rem; /\* 4px \*/ |
| h-1.5 | height: 0.375rem; /\* 6px \*/ |
| h-2 | height: 0.5rem; /\* 8px \*/ |
| h-2.5 | height: 0.625rem; /\* 10px \*/ |
| h-3 | height: 0.75rem; /\* 12px \*/ |
| h-3.5 | height: 0.875rem; /\* 14px \*/ |
| h-4 | height: 1rem; /\* 16px \*/ |
| h-5 | height: 1.25rem; /\* 20px \*/ |
| h-6 | height: 1.5rem; /\* 24px \*/ |
| h-7 | height: 1.75rem; /\* 28px \*/ |
| h-8 | height: 2rem; /\* 32px \*/ |
| h-9 | height: 2.25rem; /\* 36px \*/ |
| h-10 | height: 2.5rem; /\* 40px \*/ |
| h-11 | height: 2.75rem; /\* 44px \*/ |
| h-12 | height: 3rem; /\* 48px \*/ |
| h-14 | height: 3.5rem; /\* 56px \*/ |
| h-16 | height: 4rem; /\* 64px \*/ |
| h-20 | height: 5rem; /\* 80px \*/ |
| h-24 | height: 6rem; /\* 96px \*/ |
| h-28 | height: 7rem; /\* 112px \*/ |
| h-32 | height: 8rem; /\* 128px \*/ |
| h-36 | height: 9rem; /\* 144px \*/ |
| h-40 | height: 10rem; /\* 160px \*/ |
| h-44 | height: 11rem; /\* 176px \*/ |
| h-48 | height: 12rem; /\* 192px \*/ |
| h-52 | height: 13rem; /\* 208px \*/ |
| h-56 | height: 14rem; /\* 224px \*/ |
| h-60 | height: 15rem; /\* 240px \*/ |
| h-64 | height: 16rem; /\* 256px \*/ |
| h-72 | height: 18rem; /\* 288px \*/ |
| h-80 | height: 20rem; /\* 320px \*/ |
| h-96 | height: 24rem; /\* 384px \*/ |
| h-auto | height: auto;  |
| h-1/2 | height: 50%;  |
| h-1/3 | height: 33.333333%;  |
| h-2/3 | height: 66.666667%;  |
| h-1/4 | height: 25%;  |
| h-2/4 | height: 50%;  |
| h-3/4 | height: 75%;  |
| h-1/5 | height: 20%;  |
| h-2/5 | height: 40%;  |
| h-3/5 | height: 60%;  |
| h-4/5 | height: 80%;  |
| h-1/6 | height: 16.666667%;  |
| h-2/6 | height: 33.333333%;  |
| h-3/6 | height: 50%;  |
| h-4/6 | height: 66.666667%;  |
| h-5/6 | height: 83.333333%;  |
| h-full | height: 100%;  |
| h-screen | height: 100vh;  |
| h-min | height: min-content;  |
| h-max | height: max-content;  |
| h-fit | height: fit-content;  |






Basic usage
-----------

 ### Fixed heights

 Use `h-{number}` or `h-px` to set an element to a fixed height.

 
```
<div class="h-96 ...">h-96</div>
<div class="h-80 ...">h-80</div>
<div class="h-64 ...">h-64</div>
<div class="h-48 ...">h-48</div>
<div class="h-40 ...">h-40</div>
<div class="h-32 ...">h-32</div>
<div class="h-24 ...">h-24</div>
```
 ### Full height

 Use `h-full` to set an element’s height to 100% of its parent, as long as the parent has a defined height.

 
```
<div class="h-48">
  <div class="h-full ...">
    <!-- This element will have a height of `12rem` (h-48) -->
  </div>
</div>
```
 ### Viewport height

 Use `h-screen` to make an element span the entire height of the viewport.

 
```
<div class="h-screen">
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:h-full` to only apply the `h-full` utility on hover.



```
<div class="h-8 hover:h-full">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:h-full` to apply the `h-full` utility at only medium screen sizes and above.



```
<div class="h-8 md:h-full">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind’s height scale is a combination of the [default spacing scale](customizing-spacing#default-spacing-scale) as well as some additional values specific to heights.

 You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

```

 To customize height separately, use the `theme.height` section of your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      height: {
        '128': '32rem',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `height` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="h-[32rem]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/height>

Min-Height
==========


Utilities for setting the minimum height of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| min-h-0 | min-height: 0px;  |
| min-h-full | min-height: 100%;  |
| min-h-screen | min-height: 100vh;  |
| min-h-min | min-height: min-content;  |
| min-h-max | min-height: max-content;  |
| min-h-fit | min-height: fit-content;  |






Basic usage
-----------

 ### Setting the minimum height

 Set the minimum height of an element using the `min-h-0`, `min-h-full`, or `min-h-screen` utilities.

 
```
<div class="h-48">
  <div class="h-24 min-h-full">
    <!-- ... -->
  </div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:min-h-full` to only apply the `min-h-full` utility on hover.



```
<div class="h-24 min-h-0 hover:min-h-full">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:min-h-full` to apply the `min-h-full` utility at only medium screen sizes and above.



```
<div class="h-24 min-h-0 md:min-h-full">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 You can customize your `min-height` scale by editing `theme.minHeight` or `theme.extend.minHeight` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    minHeight: {
      '1/2': '50%',
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `min-height` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="min-h-[50%]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/min-height>

Max-Height
==========


Utilities for setting the maximum height of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| max-h-0 | max-height: 0px;  |
| max-h-px | max-height: 1px;  |
| max-h-0.5 | max-height: 0.125rem; /\* 2px \*/ |
| max-h-1 | max-height: 0.25rem; /\* 4px \*/ |
| max-h-1.5 | max-height: 0.375rem; /\* 6px \*/ |
| max-h-2 | max-height: 0.5rem; /\* 8px \*/ |
| max-h-2.5 | max-height: 0.625rem; /\* 10px \*/ |
| max-h-3 | max-height: 0.75rem; /\* 12px \*/ |
| max-h-3.5 | max-height: 0.875rem; /\* 14px \*/ |
| max-h-4 | max-height: 1rem; /\* 16px \*/ |
| max-h-5 | max-height: 1.25rem; /\* 20px \*/ |
| max-h-6 | max-height: 1.5rem; /\* 24px \*/ |
| max-h-7 | max-height: 1.75rem; /\* 28px \*/ |
| max-h-8 | max-height: 2rem; /\* 32px \*/ |
| max-h-9 | max-height: 2.25rem; /\* 36px \*/ |
| max-h-10 | max-height: 2.5rem; /\* 40px \*/ |
| max-h-11 | max-height: 2.75rem; /\* 44px \*/ |
| max-h-12 | max-height: 3rem; /\* 48px \*/ |
| max-h-14 | max-height: 3.5rem; /\* 56px \*/ |
| max-h-16 | max-height: 4rem; /\* 64px \*/ |
| max-h-20 | max-height: 5rem; /\* 80px \*/ |
| max-h-24 | max-height: 6rem; /\* 96px \*/ |
| max-h-28 | max-height: 7rem; /\* 112px \*/ |
| max-h-32 | max-height: 8rem; /\* 128px \*/ |
| max-h-36 | max-height: 9rem; /\* 144px \*/ |
| max-h-40 | max-height: 10rem; /\* 160px \*/ |
| max-h-44 | max-height: 11rem; /\* 176px \*/ |
| max-h-48 | max-height: 12rem; /\* 192px \*/ |
| max-h-52 | max-height: 13rem; /\* 208px \*/ |
| max-h-56 | max-height: 14rem; /\* 224px \*/ |
| max-h-60 | max-height: 15rem; /\* 240px \*/ |
| max-h-64 | max-height: 16rem; /\* 256px \*/ |
| max-h-72 | max-height: 18rem; /\* 288px \*/ |
| max-h-80 | max-height: 20rem; /\* 320px \*/ |
| max-h-96 | max-height: 24rem; /\* 384px \*/ |
| max-h-none | max-height: none;  |
| max-h-full | max-height: 100%;  |
| max-h-screen | max-height: 100vh;  |
| max-h-min | max-height: min-content;  |
| max-h-max | max-height: max-content;  |
| max-h-fit | max-height: fit-content;  |






Basic usage
-----------

 ### Setting the maximum height

 Set the maximum height of an element using the `max-h-full` or `max-h-screen` utilities.

 
```
<div class="h-24 ...">
  <div class="h-48 max-h-full ...">
    <!-- ... -->
  </div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:max-h-screen` to only apply the `max-h-screen` utility on hover.



```
<div class="h-48 max-h-full hover:max-h-screen">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:max-h-screen` to apply the `max-h-screen` utility at only medium screen sizes and above.



```
<div class="h-48 max-h-full md:max-h-screen">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind’s max-height scale uses a combination of the [default spacing scale](customizing-spacing) as well as some additional height related values.

 You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

```

 Alternatively, you can customize just the max-height scale by editing `theme.maxHeight` or `theme.extend.maxHeight` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      maxHeight: {
        '128': '32rem',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `max-height` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="max-h-[32rem]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/max-height>

Font Family
===========


Utilities for controlling the font family of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| font-sans | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";  |
| font-serif | font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;  |
| font-mono | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;  |






Basic usage
-----------

 ### Setting the font family

 You can control the typeface of text using the font family utilities.

 
```
<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-serif ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:font-serif` to only apply the `font-serif` utility on hover.



```
<p class="font-sans hover:font-serif">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:font-serif` to apply the `font-serif` utility at only medium screen sizes and above.



```
<p class="font-sans md:font-serif">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the `theme.fontFamily` section of your Tailwind config.

 

tailwind.config.js



```
module.exports = {
  theme: {
    fontFamily: {
      'sans': ['ui-sans-serif', 'system-ui', ...],
      'serif': ['ui-serif', 'Georgia', ...],
      'mono': ['ui-monospace', 'SFMono-Regular', ...],
      'display': ['Oswald', ...],
      'body': ['"Open Sans"', ...],
    }
  }
}

```

 Font families can be specified as an array or as a simple comma-delimited string:

 
```
{
  // Array format:
  'sans': ['Helvetica', 'Arial', 'sans-serif'],

  // Comma-delimited format:
  'sans': 'Helvetica, Arial, sans-serif',
}
```
 Note that **Tailwind does not automatically escape font names** for you. If you’re using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.

 
```
{
  // Won't work:
  'sans': ['Exo 2', ...],

  // Add quotes:
  'sans': ['"Exo 2"', ...],

  // ...or escape the space:
  'sans': ['Exo\\ 2', ...],
}
```
 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 #### Providing default font settings

 You can optionally provide default [font-feature-settings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings) and [font-variation-settings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings) for each font in your project using a tuple of the form `[fontFamilies, { fontFeatureSettings, fontVariationSettings }]` when configuring custom fonts.

 

tailwind.config.js



```
module.exports = {
  theme: {
    fontFamily: {
      sans: [
        "Inter var, sans-serif",
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32'
        },
      ],
    },
  },
}

```

 ### Arbitrary values

 If you need to use a one-off `font-family` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<p class="font-['Open_Sans']">
  <!-- ... -->
</p>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.

 ### Customizing the default font

 For convenience, [Preflight](preflight) sets the font family on the `html` element to match your configured `sans` font, so one way to change the default font for your project is to customize the `sans` key in your `fontFamily` configuration:

 

tailwind.config.js



```
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Proxima Nova', ...defaultTheme.fontFamily.sans],
      },
    }
  }
}

```

 You can also customize the default font used in your project by [adding a custom base style](adding-custom-styles#adding-base-styles) that sets the `font-family` property explicitly:

 

main.css



```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: Proxima Nova, system-ui, sans-serif;
  }
}
```

 This is the best approach if you have customized your font family utilities to have different names and don’t want there to be `font-sans` utility available in your project.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/font-family>

Font Size
=========


Utilities for controlling the font size of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| text-xs | font-size: 0.75rem; /\* 12px \*/ line-height: 1rem; /\* 16px \*/ |
| text-sm | font-size: 0.875rem; /\* 14px \*/ line-height: 1.25rem; /\* 20px \*/ |
| text-base | font-size: 1rem; /\* 16px \*/ line-height: 1.5rem; /\* 24px \*/ |
| text-lg | font-size: 1.125rem; /\* 18px \*/ line-height: 1.75rem; /\* 28px \*/ |
| text-xl | font-size: 1.25rem; /\* 20px \*/ line-height: 1.75rem; /\* 28px \*/ |
| text-2xl | font-size: 1.5rem; /\* 24px \*/ line-height: 2rem; /\* 32px \*/ |
| text-3xl | font-size: 1.875rem; /\* 30px \*/ line-height: 2.25rem; /\* 36px \*/ |
| text-4xl | font-size: 2.25rem; /\* 36px \*/ line-height: 2.5rem; /\* 40px \*/ |
| text-5xl | font-size: 3rem; /\* 48px \*/ line-height: 1;  |
| text-6xl | font-size: 3.75rem; /\* 60px \*/ line-height: 1;  |
| text-7xl | font-size: 4.5rem; /\* 72px \*/ line-height: 1;  |
| text-8xl | font-size: 6rem; /\* 96px \*/ line-height: 1;  |
| text-9xl | font-size: 8rem; /\* 128px \*/ line-height: 1;  |






Basic usage
-----------

 ### Setting the font size

 Control the font size of an element using the `text-{size}` utilities.

 
```
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>
```
 ### Setting the line-height

 Set an element’s line-height at the same time you set the font size by adding a line-height modifier to any font size utility. For example, use `text-xl/8` to set a font size of `1.25rem` with a line-height of `2rem`.

 
```
<p class="text-base/6 ...">So I started to walk into the water...</p>
<p class="text-base/7 ...">So I started to walk into the water...</p>
<p class="text-base/loose ...">So I started to walk into the water...</p>
```
 You can use any value defined in your [line-height scale](line-height), or use arbitrary values if you need to deviate from your design tokens.

 
```
<p class="text-sm/[17px] ..."></p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:text-base` to only apply the `text-base` utility on hover.



```
<p class="text-sm hover:text-base">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:text-base` to apply the `text-base` utility at only medium screen sizes and above.



```
<p class="text-sm md:text-base">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 You can configure your own custom set of font size utilities using the `theme.fontSize` section of your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    fontSize: {
      sm: '0.8rem',
      base: '1rem',
      xl: '1.25rem',
      '2xl': '1.563rem',
      '3xl': '1.953rem',
      '4xl': '2.441rem',
      '5xl': '3.052rem',
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 #### Providing a default line-height

 Tailwind’s default theme configures a sensible default `line-height` for each `text-{size}` utility. You can configure your own default line heights when using custom font sizes by defining each size using a tuple of the form `[fontSize, lineHeight]` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    }
  }
}
```

 You can also specify a default line height using the object syntax, which allows you to also provide default `letter-spacing` and `font-weight` values. You can do this using a tuple of the form `[fontSize, { lineHeight?, letterSpacing?, fontWeight? }]`.

 

tailwind.config.js



```
module.exports = {
  theme: {
    fontSize: {
      '2xl': ['1.5rem', {
        lineHeight: '2rem',
        letterSpacing: '-0.01em',
        fontWeight: '500',
      }],
      '3xl': ['1.875rem', {
        lineHeight: '2.25rem',
        letterSpacing: '-0.02em',
        fontWeight: '700',
      }],
    }
  }
}
```

 ### Arbitrary values

 If you need to use a one-off `font-size` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<p class="text-[14px]">
  <!-- ... -->
</p>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/font-size>

Font Smoothing
==============


Utilities for controlling the font smoothing of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| antialiased | -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;  |
| subpixel-antialiased | -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;  |






Basic usage
-----------

 ### Applying font smoothing

 Use the `subpixel-antialiased` utility to render text using subpixel antialiasing and the `antialiased` utility to render text using grayscale antialiasing.

 
```
<p class="subpixel-antialiased ...">The quick brown fox ...</p>
<p class="antialiased ...">The quick brown fox ...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:subpixel-antialiased` to only apply the `subpixel-antialiased` utility on hover.



```
<p class="antialiased hover:subpixel-antialiased">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:subpixel-antialiased` to apply the `subpixel-antialiased` utility at only medium screen sizes and above.



```
<p class="antialiased md:subpixel-antialiased">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/font-smoothing>

Font Style
==========


Utilities for controlling the style of text.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| italic | font-style: italic;  |
| not-italic | font-style: normal;  |






Basic usage
-----------

 ### Italicizing text

 The `italic` utility can be used to make text italic. Likewise, the `not-italic` utility can be used to display text normally — typically to reset italic text at different breakpoints.

 
```
<p class="italic ...">The quick brown fox ...</p>
<p class="not-italic ...">The quick brown fox ...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:not-italic` to only apply the `not-italic` utility on hover.



```
<p class="italic hover:not-italic">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:not-italic` to apply the `not-italic` utility at only medium screen sizes and above.



```
<p class="italic md:not-italic">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/font-style>

Font Weight
===========


Utilities for controlling the font weight of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| font-thin | font-weight: 100;  |
| font-extralight | font-weight: 200;  |
| font-light | font-weight: 300;  |
| font-normal | font-weight: 400;  |
| font-medium | font-weight: 500;  |
| font-semibold | font-weight: 600;  |
| font-bold | font-weight: 700;  |
| font-extrabold | font-weight: 800;  |
| font-black | font-weight: 900;  |






Basic usage
-----------

 ### Setting the font weight

 Control the font weight of an element using the `font-{weight}` utilities.

 
```
<p class="font-light ...">The quick brown fox ...</p>
<p class="font-normal ...">The quick brown fox ...</p>
<p class="font-medium ...">The quick brown fox ...</p>
<p class="font-semibold ...">The quick brown fox ...</p>
<p class="font-bold ...">The quick brown fox ...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:font-bold` to only apply the `font-bold` utility on hover.



```
<p class="font-normal hover:font-bold">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:font-bold` to apply the `font-bold` utility at only medium screen sizes and above.



```
<p class="font-normal md:font-bold">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides nine `font-weight` utilities. You change, add, or remove these by editing the `theme.fontWeight` section of your Tailwind config.

 

tailwind.config.js



```
module.exports = {
  theme: {
    fontWeight: {
      thin: '100',
      hairline: '100',
      extralight: '200',
      light: '300',
      normal: '400',
      medium: '500',
      semibold: '600',
      bold: '700',
      extrabold: '800',
      'extra-bold': '800',
      black: '900',
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `font-weight` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<p class="font-[1100]">
  <!-- ... -->
</p>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/font-weight>

Font Variant Numeric
====================


Utilities for controlling the variant of numbers.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| normal-nums | font-variant-numeric: normal;  |
| ordinal | font-variant-numeric: ordinal;  |
| slashed-zero | font-variant-numeric: slashed-zero;  |
| lining-nums | font-variant-numeric: lining-nums;  |
| oldstyle-nums | font-variant-numeric: oldstyle-nums;  |
| proportional-nums | font-variant-numeric: proportional-nums;  |
| tabular-nums | font-variant-numeric: tabular-nums;  |
| diagonal-fractions | font-variant-numeric: diagonal-fractions;  |
| stacked-fractions | font-variant-numeric: stacked-fractions;  |






Basic usage
-----------

 ### Applying numeric variants

 Use the `font-variant-numeric` utilities to enable additional glyphs for numbers, fractions, and ordinal markers *(in fonts that support them)*.

 These utilities are composable so you can enable multiple `font-variant-numeric` features by combining multiple classes in your HTML:

 
```
<p class="ordinal slashed-zero tabular-nums ...">
  1234567890
</p>
```
 Note that many fonts don’t support these features *(stacked fractions support for example is especially rare)*, so some of these utilities may have no effect depending on the font family you are using.

 ### Ordinal

 Use the `ordinal` utility to enable special glyphs for the ordinal markers.

 
```
<p class="ordinal ...">1st</p>
```
 ### Slashed Zero

 Use the `slashed-zero` utility to force a 0 with a slash; this is useful when a clear distinction between O and 0 is needed.

 
```
<p class="slashed-zero ...">0</p>
```
 ### Lining figures

 Use the `lining-nums` utility to use the numeric glyphs that are all aligned by their baseline. This corresponds to the `lnum` OpenType feature. This is the default for most fonts.

 
```
<p class="lining-nums ...">
  1234567890
</p>
```
 ### Oldstyle figures

 Use the `oldstyle-nums` utility to use numeric glyphs where some numbers have descenders. This corresponds to the `onum` OpenType feature.

 
```
<p class="oldstyle-nums ...">
  1234567890
</p>
```
 ### Proportional figures

 Use the `proportional-nums` utility to use numeric glyphs that have proportional widths (rather than uniform/tabular). This corresponds to the `pnum` OpenType feature.

 
```
<p class="proportional-nums ...">
  12121
</p>
<p class="proportional-nums ...">
  90909
</p>
```
 ### Tabular figures

 Use the `tabular-nums` utility to use numeric glyphs that have uniform/tabular widths (rather than proportional). This corresponds to the `tnum` OpenType feature.

 
```
<p class="tabular-nums ...">
  12121
</p>
<p class="tabular-nums ...">
  90909
</p>
```
 ### Diagonal fractions

 Use the `diagonal-fractions` utility to replace numbers separated by a slash with common diagonal fractions. This corresponds to the `frac` OpenType feature.

 
```
<p class="diagonal-fractions ...">
  1/2 3/4 5/6
</p>
```
 ### Stacked fractions

 Use the `stacked-fractions` utility to replace numbers separated by a slash with common stacked fractions. This corresponds to the `afrc` OpenType feature. Very few fonts seem to support this feature — we’ve used Ubuntu Mono here.

 
```
<p class="stacked-fractions ...">
  1/2 3/4 5/6
</p>
```
 ### Resetting numeric font variants

 Use the `normal-nums` propery to reset numeric font variants. This is usually useful for resetting a font feature at a particular breakpoint:

 
```
<p class="slashed-zero tabular-nums md:normal-nums ...">
  12345
</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:tabular-nums` to only apply the `tabular-nums` utility on hover.



```
<p class="proportional-nums hover:tabular-nums">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:tabular-nums` to apply the `tabular-nums` utility at only medium screen sizes and above.



```
<p class="proportional-nums md:tabular-nums">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/font-variant-numeric>

Letter Spacing
==============


Utilities for controlling the tracking (letter spacing) of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| tracking-tighter | letter-spacing: -0.05em;  |
| tracking-tight | letter-spacing: -0.025em;  |
| tracking-normal | letter-spacing: 0em;  |
| tracking-wide | letter-spacing: 0.025em;  |
| tracking-wider | letter-spacing: 0.05em;  |
| tracking-widest | letter-spacing: 0.1em;  |






Basic usage
-----------

 ### Setting the letter spacing

 Control the letter spacing of an element using the `tracking-{size}` utilities.

 
```
<p class="tracking-tight ...">The quick brown fox ...</p>
<p class="tracking-normal ...">The quick brown fox ...</p>
<p class="tracking-wide ...">The quick brown fox ...</p>
```
 ### Using negative values

 To use a negative letter-spacing value, prefix the class name with a dash to convert it to a negative value.

 Using negative values doesn’t make a ton of sense with the letter-spacing scale Tailwind includes out of the box, but if you’ve opted to customize your letter-spacing scale to use numbers instead of descriptive words like “wide” the negative value modifier can be useful.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:tracking-wide` to only apply the `tracking-wide` utility on hover.



```
<p class="tracking-tight hover:tracking-wide">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:tracking-wide` to apply the `tracking-wide` utility at only medium screen sizes and above.



```
<p class="tracking-tight md:tracking-wide">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides six tracking utilities. You can change, add, or remove these by editing the `theme.letterSpacing` section of your Tailwind config.

 

tailwind.config.js



```
module.exports = {
  theme: {
    letterSpacing: {
      tightest: '-.075em',
      tighter: '-.05em',
      tight: '-.025em',
      normal: '0',
      wide: '.025em',
      wider: '.05em',
      widest: '.1em',
      widest: '.25em',
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `letter-spacing` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<p class="tracking-[.25em]">
  <!-- ... -->
</p>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/letter-spacing>

Line Clamp
==========


Utilities for clamping text to a specific number of lines.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| line-clamp-1 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;  |
| line-clamp-2 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;  |
| line-clamp-3 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;  |
| line-clamp-4 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;  |
| line-clamp-5 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;  |
| line-clamp-6 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;  |
| line-clamp-none | overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: none;  |






Basic usage
-----------

 ### Truncating multi-line text

 Use the `line-clamp-*` utilities to truncate a block of text after a specific number of lines.

 
```
<article>
  <time>Mar 10, 2020</time>
  <h2>Boost your conversion rate</h2>
  <p class="line-clamp-3">Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.</p>
  <div>
    <img src="..." />
    Lindsay Walton
  </div>
</article>
```
 ### Undoing line clamping

 Use `line-clamp-none` to undo a previously applied line clamp utility.

 
```
<p class="line-clamp-3 lg:line-clamp-none">
  <!-- ... -->
</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:line-clamp-4` to only apply the `line-clamp-4` utility on hover.



```
<p class="line-clamp-3 hover:line-clamp-4">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:line-clamp-4` to apply the `line-clamp-4` utility at only medium screen sizes and above.



```
<p class="line-clamp-3 md:line-clamp-4">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides the six `line-clamp` utilities. You can customize these values by editing `theme.lineClamp` or `theme.extend.lineClamp` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      lineClamp: {
        7: '7',
      },
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `line-clamp` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<p class="line-clamp-[7]">
  <!-- ... -->
</p>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/line-clamp>

Line Height
===========


Utilities for controlling the leading (line height) of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| leading-3 | line-height: .75rem; /\* 12px \*/ |
| leading-4 | line-height: 1rem; /\* 16px \*/ |
| leading-5 | line-height: 1.25rem; /\* 20px \*/ |
| leading-6 | line-height: 1.5rem; /\* 24px \*/ |
| leading-7 | line-height: 1.75rem; /\* 28px \*/ |
| leading-8 | line-height: 2rem; /\* 32px \*/ |
| leading-9 | line-height: 2.25rem; /\* 36px \*/ |
| leading-10 | line-height: 2.5rem; /\* 40px \*/ |
| leading-none | line-height: 1;  |
| leading-tight | line-height: 1.25;  |
| leading-snug | line-height: 1.375;  |
| leading-normal | line-height: 1.5;  |
| leading-relaxed | line-height: 1.625;  |
| leading-loose | line-height: 2;  |






Basic usage
-----------

 ### Relative line-heights

 Use the `leading-none`, `leading-tight`, `leading-snug`, `leading-normal`, `leading-relaxed`, and `leading-loose` utilities to give an element a relative line-height based on its current font-size.

 
```
<p class="leading-normal ...">So I started to walk into the water...</p>
<p class="leading-relaxed ...">So I started to walk into the water...</p>
<p class="leading-loose ...">So I started to walk into the water...</p>
```
 ### Fixed line-heights

 Use the `leading-{size}` utilities to give an element a fixed line-height, irrespective of the current font-size. These are useful when you need very precise control over an element’s final size.

 
```
<p class="leading-6 ...">So I started to walk into the water...</p>
<p class="leading-7 ...">So I started to walk into the water...</p>
<p class="leading-8 ...">So I started to walk into the water...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:leading-loose` to only apply the `leading-loose` utility on hover.



```
<p class="leading-none hover:leading-loose">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:leading-loose` to apply the `leading-loose` utility at only medium screen sizes and above.



```
<p class="leading-none md:leading-loose">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 ### Overriding default line-heights

 It’s important to note that by default, Tailwind’s <font-size> utilities each set their own default line-height. This means that any time you use a responsive font-size utility like `sm:text-xl`, any explicit line-height you have set for a smaller breakpoint will be overridden.

 
```
<!-- The `leading-loose` class will be overridden at the `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl">
  Maybe we can live without libraries...
</p>
```
 If you want to override the default line-height after setting a breakpoint-specific font-size, make sure to set a breakpoint-specific line-height as well:

 
```
<!-- The `leading-loose` class will be overridden at the `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl md:leading-loose">
  Maybe we can live without libraries...
</p>
```
 Using the same line-height across different font sizes is generally not going to give you good typographic results. Line-height should typically get smaller as font-size increases, so the default behavior here usually saves you a ton of work. If you find yourself fighting it, you can always [customize your font-size scale](font-size#customizing) to not include default line-heights.

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides six relative and eight fixed `line-height` utilities. You change, add, or remove these by customizing the `lineHeight` section of your Tailwind theme config.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
        '12': '3rem',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `line-height` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<p class="leading-[3rem]">
  <!-- ... -->
</p>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/line-height>

List Style Image
================


Utilities for controlling the marker images for list items.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| list-image-none | list-style-image: none;  |






Basic usage
-----------

 ### Setting the list style image

 Control the marker image for list items using the `list-image-{value}` utilities.

 Out of the box, `list-image-none` is the only available preconfigured list style image utility. And while you can add additional utilities by [customizing your theme](list-style-image#customizing-your-theme), you can also use the square bracket notation to generate an arbitrary value on the fly.

 
```
<ul class="list-image-[url(checkmark.png)] ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:list-image-[url(checkmark.png)]` to only apply the `list-image-[url(checkmark.png)]` utility on hover.



```
<ul class="list-image-none hover:list-image-[url(checkmark.png)]">
  <!-- ... -->
</ul>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:list-image-[url(checkmark.png)]` to apply the `list-image-[url(checkmark.png)]` utility at only medium screen sizes and above.



```
<ul class="list-image-none md:list-image-[url(checkmark.png)]">
  <!-- ... -->
</ul>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind only provides the `list-image-none` utility. You can customize these values by editing `theme.listStyleImage` or `theme.extend.listStyleImage` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      listStyleImage: {
        checkmark: 'url("/img/checkmark.png")',
      },
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `list-image` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<ul class="list-image-[url(checkmark.png)]">
  <!-- ... -->
</ul>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/list-style-image>

List Style Position
===================


Utilities for controlling the position of bullets/numbers in lists.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| list-inside | list-style-position: inside;  |
| list-outside | list-style-position: outside;  |






Basic usage
-----------

 ### Setting the list style position

 Control the position of the markers and text indentation in a list using the `list-inside` and `list-outside` utilities.

 
```
<ul class="list-inside ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

<ul class="list-outside ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:list-inside` to only apply the `list-inside` utility on hover.



```
<ul class="list-outside hover:list-inside">
  <!-- ... -->
</ul>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:list-inside` to apply the `list-inside` utility at only medium screen sizes and above.



```
<ul class="list-outside md:list-inside">
  <!-- ... -->
</ul>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/list-style-position>

List Style Type
===============


Utilities for controlling the bullet/number style of a list.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| list-none | list-style-type: none;  |
| list-disc | list-style-type: disc;  |
| list-decimal | list-style-type: decimal;  |






Basic usage
-----------

 ### Setting the list style type

 To create bulleted or numeric lists, use the `list-disc` and `list-decimal` utilities.

 
```
<ul class="list-disc">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>

<ol class="list-decimal">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ol>

<ul class="list-none">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:list-disc` to only apply the `list-disc` utility on hover.



```
<ul class="list-none hover:list-disc">
  <!-- ... -->
</ul>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:list-disc` to apply the `list-disc` utility at only medium screen sizes and above.



```
<ul class="list-none md:list-disc">
  <!-- ... -->
</ul>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides three utilities for the most common list style types. You change, add, or remove these by editing the `theme.listStyleType` section of your Tailwind config.

 

tailwind.config.js



```
module.exports = {
  theme: {
    listStyleType: {
      none: 'none',
      disc: 'disc',
      decimal: 'decimal',
      square: 'square',
      roman: 'upper-roman',
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `list-style-type` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<ul class="list-[upper-roman]">
  <!-- ... -->
</ul>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/list-style-type>

Text Align
==========


Utilities for controlling the alignment of text.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| text-left | text-align: left;  |
| text-center | text-align: center;  |
| text-right | text-align: right;  |
| text-justify | text-align: justify;  |
| text-start | text-align: start;  |
| text-end | text-align: end;  |






Basic usage
-----------

 ### Setting the text alignment

 Control the text alignment of an element using the `text-left`, `text-center`, `text-right`, and `text-justify` utilities.

 
```
<p class="text-left ...">So I started to walk into the water...</p>
```
 
```
<p class="text-center ...">So I started to walk into the water...</p>
```
 
```
<p class="text-right ...">So I started to walk into the water...</p>
```
 
```
<p class="text-justify ...">So I started to walk into the water...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:text-center` to only apply the `text-center` utility on hover.



```
<p class="text-left hover:text-center">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:text-center` to apply the `text-center` utility at only medium screen sizes and above.



```
<p class="text-left md:text-center">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/text-align>

Text Color
==========


Utilities for controlling the text color of an element.


Quick reference
---------------





| Class | Properties | 
Preview  |
| --- | --- | --- |
| text-inherit | color: inherit;  | Aa |
| text-current | color: currentColor;  | Aa |
| text-transparent | color: transparent;  | Aa |
| text-black | color: rgb(0 0 0);  | Aa |
| text-white | color: rgb(255 255 255);  | Aa |
| text-slate-50 | color: rgb(248 250 252);  | Aa |
| text-slate-100 | color: rgb(241 245 249);  | Aa |
| text-slate-200 | color: rgb(226 232 240);  | Aa |
| text-slate-300 | color: rgb(203 213 225);  | Aa |
| text-slate-400 | color: rgb(148 163 184);  | Aa |
| text-slate-500 | color: rgb(100 116 139);  | Aa |
| text-slate-600 | color: rgb(71 85 105);  | Aa |
| text-slate-700 | color: rgb(51 65 85);  | Aa |
| text-slate-800 | color: rgb(30 41 59);  | Aa |
| text-slate-900 | color: rgb(15 23 42);  | Aa |
| text-slate-950 | color: rgb(2 6 23);  | Aa |
| text-gray-50 | color: rgb(249 250 251);  | Aa |
| text-gray-100 | color: rgb(243 244 246);  | Aa |
| text-gray-200 | color: rgb(229 231 235);  | Aa |
| text-gray-300 | color: rgb(209 213 219);  | Aa |
| text-gray-400 | color: rgb(156 163 175);  | Aa |
| text-gray-500 | color: rgb(107 114 128);  | Aa |
| text-gray-600 | color: rgb(75 85 99);  | Aa |
| text-gray-700 | color: rgb(55 65 81);  | Aa |
| text-gray-800 | color: rgb(31 41 55);  | Aa |
| text-gray-900 | color: rgb(17 24 39);  | Aa |
| text-gray-950 | color: rgb(3 7 18);  | Aa |
| text-zinc-50 | color: rgb(250 250 250);  | Aa |
| text-zinc-100 | color: rgb(244 244 245);  | Aa |
| text-zinc-200 | color: rgb(228 228 231);  | Aa |
| text-zinc-300 | color: rgb(212 212 216);  | Aa |
| text-zinc-400 | color: rgb(161 161 170);  | Aa |
| text-zinc-500 | color: rgb(113 113 122);  | Aa |
| text-zinc-600 | color: rgb(82 82 91);  | Aa |
| text-zinc-700 | color: rgb(63 63 70);  | Aa |
| text-zinc-800 | color: rgb(39 39 42);  | Aa |
| text-zinc-900 | color: rgb(24 24 27);  | Aa |
| text-zinc-950 | color: rgb(9 9 11);  | Aa |
| text-neutral-50 | color: rgb(250 250 250);  | Aa |
| text-neutral-100 | color: rgb(245 245 245);  | Aa |
| text-neutral-200 | color: rgb(229 229 229);  | Aa |
| text-neutral-300 | color: rgb(212 212 212);  | Aa |
| text-neutral-400 | color: rgb(163 163 163);  | Aa |
| text-neutral-500 | color: rgb(115 115 115);  | Aa |
| text-neutral-600 | color: rgb(82 82 82);  | Aa |
| text-neutral-700 | color: rgb(64 64 64);  | Aa |
| text-neutral-800 | color: rgb(38 38 38);  | Aa |
| text-neutral-900 | color: rgb(23 23 23);  | Aa |
| text-neutral-950 | color: rgb(10 10 10);  | Aa |
| text-stone-50 | color: rgb(250 250 249);  | Aa |
| text-stone-100 | color: rgb(245 245 244);  | Aa |
| text-stone-200 | color: rgb(231 229 228);  | Aa |
| text-stone-300 | color: rgb(214 211 209);  | Aa |
| text-stone-400 | color: rgb(168 162 158);  | Aa |
| text-stone-500 | color: rgb(120 113 108);  | Aa |
| text-stone-600 | color: rgb(87 83 78);  | Aa |
| text-stone-700 | color: rgb(68 64 60);  | Aa |
| text-stone-800 | color: rgb(41 37 36);  | Aa |
| text-stone-900 | color: rgb(28 25 23);  | Aa |
| text-stone-950 | color: rgb(12 10 9);  | Aa |
| text-red-50 | color: rgb(254 242 242);  | Aa |
| text-red-100 | color: rgb(254 226 226);  | Aa |
| text-red-200 | color: rgb(254 202 202);  | Aa |
| text-red-300 | color: rgb(252 165 165);  | Aa |
| text-red-400 | color: rgb(248 113 113);  | Aa |
| text-red-500 | color: rgb(239 68 68);  | Aa |
| text-red-600 | color: rgb(220 38 38);  | Aa |
| text-red-700 | color: rgb(185 28 28);  | Aa |
| text-red-800 | color: rgb(153 27 27);  | Aa |
| text-red-900 | color: rgb(127 29 29);  | Aa |
| text-red-950 | color: rgb(69 10 10);  | Aa |
| text-orange-50 | color: rgb(255 247 237);  | Aa |
| text-orange-100 | color: rgb(255 237 213);  | Aa |
| text-orange-200 | color: rgb(254 215 170);  | Aa |
| text-orange-300 | color: rgb(253 186 116);  | Aa |
| text-orange-400 | color: rgb(251 146 60);  | Aa |
| text-orange-500 | color: rgb(249 115 22);  | Aa |
| text-orange-600 | color: rgb(234 88 12);  | Aa |
| text-orange-700 | color: rgb(194 65 12);  | Aa |
| text-orange-800 | color: rgb(154 52 18);  | Aa |
| text-orange-900 | color: rgb(124 45 18);  | Aa |
| text-orange-950 | color: rgb(67 20 7);  | Aa |
| text-amber-50 | color: rgb(255 251 235);  | Aa |
| text-amber-100 | color: rgb(254 243 199);  | Aa |
| text-amber-200 | color: rgb(253 230 138);  | Aa |
| text-amber-300 | color: rgb(252 211 77);  | Aa |
| text-amber-400 | color: rgb(251 191 36);  | Aa |
| text-amber-500 | color: rgb(245 158 11);  | Aa |
| text-amber-600 | color: rgb(217 119 6);  | Aa |
| text-amber-700 | color: rgb(180 83 9);  | Aa |
| text-amber-800 | color: rgb(146 64 14);  | Aa |
| text-amber-900 | color: rgb(120 53 15);  | Aa |
| text-amber-950 | color: rgb(69 26 3);  | Aa |
| text-yellow-50 | color: rgb(254 252 232);  | Aa |
| text-yellow-100 | color: rgb(254 249 195);  | Aa |
| text-yellow-200 | color: rgb(254 240 138);  | Aa |
| text-yellow-300 | color: rgb(253 224 71);  | Aa |
| text-yellow-400 | color: rgb(250 204 21);  | Aa |
| text-yellow-500 | color: rgb(234 179 8);  | Aa |
| text-yellow-600 | color: rgb(202 138 4);  | Aa |
| text-yellow-700 | color: rgb(161 98 7);  | Aa |
| text-yellow-800 | color: rgb(133 77 14);  | Aa |
| text-yellow-900 | color: rgb(113 63 18);  | Aa |
| text-yellow-950 | color: rgb(66 32 6);  | Aa |
| text-lime-50 | color: rgb(247 254 231);  | Aa |
| text-lime-100 | color: rgb(236 252 203);  | Aa |
| text-lime-200 | color: rgb(217 249 157);  | Aa |
| text-lime-300 | color: rgb(190 242 100);  | Aa |
| text-lime-400 | color: rgb(163 230 53);  | Aa |
| text-lime-500 | color: rgb(132 204 22);  | Aa |
| text-lime-600 | color: rgb(101 163 13);  | Aa |
| text-lime-700 | color: rgb(77 124 15);  | Aa |
| text-lime-800 | color: rgb(63 98 18);  | Aa |
| text-lime-900 | color: rgb(54 83 20);  | Aa |
| text-lime-950 | color: rgb(26 46 5);  | Aa |
| text-green-50 | color: rgb(240 253 244);  | Aa |
| text-green-100 | color: rgb(220 252 231);  | Aa |
| text-green-200 | color: rgb(187 247 208);  | Aa |
| text-green-300 | color: rgb(134 239 172);  | Aa |
| text-green-400 | color: rgb(74 222 128);  | Aa |
| text-green-500 | color: rgb(34 197 94);  | Aa |
| text-green-600 | color: rgb(22 163 74);  | Aa |
| text-green-700 | color: rgb(21 128 61);  | Aa |
| text-green-800 | color: rgb(22 101 52);  | Aa |
| text-green-900 | color: rgb(20 83 45);  | Aa |
| text-green-950 | color: rgb(5 46 22);  | Aa |
| text-emerald-50 | color: rgb(236 253 245);  | Aa |
| text-emerald-100 | color: rgb(209 250 229);  | Aa |
| text-emerald-200 | color: rgb(167 243 208);  | Aa |
| text-emerald-300 | color: rgb(110 231 183);  | Aa |
| text-emerald-400 | color: rgb(52 211 153);  | Aa |
| text-emerald-500 | color: rgb(16 185 129);  | Aa |
| text-emerald-600 | color: rgb(5 150 105);  | Aa |
| text-emerald-700 | color: rgb(4 120 87);  | Aa |
| text-emerald-800 | color: rgb(6 95 70);  | Aa |
| text-emerald-900 | color: rgb(6 78 59);  | Aa |
| text-emerald-950 | color: rgb(2 44 34);  | Aa |
| text-teal-50 | color: rgb(240 253 250);  | Aa |
| text-teal-100 | color: rgb(204 251 241);  | Aa |
| text-teal-200 | color: rgb(153 246 228);  | Aa |
| text-teal-300 | color: rgb(94 234 212);  | Aa |
| text-teal-400 | color: rgb(45 212 191);  | Aa |
| text-teal-500 | color: rgb(20 184 166);  | Aa |
| text-teal-600 | color: rgb(13 148 136);  | Aa |
| text-teal-700 | color: rgb(15 118 110);  | Aa |
| text-teal-800 | color: rgb(17 94 89);  | Aa |
| text-teal-900 | color: rgb(19 78 74);  | Aa |
| text-teal-950 | color: rgb(4 47 46);  | Aa |
| text-cyan-50 | color: rgb(236 254 255);  | Aa |
| text-cyan-100 | color: rgb(207 250 254);  | Aa |
| text-cyan-200 | color: rgb(165 243 252);  | Aa |
| text-cyan-300 | color: rgb(103 232 249);  | Aa |
| text-cyan-400 | color: rgb(34 211 238);  | Aa |
| text-cyan-500 | color: rgb(6 182 212);  | Aa |
| text-cyan-600 | color: rgb(8 145 178);  | Aa |
| text-cyan-700 | color: rgb(14 116 144);  | Aa |
| text-cyan-800 | color: rgb(21 94 117);  | Aa |
| text-cyan-900 | color: rgb(22 78 99);  | Aa |
| text-cyan-950 | color: rgb(8 51 68);  | Aa |
| text-sky-50 | color: rgb(240 249 255);  | Aa |
| text-sky-100 | color: rgb(224 242 254);  | Aa |
| text-sky-200 | color: rgb(186 230 253);  | Aa |
| text-sky-300 | color: rgb(125 211 252);  | Aa |
| text-sky-400 | color: rgb(56 189 248);  | Aa |
| text-sky-500 | color: rgb(14 165 233);  | Aa |
| text-sky-600 | color: rgb(2 132 199);  | Aa |
| text-sky-700 | color: rgb(3 105 161);  | Aa |
| text-sky-800 | color: rgb(7 89 133);  | Aa |
| text-sky-900 | color: rgb(12 74 110);  | Aa |
| text-sky-950 | color: rgb(8 47 73);  | Aa |
| text-blue-50 | color: rgb(239 246 255);  | Aa |
| text-blue-100 | color: rgb(219 234 254);  | Aa |
| text-blue-200 | color: rgb(191 219 254);  | Aa |
| text-blue-300 | color: rgb(147 197 253);  | Aa |
| text-blue-400 | color: rgb(96 165 250);  | Aa |
| text-blue-500 | color: rgb(59 130 246);  | Aa |
| text-blue-600 | color: rgb(37 99 235);  | Aa |
| text-blue-700 | color: rgb(29 78 216);  | Aa |
| text-blue-800 | color: rgb(30 64 175);  | Aa |
| text-blue-900 | color: rgb(30 58 138);  | Aa |
| text-blue-950 | color: rgb(23 37 84);  | Aa |
| text-indigo-50 | color: rgb(238 242 255);  | Aa |
| text-indigo-100 | color: rgb(224 231 255);  | Aa |
| text-indigo-200 | color: rgb(199 210 254);  | Aa |
| text-indigo-300 | color: rgb(165 180 252);  | Aa |
| text-indigo-400 | color: rgb(129 140 248);  | Aa |
| text-indigo-500 | color: rgb(99 102 241);  | Aa |
| text-indigo-600 | color: rgb(79 70 229);  | Aa |
| text-indigo-700 | color: rgb(67 56 202);  | Aa |
| text-indigo-800 | color: rgb(55 48 163);  | Aa |
| text-indigo-900 | color: rgb(49 46 129);  | Aa |
| text-indigo-950 | color: rgb(30 27 75);  | Aa |
| text-violet-50 | color: rgb(245 243 255);  | Aa |
| text-violet-100 | color: rgb(237 233 254);  | Aa |
| text-violet-200 | color: rgb(221 214 254);  | Aa |
| text-violet-300 | color: rgb(196 181 253);  | Aa |
| text-violet-400 | color: rgb(167 139 250);  | Aa |
| text-violet-500 | color: rgb(139 92 246);  | Aa |
| text-violet-600 | color: rgb(124 58 237);  | Aa |
| text-violet-700 | color: rgb(109 40 217);  | Aa |
| text-violet-800 | color: rgb(91 33 182);  | Aa |
| text-violet-900 | color: rgb(76 29 149);  | Aa |
| text-violet-950 | color: rgb(46 16 101);  | Aa |
| text-purple-50 | color: rgb(250 245 255);  | Aa |
| text-purple-100 | color: rgb(243 232 255);  | Aa |
| text-purple-200 | color: rgb(233 213 255);  | Aa |
| text-purple-300 | color: rgb(216 180 254);  | Aa |
| text-purple-400 | color: rgb(192 132 252);  | Aa |
| text-purple-500 | color: rgb(168 85 247);  | Aa |
| text-purple-600 | color: rgb(147 51 234);  | Aa |
| text-purple-700 | color: rgb(126 34 206);  | Aa |
| text-purple-800 | color: rgb(107 33 168);  | Aa |
| text-purple-900 | color: rgb(88 28 135);  | Aa |
| text-purple-950 | color: rgb(59 7 100);  | Aa |
| text-fuchsia-50 | color: rgb(253 244 255);  | Aa |
| text-fuchsia-100 | color: rgb(250 232 255);  | Aa |
| text-fuchsia-200 | color: rgb(245 208 254);  | Aa |
| text-fuchsia-300 | color: rgb(240 171 252);  | Aa |
| text-fuchsia-400 | color: rgb(232 121 249);  | Aa |
| text-fuchsia-500 | color: rgb(217 70 239);  | Aa |
| text-fuchsia-600 | color: rgb(192 38 211);  | Aa |
| text-fuchsia-700 | color: rgb(162 28 175);  | Aa |
| text-fuchsia-800 | color: rgb(134 25 143);  | Aa |
| text-fuchsia-900 | color: rgb(112 26 117);  | Aa |
| text-fuchsia-950 | color: rgb(74 4 78);  | Aa |
| text-pink-50 | color: rgb(253 242 248);  | Aa |
| text-pink-100 | color: rgb(252 231 243);  | Aa |
| text-pink-200 | color: rgb(251 207 232);  | Aa |
| text-pink-300 | color: rgb(249 168 212);  | Aa |
| text-pink-400 | color: rgb(244 114 182);  | Aa |
| text-pink-500 | color: rgb(236 72 153);  | Aa |
| text-pink-600 | color: rgb(219 39 119);  | Aa |
| text-pink-700 | color: rgb(190 24 93);  | Aa |
| text-pink-800 | color: rgb(157 23 77);  | Aa |
| text-pink-900 | color: rgb(131 24 67);  | Aa |
| text-pink-950 | color: rgb(80 7 36);  | Aa |
| text-rose-50 | color: rgb(255 241 242);  | Aa |
| text-rose-100 | color: rgb(255 228 230);  | Aa |
| text-rose-200 | color: rgb(254 205 211);  | Aa |
| text-rose-300 | color: rgb(253 164 175);  | Aa |
| text-rose-400 | color: rgb(251 113 133);  | Aa |
| text-rose-500 | color: rgb(244 63 94);  | Aa |
| text-rose-600 | color: rgb(225 29 72);  | Aa |
| text-rose-700 | color: rgb(190 18 60);  | Aa |
| text-rose-800 | color: rgb(159 18 57);  | Aa |
| text-rose-900 | color: rgb(136 19 55);  | Aa |
| text-rose-950 | color: rgb(76 5 25);  | Aa |






Basic usage
-----------

 ### Setting the text color

 Control the text color of an element using the `text-{color}` utilities.

 
```
<p class="text-blue-600">The quick brown fox...</p><p class="text-sky-400">The quick brown fox...</p>
```
 ### Changing the opacity

 Control the opacity of an element’s text color using the color opacity modifier.

 
```
<p class="text-blue-600/100">The quick brown fox...</p>
<p class="text-blue-600/75">The quick brown fox...</p>
<p class="text-blue-600/50">The quick brown fox...</p>
<p class="text-blue-600/25">The quick brown fox...</p>
<p class="text-blue-600/0">The quick brown fox...</p><p class="text-sky-400/100">The quick brown fox...</p>
<p class="text-sky-400/75">The quick brown fox...</p>
<p class="text-sky-400/50">The quick brown fox...</p>
<p class="text-sky-400/25">The quick brown fox...</p>
<p class="text-sky-400/0">The quick brown fox...</p>
```
 You can use any value defined in your [opacity scale](opacity), or use arbitrary values if you need to deviate from your design tokens.

 
```
<p class="text-blue-600/[.06]">The quick brown fox...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:text-blue-600` to only apply the `text-blue-600` utility on hover.



```
<p class="text-slate-500 hover:text-blue-600">The quick brown fox...</p><p class="text-slate-400 hover:text-sky-400">The quick brown fox...</p>
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:text-green-600` to apply the `text-green-600` utility at only medium screen sizes and above.



```
<p class="text-blue-600 md:text-green-600">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as text colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your text colors by editing `theme.textColor` or `theme.extend.textColor` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `color` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<p class="text-[#50d71e]">
  <!-- ... -->
</p>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/text-color>

Text Decoration
===============


Utilities for controlling the decoration of text.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| underline | text-decoration-line: underline;  |
| overline | text-decoration-line: overline;  |
| line-through | text-decoration-line: line-through;  |
| no-underline | text-decoration-line: none;  |






Basic usage
-----------

 ### Setting the text decoration

 Control how text is decorated with the `underline`, `no-underline`, and `line-through` utilities.

 
```
<p class="underline ...">The quick brown fox ...</p>
<p class="overline ...">The quick brown fox ...</p>
<p class="line-through ...">The quick brown fox ...</p>
<p class="no-underline ...">The quick brown fox ...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:text-center` to only apply the `text-center` utility on hover.



```
<a href="#" class="no-underline hover:underline ...">Link</a>
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:underline` to apply the `underline` utility at only medium screen sizes and above.



```
<p class="no-underline md:underline">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/text-decoration>

Text Decoration Color
=====================


Utilities for controlling the color of text decorations.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| decoration-inherit | text-decoration-color: inherit;  |
| decoration-current | text-decoration-color: currentColor;  |
| decoration-transparent | text-decoration-color: transparent;  |
| decoration-black | text-decoration-color: #000;  |
| decoration-white | text-decoration-color: #fff;  |
| decoration-slate-50 | text-decoration-color: #f8fafc;  |
| decoration-slate-100 | text-decoration-color: #f1f5f9;  |
| decoration-slate-200 | text-decoration-color: #e2e8f0;  |
| decoration-slate-300 | text-decoration-color: #cbd5e1;  |
| decoration-slate-400 | text-decoration-color: #94a3b8;  |
| decoration-slate-500 | text-decoration-color: #64748b;  |
| decoration-slate-600 | text-decoration-color: #475569;  |
| decoration-slate-700 | text-decoration-color: #334155;  |
| decoration-slate-800 | text-decoration-color: #1e293b;  |
| decoration-slate-900 | text-decoration-color: #0f172a;  |
| decoration-slate-950 | text-decoration-color: #020617;  |
| decoration-gray-50 | text-decoration-color: #f9fafb;  |
| decoration-gray-100 | text-decoration-color: #f3f4f6;  |
| decoration-gray-200 | text-decoration-color: #e5e7eb;  |
| decoration-gray-300 | text-decoration-color: #d1d5db;  |
| decoration-gray-400 | text-decoration-color: #9ca3af;  |
| decoration-gray-500 | text-decoration-color: #6b7280;  |
| decoration-gray-600 | text-decoration-color: #4b5563;  |
| decoration-gray-700 | text-decoration-color: #374151;  |
| decoration-gray-800 | text-decoration-color: #1f2937;  |
| decoration-gray-900 | text-decoration-color: #111827;  |
| decoration-gray-950 | text-decoration-color: #030712;  |
| decoration-zinc-50 | text-decoration-color: #fafafa;  |
| decoration-zinc-100 | text-decoration-color: #f4f4f5;  |
| decoration-zinc-200 | text-decoration-color: #e4e4e7;  |
| decoration-zinc-300 | text-decoration-color: #d4d4d8;  |
| decoration-zinc-400 | text-decoration-color: #a1a1aa;  |
| decoration-zinc-500 | text-decoration-color: #71717a;  |
| decoration-zinc-600 | text-decoration-color: #52525b;  |
| decoration-zinc-700 | text-decoration-color: #3f3f46;  |
| decoration-zinc-800 | text-decoration-color: #27272a;  |
| decoration-zinc-900 | text-decoration-color: #18181b;  |
| decoration-zinc-950 | text-decoration-color: #09090b;  |
| decoration-neutral-50 | text-decoration-color: #fafafa;  |
| decoration-neutral-100 | text-decoration-color: #f5f5f5;  |
| decoration-neutral-200 | text-decoration-color: #e5e5e5;  |
| decoration-neutral-300 | text-decoration-color: #d4d4d4;  |
| decoration-neutral-400 | text-decoration-color: #a3a3a3;  |
| decoration-neutral-500 | text-decoration-color: #737373;  |
| decoration-neutral-600 | text-decoration-color: #525252;  |
| decoration-neutral-700 | text-decoration-color: #404040;  |
| decoration-neutral-800 | text-decoration-color: #262626;  |
| decoration-neutral-900 | text-decoration-color: #171717;  |
| decoration-neutral-950 | text-decoration-color: #0a0a0a;  |
| decoration-stone-50 | text-decoration-color: #fafaf9;  |
| decoration-stone-100 | text-decoration-color: #f5f5f4;  |
| decoration-stone-200 | text-decoration-color: #e7e5e4;  |
| decoration-stone-300 | text-decoration-color: #d6d3d1;  |
| decoration-stone-400 | text-decoration-color: #a8a29e;  |
| decoration-stone-500 | text-decoration-color: #78716c;  |
| decoration-stone-600 | text-decoration-color: #57534e;  |
| decoration-stone-700 | text-decoration-color: #44403c;  |
| decoration-stone-800 | text-decoration-color: #292524;  |
| decoration-stone-900 | text-decoration-color: #1c1917;  |
| decoration-stone-950 | text-decoration-color: #0c0a09;  |
| decoration-red-50 | text-decoration-color: #fef2f2;  |
| decoration-red-100 | text-decoration-color: #fee2e2;  |
| decoration-red-200 | text-decoration-color: #fecaca;  |
| decoration-red-300 | text-decoration-color: #fca5a5;  |
| decoration-red-400 | text-decoration-color: #f87171;  |
| decoration-red-500 | text-decoration-color: #ef4444;  |
| decoration-red-600 | text-decoration-color: #dc2626;  |
| decoration-red-700 | text-decoration-color: #b91c1c;  |
| decoration-red-800 | text-decoration-color: #991b1b;  |
| decoration-red-900 | text-decoration-color: #7f1d1d;  |
| decoration-red-950 | text-decoration-color: #450a0a;  |
| decoration-orange-50 | text-decoration-color: #fff7ed;  |
| decoration-orange-100 | text-decoration-color: #ffedd5;  |
| decoration-orange-200 | text-decoration-color: #fed7aa;  |
| decoration-orange-300 | text-decoration-color: #fdba74;  |
| decoration-orange-400 | text-decoration-color: #fb923c;  |
| decoration-orange-500 | text-decoration-color: #f97316;  |
| decoration-orange-600 | text-decoration-color: #ea580c;  |
| decoration-orange-700 | text-decoration-color: #c2410c;  |
| decoration-orange-800 | text-decoration-color: #9a3412;  |
| decoration-orange-900 | text-decoration-color: #7c2d12;  |
| decoration-orange-950 | text-decoration-color: #431407;  |
| decoration-amber-50 | text-decoration-color: #fffbeb;  |
| decoration-amber-100 | text-decoration-color: #fef3c7;  |
| decoration-amber-200 | text-decoration-color: #fde68a;  |
| decoration-amber-300 | text-decoration-color: #fcd34d;  |
| decoration-amber-400 | text-decoration-color: #fbbf24;  |
| decoration-amber-500 | text-decoration-color: #f59e0b;  |
| decoration-amber-600 | text-decoration-color: #d97706;  |
| decoration-amber-700 | text-decoration-color: #b45309;  |
| decoration-amber-800 | text-decoration-color: #92400e;  |
| decoration-amber-900 | text-decoration-color: #78350f;  |
| decoration-amber-950 | text-decoration-color: #451a03;  |
| decoration-yellow-50 | text-decoration-color: #fefce8;  |
| decoration-yellow-100 | text-decoration-color: #fef9c3;  |
| decoration-yellow-200 | text-decoration-color: #fef08a;  |
| decoration-yellow-300 | text-decoration-color: #fde047;  |
| decoration-yellow-400 | text-decoration-color: #facc15;  |
| decoration-yellow-500 | text-decoration-color: #eab308;  |
| decoration-yellow-600 | text-decoration-color: #ca8a04;  |
| decoration-yellow-700 | text-decoration-color: #a16207;  |
| decoration-yellow-800 | text-decoration-color: #854d0e;  |
| decoration-yellow-900 | text-decoration-color: #713f12;  |
| decoration-yellow-950 | text-decoration-color: #422006;  |
| decoration-lime-50 | text-decoration-color: #f7fee7;  |
| decoration-lime-100 | text-decoration-color: #ecfccb;  |
| decoration-lime-200 | text-decoration-color: #d9f99d;  |
| decoration-lime-300 | text-decoration-color: #bef264;  |
| decoration-lime-400 | text-decoration-color: #a3e635;  |
| decoration-lime-500 | text-decoration-color: #84cc16;  |
| decoration-lime-600 | text-decoration-color: #65a30d;  |
| decoration-lime-700 | text-decoration-color: #4d7c0f;  |
| decoration-lime-800 | text-decoration-color: #3f6212;  |
| decoration-lime-900 | text-decoration-color: #365314;  |
| decoration-lime-950 | text-decoration-color: #1a2e05;  |
| decoration-green-50 | text-decoration-color: #f0fdf4;  |
| decoration-green-100 | text-decoration-color: #dcfce7;  |
| decoration-green-200 | text-decoration-color: #bbf7d0;  |
| decoration-green-300 | text-decoration-color: #86efac;  |
| decoration-green-400 | text-decoration-color: #4ade80;  |
| decoration-green-500 | text-decoration-color: #22c55e;  |
| decoration-green-600 | text-decoration-color: #16a34a;  |
| decoration-green-700 | text-decoration-color: #15803d;  |
| decoration-green-800 | text-decoration-color: #166534;  |
| decoration-green-900 | text-decoration-color: #14532d;  |
| decoration-green-950 | text-decoration-color: #052e16;  |
| decoration-emerald-50 | text-decoration-color: #ecfdf5;  |
| decoration-emerald-100 | text-decoration-color: #d1fae5;  |
| decoration-emerald-200 | text-decoration-color: #a7f3d0;  |
| decoration-emerald-300 | text-decoration-color: #6ee7b7;  |
| decoration-emerald-400 | text-decoration-color: #34d399;  |
| decoration-emerald-500 | text-decoration-color: #10b981;  |
| decoration-emerald-600 | text-decoration-color: #059669;  |
| decoration-emerald-700 | text-decoration-color: #047857;  |
| decoration-emerald-800 | text-decoration-color: #065f46;  |
| decoration-emerald-900 | text-decoration-color: #064e3b;  |
| decoration-emerald-950 | text-decoration-color: #022c22;  |
| decoration-teal-50 | text-decoration-color: #f0fdfa;  |
| decoration-teal-100 | text-decoration-color: #ccfbf1;  |
| decoration-teal-200 | text-decoration-color: #99f6e4;  |
| decoration-teal-300 | text-decoration-color: #5eead4;  |
| decoration-teal-400 | text-decoration-color: #2dd4bf;  |
| decoration-teal-500 | text-decoration-color: #14b8a6;  |
| decoration-teal-600 | text-decoration-color: #0d9488;  |
| decoration-teal-700 | text-decoration-color: #0f766e;  |
| decoration-teal-800 | text-decoration-color: #115e59;  |
| decoration-teal-900 | text-decoration-color: #134e4a;  |
| decoration-teal-950 | text-decoration-color: #042f2e;  |
| decoration-cyan-50 | text-decoration-color: #ecfeff;  |
| decoration-cyan-100 | text-decoration-color: #cffafe;  |
| decoration-cyan-200 | text-decoration-color: #a5f3fc;  |
| decoration-cyan-300 | text-decoration-color: #67e8f9;  |
| decoration-cyan-400 | text-decoration-color: #22d3ee;  |
| decoration-cyan-500 | text-decoration-color: #06b6d4;  |
| decoration-cyan-600 | text-decoration-color: #0891b2;  |
| decoration-cyan-700 | text-decoration-color: #0e7490;  |
| decoration-cyan-800 | text-decoration-color: #155e75;  |
| decoration-cyan-900 | text-decoration-color: #164e63;  |
| decoration-cyan-950 | text-decoration-color: #083344;  |
| decoration-sky-50 | text-decoration-color: #f0f9ff;  |
| decoration-sky-100 | text-decoration-color: #e0f2fe;  |
| decoration-sky-200 | text-decoration-color: #bae6fd;  |
| decoration-sky-300 | text-decoration-color: #7dd3fc;  |
| decoration-sky-400 | text-decoration-color: #38bdf8;  |
| decoration-sky-500 | text-decoration-color: #0ea5e9;  |
| decoration-sky-600 | text-decoration-color: #0284c7;  |
| decoration-sky-700 | text-decoration-color: #0369a1;  |
| decoration-sky-800 | text-decoration-color: #075985;  |
| decoration-sky-900 | text-decoration-color: #0c4a6e;  |
| decoration-sky-950 | text-decoration-color: #082f49;  |
| decoration-blue-50 | text-decoration-color: #eff6ff;  |
| decoration-blue-100 | text-decoration-color: #dbeafe;  |
| decoration-blue-200 | text-decoration-color: #bfdbfe;  |
| decoration-blue-300 | text-decoration-color: #93c5fd;  |
| decoration-blue-400 | text-decoration-color: #60a5fa;  |
| decoration-blue-500 | text-decoration-color: #3b82f6;  |
| decoration-blue-600 | text-decoration-color: #2563eb;  |
| decoration-blue-700 | text-decoration-color: #1d4ed8;  |
| decoration-blue-800 | text-decoration-color: #1e40af;  |
| decoration-blue-900 | text-decoration-color: #1e3a8a;  |
| decoration-blue-950 | text-decoration-color: #172554;  |
| decoration-indigo-50 | text-decoration-color: #eef2ff;  |
| decoration-indigo-100 | text-decoration-color: #e0e7ff;  |
| decoration-indigo-200 | text-decoration-color: #c7d2fe;  |
| decoration-indigo-300 | text-decoration-color: #a5b4fc;  |
| decoration-indigo-400 | text-decoration-color: #818cf8;  |
| decoration-indigo-500 | text-decoration-color: #6366f1;  |
| decoration-indigo-600 | text-decoration-color: #4f46e5;  |
| decoration-indigo-700 | text-decoration-color: #4338ca;  |
| decoration-indigo-800 | text-decoration-color: #3730a3;  |
| decoration-indigo-900 | text-decoration-color: #312e81;  |
| decoration-indigo-950 | text-decoration-color: #1e1b4b;  |
| decoration-violet-50 | text-decoration-color: #f5f3ff;  |
| decoration-violet-100 | text-decoration-color: #ede9fe;  |
| decoration-violet-200 | text-decoration-color: #ddd6fe;  |
| decoration-violet-300 | text-decoration-color: #c4b5fd;  |
| decoration-violet-400 | text-decoration-color: #a78bfa;  |
| decoration-violet-500 | text-decoration-color: #8b5cf6;  |
| decoration-violet-600 | text-decoration-color: #7c3aed;  |
| decoration-violet-700 | text-decoration-color: #6d28d9;  |
| decoration-violet-800 | text-decoration-color: #5b21b6;  |
| decoration-violet-900 | text-decoration-color: #4c1d95;  |
| decoration-violet-950 | text-decoration-color: #2e1065;  |
| decoration-purple-50 | text-decoration-color: #faf5ff;  |
| decoration-purple-100 | text-decoration-color: #f3e8ff;  |
| decoration-purple-200 | text-decoration-color: #e9d5ff;  |
| decoration-purple-300 | text-decoration-color: #d8b4fe;  |
| decoration-purple-400 | text-decoration-color: #c084fc;  |
| decoration-purple-500 | text-decoration-color: #a855f7;  |
| decoration-purple-600 | text-decoration-color: #9333ea;  |
| decoration-purple-700 | text-decoration-color: #7e22ce;  |
| decoration-purple-800 | text-decoration-color: #6b21a8;  |
| decoration-purple-900 | text-decoration-color: #581c87;  |
| decoration-purple-950 | text-decoration-color: #3b0764;  |
| decoration-fuchsia-50 | text-decoration-color: #fdf4ff;  |
| decoration-fuchsia-100 | text-decoration-color: #fae8ff;  |
| decoration-fuchsia-200 | text-decoration-color: #f5d0fe;  |
| decoration-fuchsia-300 | text-decoration-color: #f0abfc;  |
| decoration-fuchsia-400 | text-decoration-color: #e879f9;  |
| decoration-fuchsia-500 | text-decoration-color: #d946ef;  |
| decoration-fuchsia-600 | text-decoration-color: #c026d3;  |
| decoration-fuchsia-700 | text-decoration-color: #a21caf;  |
| decoration-fuchsia-800 | text-decoration-color: #86198f;  |
| decoration-fuchsia-900 | text-decoration-color: #701a75;  |
| decoration-fuchsia-950 | text-decoration-color: #4a044e;  |
| decoration-pink-50 | text-decoration-color: #fdf2f8;  |
| decoration-pink-100 | text-decoration-color: #fce7f3;  |
| decoration-pink-200 | text-decoration-color: #fbcfe8;  |
| decoration-pink-300 | text-decoration-color: #f9a8d4;  |
| decoration-pink-400 | text-decoration-color: #f472b6;  |
| decoration-pink-500 | text-decoration-color: #ec4899;  |
| decoration-pink-600 | text-decoration-color: #db2777;  |
| decoration-pink-700 | text-decoration-color: #be185d;  |
| decoration-pink-800 | text-decoration-color: #9d174d;  |
| decoration-pink-900 | text-decoration-color: #831843;  |
| decoration-pink-950 | text-decoration-color: #500724;  |
| decoration-rose-50 | text-decoration-color: #fff1f2;  |
| decoration-rose-100 | text-decoration-color: #ffe4e6;  |
| decoration-rose-200 | text-decoration-color: #fecdd3;  |
| decoration-rose-300 | text-decoration-color: #fda4af;  |
| decoration-rose-400 | text-decoration-color: #fb7185;  |
| decoration-rose-500 | text-decoration-color: #f43f5e;  |
| decoration-rose-600 | text-decoration-color: #e11d48;  |
| decoration-rose-700 | text-decoration-color: #be123c;  |
| decoration-rose-800 | text-decoration-color: #9f1239;  |
| decoration-rose-900 | text-decoration-color: #881337;  |
| decoration-rose-950 | text-decoration-color: #4c0519;  |






Basic usage
-----------

 ### Setting the text decoration color

 Use the `decoration-{color}` utilities to change the color of an element’s [text decoration](text-decoration).

 
```
<div>
  <p>
    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at
    <a class="underline decoration-sky-500">My Company, Inc</a>.
    Outside of work, I like to <a class="underline decoration-pink-500">watch
    pod-racing</a> and have <a class="underline decoration-indigo-500">light-saber</a> fights.
  </p>
</div>
```
 ### Changing the opacity

 Control the opacity of an element’s text decoration color using the color opacity modifier.

 
```
<div>
  <p>
    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at
    <a class="underline decoration-sky-500/30">My Company, Inc</a>.
    Outside of work, I like to <a class="underline decoration-pink-500/30">watch
    pod-racing</a> and have <a class="underline decoration-indigo-500/30">light-saber</a> fights.
  </p>
</div>
```
 You can use any value defined in your [opacity scale](opacity), or use arbitrary values if you need to deviate from your design tokens.

 
```
<strong class="underline decoration-sky-500/[.33]"></strong>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:decoration-blue-400` to only apply the `decoration-blue-400` utility on hover.



```
<p class="underline decoration-sky-600 hover:decoration-blue-400">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:decoration-blue-400` to apply the `decoration-blue-400` utility at only medium screen sizes and above.



```
<p class="underline decoration-sky-600 md:decoration-blue-400">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as text decoration colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your text decoration colors by editing `theme.textDecorationColor` or `theme.extend.textDecorationColor` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `text-decoration-color` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<p class="decoration-[#50d71e]">
  <!-- ... -->
</p>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/text-decoration-color>

Text Decoration Style
=====================


Utilities for controlling the style of text decorations.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| decoration-solid | text-decoration-style: solid;  |
| decoration-double | text-decoration-style: double;  |
| decoration-dotted | text-decoration-style: dotted;  |
| decoration-dashed | text-decoration-style: dashed;  |
| decoration-wavy | text-decoration-style: wavy;  |






Basic usage
-----------

 ### Setting the text decoration style

 Use the `decoration-{style}` utilities to change the style of an element’s [text decoration](text-decoration).

 
```
<p class="underline decoration-solid ...">The quick brown fox...</p>
<p class="underline decoration-double ...">The quick brown fox...</p>
<p class="underline decoration-dotted ...">The quick brown fox...</p>
<p class="underline decoration-dashed ...">The quick brown fox...</p>
<p class="underline decoration-wavy ...">The quick brown fox...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:decoration-dashed` to only apply the `decoration-dashed` utility on hover.



```
<p class="underline hover:decoration-dashed">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:decoration-dashed` to apply the `decoration-dashed` utility at only medium screen sizes and above.



```
<p class="underline md:decoration-dashed">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/text-decoration-style>

Text Decoration Thickness
=========================


Utilities for controlling the thickness of text decorations.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| decoration-auto | text-decoration-thickness: auto;  |
| decoration-from-font | text-decoration-thickness: from-font;  |
| decoration-0 | text-decoration-thickness: 0px;  |
| decoration-1 | text-decoration-thickness: 1px;  |
| decoration-2 | text-decoration-thickness: 2px;  |
| decoration-4 | text-decoration-thickness: 4px;  |
| decoration-8 | text-decoration-thickness: 8px;  |






Basic usage
-----------

 ### Setting the text decoration thickness

 Use the `decoration-{width}` utilities to change the thickness of an element’s [text decoration](text-decoration).

 
```
<p class="underline decoration-1 ...">The quick brown fox...</p>
<p class="underline decoration-2 ...">The quick brown fox...</p>
<p class="underline decoration-4 ...">The quick brown fox...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:decoration-4` to only apply the `decoration-4` utility on hover.



```
<p class="underline hover:decoration-4">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:decoration-4` to apply the `decoration-4` utility at only medium screen sizes and above.



```
<p class="underline md:decoration-4">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 You can customize the `decoration-{width}` utilities by editing `theme.textDecorationThickness` or `theme.extend.textDecorationThickness` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      textDecorationThickness: {
        3: '3px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `text-decoration-thickness` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<p class="decoration-[3px]">
  <!-- ... -->
</p>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/text-decoration-thickness>

Text Underline Offset
=====================


Utilities for controlling the offset of a text underline.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| underline-offset-auto | text-underline-offset: auto;  |
| underline-offset-0 | text-underline-offset: 0px;  |
| underline-offset-1 | text-underline-offset: 1px;  |
| underline-offset-2 | text-underline-offset: 2px;  |
| underline-offset-4 | text-underline-offset: 4px;  |
| underline-offset-8 | text-underline-offset: 8px;  |






Basic usage
-----------

 ### Setting the underline offset

 Use the `underline-offset-{width}` utilities to change the offset of a text underline.

 
```
<p class="underline underline-offset-1 ...">The quick brown fox...</p>
<p class="underline underline-offset-2 ...">The quick brown fox...</p>
<p class="underline underline-offset-4 ...">The quick brown fox...</p>
<p class="underline underline-offset-8 ...">The quick brown fox...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:underline-offset-4` to only apply the `underline-offset-4` utility on hover.



```
<p class="underline hover:underline-offset-4">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:underline-offset-4` to apply the `underline-offset-4` utility at only medium screen sizes and above.



```
<p class="underline md:underline-offset-4">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 You can customize the `underline-offset-{width}` utilities by editing `theme.textUnderlineOffset` or `theme.extend.textUnderlineOffset` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      textUnderlineOffset: {
        3: '3px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `text-underline-offset` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<p class="underline-offset-[3px]">
  <!-- ... -->
</p>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/text-underline-offset>

Text Transform
==============


Utilities for controlling the transformation of text.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| uppercase | text-transform: uppercase;  |
| lowercase | text-transform: lowercase;  |
| capitalize | text-transform: capitalize;  |
| normal-case | text-transform: none;  |






Basic usage
-----------

 ### Transforming text

 The `uppercase` and `lowercase` will uppercase and lowercase text respectively, whereas `capitalize` utility will convert text to title-case. The `normal-case` utility can be used to preserve the original casing — typically to reset capitalization at different breakpoints.

 
```
<p class="normal-case ...">The quick brown fox ...</p>
<p class="uppercase ...">The quick brown fox ...</p>
<p class="lowercase ...">The quick brown fox ...</p>
<p class="capitalize ...">The quick brown fox ...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:uppercase` to only apply the `uppercase` utility on hover.



```
<p class="capitalize hover:uppercase">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:uppercase` to apply the `uppercase` utility at only medium screen sizes and above.



```
<p class="capitalize md:uppercase">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/text-transform>

Text Overflow
=============


Utilities for controlling text overflow in an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  |
| text-ellipsis | text-overflow: ellipsis;  |
| text-clip | text-overflow: clip;  |






Basic usage
-----------

 ### Truncate

 Use `truncate` to truncate overflowing text with an ellipsis (`…`) if needed.

 
```
<p class="truncate ...">...</p>
```
 ### Ellipsis

 Use `text-ellipsis` to truncate overflowing text with an ellipsis (`…`) if needed.

 
```
<p class="text-ellipsis overflow-hidden ...">...</p>
```
 ### Clip

 Use `text-clip` to truncate the text at the limit of the content area.

 
```
<p class="text-clip overflow-hidden ...">...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:text-clip` to only apply the `text-clip` utility on hover.



```
<p class="truncate hover:text-clip">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:text-clip` to apply the `text-clip` utility at only medium screen sizes and above.



```
<p class="truncate md:text-clip">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/text-overflow>

Text Indent
===========


Utilities for controlling the amount of empty space shown before text in a block.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| indent-0 | text-indent: 0px;  |
| indent-px | text-indent: 1px;  |
| indent-0.5 | text-indent: 0.125rem; /\* 2px \*/ |
| indent-1 | text-indent: 0.25rem; /\* 4px \*/ |
| indent-1.5 | text-indent: 0.375rem; /\* 6px \*/ |
| indent-2 | text-indent: 0.5rem; /\* 8px \*/ |
| indent-2.5 | text-indent: 0.625rem; /\* 10px \*/ |
| indent-3 | text-indent: 0.75rem; /\* 12px \*/ |
| indent-3.5 | text-indent: 0.875rem; /\* 14px \*/ |
| indent-4 | text-indent: 1rem; /\* 16px \*/ |
| indent-5 | text-indent: 1.25rem; /\* 20px \*/ |
| indent-6 | text-indent: 1.5rem; /\* 24px \*/ |
| indent-7 | text-indent: 1.75rem; /\* 28px \*/ |
| indent-8 | text-indent: 2rem; /\* 32px \*/ |
| indent-9 | text-indent: 2.25rem; /\* 36px \*/ |
| indent-10 | text-indent: 2.5rem; /\* 40px \*/ |
| indent-11 | text-indent: 2.75rem; /\* 44px \*/ |
| indent-12 | text-indent: 3rem; /\* 48px \*/ |
| indent-14 | text-indent: 3.5rem; /\* 56px \*/ |
| indent-16 | text-indent: 4rem; /\* 64px \*/ |
| indent-20 | text-indent: 5rem; /\* 80px \*/ |
| indent-24 | text-indent: 6rem; /\* 96px \*/ |
| indent-28 | text-indent: 7rem; /\* 112px \*/ |
| indent-32 | text-indent: 8rem; /\* 128px \*/ |
| indent-36 | text-indent: 9rem; /\* 144px \*/ |
| indent-40 | text-indent: 10rem; /\* 160px \*/ |
| indent-44 | text-indent: 11rem; /\* 176px \*/ |
| indent-48 | text-indent: 12rem; /\* 192px \*/ |
| indent-52 | text-indent: 13rem; /\* 208px \*/ |
| indent-56 | text-indent: 14rem; /\* 224px \*/ |
| indent-60 | text-indent: 15rem; /\* 240px \*/ |
| indent-64 | text-indent: 16rem; /\* 256px \*/ |
| indent-72 | text-indent: 18rem; /\* 288px \*/ |
| indent-80 | text-indent: 20rem; /\* 320px \*/ |
| indent-96 | text-indent: 24rem; /\* 384px \*/ |






Basic usage
-----------

 ### Adding a text indent

 Use the `indent-{width}` utilities to set the amount of empty space (indentation) that’s shown before text in a block.

 
```
<p class="indent-8">
  So I started to walk into the water. I won't lie to you boys, I was
  terrified. But I pressed on, and as I made my way past the breakers
  a strange calm came over me. I don't know if it was divine intervention
  or the kinship of all living things but I tell you Jerry at that moment,
  I <em>was</em> a marine biologist.
</p>
```
 ### Using negative values

 To use a negative text indent value, prefix the class name with a dash to convert it to a negative value.

 
```
<div class="-indent-8">
  So I started to walk into the water. I won't lie to...
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:indent-8` to only apply the `indent-8` utility on hover.



```
<div class="indent-4 hover:indent-8">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:indent-8` to apply the `indent-8` utility at only medium screen sizes and above.



```
<div class="indent-4 md:indent-8">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 The default text indent scale is based on the [default spacing scale](customizing-spacing#default-spacing-scale). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

```

 Alternatively, you can customize just the text indent scale by editing `theme.textIndent` or `theme.extend.textIndent` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      textIndent: {
        '128': '32rem',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `text-indent` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="indent-[50%]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/text-indent>

Vertical Align
==============


Utilities for controlling the vertical alignment of an inline or table-cell box.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| align-baseline | vertical-align: baseline;  |
| align-top | vertical-align: top;  |
| align-middle | vertical-align: middle;  |
| align-bottom | vertical-align: bottom;  |
| align-text-top | vertical-align: text-top;  |
| align-text-bottom | vertical-align: text-bottom;  |
| align-sub | vertical-align: sub;  |
| align-super | vertical-align: super;  |






Basic usage
-----------

 ### Baseline

 Use `align-baseline` to align the baseline of an element with the baseline of its parent.

 
```
<span class="inline-block align-baseline ...">...</span>
```
 ### Top

 Use `align-top` to align the top of an element and its descendants with the top of the entire line.

 
```
<span class="inline-block align-top ...">...</span>
```
 ### Middle

 Use `align-middle` to align the middle of an element with the baseline plus half the x-height of the parent.

 
```
<span class="inline-block align-middle ...">...</span>
```
 ### Bottom

 Use `align-bottom` to align the bottom of an element and its descendants with the bottom of the entire line.

 
```
<span class="inline-block align-bottom ...">...</span>
```
 ### Text Top

 Use `align-text-top` to align the top of an element with the top of the parent element’s font.

 
```
<span class="inline-block align-text-top ...">...</span>
```
 ### Text Bottom

 Use `align-text-bottom` to align the bottom of an element with the bottom of the parent element’s font.

 
```
<span class="inline-block align-text-bottom ...">...</span>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:align-top` to only apply the `align-top` utility on hover.



```
<p class="align-middle hover:align-top">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:align-top` to apply the `align-top` utility at only medium screen sizes and above.



```
<p class="align-middle md:align-top">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Arbitrary values

 If you need to use a one-off `vertical-align` value that isn't included in Tailwind by default, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="align-[4px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/vertical-align>

Whitespace
==========


Utilities for controlling an element's white-space property.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| whitespace-normal | white-space: normal;  |
| whitespace-nowrap | white-space: nowrap;  |
| whitespace-pre | white-space: pre;  |
| whitespace-pre-line | white-space: pre-line;  |
| whitespace-pre-wrap | white-space: pre-wrap;  |
| whitespace-break-spaces | white-space: break-spaces;  |






Basic usage
-----------

 ### Normal

 Use `whitespace-normal` to cause text to wrap normally within an element. Newlines and spaces will be collapsed.

 
```
<div class="w-3/4 ...">
  <div class="whitespace-normal ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>
```
 ### No Wrap

 Use `whitespace-nowrap` to prevent text from wrapping within an element. Newlines and spaces will be collapsed.

 
```
<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-nowrap ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>
```
 ### Pre

 Use `whitespace-pre` to preserve newlines and spaces within an element. Text will not be wrapped.

 
```
<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-pre ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>
```
 ### Pre Line

 Use `whitespace-pre-line` to preserve newlines but not spaces within an element. Text will be wrapped normally.

 
```
<div class="w-3/4 ...">
  <div class="whitespace-pre-line ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>
```
 ### Pre Wrap

 Use `whitespace-pre-wrap` to preserve newlines and spaces within an element. Text will be wrapped normally.

 
```
<div class="w-3/4 ...">
  <div class="whitespace-pre-wrap ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>
```
 ### Break Spaces

 Use `whitespace-break-spaces` to preserve newlines and spaces within an element. White space at the end of lines will not hang, but will wrap to the next line.

 
```
<div class="w-3/4 ...">
  <div class="whitespace-break-spaces ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:whitespace-pre` to only apply the `whitespace-pre` utility on hover.



```
<div class="whitespace-normal hover:whitespace-pre">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:whitespace-pre` to apply the `whitespace-pre` utility at only medium screen sizes and above.



```
<div class="whitespace-normal md:whitespace-pre">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/whitespace>

Word Break
==========


Utilities for controlling word breaks in an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| break-normal | overflow-wrap: normal; word-break: normal;  |
| break-words | overflow-wrap: break-word;  |
| break-all | word-break: break-all;  |
| break-keep | word-break: keep-all;  |






Basic usage
-----------

 ### Normal

 Use `break-normal` to only add line breaks at normal word break points.

 
```
<p class="break-normal ...">...</p>
```
 ### Break Words

 Use `break-words` to add line breaks mid-word if needed.

 
```
<p class="break-words ...">...</p>
```
 ### Break All

 Use `break-all` to add line breaks whenever necessary, without trying to preserve whole words.

 
```
<p class="break-all ...">...</p>
```
 ### Break Keep

 Use `break-keep` to prevent line breaks from being applied to Chinese/Japanese/Korean (CJK) text. For non-CJK text `break-keep` has the same behavior as `break-normal`.

 
```
<p class="break-keep ...">...</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:break-all` to only apply the `break-all` utility on hover.



```
<p class="break-normal hover:break-all">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:break-all` to apply the `break-all` utility at only medium screen sizes and above.



```
<p class="break-normal md:break-all">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/word-break>

Hyphens
=======


Utilities for controlling how words should be hyphenated.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| hyphens-none | hyphens: none;  |
| hyphens-manual | hyphens: manual;  |
| hyphens-auto | hyphens: auto;  |






Basic usage
-----------

 ### None

 Use `hyphens-none` to prevent words from being hyphenated even if the line break suggestion `&shy;` is used:

 
```
<p class="hyphens-none ...">
  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...
</p>
```
 ### Manual

 Use `hyphens-manual` to only set hyphenation points where the line break suggestion `&shy;` is used:

 
```
<p class="hyphens-manual ...">
  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...
</p>
```
 ### Auto

 Use `hyphens-auto` to allow the browser to automatically choose hyphenation points based on the language. The line break suggestion `&shy;` will be preferred over automatic hyphenation points.

 
```
<p class="hyphens-auto ..." lang="de">
  ... Kraftfahrzeughaftpflichtversicherung is a ...
</p>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:hyphens-auto` to only apply the `hyphens-auto` utility on hover.



```
<p class="hyphens-none hover:hyphens-auto">
  <!-- ... -->
</p>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:hyphens-auto` to apply the `hyphens-auto` utility at only medium screen sizes and above.



```
<p class="hyphens-none md:hyphens-auto">
  <!-- ... -->
</p>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/hyphens>

Content
=======


Utilities for controlling the content of the before and after pseudo-elements.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| content-none | content: none;  |






Basic usage
-----------

 ### Setting a pseudo-element’s content

 Use the `content-{value}` utilities along with the `before` and `after` variant modifiers to set the contents of the `::before` and `::after` pseudo-elements.

 Out of the box, `content-none` is the only available preconfigured content utility. And while you can add additional utilities by [customizing your theme](content#customizing-your-theme), it generally makes more sense to just use an arbitrary value.

 Use the square bracket notation to define any arbitrary content value on the fly.

 
```
Higher resolution means more than just a better-quality image. With a Retina
6K display, <a class="text-blue-600 after:content-['_↗'] ..." href="https://www.
apple.com/pro-display-xdr/" target="_blank">Pro Display XDR</a> gives you
nearly 40 percent more screen real estate than a 5K display.Higher resolution means more than just a better-quality image. With a Retina
6K display, <a class="text-sky-400 after:content-['_↗'] ..." href="https://www.
apple.com/pro-display-xdr/" target="_blank">Pro Display XDR</a> gives you
nearly 40 percent more screen real estate than a 5K display.
```
 ### Referencing an attribute value

 These content utilities even support CSS features like the `attr()` function, which you can use to reference a value stored in an attribute:

 
```
<div before="Hello World" class="before:content-[attr(before)]">
  <!-- ... -->
</div>
```
 ### Using spaces and underscores

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

 
```
<div class="before:content-['Hello_World']">
  <!-- ... -->
</div>
```
 If you need to include an actual underscore, you can do this by escaping it with a backslash:

 
```
<div class="before:content-['Hello\_World']">
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:before:content-['Hovering']` to only apply the `before:content-['Hovering']` utility on hover.



```
<div class="before:content-['Not_Hovering'] hover:before:content-['Hovering']">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:before:content-['Desktop']` to apply the `before:content-['Desktop']` utility at only medium screen sizes and above.



```
<div class="before:content-['Mobile'] md:before:content-['Desktop']">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind only provides the `content-none` utility. You can customize these values by editing `theme.content` or `theme.extend.content` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      content: {
        'link': 'url("/icons/link.svg")',
      },
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `content` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="before:content-['Hello_World']">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/content>

Background Attachment
=====================


Utilities for controlling how a background image behaves when scrolling.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| bg-fixed | background-attachment: fixed;  |
| bg-local | background-attachment: local;  |
| bg-scroll | background-attachment: scroll;  |






Basic usage
-----------

 ### Fixed

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

 
```
<div class="bg-fixed ..." style="background-image: url(...)"></div>
```
 ### Local

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

 
```
<div class="bg-local ..." style="background-image: url(...)"></div>
```
 ### Scroll

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

 
```
<div class="bg-scroll ..." style="background-image: url(...)"></div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:bg-fixed` to only apply the `bg-fixed` utility on hover.



```
<div class="bg-local hover:bg-fixed">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:bg-fixed` to apply the `bg-fixed` utility at only medium screen sizes and above.



```
<div class="bg-local md:bg-fixed">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/background-attachment>

Background Clip
===============


Utilities for controlling the bounding box of an element's background.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| 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;  |






Basic usage
-----------

 ### Setting the background clip

 Use the `bg-clip-{keyword}` utilities to control the bounding box of an element’s background.

 
```
<div class="bg-clip-border p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
<div class="bg-clip-padding p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
<div class="bg-clip-content p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
```
 ### Cropping to text

 Use `bg-clip-text` to crop an element’s background to match the shape of the text. Useful for effects where you want a background image to be visible through the text.

 
```
<div class="text-5xl font-extrabold ...">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
    Hello world
  </span>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:bg-clip-padding` to only apply the `bg-clip-padding` utility on hover.



```
<div class="bg-clip-border hover:bg-clip-padding">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:bg-clip-padding` to apply the `bg-clip-padding` utility at only medium screen sizes and above.



```
<div class="bg-clip-border md:bg-clip-padding">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/background-clip>

Background Color
================


Utilities for controlling an element's background color.


Quick reference
---------------





| Class | Properties | 
Preview  |
| --- | --- | --- |
| bg-inherit | background-color: inherit;  |  |
| bg-current | background-color: currentColor;  |  |
| bg-transparent | background-color: transparent;  |  |
| bg-black | background-color: rgb(0 0 0);  |  |
| bg-white | background-color: rgb(255 255 255);  |  |
| bg-slate-50 | background-color: rgb(248 250 252);  |  |
| bg-slate-100 | background-color: rgb(241 245 249);  |  |
| bg-slate-200 | background-color: rgb(226 232 240);  |  |
| bg-slate-300 | background-color: rgb(203 213 225);  |  |
| bg-slate-400 | background-color: rgb(148 163 184);  |  |
| bg-slate-500 | background-color: rgb(100 116 139);  |  |
| bg-slate-600 | background-color: rgb(71 85 105);  |  |
| bg-slate-700 | background-color: rgb(51 65 85);  |  |
| bg-slate-800 | background-color: rgb(30 41 59);  |  |
| bg-slate-900 | background-color: rgb(15 23 42);  |  |
| bg-slate-950 | background-color: rgb(2 6 23);  |  |
| bg-gray-50 | background-color: rgb(249 250 251);  |  |
| bg-gray-100 | background-color: rgb(243 244 246);  |  |
| bg-gray-200 | background-color: rgb(229 231 235);  |  |
| bg-gray-300 | background-color: rgb(209 213 219);  |  |
| bg-gray-400 | background-color: rgb(156 163 175);  |  |
| bg-gray-500 | background-color: rgb(107 114 128);  |  |
| bg-gray-600 | background-color: rgb(75 85 99);  |  |
| bg-gray-700 | background-color: rgb(55 65 81);  |  |
| bg-gray-800 | background-color: rgb(31 41 55);  |  |
| bg-gray-900 | background-color: rgb(17 24 39);  |  |
| bg-gray-950 | background-color: rgb(3 7 18);  |  |
| bg-zinc-50 | background-color: rgb(250 250 250);  |  |
| bg-zinc-100 | background-color: rgb(244 244 245);  |  |
| bg-zinc-200 | background-color: rgb(228 228 231);  |  |
| bg-zinc-300 | background-color: rgb(212 212 216);  |  |
| bg-zinc-400 | background-color: rgb(161 161 170);  |  |
| bg-zinc-500 | background-color: rgb(113 113 122);  |  |
| bg-zinc-600 | background-color: rgb(82 82 91);  |  |
| bg-zinc-700 | background-color: rgb(63 63 70);  |  |
| bg-zinc-800 | background-color: rgb(39 39 42);  |  |
| bg-zinc-900 | background-color: rgb(24 24 27);  |  |
| bg-zinc-950 | background-color: rgb(9 9 11);  |  |
| bg-neutral-50 | background-color: rgb(250 250 250);  |  |
| bg-neutral-100 | background-color: rgb(245 245 245);  |  |
| bg-neutral-200 | background-color: rgb(229 229 229);  |  |
| bg-neutral-300 | background-color: rgb(212 212 212);  |  |
| bg-neutral-400 | background-color: rgb(163 163 163);  |  |
| bg-neutral-500 | background-color: rgb(115 115 115);  |  |
| bg-neutral-600 | background-color: rgb(82 82 82);  |  |
| bg-neutral-700 | background-color: rgb(64 64 64);  |  |
| bg-neutral-800 | background-color: rgb(38 38 38);  |  |
| bg-neutral-900 | background-color: rgb(23 23 23);  |  |
| bg-neutral-950 | background-color: rgb(10 10 10);  |  |
| bg-stone-50 | background-color: rgb(250 250 249);  |  |
| bg-stone-100 | background-color: rgb(245 245 244);  |  |
| bg-stone-200 | background-color: rgb(231 229 228);  |  |
| bg-stone-300 | background-color: rgb(214 211 209);  |  |
| bg-stone-400 | background-color: rgb(168 162 158);  |  |
| bg-stone-500 | background-color: rgb(120 113 108);  |  |
| bg-stone-600 | background-color: rgb(87 83 78);  |  |
| bg-stone-700 | background-color: rgb(68 64 60);  |  |
| bg-stone-800 | background-color: rgb(41 37 36);  |  |
| bg-stone-900 | background-color: rgb(28 25 23);  |  |
| bg-stone-950 | background-color: rgb(12 10 9);  |  |
| bg-red-50 | background-color: rgb(254 242 242);  |  |
| bg-red-100 | background-color: rgb(254 226 226);  |  |
| bg-red-200 | background-color: rgb(254 202 202);  |  |
| bg-red-300 | background-color: rgb(252 165 165);  |  |
| bg-red-400 | background-color: rgb(248 113 113);  |  |
| bg-red-500 | background-color: rgb(239 68 68);  |  |
| bg-red-600 | background-color: rgb(220 38 38);  |  |
| bg-red-700 | background-color: rgb(185 28 28);  |  |
| bg-red-800 | background-color: rgb(153 27 27);  |  |
| bg-red-900 | background-color: rgb(127 29 29);  |  |
| bg-red-950 | background-color: rgb(69 10 10);  |  |
| bg-orange-50 | background-color: rgb(255 247 237);  |  |
| bg-orange-100 | background-color: rgb(255 237 213);  |  |
| bg-orange-200 | background-color: rgb(254 215 170);  |  |
| bg-orange-300 | background-color: rgb(253 186 116);  |  |
| bg-orange-400 | background-color: rgb(251 146 60);  |  |
| bg-orange-500 | background-color: rgb(249 115 22);  |  |
| bg-orange-600 | background-color: rgb(234 88 12);  |  |
| bg-orange-700 | background-color: rgb(194 65 12);  |  |
| bg-orange-800 | background-color: rgb(154 52 18);  |  |
| bg-orange-900 | background-color: rgb(124 45 18);  |  |
| bg-orange-950 | background-color: rgb(67 20 7);  |  |
| bg-amber-50 | background-color: rgb(255 251 235);  |  |
| bg-amber-100 | background-color: rgb(254 243 199);  |  |
| bg-amber-200 | background-color: rgb(253 230 138);  |  |
| bg-amber-300 | background-color: rgb(252 211 77);  |  |
| bg-amber-400 | background-color: rgb(251 191 36);  |  |
| bg-amber-500 | background-color: rgb(245 158 11);  |  |
| bg-amber-600 | background-color: rgb(217 119 6);  |  |
| bg-amber-700 | background-color: rgb(180 83 9);  |  |
| bg-amber-800 | background-color: rgb(146 64 14);  |  |
| bg-amber-900 | background-color: rgb(120 53 15);  |  |
| bg-amber-950 | background-color: rgb(69 26 3);  |  |
| bg-yellow-50 | background-color: rgb(254 252 232);  |  |
| bg-yellow-100 | background-color: rgb(254 249 195);  |  |
| bg-yellow-200 | background-color: rgb(254 240 138);  |  |
| bg-yellow-300 | background-color: rgb(253 224 71);  |  |
| bg-yellow-400 | background-color: rgb(250 204 21);  |  |
| bg-yellow-500 | background-color: rgb(234 179 8);  |  |
| bg-yellow-600 | background-color: rgb(202 138 4);  |  |
| bg-yellow-700 | background-color: rgb(161 98 7);  |  |
| bg-yellow-800 | background-color: rgb(133 77 14);  |  |
| bg-yellow-900 | background-color: rgb(113 63 18);  |  |
| bg-yellow-950 | background-color: rgb(66 32 6);  |  |
| bg-lime-50 | background-color: rgb(247 254 231);  |  |
| bg-lime-100 | background-color: rgb(236 252 203);  |  |
| bg-lime-200 | background-color: rgb(217 249 157);  |  |
| bg-lime-300 | background-color: rgb(190 242 100);  |  |
| bg-lime-400 | background-color: rgb(163 230 53);  |  |
| bg-lime-500 | background-color: rgb(132 204 22);  |  |
| bg-lime-600 | background-color: rgb(101 163 13);  |  |
| bg-lime-700 | background-color: rgb(77 124 15);  |  |
| bg-lime-800 | background-color: rgb(63 98 18);  |  |
| bg-lime-900 | background-color: rgb(54 83 20);  |  |
| bg-lime-950 | background-color: rgb(26 46 5);  |  |
| bg-green-50 | background-color: rgb(240 253 244);  |  |
| bg-green-100 | background-color: rgb(220 252 231);  |  |
| bg-green-200 | background-color: rgb(187 247 208);  |  |
| bg-green-300 | background-color: rgb(134 239 172);  |  |
| bg-green-400 | background-color: rgb(74 222 128);  |  |
| bg-green-500 | background-color: rgb(34 197 94);  |  |
| bg-green-600 | background-color: rgb(22 163 74);  |  |
| bg-green-700 | background-color: rgb(21 128 61);  |  |
| bg-green-800 | background-color: rgb(22 101 52);  |  |
| bg-green-900 | background-color: rgb(20 83 45);  |  |
| bg-green-950 | background-color: rgb(5 46 22);  |  |
| bg-emerald-50 | background-color: rgb(236 253 245);  |  |
| bg-emerald-100 | background-color: rgb(209 250 229);  |  |
| bg-emerald-200 | background-color: rgb(167 243 208);  |  |
| bg-emerald-300 | background-color: rgb(110 231 183);  |  |
| bg-emerald-400 | background-color: rgb(52 211 153);  |  |
| bg-emerald-500 | background-color: rgb(16 185 129);  |  |
| bg-emerald-600 | background-color: rgb(5 150 105);  |  |
| bg-emerald-700 | background-color: rgb(4 120 87);  |  |
| bg-emerald-800 | background-color: rgb(6 95 70);  |  |
| bg-emerald-900 | background-color: rgb(6 78 59);  |  |
| bg-emerald-950 | background-color: rgb(2 44 34);  |  |
| bg-teal-50 | background-color: rgb(240 253 250);  |  |
| bg-teal-100 | background-color: rgb(204 251 241);  |  |
| bg-teal-200 | background-color: rgb(153 246 228);  |  |
| bg-teal-300 | background-color: rgb(94 234 212);  |  |
| bg-teal-400 | background-color: rgb(45 212 191);  |  |
| bg-teal-500 | background-color: rgb(20 184 166);  |  |
| bg-teal-600 | background-color: rgb(13 148 136);  |  |
| bg-teal-700 | background-color: rgb(15 118 110);  |  |
| bg-teal-800 | background-color: rgb(17 94 89);  |  |
| bg-teal-900 | background-color: rgb(19 78 74);  |  |
| bg-teal-950 | background-color: rgb(4 47 46);  |  |
| bg-cyan-50 | background-color: rgb(236 254 255);  |  |
| bg-cyan-100 | background-color: rgb(207 250 254);  |  |
| bg-cyan-200 | background-color: rgb(165 243 252);  |  |
| bg-cyan-300 | background-color: rgb(103 232 249);  |  |
| bg-cyan-400 | background-color: rgb(34 211 238);  |  |
| bg-cyan-500 | background-color: rgb(6 182 212);  |  |
| bg-cyan-600 | background-color: rgb(8 145 178);  |  |
| bg-cyan-700 | background-color: rgb(14 116 144);  |  |
| bg-cyan-800 | background-color: rgb(21 94 117);  |  |
| bg-cyan-900 | background-color: rgb(22 78 99);  |  |
| bg-cyan-950 | background-color: rgb(8 51 68);  |  |
| bg-sky-50 | background-color: rgb(240 249 255);  |  |
| bg-sky-100 | background-color: rgb(224 242 254);  |  |
| bg-sky-200 | background-color: rgb(186 230 253);  |  |
| bg-sky-300 | background-color: rgb(125 211 252);  |  |
| bg-sky-400 | background-color: rgb(56 189 248);  |  |
| bg-sky-500 | background-color: rgb(14 165 233);  |  |
| bg-sky-600 | background-color: rgb(2 132 199);  |  |
| bg-sky-700 | background-color: rgb(3 105 161);  |  |
| bg-sky-800 | background-color: rgb(7 89 133);  |  |
| bg-sky-900 | background-color: rgb(12 74 110);  |  |
| bg-sky-950 | background-color: rgb(8 47 73);  |  |
| bg-blue-50 | background-color: rgb(239 246 255);  |  |
| bg-blue-100 | background-color: rgb(219 234 254);  |  |
| bg-blue-200 | background-color: rgb(191 219 254);  |  |
| bg-blue-300 | background-color: rgb(147 197 253);  |  |
| bg-blue-400 | background-color: rgb(96 165 250);  |  |
| bg-blue-500 | background-color: rgb(59 130 246);  |  |
| bg-blue-600 | background-color: rgb(37 99 235);  |  |
| bg-blue-700 | background-color: rgb(29 78 216);  |  |
| bg-blue-800 | background-color: rgb(30 64 175);  |  |
| bg-blue-900 | background-color: rgb(30 58 138);  |  |
| bg-blue-950 | background-color: rgb(23 37 84);  |  |
| bg-indigo-50 | background-color: rgb(238 242 255);  |  |
| bg-indigo-100 | background-color: rgb(224 231 255);  |  |
| bg-indigo-200 | background-color: rgb(199 210 254);  |  |
| bg-indigo-300 | background-color: rgb(165 180 252);  |  |
| bg-indigo-400 | background-color: rgb(129 140 248);  |  |
| bg-indigo-500 | background-color: rgb(99 102 241);  |  |
| bg-indigo-600 | background-color: rgb(79 70 229);  |  |
| bg-indigo-700 | background-color: rgb(67 56 202);  |  |
| bg-indigo-800 | background-color: rgb(55 48 163);  |  |
| bg-indigo-900 | background-color: rgb(49 46 129);  |  |
| bg-indigo-950 | background-color: rgb(30 27 75);  |  |
| bg-violet-50 | background-color: rgb(245 243 255);  |  |
| bg-violet-100 | background-color: rgb(237 233 254);  |  |
| bg-violet-200 | background-color: rgb(221 214 254);  |  |
| bg-violet-300 | background-color: rgb(196 181 253);  |  |
| bg-violet-400 | background-color: rgb(167 139 250);  |  |
| bg-violet-500 | background-color: rgb(139 92 246);  |  |
| bg-violet-600 | background-color: rgb(124 58 237);  |  |
| bg-violet-700 | background-color: rgb(109 40 217);  |  |
| bg-violet-800 | background-color: rgb(91 33 182);  |  |
| bg-violet-900 | background-color: rgb(76 29 149);  |  |
| bg-violet-950 | background-color: rgb(46 16 101);  |  |
| bg-purple-50 | background-color: rgb(250 245 255);  |  |
| bg-purple-100 | background-color: rgb(243 232 255);  |  |
| bg-purple-200 | background-color: rgb(233 213 255);  |  |
| bg-purple-300 | background-color: rgb(216 180 254);  |  |
| bg-purple-400 | background-color: rgb(192 132 252);  |  |
| bg-purple-500 | background-color: rgb(168 85 247);  |  |
| bg-purple-600 | background-color: rgb(147 51 234);  |  |
| bg-purple-700 | background-color: rgb(126 34 206);  |  |
| bg-purple-800 | background-color: rgb(107 33 168);  |  |
| bg-purple-900 | background-color: rgb(88 28 135);  |  |
| bg-purple-950 | background-color: rgb(59 7 100);  |  |
| bg-fuchsia-50 | background-color: rgb(253 244 255);  |  |
| bg-fuchsia-100 | background-color: rgb(250 232 255);  |  |
| bg-fuchsia-200 | background-color: rgb(245 208 254);  |  |
| bg-fuchsia-300 | background-color: rgb(240 171 252);  |  |
| bg-fuchsia-400 | background-color: rgb(232 121 249);  |  |
| bg-fuchsia-500 | background-color: rgb(217 70 239);  |  |
| bg-fuchsia-600 | background-color: rgb(192 38 211);  |  |
| bg-fuchsia-700 | background-color: rgb(162 28 175);  |  |
| bg-fuchsia-800 | background-color: rgb(134 25 143);  |  |
| bg-fuchsia-900 | background-color: rgb(112 26 117);  |  |
| bg-fuchsia-950 | background-color: rgb(74 4 78);  |  |
| bg-pink-50 | background-color: rgb(253 242 248);  |  |
| bg-pink-100 | background-color: rgb(252 231 243);  |  |
| bg-pink-200 | background-color: rgb(251 207 232);  |  |
| bg-pink-300 | background-color: rgb(249 168 212);  |  |
| bg-pink-400 | background-color: rgb(244 114 182);  |  |
| bg-pink-500 | background-color: rgb(236 72 153);  |  |
| bg-pink-600 | background-color: rgb(219 39 119);  |  |
| bg-pink-700 | background-color: rgb(190 24 93);  |  |
| bg-pink-800 | background-color: rgb(157 23 77);  |  |
| bg-pink-900 | background-color: rgb(131 24 67);  |  |
| bg-pink-950 | background-color: rgb(80 7 36);  |  |
| bg-rose-50 | background-color: rgb(255 241 242);  |  |
| bg-rose-100 | background-color: rgb(255 228 230);  |  |
| bg-rose-200 | background-color: rgb(254 205 211);  |  |
| bg-rose-300 | background-color: rgb(253 164 175);  |  |
| bg-rose-400 | background-color: rgb(251 113 133);  |  |
| bg-rose-500 | background-color: rgb(244 63 94);  |  |
| bg-rose-600 | background-color: rgb(225 29 72);  |  |
| bg-rose-700 | background-color: rgb(190 18 60);  |  |
| bg-rose-800 | background-color: rgb(159 18 57);  |  |
| bg-rose-900 | background-color: rgb(136 19 55);  |  |
| bg-rose-950 | background-color: rgb(76 5 25);  |  |






Basic usage
-----------

 ### Setting the background color

 Control the background color of an element using the `bg-{color}` utilities.

 
```
<button class="bg-indigo-500 ...">
  Save changes
</button>
```
 ### Changing the opacity

 Control the opacity of an element’s background color using the color opacity modifier.

 
```
<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>
```
 You can use any value defined in your [opacity scale](opacity), or use arbitrary values if you need to deviate from your design tokens.

 
```
<div class="bg-sky-500/[.06] ..."></div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:bg-cyan-600` to only apply the `bg-cyan-600` utility on hover.



```
<button class="bg-cyan-500 hover:bg-cyan-600 ...">Subscribe</button>
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:bg-green-500` to apply the `bg-green-500` utility at only medium screen sizes and above.



```
<button class="bg-blue-500 md:bg-green-500 ...">Subscribe</button>
```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as background colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your background colors by editing `theme.backgroundColor` or `theme.extend.backgroundColor` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `color` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<p class="bg-[#50d71e]">
  <!-- ... -->
</p>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/background-color>

Background Origin
=================


Utilities for controlling how an element's background is positioned relative to borders, padding, and content.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| bg-origin-border | background-origin: border-box;  |
| bg-origin-padding | background-origin: padding-box;  |
| bg-origin-content | background-origin: content-box;  |






Basic usage
-----------

 ### Setting the background origin

 Use `bg-origin-border`, `bg-origin-padding`, and `bg-origin-content` to control where an element’s background is rendered.

 
```
<div class="bg-origin-border p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div class="bg-origin-padding p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div class="bg-origin-content p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:bg-origin-padding` to only apply the `bg-origin-padding` utility on hover.



```
<div class="bg-origin-border hover:bg-origin-padding">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:bg-origin-padding` to apply the `bg-origin-padding` utility at only medium screen sizes and above.



```
<div class="bg-origin-border md:bg-origin-padding">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/background-origin>

Background Position
===================


Utilities for controlling the position of an element's background image.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| bg-bottom | background-position: bottom;  |
| bg-center | background-position: center;  |
| bg-left | background-position: left;  |
| bg-left-bottom | background-position: left bottom;  |
| bg-left-top | background-position: left top;  |
| bg-right | background-position: right;  |
| bg-right-bottom | background-position: right bottom;  |
| bg-right-top | background-position: right top;  |
| bg-top | background-position: top;  |






Basic usage
-----------

 ### Setting the background position

 Use the `bg-{side}` utilities to control the position of an element’s background image.

 
```
<div class="bg-no-repeat bg-left-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-center ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-bottom ..." style="background-image: url(...);"></div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:bg-top` to only apply the `bg-top` utility on hover.



```
<div class="bg-center hover:bg-top ..." style="background-image: url(...)"></div>
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:bg-top` to apply the `bg-top` utility at only medium screen sizes and above.



```
<div class="bg-center md:bg-top ..." style="background-image: url(...)"></div>
```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides nine `background-position` utilities. You change, add, or remove these by editing the `theme.backgroundPosition` section of your Tailwind config.

 

tailwind.config.js



```
module.exports = {
  theme: {
    backgroundPosition: {
      bottom: 'bottom',
      'bottom-4': 'center bottom 1rem',
      center: 'center',
      left: 'left',
      'left-bottom': 'left bottom',
      'left-top': 'left top',
      right: 'right',
      'right-bottom': 'right bottom',
      'right-top': 'right top',
      top: 'top',
      'top-4': 'center top 1rem',
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `background-position` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="bg-[center_top_1rem]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/background-position>

Background Repeat
=================


Utilities for controlling the repetition of an element's background image.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| bg-repeat | background-repeat: repeat;  |
| bg-no-repeat | background-repeat: no-repeat;  |
| bg-repeat-x | background-repeat: repeat-x;  |
| bg-repeat-y | background-repeat: repeat-y;  |
| bg-repeat-round | background-repeat: round;  |
| bg-repeat-space | background-repeat: space;  |






Basic usage
-----------

 ### Repeat

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

 
```
<div class="bg-repeat ..." style="background-image: url(...)"></div>
```
 ### No Repeat

 Use `bg-no-repeat` when you don’t want to repeat the background image.

 
```
<div class="bg-no-repeat bg-center ..." style="background-image: url(...)"></div>
```
 ### Repeat Horizontally

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

 
```
<div class="bg-repeat-x bg-center ..." style="background-image: url(...)"></div>
```
 ### Repeat Vertically

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

 
```
<div class="bg-repeat-y bg-center ..." style="background-image: url(...)"></div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:bg-repeat-x` to only apply the `bg-repeat-x` utility on hover.



```
<div class="bg-repeat hover:bg-repeat-x">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:bg-repeat-x` to apply the `bg-repeat-x` utility at only medium screen sizes and above.



```
<div class="bg-repeat md:bg-repeat-x">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/background-repeat>

Background Size
===============


Utilities for controlling the background size of an element's background image.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| bg-auto | background-size: auto;  |
| bg-cover | background-size: cover;  |
| bg-contain | background-size: contain;  |






Basic usage
-----------

 ### Auto

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

 
```
<div class="bg-auto bg-no-repeat bg-center ..." style="background-image: url(...)"></div>
```
 ### Cover

 Use `bg-cover` to scale the background image until it fills the background layer.

 
```
<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>
```
 ### Contain

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

 
```
<div class="bg-contain bg-center ..." style="background-image: url(...)"></div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:bg-contain` to only apply the `bg-contain` utility on hover.



```
<div class="bg-auto hover:bg-contain">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:bg-contain` to apply the `bg-contain` utility at only medium screen sizes and above.



```
<div class="bg-auto md:bg-contain">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides utilities for `auto`, `cover`, and `contain` background sizes. You can change, add, or remove these by editing the `theme.backgroundSize` section of your config.

 

tailwind.config.js



```
module.exports = {
  theme: {
    backgroundSize: {
      'auto': 'auto',
      'cover': 'cover',
      'contain': 'contain',
      '50%': '50%',
      '16': '4rem',
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `background-size` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="bg-[length:200px_100px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/background-size>

Background Image
================


Utilities for controlling an element's background image.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| bg-none | background-image: none;  |
| bg-gradient-to-t | background-image: linear-gradient(to top, var(--tw-gradient-stops));  |
| bg-gradient-to-tr | background-image: linear-gradient(to top right, var(--tw-gradient-stops));  |
| bg-gradient-to-r | background-image: linear-gradient(to right, var(--tw-gradient-stops));  |
| bg-gradient-to-br | background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));  |
| bg-gradient-to-b | background-image: linear-gradient(to bottom, var(--tw-gradient-stops));  |
| bg-gradient-to-bl | background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));  |
| bg-gradient-to-l | background-image: linear-gradient(to left, var(--tw-gradient-stops));  |
| bg-gradient-to-tl | background-image: linear-gradient(to top left, var(--tw-gradient-stops));  |






Basic usage
-----------

 ### Linear gradients

 To give an element a linear gradient background, use one of the `bg-gradient-{direction}` utilities, in combination with the [gradient color stop](gradient-color-stops) utilities.

 
```
<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-gradient-to-r from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500"></div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:bg-gradient-to-r` to only apply the `bg-gradient-to-r` utility on hover.



```
<div class="bg-gradient-to-l hover:bg-gradient-to-r">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:bg-gradient-to-r` to apply the `bg-gradient-to-r` utility at only medium screen sizes and above.



```
<div class="bg-gradient-to-l md:bg-gradient-to-r">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes background image utilities for creating linear gradient backgrounds in eight directions.

 You can add your own background images by editing the `theme.backgroundImage` section of your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'hero-pattern': "url('/img/hero-pattern.svg')",
        'footer-texture': "url('/img/footer-texture.png')",
      }
    }
  }
}

```

 These don’t just have to be gradients — they can be any background images you need.

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `background-image` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/background-image>

Border Radius
=============


Utilities for controlling the border radius of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| rounded-none | border-radius: 0px;  |
| rounded-sm | border-radius: 0.125rem; /\* 2px \*/ |
| rounded | border-radius: 0.25rem; /\* 4px \*/ |
| rounded-md | border-radius: 0.375rem; /\* 6px \*/ |
| rounded-lg | border-radius: 0.5rem; /\* 8px \*/ |
| rounded-xl | border-radius: 0.75rem; /\* 12px \*/ |
| rounded-2xl | border-radius: 1rem; /\* 16px \*/ |
| rounded-3xl | border-radius: 1.5rem; /\* 24px \*/ |
| rounded-full | border-radius: 9999px;  |
| rounded-s-none | border-start-start-radius: 0px; border-end-start-radius: 0px;  |
| rounded-s-sm | border-start-start-radius: 0.125rem; /\* 2px \*/ border-end-start-radius: 0.125rem; /\* 2px \*/ |
| rounded-s | border-start-start-radius: 0.25rem; /\* 4px \*/ border-end-start-radius: 0.25rem; /\* 4px \*/ |
| rounded-s-md | border-start-start-radius: 0.375rem; /\* 6px \*/ border-end-start-radius: 0.375rem; /\* 6px \*/ |
| rounded-s-lg | border-start-start-radius: 0.5rem; /\* 8px \*/ border-end-start-radius: 0.5rem; /\* 8px \*/ |
| rounded-s-xl | border-start-start-radius: 0.75rem; /\* 12px \*/ border-end-start-radius: 0.75rem; /\* 12px \*/ |
| rounded-s-2xl | border-start-start-radius: 1rem; /\* 16px \*/ border-end-start-radius: 1rem; /\* 16px \*/ |
| rounded-s-3xl | border-start-start-radius: 1.5rem; /\* 24px \*/ border-end-start-radius: 1.5rem; /\* 24px \*/ |
| rounded-s-full | border-start-start-radius: 9999px; border-end-start-radius: 9999px;  |
| rounded-e-none | border-start-end-radius: 0px; border-end-end-radius: 0px;  |
| rounded-e-sm | border-start-end-radius: 0.125rem; /\* 2px \*/ border-end-end-radius: 0.125rem; /\* 2px \*/ |
| rounded-e | border-start-end-radius: 0.25rem; /\* 4px \*/ border-end-end-radius: 0.25rem; /\* 4px \*/ |
| rounded-e-md | border-start-end-radius: 0.375rem; /\* 6px \*/ border-end-end-radius: 0.375rem; /\* 6px \*/ |
| rounded-e-lg | border-start-end-radius: 0.5rem; /\* 8px \*/ border-end-end-radius: 0.5rem; /\* 8px \*/ |
| rounded-e-xl | border-start-end-radius: 0.75rem; /\* 12px \*/ border-end-end-radius: 0.75rem; /\* 12px \*/ |
| rounded-e-2xl | border-start-end-radius: 1rem; /\* 16px \*/ border-end-end-radius: 1rem; /\* 16px \*/ |
| rounded-e-3xl | border-start-end-radius: 1.5rem; /\* 24px \*/ border-end-end-radius: 1.5rem; /\* 24px \*/ |
| rounded-e-full | border-start-end-radius: 9999px; border-end-end-radius: 9999px;  |
| rounded-t-none | border-top-left-radius: 0px; border-top-right-radius: 0px;  |
| rounded-t-sm | border-top-left-radius: 0.125rem; /\* 2px \*/ border-top-right-radius: 0.125rem; /\* 2px \*/ |
| rounded-t | border-top-left-radius: 0.25rem; /\* 4px \*/ border-top-right-radius: 0.25rem; /\* 4px \*/ |
| rounded-t-md | border-top-left-radius: 0.375rem; /\* 6px \*/ border-top-right-radius: 0.375rem; /\* 6px \*/ |
| rounded-t-lg | border-top-left-radius: 0.5rem; /\* 8px \*/ border-top-right-radius: 0.5rem; /\* 8px \*/ |
| rounded-t-xl | border-top-left-radius: 0.75rem; /\* 12px \*/ border-top-right-radius: 0.75rem; /\* 12px \*/ |
| rounded-t-2xl | border-top-left-radius: 1rem; /\* 16px \*/ border-top-right-radius: 1rem; /\* 16px \*/ |
| rounded-t-3xl | border-top-left-radius: 1.5rem; /\* 24px \*/ border-top-right-radius: 1.5rem; /\* 24px \*/ |
| rounded-t-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px;  |
| rounded-r-none | border-top-right-radius: 0px; border-bottom-right-radius: 0px;  |
| rounded-r-sm | border-top-right-radius: 0.125rem; /\* 2px \*/ border-bottom-right-radius: 0.125rem; /\* 2px \*/ |
| rounded-r | border-top-right-radius: 0.25rem; /\* 4px \*/ border-bottom-right-radius: 0.25rem; /\* 4px \*/ |
| rounded-r-md | border-top-right-radius: 0.375rem; /\* 6px \*/ border-bottom-right-radius: 0.375rem; /\* 6px \*/ |
| rounded-r-lg | border-top-right-radius: 0.5rem; /\* 8px \*/ border-bottom-right-radius: 0.5rem; /\* 8px \*/ |
| rounded-r-xl | border-top-right-radius: 0.75rem; /\* 12px \*/ border-bottom-right-radius: 0.75rem; /\* 12px \*/ |
| rounded-r-2xl | border-top-right-radius: 1rem; /\* 16px \*/ border-bottom-right-radius: 1rem; /\* 16px \*/ |
| rounded-r-3xl | border-top-right-radius: 1.5rem; /\* 24px \*/ border-bottom-right-radius: 1.5rem; /\* 24px \*/ |
| rounded-r-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;  |
| rounded-b-none | border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;  |
| rounded-b-sm | border-bottom-right-radius: 0.125rem; /\* 2px \*/ border-bottom-left-radius: 0.125rem; /\* 2px \*/ |
| rounded-b | border-bottom-right-radius: 0.25rem; /\* 4px \*/ border-bottom-left-radius: 0.25rem; /\* 4px \*/ |
| rounded-b-md | border-bottom-right-radius: 0.375rem; /\* 6px \*/ border-bottom-left-radius: 0.375rem; /\* 6px \*/ |
| rounded-b-lg | border-bottom-right-radius: 0.5rem; /\* 8px \*/ border-bottom-left-radius: 0.5rem; /\* 8px \*/ |
| rounded-b-xl | border-bottom-right-radius: 0.75rem; /\* 12px \*/ border-bottom-left-radius: 0.75rem; /\* 12px \*/ |
| rounded-b-2xl | border-bottom-right-radius: 1rem; /\* 16px \*/ border-bottom-left-radius: 1rem; /\* 16px \*/ |
| rounded-b-3xl | border-bottom-right-radius: 1.5rem; /\* 24px \*/ border-bottom-left-radius: 1.5rem; /\* 24px \*/ |
| rounded-b-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;  |
| rounded-l-none | border-top-left-radius: 0px; border-bottom-left-radius: 0px;  |
| rounded-l-sm | border-top-left-radius: 0.125rem; /\* 2px \*/ border-bottom-left-radius: 0.125rem; /\* 2px \*/ |
| rounded-l | border-top-left-radius: 0.25rem; /\* 4px \*/ border-bottom-left-radius: 0.25rem; /\* 4px \*/ |
| rounded-l-md | border-top-left-radius: 0.375rem; /\* 6px \*/ border-bottom-left-radius: 0.375rem; /\* 6px \*/ |
| rounded-l-lg | border-top-left-radius: 0.5rem; /\* 8px \*/ border-bottom-left-radius: 0.5rem; /\* 8px \*/ |
| rounded-l-xl | border-top-left-radius: 0.75rem; /\* 12px \*/ border-bottom-left-radius: 0.75rem; /\* 12px \*/ |
| rounded-l-2xl | border-top-left-radius: 1rem; /\* 16px \*/ border-bottom-left-radius: 1rem; /\* 16px \*/ |
| rounded-l-3xl | border-top-left-radius: 1.5rem; /\* 24px \*/ border-bottom-left-radius: 1.5rem; /\* 24px \*/ |
| rounded-l-full | border-top-left-radius: 9999px; border-bottom-left-radius: 9999px;  |
| rounded-ss-none | border-start-start-radius: 0px;  |
| rounded-ss-sm | border-start-start-radius: 0.125rem; /\* 2px \*/ |
| rounded-ss | border-start-start-radius: 0.25rem; /\* 4px \*/ |
| rounded-ss-md | border-start-start-radius: 0.375rem; /\* 6px \*/ |
| rounded-ss-lg | border-start-start-radius: 0.5rem; /\* 8px \*/ |
| rounded-ss-xl | border-start-start-radius: 0.75rem; /\* 12px \*/ |
| rounded-ss-2xl | border-start-start-radius: 1rem; /\* 16px \*/ |
| rounded-ss-3xl | border-start-start-radius: 1.5rem; /\* 24px \*/ |
| rounded-ss-full | border-start-start-radius: 9999px;  |
| rounded-se-none | border-start-end-radius: 0px;  |
| rounded-se-sm | border-start-end-radius: 0.125rem; /\* 2px \*/ |
| rounded-se | border-start-end-radius: 0.25rem; /\* 4px \*/ |
| rounded-se-md | border-start-end-radius: 0.375rem; /\* 6px \*/ |
| rounded-se-lg | border-start-end-radius: 0.5rem; /\* 8px \*/ |
| rounded-se-xl | border-start-end-radius: 0.75rem; /\* 12px \*/ |
| rounded-se-2xl | border-start-end-radius: 1rem; /\* 16px \*/ |
| rounded-se-3xl | border-start-end-radius: 1.5rem; /\* 24px \*/ |
| rounded-se-full | border-start-end-radius: 9999px;  |
| rounded-ee-none | border-end-end-radius: 0px;  |
| rounded-ee-sm | border-end-end-radius: 0.125rem; /\* 2px \*/ |
| rounded-ee | border-end-end-radius: 0.25rem; /\* 4px \*/ |
| rounded-ee-md | border-end-end-radius: 0.375rem; /\* 6px \*/ |
| rounded-ee-lg | border-end-end-radius: 0.5rem; /\* 8px \*/ |
| rounded-ee-xl | border-end-end-radius: 0.75rem; /\* 12px \*/ |
| rounded-ee-2xl | border-end-end-radius: 1rem; /\* 16px \*/ |
| rounded-ee-3xl | border-end-end-radius: 1.5rem; /\* 24px \*/ |
| rounded-ee-full | border-end-end-radius: 9999px;  |
| rounded-es-none | border-end-start-radius: 0px;  |
| rounded-es-sm | border-end-start-radius: 0.125rem; /\* 2px \*/ |
| rounded-es | border-end-start-radius: 0.25rem; /\* 4px \*/ |
| rounded-es-md | border-end-start-radius: 0.375rem; /\* 6px \*/ |
| rounded-es-lg | border-end-start-radius: 0.5rem; /\* 8px \*/ |
| rounded-es-xl | border-end-start-radius: 0.75rem; /\* 12px \*/ |
| rounded-es-2xl | border-end-start-radius: 1rem; /\* 16px \*/ |
| rounded-es-3xl | border-end-start-radius: 1.5rem; /\* 24px \*/ |
| rounded-es-full | border-end-start-radius: 9999px;  |
| rounded-tl-none | border-top-left-radius: 0px;  |
| rounded-tl-sm | border-top-left-radius: 0.125rem; /\* 2px \*/ |
| rounded-tl | border-top-left-radius: 0.25rem; /\* 4px \*/ |
| rounded-tl-md | border-top-left-radius: 0.375rem; /\* 6px \*/ |
| rounded-tl-lg | border-top-left-radius: 0.5rem; /\* 8px \*/ |
| rounded-tl-xl | border-top-left-radius: 0.75rem; /\* 12px \*/ |
| rounded-tl-2xl | border-top-left-radius: 1rem; /\* 16px \*/ |
| rounded-tl-3xl | border-top-left-radius: 1.5rem; /\* 24px \*/ |
| rounded-tl-full | border-top-left-radius: 9999px;  |
| rounded-tr-none | border-top-right-radius: 0px;  |
| rounded-tr-sm | border-top-right-radius: 0.125rem; /\* 2px \*/ |
| rounded-tr | border-top-right-radius: 0.25rem; /\* 4px \*/ |
| rounded-tr-md | border-top-right-radius: 0.375rem; /\* 6px \*/ |
| rounded-tr-lg | border-top-right-radius: 0.5rem; /\* 8px \*/ |
| rounded-tr-xl | border-top-right-radius: 0.75rem; /\* 12px \*/ |
| rounded-tr-2xl | border-top-right-radius: 1rem; /\* 16px \*/ |
| rounded-tr-3xl | border-top-right-radius: 1.5rem; /\* 24px \*/ |
| rounded-tr-full | border-top-right-radius: 9999px;  |
| rounded-br-none | border-bottom-right-radius: 0px;  |
| rounded-br-sm | border-bottom-right-radius: 0.125rem; /\* 2px \*/ |
| rounded-br | border-bottom-right-radius: 0.25rem; /\* 4px \*/ |
| rounded-br-md | border-bottom-right-radius: 0.375rem; /\* 6px \*/ |
| rounded-br-lg | border-bottom-right-radius: 0.5rem; /\* 8px \*/ |
| rounded-br-xl | border-bottom-right-radius: 0.75rem; /\* 12px \*/ |
| rounded-br-2xl | border-bottom-right-radius: 1rem; /\* 16px \*/ |
| rounded-br-3xl | border-bottom-right-radius: 1.5rem; /\* 24px \*/ |
| rounded-br-full | border-bottom-right-radius: 9999px;  |
| rounded-bl-none | border-bottom-left-radius: 0px;  |
| rounded-bl-sm | border-bottom-left-radius: 0.125rem; /\* 2px \*/ |
| rounded-bl | border-bottom-left-radius: 0.25rem; /\* 4px \*/ |
| rounded-bl-md | border-bottom-left-radius: 0.375rem; /\* 6px \*/ |
| rounded-bl-lg | border-bottom-left-radius: 0.5rem; /\* 8px \*/ |
| rounded-bl-xl | border-bottom-left-radius: 0.75rem; /\* 12px \*/ |
| rounded-bl-2xl | border-bottom-left-radius: 1rem; /\* 16px \*/ |
| rounded-bl-3xl | border-bottom-left-radius: 1.5rem; /\* 24px \*/ |
| rounded-bl-full | border-bottom-left-radius: 9999px;  |






Basic usage
-----------

 ### Rounded corners

 Use utilities like `rounded-sm`, `rounded`, or `rounded-lg` to apply different border radius sizes to an element.

 
```
<div class="rounded ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-full ..."></div>
```
 ### Pill buttons

 Use the `rounded-full` utility to create pill buttons.

 
```
<button class="rounded-full ...">Save Changes</button>
```
 ### No rounding

 Use `rounded-none` to remove an existing border radius from an element.

 
```
<button class="rounded-none ...">Save Changes</button>
```
 This is most commonly used to remove a border radius that was applied at a smaller breakpoint.

 ### Rounding sides separately

 Use `rounded-{t|r|b|l}{-size?}` to only round one side of an element.

 
```
<div class="rounded-t-lg ..."></div>
<div class="rounded-r-lg ..."></div>
<div class="rounded-b-lg ..."></div>
<div class="rounded-l-lg ..."></div>
```
 ### Rounding corners separately

 Use `rounded-{tl|tr|br|bl}{-size?}` to only round one corner an element.

 
```
<div class="rounded-tl-lg ..."></div>
<div class="rounded-tr-lg ..."></div>
<div class="rounded-br-lg ..."></div>
<div class="rounded-bl-lg ..."></div>
```
 ### Using logical properties

 Use the `rounded-{s|e|ss|se|es|ee}{-size?}` utilities 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.

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

<div dir="rtl">
  <div class="rounded-s-lg ..."></div>
<div>
```
 Here are all the available border color logical property utilities and their physical property equivalents in both LTR and RTL modes.

 

| Class | Left-to-right | Right-to-left |
| --- | --- | --- |
| `rounded-s-*` | `rounded-l-*` | `rounded-r-*` |
| `rounded-e-*` | `rounded-r-*` | `rounded-l-*` |
| `rounded-ss-*` | `rounded-tl-*` | `rounded-tr-*` |
| `rounded-se-*` | `rounded-tr-*` | `rounded-tl-*` |
| `rounded-es-*` | `rounded-bl-*` | `rounded-br-*` |
| `rounded-ee-*` | `rounded-br-*` | `rounded-bl-*` |

 For more control, you can also use the [LTR and RTL modifiers](hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:rounded-lg` to only apply the `rounded-lg` utility on hover.



```
<div class="rounded hover:rounded-lg">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:rounded-lg` to apply the `rounded-lg` utility at only medium screen sizes and above.



```
<div class="rounded md:rounded-lg">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `theme.borderRadius` section of your Tailwind config.

 

tailwind.config.js



```
module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '0.125rem',
      DEFAULT: '0.25rem',
      DEFAULT: '4px',
      'md': '0.375rem',
      'lg': '0.5rem',
      'full': '9999px',
      'large': '12px',
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `border-radius` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="rounded-[12px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/border-radius>

Border Width
============


Utilities for controlling the width of an element's borders.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| border-0 | border-width: 0px;  |
| border-2 | border-width: 2px;  |
| border-4 | border-width: 4px;  |
| border-8 | border-width: 8px;  |
| border | border-width: 1px;  |
| border-x-0 | border-left-width: 0px; border-right-width: 0px;  |
| border-x-2 | border-left-width: 2px; border-right-width: 2px;  |
| border-x-4 | border-left-width: 4px; border-right-width: 4px;  |
| border-x-8 | border-left-width: 8px; border-right-width: 8px;  |
| border-x | border-left-width: 1px; border-right-width: 1px;  |
| border-y-0 | border-top-width: 0px; border-bottom-width: 0px;  |
| border-y-2 | border-top-width: 2px; border-bottom-width: 2px;  |
| border-y-4 | border-top-width: 4px; border-bottom-width: 4px;  |
| border-y-8 | border-top-width: 8px; border-bottom-width: 8px;  |
| border-y | border-top-width: 1px; border-bottom-width: 1px;  |
| border-s-0 | border-inline-start-width: 0px;  |
| border-s-2 | border-inline-start-width: 2px;  |
| border-s-4 | border-inline-start-width: 4px;  |
| border-s-8 | border-inline-start-width: 8px;  |
| border-s | border-inline-start-width: 1px;  |
| border-e-0 | border-inline-end-width: 0px;  |
| border-e-2 | border-inline-end-width: 2px;  |
| border-e-4 | border-inline-end-width: 4px;  |
| border-e-8 | border-inline-end-width: 8px;  |
| border-e | border-inline-end-width: 1px;  |
| border-t-0 | border-top-width: 0px;  |
| border-t-2 | border-top-width: 2px;  |
| border-t-4 | border-top-width: 4px;  |
| border-t-8 | border-top-width: 8px;  |
| border-t | border-top-width: 1px;  |
| border-r-0 | border-right-width: 0px;  |
| border-r-2 | border-right-width: 2px;  |
| border-r-4 | border-right-width: 4px;  |
| border-r-8 | border-right-width: 8px;  |
| border-r | border-right-width: 1px;  |
| border-b-0 | border-bottom-width: 0px;  |
| border-b-2 | border-bottom-width: 2px;  |
| border-b-4 | border-bottom-width: 4px;  |
| border-b-8 | border-bottom-width: 8px;  |
| border-b | border-bottom-width: 1px;  |
| border-l-0 | border-left-width: 0px;  |
| border-l-2 | border-left-width: 2px;  |
| border-l-4 | border-left-width: 4px;  |
| border-l-8 | border-left-width: 8px;  |
| border-l | border-left-width: 1px;  |






Basic usage
-----------

 ### All sides

 Use the `border`, `border-0`, `border-2`, `border-4`, or `border-8` utilities to set the border width for all sides of an element.

 
```
<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><div class="border border-sky-500"></div>
<div class="border-2 border-sky-500"></div>
<div class="border-4 border-sky-500"></div>
<div class="border-8 border-sky-500"></div>
```
 ### Individual sides

 Use the `border-{side}`, `border-{side}-0`, `border-{side}-2`, `border-{side}-4`, or `border-{side}-8` utilities to set the border width for one side of an element.

 
```
<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>
```
 ### Horizontal and vertical sides

 Use the `border-{x|y}-{width}` utilities to set the border width on two sides of an element at the same time.

 
```
<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>
```
 ### Between elements

 You can also add borders between child elements using the `divide-{x/y}-{width}` and `divide-{color}` utilities.

 
```
<div class="divide-y divide-slate-200 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div><div class="divide-y divide-slate-700 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 Learn more in the [Divide Width](divide-width) and [Divide Color](divide-color) documentation.

 ### Using logical properties

 Use the `border-s-*` and `border-e-*` utilities 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.

 
```
<div dir="ltr">
  <div class="border-s-4 ..."></div>
<div>

<div dir="rtl">
  <div class="border-s-4 ..."></div>
<div>
```
 For more control, you can also use the [LTR and RTL modifiers](hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.

 ### Using without Preflight

 If you’ve [disabled Preflight](preflight#disabling-preflight) in your project, you’ll need to include a [border style](border-style) utility any time you use one of the `border-width` utilities for the border to actually take effect:

 
```
<div class="border-4 border-indigo-500 ...">
<div class="border-4 border-solid border-indigo-500 ...">
  <!-- ... -->
</div>

```
 This is because browsers set the `border-style` of most elements to `none` by default, so adding a `border-width` on its own isn’t enough to render a border.

 Preflight applies a global [border reset](preflight#border-styles-are-reset-globally) that sets `border-style` to `solid` and `border-width` to `0`, which is what makes it possible to add a border to an element using just a `border-width` utility in projects using Preflight.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:border-t-4` to only apply the `border-t-4` utility on hover.



```
<div class="border-2 hover:border-t-4">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:border-t-4` to apply the `border-t-4` utility at only medium screen sizes and above.



```
<div class="border-2 md:border-t-4">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides five `border-width` utilities, and the same number of utilities per side (horizontal, vertical, top, right, bottom, and left). You change, add, or remove these by editing the `theme.borderWidth` section of your Tailwind config.

 

tailwind.config.js



```
module.exports = {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `border-{side}-{width}` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="border-t-[3px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/border-width>

Border Style
============


Utilities for controlling the style of an element's borders.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| 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;  |






Basic usage
-----------

 ### Setting the border style

 Use `border-{style}` to control an element’s border style.

 
```
<div class="border-solid border-2 border-indigo-600 ..."></div>
<div class="border-dashed border-2 border-indigo-600 ..."></div>
<div class="border-dotted border-2 border-indigo-600 ..."></div>
<div class="border-double border-4 border-indigo-600 ..."></div><div class="border-solid border-2 border-sky-500 ..."></div>
<div class="border-dashed border-2 border-sky-500 ..."></div>
<div class="border-dotted border-2 border-sky-500 ..."></div>
<div class="border-double border-4 border-sky-500 ..."></div>
```
 ### No style

 Use `border-none` to remove an existing border style from an element.

 This is most commonly used to remove a border style that was applied at a smaller breakpoint.

 
```
<button class="border-none ...">Save Changes</button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:border-dotted` to only apply the `border-dotted` utility on hover.



```
<div class="border-solid hover:border-dotted">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:border-dotted` to apply the `border-dotted` utility at only medium screen sizes and above.



```
<div class="border-solid md:border-dotted">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/border-style>

Divide Width
============


Utilities for controlling the border width between elements.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| divide-x-0 > \* + \* | border-right-width: 0px; border-left-width: 0px;  |
| divide-x-2 > \* + \* | border-right-width: 0px; border-left-width: 2px;  |
| divide-x-4 > \* + \* | border-right-width: 0px; border-left-width: 4px;  |
| divide-x-8 > \* + \* | border-right-width: 0px; border-left-width: 8px;  |
| divide-x > \* + \* | border-right-width: 0px; border-left-width: 1px;  |
| divide-y-0 > \* + \* | border-top-width: 0px; border-bottom-width: 0px;  |
| divide-y-2 > \* + \* | border-top-width: 2px; border-bottom-width: 0px;  |
| divide-y-4 > \* + \* | border-top-width: 4px; border-bottom-width: 0px;  |
| divide-y-8 > \* + \* | border-top-width: 8px; border-bottom-width: 0px;  |
| divide-y > \* + \* | border-top-width: 1px; border-bottom-width: 0px;  |
| divide-y-reverse > \* + \* | --tw-divide-y-reverse: 1;  |
| divide-x-reverse > \* + \* | --tw-divide-x-reverse: 1;  |






Basic usage
-----------

 ### Add borders between horizontal children

 Add borders between horizontal elements using the `divide-x-{width}` utilities.

 
```
<div class="grid grid-cols-3 divide-x">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Add borders between stacked children

 Add borders between stacked elements using the `divide-y-{width}` utilities.

 
```
<div class="grid grid-cols-1 divide-y">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Reversing children order

 If your elements are in reverse order (using say `flex-row-reverse` or `flex-col-reverse`), use the `divide-x-reverse` or `divide-y-reverse` utilities to ensure the border is added to the correct side of each element.

 
```
<div class="flex flex-col-reverse divide-y divide-y-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:divide-y-8` to only apply the `divide-y-8` utility on hover.



```
<div class="divide-y divide-gray-400 hover:divide-y-8">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:divide-y-8` to apply the `divide-y-8` utility at only medium screen sizes and above.



```
<div class="divide-y divide-gray-400 md:divide-y-8">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 The divide width scale inherits its values from the `borderWidth` scale by default, so if you’d like to customize your values for both border width and divide width together, use the `theme.borderWidth` section of your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

```

 To customize only the divide width values, use the `theme.divideWidth` section of your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    divideWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `divide-{x|y}-{width}` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="divide-x-[3px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/divide-width>

Divide Color
============


Utilities for controlling the border color between elements.


Quick reference
---------------





| Class | Properties | 
Preview  |
| --- | --- | --- |
| divide-inherit > \* + \* | border-color: inherit;  |  |
| divide-current > \* + \* | border-color: currentColor;  |  |
| divide-transparent > \* + \* | border-color: transparent;  |  |
| divide-black > \* + \* | border-color: rgb(0 0 0);  |  |
| divide-white > \* + \* | border-color: rgb(255 255 255);  |  |
| divide-slate-50 > \* + \* | border-color: rgb(248 250 252);  |  |
| divide-slate-100 > \* + \* | border-color: rgb(241 245 249);  |  |
| divide-slate-200 > \* + \* | border-color: rgb(226 232 240);  |  |
| divide-slate-300 > \* + \* | border-color: rgb(203 213 225);  |  |
| divide-slate-400 > \* + \* | border-color: rgb(148 163 184);  |  |
| divide-slate-500 > \* + \* | border-color: rgb(100 116 139);  |  |
| divide-slate-600 > \* + \* | border-color: rgb(71 85 105);  |  |
| divide-slate-700 > \* + \* | border-color: rgb(51 65 85);  |  |
| divide-slate-800 > \* + \* | border-color: rgb(30 41 59);  |  |
| divide-slate-900 > \* + \* | border-color: rgb(15 23 42);  |  |
| divide-slate-950 > \* + \* | border-color: rgb(2 6 23);  |  |
| divide-gray-50 > \* + \* | border-color: rgb(249 250 251);  |  |
| divide-gray-100 > \* + \* | border-color: rgb(243 244 246);  |  |
| divide-gray-200 > \* + \* | border-color: rgb(229 231 235);  |  |
| divide-gray-300 > \* + \* | border-color: rgb(209 213 219);  |  |
| divide-gray-400 > \* + \* | border-color: rgb(156 163 175);  |  |
| divide-gray-500 > \* + \* | border-color: rgb(107 114 128);  |  |
| divide-gray-600 > \* + \* | border-color: rgb(75 85 99);  |  |
| divide-gray-700 > \* + \* | border-color: rgb(55 65 81);  |  |
| divide-gray-800 > \* + \* | border-color: rgb(31 41 55);  |  |
| divide-gray-900 > \* + \* | border-color: rgb(17 24 39);  |  |
| divide-gray-950 > \* + \* | border-color: rgb(3 7 18);  |  |
| divide-zinc-50 > \* + \* | border-color: rgb(250 250 250);  |  |
| divide-zinc-100 > \* + \* | border-color: rgb(244 244 245);  |  |
| divide-zinc-200 > \* + \* | border-color: rgb(228 228 231);  |  |
| divide-zinc-300 > \* + \* | border-color: rgb(212 212 216);  |  |
| divide-zinc-400 > \* + \* | border-color: rgb(161 161 170);  |  |
| divide-zinc-500 > \* + \* | border-color: rgb(113 113 122);  |  |
| divide-zinc-600 > \* + \* | border-color: rgb(82 82 91);  |  |
| divide-zinc-700 > \* + \* | border-color: rgb(63 63 70);  |  |
| divide-zinc-800 > \* + \* | border-color: rgb(39 39 42);  |  |
| divide-zinc-900 > \* + \* | border-color: rgb(24 24 27);  |  |
| divide-zinc-950 > \* + \* | border-color: rgb(9 9 11);  |  |
| divide-neutral-50 > \* + \* | border-color: rgb(250 250 250);  |  |
| divide-neutral-100 > \* + \* | border-color: rgb(245 245 245);  |  |
| divide-neutral-200 > \* + \* | border-color: rgb(229 229 229);  |  |
| divide-neutral-300 > \* + \* | border-color: rgb(212 212 212);  |  |
| divide-neutral-400 > \* + \* | border-color: rgb(163 163 163);  |  |
| divide-neutral-500 > \* + \* | border-color: rgb(115 115 115);  |  |
| divide-neutral-600 > \* + \* | border-color: rgb(82 82 82);  |  |
| divide-neutral-700 > \* + \* | border-color: rgb(64 64 64);  |  |
| divide-neutral-800 > \* + \* | border-color: rgb(38 38 38);  |  |
| divide-neutral-900 > \* + \* | border-color: rgb(23 23 23);  |  |
| divide-neutral-950 > \* + \* | border-color: rgb(10 10 10);  |  |
| divide-stone-50 > \* + \* | border-color: rgb(250 250 249);  |  |
| divide-stone-100 > \* + \* | border-color: rgb(245 245 244);  |  |
| divide-stone-200 > \* + \* | border-color: rgb(231 229 228);  |  |
| divide-stone-300 > \* + \* | border-color: rgb(214 211 209);  |  |
| divide-stone-400 > \* + \* | border-color: rgb(168 162 158);  |  |
| divide-stone-500 > \* + \* | border-color: rgb(120 113 108);  |  |
| divide-stone-600 > \* + \* | border-color: rgb(87 83 78);  |  |
| divide-stone-700 > \* + \* | border-color: rgb(68 64 60);  |  |
| divide-stone-800 > \* + \* | border-color: rgb(41 37 36);  |  |
| divide-stone-900 > \* + \* | border-color: rgb(28 25 23);  |  |
| divide-stone-950 > \* + \* | border-color: rgb(12 10 9);  |  |
| divide-red-50 > \* + \* | border-color: rgb(254 242 242);  |  |
| divide-red-100 > \* + \* | border-color: rgb(254 226 226);  |  |
| divide-red-200 > \* + \* | border-color: rgb(254 202 202);  |  |
| divide-red-300 > \* + \* | border-color: rgb(252 165 165);  |  |
| divide-red-400 > \* + \* | border-color: rgb(248 113 113);  |  |
| divide-red-500 > \* + \* | border-color: rgb(239 68 68);  |  |
| divide-red-600 > \* + \* | border-color: rgb(220 38 38);  |  |
| divide-red-700 > \* + \* | border-color: rgb(185 28 28);  |  |
| divide-red-800 > \* + \* | border-color: rgb(153 27 27);  |  |
| divide-red-900 > \* + \* | border-color: rgb(127 29 29);  |  |
| divide-red-950 > \* + \* | border-color: rgb(69 10 10);  |  |
| divide-orange-50 > \* + \* | border-color: rgb(255 247 237);  |  |
| divide-orange-100 > \* + \* | border-color: rgb(255 237 213);  |  |
| divide-orange-200 > \* + \* | border-color: rgb(254 215 170);  |  |
| divide-orange-300 > \* + \* | border-color: rgb(253 186 116);  |  |
| divide-orange-400 > \* + \* | border-color: rgb(251 146 60);  |  |
| divide-orange-500 > \* + \* | border-color: rgb(249 115 22);  |  |
| divide-orange-600 > \* + \* | border-color: rgb(234 88 12);  |  |
| divide-orange-700 > \* + \* | border-color: rgb(194 65 12);  |  |
| divide-orange-800 > \* + \* | border-color: rgb(154 52 18);  |  |
| divide-orange-900 > \* + \* | border-color: rgb(124 45 18);  |  |
| divide-orange-950 > \* + \* | border-color: rgb(67 20 7);  |  |
| divide-amber-50 > \* + \* | border-color: rgb(255 251 235);  |  |
| divide-amber-100 > \* + \* | border-color: rgb(254 243 199);  |  |
| divide-amber-200 > \* + \* | border-color: rgb(253 230 138);  |  |
| divide-amber-300 > \* + \* | border-color: rgb(252 211 77);  |  |
| divide-amber-400 > \* + \* | border-color: rgb(251 191 36);  |  |
| divide-amber-500 > \* + \* | border-color: rgb(245 158 11);  |  |
| divide-amber-600 > \* + \* | border-color: rgb(217 119 6);  |  |
| divide-amber-700 > \* + \* | border-color: rgb(180 83 9);  |  |
| divide-amber-800 > \* + \* | border-color: rgb(146 64 14);  |  |
| divide-amber-900 > \* + \* | border-color: rgb(120 53 15);  |  |
| divide-amber-950 > \* + \* | border-color: rgb(69 26 3);  |  |
| divide-yellow-50 > \* + \* | border-color: rgb(254 252 232);  |  |
| divide-yellow-100 > \* + \* | border-color: rgb(254 249 195);  |  |
| divide-yellow-200 > \* + \* | border-color: rgb(254 240 138);  |  |
| divide-yellow-300 > \* + \* | border-color: rgb(253 224 71);  |  |
| divide-yellow-400 > \* + \* | border-color: rgb(250 204 21);  |  |
| divide-yellow-500 > \* + \* | border-color: rgb(234 179 8);  |  |
| divide-yellow-600 > \* + \* | border-color: rgb(202 138 4);  |  |
| divide-yellow-700 > \* + \* | border-color: rgb(161 98 7);  |  |
| divide-yellow-800 > \* + \* | border-color: rgb(133 77 14);  |  |
| divide-yellow-900 > \* + \* | border-color: rgb(113 63 18);  |  |
| divide-yellow-950 > \* + \* | border-color: rgb(66 32 6);  |  |
| divide-lime-50 > \* + \* | border-color: rgb(247 254 231);  |  |
| divide-lime-100 > \* + \* | border-color: rgb(236 252 203);  |  |
| divide-lime-200 > \* + \* | border-color: rgb(217 249 157);  |  |
| divide-lime-300 > \* + \* | border-color: rgb(190 242 100);  |  |
| divide-lime-400 > \* + \* | border-color: rgb(163 230 53);  |  |
| divide-lime-500 > \* + \* | border-color: rgb(132 204 22);  |  |
| divide-lime-600 > \* + \* | border-color: rgb(101 163 13);  |  |
| divide-lime-700 > \* + \* | border-color: rgb(77 124 15);  |  |
| divide-lime-800 > \* + \* | border-color: rgb(63 98 18);  |  |
| divide-lime-900 > \* + \* | border-color: rgb(54 83 20);  |  |
| divide-lime-950 > \* + \* | border-color: rgb(26 46 5);  |  |
| divide-green-50 > \* + \* | border-color: rgb(240 253 244);  |  |
| divide-green-100 > \* + \* | border-color: rgb(220 252 231);  |  |
| divide-green-200 > \* + \* | border-color: rgb(187 247 208);  |  |
| divide-green-300 > \* + \* | border-color: rgb(134 239 172);  |  |
| divide-green-400 > \* + \* | border-color: rgb(74 222 128);  |  |
| divide-green-500 > \* + \* | border-color: rgb(34 197 94);  |  |
| divide-green-600 > \* + \* | border-color: rgb(22 163 74);  |  |
| divide-green-700 > \* + \* | border-color: rgb(21 128 61);  |  |
| divide-green-800 > \* + \* | border-color: rgb(22 101 52);  |  |
| divide-green-900 > \* + \* | border-color: rgb(20 83 45);  |  |
| divide-green-950 > \* + \* | border-color: rgb(5 46 22);  |  |
| divide-emerald-50 > \* + \* | border-color: rgb(236 253 245);  |  |
| divide-emerald-100 > \* + \* | border-color: rgb(209 250 229);  |  |
| divide-emerald-200 > \* + \* | border-color: rgb(167 243 208);  |  |
| divide-emerald-300 > \* + \* | border-color: rgb(110 231 183);  |  |
| divide-emerald-400 > \* + \* | border-color: rgb(52 211 153);  |  |
| divide-emerald-500 > \* + \* | border-color: rgb(16 185 129);  |  |
| divide-emerald-600 > \* + \* | border-color: rgb(5 150 105);  |  |
| divide-emerald-700 > \* + \* | border-color: rgb(4 120 87);  |  |
| divide-emerald-800 > \* + \* | border-color: rgb(6 95 70);  |  |
| divide-emerald-900 > \* + \* | border-color: rgb(6 78 59);  |  |
| divide-emerald-950 > \* + \* | border-color: rgb(2 44 34);  |  |
| divide-teal-50 > \* + \* | border-color: rgb(240 253 250);  |  |
| divide-teal-100 > \* + \* | border-color: rgb(204 251 241);  |  |
| divide-teal-200 > \* + \* | border-color: rgb(153 246 228);  |  |
| divide-teal-300 > \* + \* | border-color: rgb(94 234 212);  |  |
| divide-teal-400 > \* + \* | border-color: rgb(45 212 191);  |  |
| divide-teal-500 > \* + \* | border-color: rgb(20 184 166);  |  |
| divide-teal-600 > \* + \* | border-color: rgb(13 148 136);  |  |
| divide-teal-700 > \* + \* | border-color: rgb(15 118 110);  |  |
| divide-teal-800 > \* + \* | border-color: rgb(17 94 89);  |  |
| divide-teal-900 > \* + \* | border-color: rgb(19 78 74);  |  |
| divide-teal-950 > \* + \* | border-color: rgb(4 47 46);  |  |
| divide-cyan-50 > \* + \* | border-color: rgb(236 254 255);  |  |
| divide-cyan-100 > \* + \* | border-color: rgb(207 250 254);  |  |
| divide-cyan-200 > \* + \* | border-color: rgb(165 243 252);  |  |
| divide-cyan-300 > \* + \* | border-color: rgb(103 232 249);  |  |
| divide-cyan-400 > \* + \* | border-color: rgb(34 211 238);  |  |
| divide-cyan-500 > \* + \* | border-color: rgb(6 182 212);  |  |
| divide-cyan-600 > \* + \* | border-color: rgb(8 145 178);  |  |
| divide-cyan-700 > \* + \* | border-color: rgb(14 116 144);  |  |
| divide-cyan-800 > \* + \* | border-color: rgb(21 94 117);  |  |
| divide-cyan-900 > \* + \* | border-color: rgb(22 78 99);  |  |
| divide-cyan-950 > \* + \* | border-color: rgb(8 51 68);  |  |
| divide-sky-50 > \* + \* | border-color: rgb(240 249 255);  |  |
| divide-sky-100 > \* + \* | border-color: rgb(224 242 254);  |  |
| divide-sky-200 > \* + \* | border-color: rgb(186 230 253);  |  |
| divide-sky-300 > \* + \* | border-color: rgb(125 211 252);  |  |
| divide-sky-400 > \* + \* | border-color: rgb(56 189 248);  |  |
| divide-sky-500 > \* + \* | border-color: rgb(14 165 233);  |  |
| divide-sky-600 > \* + \* | border-color: rgb(2 132 199);  |  |
| divide-sky-700 > \* + \* | border-color: rgb(3 105 161);  |  |
| divide-sky-800 > \* + \* | border-color: rgb(7 89 133);  |  |
| divide-sky-900 > \* + \* | border-color: rgb(12 74 110);  |  |
| divide-sky-950 > \* + \* | border-color: rgb(8 47 73);  |  |
| divide-blue-50 > \* + \* | border-color: rgb(239 246 255);  |  |
| divide-blue-100 > \* + \* | border-color: rgb(219 234 254);  |  |
| divide-blue-200 > \* + \* | border-color: rgb(191 219 254);  |  |
| divide-blue-300 > \* + \* | border-color: rgb(147 197 253);  |  |
| divide-blue-400 > \* + \* | border-color: rgb(96 165 250);  |  |
| divide-blue-500 > \* + \* | border-color: rgb(59 130 246);  |  |
| divide-blue-600 > \* + \* | border-color: rgb(37 99 235);  |  |
| divide-blue-700 > \* + \* | border-color: rgb(29 78 216);  |  |
| divide-blue-800 > \* + \* | border-color: rgb(30 64 175);  |  |
| divide-blue-900 > \* + \* | border-color: rgb(30 58 138);  |  |
| divide-blue-950 > \* + \* | border-color: rgb(23 37 84);  |  |
| divide-indigo-50 > \* + \* | border-color: rgb(238 242 255);  |  |
| divide-indigo-100 > \* + \* | border-color: rgb(224 231 255);  |  |
| divide-indigo-200 > \* + \* | border-color: rgb(199 210 254);  |  |
| divide-indigo-300 > \* + \* | border-color: rgb(165 180 252);  |  |
| divide-indigo-400 > \* + \* | border-color: rgb(129 140 248);  |  |
| divide-indigo-500 > \* + \* | border-color: rgb(99 102 241);  |  |
| divide-indigo-600 > \* + \* | border-color: rgb(79 70 229);  |  |
| divide-indigo-700 > \* + \* | border-color: rgb(67 56 202);  |  |
| divide-indigo-800 > \* + \* | border-color: rgb(55 48 163);  |  |
| divide-indigo-900 > \* + \* | border-color: rgb(49 46 129);  |  |
| divide-indigo-950 > \* + \* | border-color: rgb(30 27 75);  |  |
| divide-violet-50 > \* + \* | border-color: rgb(245 243 255);  |  |
| divide-violet-100 > \* + \* | border-color: rgb(237 233 254);  |  |
| divide-violet-200 > \* + \* | border-color: rgb(221 214 254);  |  |
| divide-violet-300 > \* + \* | border-color: rgb(196 181 253);  |  |
| divide-violet-400 > \* + \* | border-color: rgb(167 139 250);  |  |
| divide-violet-500 > \* + \* | border-color: rgb(139 92 246);  |  |
| divide-violet-600 > \* + \* | border-color: rgb(124 58 237);  |  |
| divide-violet-700 > \* + \* | border-color: rgb(109 40 217);  |  |
| divide-violet-800 > \* + \* | border-color: rgb(91 33 182);  |  |
| divide-violet-900 > \* + \* | border-color: rgb(76 29 149);  |  |
| divide-violet-950 > \* + \* | border-color: rgb(46 16 101);  |  |
| divide-purple-50 > \* + \* | border-color: rgb(250 245 255);  |  |
| divide-purple-100 > \* + \* | border-color: rgb(243 232 255);  |  |
| divide-purple-200 > \* + \* | border-color: rgb(233 213 255);  |  |
| divide-purple-300 > \* + \* | border-color: rgb(216 180 254);  |  |
| divide-purple-400 > \* + \* | border-color: rgb(192 132 252);  |  |
| divide-purple-500 > \* + \* | border-color: rgb(168 85 247);  |  |
| divide-purple-600 > \* + \* | border-color: rgb(147 51 234);  |  |
| divide-purple-700 > \* + \* | border-color: rgb(126 34 206);  |  |
| divide-purple-800 > \* + \* | border-color: rgb(107 33 168);  |  |
| divide-purple-900 > \* + \* | border-color: rgb(88 28 135);  |  |
| divide-purple-950 > \* + \* | border-color: rgb(59 7 100);  |  |
| divide-fuchsia-50 > \* + \* | border-color: rgb(253 244 255);  |  |
| divide-fuchsia-100 > \* + \* | border-color: rgb(250 232 255);  |  |
| divide-fuchsia-200 > \* + \* | border-color: rgb(245 208 254);  |  |
| divide-fuchsia-300 > \* + \* | border-color: rgb(240 171 252);  |  |
| divide-fuchsia-400 > \* + \* | border-color: rgb(232 121 249);  |  |
| divide-fuchsia-500 > \* + \* | border-color: rgb(217 70 239);  |  |
| divide-fuchsia-600 > \* + \* | border-color: rgb(192 38 211);  |  |
| divide-fuchsia-700 > \* + \* | border-color: rgb(162 28 175);  |  |
| divide-fuchsia-800 > \* + \* | border-color: rgb(134 25 143);  |  |
| divide-fuchsia-900 > \* + \* | border-color: rgb(112 26 117);  |  |
| divide-fuchsia-950 > \* + \* | border-color: rgb(74 4 78);  |  |
| divide-pink-50 > \* + \* | border-color: rgb(253 242 248);  |  |
| divide-pink-100 > \* + \* | border-color: rgb(252 231 243);  |  |
| divide-pink-200 > \* + \* | border-color: rgb(251 207 232);  |  |
| divide-pink-300 > \* + \* | border-color: rgb(249 168 212);  |  |
| divide-pink-400 > \* + \* | border-color: rgb(244 114 182);  |  |
| divide-pink-500 > \* + \* | border-color: rgb(236 72 153);  |  |
| divide-pink-600 > \* + \* | border-color: rgb(219 39 119);  |  |
| divide-pink-700 > \* + \* | border-color: rgb(190 24 93);  |  |
| divide-pink-800 > \* + \* | border-color: rgb(157 23 77);  |  |
| divide-pink-900 > \* + \* | border-color: rgb(131 24 67);  |  |
| divide-pink-950 > \* + \* | border-color: rgb(80 7 36);  |  |
| divide-rose-50 > \* + \* | border-color: rgb(255 241 242);  |  |
| divide-rose-100 > \* + \* | border-color: rgb(255 228 230);  |  |
| divide-rose-200 > \* + \* | border-color: rgb(254 205 211);  |  |
| divide-rose-300 > \* + \* | border-color: rgb(253 164 175);  |  |
| divide-rose-400 > \* + \* | border-color: rgb(251 113 133);  |  |
| divide-rose-500 > \* + \* | border-color: rgb(244 63 94);  |  |
| divide-rose-600 > \* + \* | border-color: rgb(225 29 72);  |  |
| divide-rose-700 > \* + \* | border-color: rgb(190 18 60);  |  |
| divide-rose-800 > \* + \* | border-color: rgb(159 18 57);  |  |
| divide-rose-900 > \* + \* | border-color: rgb(136 19 55);  |  |
| divide-rose-950 > \* + \* | border-color: rgb(76 5 25);  |  |






Basic usage
-----------

 ### Setting the divide color

 Control the border color between elements using the `divide-{color}` utilities.

 
```
<div class="divide-y divide-blue-200">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 ### Changing the opacity

 Control the opacity of the divide color using the color opacity modifier.

 
```
<div class="divide-y-4 divide-slate-400/25 ...">
  <!-- ... -->
</div>
```
 You can use any value defined in your [opacity scale](opacity), or use arbitrary values if you need to deviate from your design tokens.

 
```
<div class="divide-y-4 divide-slate-400/[.24] ...">
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:divide-pink-400` to only apply the `divide-pink-400` utility on hover.



```
<div class="divide-y divide-teal-400 hover:divide-pink-400">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:divide-pink-400` to apply the `divide-pink-400` utility at only medium screen sizes and above.



```
<div class="divide-y divide-teal-400 md:divide-pink-400">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as divide colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your divide colors by editing `theme.divideColor` or `theme.extend.divideColor` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `divide-{color}` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="divide-[#243c5a]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/divide-color>

Divide Style
============


Utilities for controlling the border style between elements.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| divide-solid > \* + \* | border-style: solid;  |
| divide-dashed > \* + \* | border-style: dashed;  |
| divide-dotted > \* + \* | border-style: dotted;  |
| divide-double > \* + \* | border-style: double;  |
| divide-none > \* + \* | border-style: none;  |






Basic usage
-----------

 ### Set the divide style

 Control the border style between elements using the `divide-{style}` utilities.

 
```
<div class="divide-y divide-dashed">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:divide-solid` to only apply the `divide-solid` utility on hover.



```
<div class="divide-y divide-dashed hover:divide-solid">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:divide-solid` to apply the `divide-solid` utility at only medium screen sizes and above.



```
<div class="divide-y divide-dashed md:divide-solid">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/divide-style>

Outline Width
=============


Utilities for controlling the width of an element's outline.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| outline-0 | outline-width: 0px;  |
| outline-1 | outline-width: 1px;  |
| outline-2 | outline-width: 2px;  |
| outline-4 | outline-width: 4px;  |
| outline-8 | outline-width: 8px;  |






Basic usage
-----------

 ### Setting the outline width

 Use the `outline-{width}` utilities to change the width of an element’s outline.

 
```
<button class="outline outline-offset-2 outline-1 ...">Button A</button>
<button class="outline outline-offset-2 outline-2 ...">Button B</button>
<button class="outline outline-offset-2 outline-4 ...">Button C</button>
```
 The default outline width is `3px`.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:outline-2` to only apply the `outline-2` utility on hover.



```
<div class="outline hover:outline-2">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:outline-2` to apply the `outline-2` utility at only medium screen sizes and above.



```
<div class="outline md:outline-2">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 You can customize the `outline-{width}` utilities by editing `theme.outlineWidth` or `theme.extend.outlineWidth` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      outlineWidth: {
        5: '5px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `outline-width` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="outline-[5px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/outline-width>

Outline Color
=============


Utilities for controlling the color of an element's outline.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| outline-inherit | outline-color: inherit;  |
| outline-current | outline-color: currentColor;  |
| outline-transparent | outline-color: transparent;  |
| outline-black | outline-color: #000;  |
| outline-white | outline-color: #fff;  |
| outline-slate-50 | outline-color: #f8fafc;  |
| outline-slate-100 | outline-color: #f1f5f9;  |
| outline-slate-200 | outline-color: #e2e8f0;  |
| outline-slate-300 | outline-color: #cbd5e1;  |
| outline-slate-400 | outline-color: #94a3b8;  |
| outline-slate-500 | outline-color: #64748b;  |
| outline-slate-600 | outline-color: #475569;  |
| outline-slate-700 | outline-color: #334155;  |
| outline-slate-800 | outline-color: #1e293b;  |
| outline-slate-900 | outline-color: #0f172a;  |
| outline-slate-950 | outline-color: #020617;  |
| outline-gray-50 | outline-color: #f9fafb;  |
| outline-gray-100 | outline-color: #f3f4f6;  |
| outline-gray-200 | outline-color: #e5e7eb;  |
| outline-gray-300 | outline-color: #d1d5db;  |
| outline-gray-400 | outline-color: #9ca3af;  |
| outline-gray-500 | outline-color: #6b7280;  |
| outline-gray-600 | outline-color: #4b5563;  |
| outline-gray-700 | outline-color: #374151;  |
| outline-gray-800 | outline-color: #1f2937;  |
| outline-gray-900 | outline-color: #111827;  |
| outline-gray-950 | outline-color: #030712;  |
| outline-zinc-50 | outline-color: #fafafa;  |
| outline-zinc-100 | outline-color: #f4f4f5;  |
| outline-zinc-200 | outline-color: #e4e4e7;  |
| outline-zinc-300 | outline-color: #d4d4d8;  |
| outline-zinc-400 | outline-color: #a1a1aa;  |
| outline-zinc-500 | outline-color: #71717a;  |
| outline-zinc-600 | outline-color: #52525b;  |
| outline-zinc-700 | outline-color: #3f3f46;  |
| outline-zinc-800 | outline-color: #27272a;  |
| outline-zinc-900 | outline-color: #18181b;  |
| outline-zinc-950 | outline-color: #09090b;  |
| outline-neutral-50 | outline-color: #fafafa;  |
| outline-neutral-100 | outline-color: #f5f5f5;  |
| outline-neutral-200 | outline-color: #e5e5e5;  |
| outline-neutral-300 | outline-color: #d4d4d4;  |
| outline-neutral-400 | outline-color: #a3a3a3;  |
| outline-neutral-500 | outline-color: #737373;  |
| outline-neutral-600 | outline-color: #525252;  |
| outline-neutral-700 | outline-color: #404040;  |
| outline-neutral-800 | outline-color: #262626;  |
| outline-neutral-900 | outline-color: #171717;  |
| outline-neutral-950 | outline-color: #0a0a0a;  |
| outline-stone-50 | outline-color: #fafaf9;  |
| outline-stone-100 | outline-color: #f5f5f4;  |
| outline-stone-200 | outline-color: #e7e5e4;  |
| outline-stone-300 | outline-color: #d6d3d1;  |
| outline-stone-400 | outline-color: #a8a29e;  |
| outline-stone-500 | outline-color: #78716c;  |
| outline-stone-600 | outline-color: #57534e;  |
| outline-stone-700 | outline-color: #44403c;  |
| outline-stone-800 | outline-color: #292524;  |
| outline-stone-900 | outline-color: #1c1917;  |
| outline-stone-950 | outline-color: #0c0a09;  |
| outline-red-50 | outline-color: #fef2f2;  |
| outline-red-100 | outline-color: #fee2e2;  |
| outline-red-200 | outline-color: #fecaca;  |
| outline-red-300 | outline-color: #fca5a5;  |
| outline-red-400 | outline-color: #f87171;  |
| outline-red-500 | outline-color: #ef4444;  |
| outline-red-600 | outline-color: #dc2626;  |
| outline-red-700 | outline-color: #b91c1c;  |
| outline-red-800 | outline-color: #991b1b;  |
| outline-red-900 | outline-color: #7f1d1d;  |
| outline-red-950 | outline-color: #450a0a;  |
| outline-orange-50 | outline-color: #fff7ed;  |
| outline-orange-100 | outline-color: #ffedd5;  |
| outline-orange-200 | outline-color: #fed7aa;  |
| outline-orange-300 | outline-color: #fdba74;  |
| outline-orange-400 | outline-color: #fb923c;  |
| outline-orange-500 | outline-color: #f97316;  |
| outline-orange-600 | outline-color: #ea580c;  |
| outline-orange-700 | outline-color: #c2410c;  |
| outline-orange-800 | outline-color: #9a3412;  |
| outline-orange-900 | outline-color: #7c2d12;  |
| outline-orange-950 | outline-color: #431407;  |
| outline-amber-50 | outline-color: #fffbeb;  |
| outline-amber-100 | outline-color: #fef3c7;  |
| outline-amber-200 | outline-color: #fde68a;  |
| outline-amber-300 | outline-color: #fcd34d;  |
| outline-amber-400 | outline-color: #fbbf24;  |
| outline-amber-500 | outline-color: #f59e0b;  |
| outline-amber-600 | outline-color: #d97706;  |
| outline-amber-700 | outline-color: #b45309;  |
| outline-amber-800 | outline-color: #92400e;  |
| outline-amber-900 | outline-color: #78350f;  |
| outline-amber-950 | outline-color: #451a03;  |
| outline-yellow-50 | outline-color: #fefce8;  |
| outline-yellow-100 | outline-color: #fef9c3;  |
| outline-yellow-200 | outline-color: #fef08a;  |
| outline-yellow-300 | outline-color: #fde047;  |
| outline-yellow-400 | outline-color: #facc15;  |
| outline-yellow-500 | outline-color: #eab308;  |
| outline-yellow-600 | outline-color: #ca8a04;  |
| outline-yellow-700 | outline-color: #a16207;  |
| outline-yellow-800 | outline-color: #854d0e;  |
| outline-yellow-900 | outline-color: #713f12;  |
| outline-yellow-950 | outline-color: #422006;  |
| outline-lime-50 | outline-color: #f7fee7;  |
| outline-lime-100 | outline-color: #ecfccb;  |
| outline-lime-200 | outline-color: #d9f99d;  |
| outline-lime-300 | outline-color: #bef264;  |
| outline-lime-400 | outline-color: #a3e635;  |
| outline-lime-500 | outline-color: #84cc16;  |
| outline-lime-600 | outline-color: #65a30d;  |
| outline-lime-700 | outline-color: #4d7c0f;  |
| outline-lime-800 | outline-color: #3f6212;  |
| outline-lime-900 | outline-color: #365314;  |
| outline-lime-950 | outline-color: #1a2e05;  |
| outline-green-50 | outline-color: #f0fdf4;  |
| outline-green-100 | outline-color: #dcfce7;  |
| outline-green-200 | outline-color: #bbf7d0;  |
| outline-green-300 | outline-color: #86efac;  |
| outline-green-400 | outline-color: #4ade80;  |
| outline-green-500 | outline-color: #22c55e;  |
| outline-green-600 | outline-color: #16a34a;  |
| outline-green-700 | outline-color: #15803d;  |
| outline-green-800 | outline-color: #166534;  |
| outline-green-900 | outline-color: #14532d;  |
| outline-green-950 | outline-color: #052e16;  |
| outline-emerald-50 | outline-color: #ecfdf5;  |
| outline-emerald-100 | outline-color: #d1fae5;  |
| outline-emerald-200 | outline-color: #a7f3d0;  |
| outline-emerald-300 | outline-color: #6ee7b7;  |
| outline-emerald-400 | outline-color: #34d399;  |
| outline-emerald-500 | outline-color: #10b981;  |
| outline-emerald-600 | outline-color: #059669;  |
| outline-emerald-700 | outline-color: #047857;  |
| outline-emerald-800 | outline-color: #065f46;  |
| outline-emerald-900 | outline-color: #064e3b;  |
| outline-emerald-950 | outline-color: #022c22;  |
| outline-teal-50 | outline-color: #f0fdfa;  |
| outline-teal-100 | outline-color: #ccfbf1;  |
| outline-teal-200 | outline-color: #99f6e4;  |
| outline-teal-300 | outline-color: #5eead4;  |
| outline-teal-400 | outline-color: #2dd4bf;  |
| outline-teal-500 | outline-color: #14b8a6;  |
| outline-teal-600 | outline-color: #0d9488;  |
| outline-teal-700 | outline-color: #0f766e;  |
| outline-teal-800 | outline-color: #115e59;  |
| outline-teal-900 | outline-color: #134e4a;  |
| outline-teal-950 | outline-color: #042f2e;  |
| outline-cyan-50 | outline-color: #ecfeff;  |
| outline-cyan-100 | outline-color: #cffafe;  |
| outline-cyan-200 | outline-color: #a5f3fc;  |
| outline-cyan-300 | outline-color: #67e8f9;  |
| outline-cyan-400 | outline-color: #22d3ee;  |
| outline-cyan-500 | outline-color: #06b6d4;  |
| outline-cyan-600 | outline-color: #0891b2;  |
| outline-cyan-700 | outline-color: #0e7490;  |
| outline-cyan-800 | outline-color: #155e75;  |
| outline-cyan-900 | outline-color: #164e63;  |
| outline-cyan-950 | outline-color: #083344;  |
| outline-sky-50 | outline-color: #f0f9ff;  |
| outline-sky-100 | outline-color: #e0f2fe;  |
| outline-sky-200 | outline-color: #bae6fd;  |
| outline-sky-300 | outline-color: #7dd3fc;  |
| outline-sky-400 | outline-color: #38bdf8;  |
| outline-sky-500 | outline-color: #0ea5e9;  |
| outline-sky-600 | outline-color: #0284c7;  |
| outline-sky-700 | outline-color: #0369a1;  |
| outline-sky-800 | outline-color: #075985;  |
| outline-sky-900 | outline-color: #0c4a6e;  |
| outline-sky-950 | outline-color: #082f49;  |
| outline-blue-50 | outline-color: #eff6ff;  |
| outline-blue-100 | outline-color: #dbeafe;  |
| outline-blue-200 | outline-color: #bfdbfe;  |
| outline-blue-300 | outline-color: #93c5fd;  |
| outline-blue-400 | outline-color: #60a5fa;  |
| outline-blue-500 | outline-color: #3b82f6;  |
| outline-blue-600 | outline-color: #2563eb;  |
| outline-blue-700 | outline-color: #1d4ed8;  |
| outline-blue-800 | outline-color: #1e40af;  |
| outline-blue-900 | outline-color: #1e3a8a;  |
| outline-blue-950 | outline-color: #172554;  |
| outline-indigo-50 | outline-color: #eef2ff;  |
| outline-indigo-100 | outline-color: #e0e7ff;  |
| outline-indigo-200 | outline-color: #c7d2fe;  |
| outline-indigo-300 | outline-color: #a5b4fc;  |
| outline-indigo-400 | outline-color: #818cf8;  |
| outline-indigo-500 | outline-color: #6366f1;  |
| outline-indigo-600 | outline-color: #4f46e5;  |
| outline-indigo-700 | outline-color: #4338ca;  |
| outline-indigo-800 | outline-color: #3730a3;  |
| outline-indigo-900 | outline-color: #312e81;  |
| outline-indigo-950 | outline-color: #1e1b4b;  |
| outline-violet-50 | outline-color: #f5f3ff;  |
| outline-violet-100 | outline-color: #ede9fe;  |
| outline-violet-200 | outline-color: #ddd6fe;  |
| outline-violet-300 | outline-color: #c4b5fd;  |
| outline-violet-400 | outline-color: #a78bfa;  |
| outline-violet-500 | outline-color: #8b5cf6;  |
| outline-violet-600 | outline-color: #7c3aed;  |
| outline-violet-700 | outline-color: #6d28d9;  |
| outline-violet-800 | outline-color: #5b21b6;  |
| outline-violet-900 | outline-color: #4c1d95;  |
| outline-violet-950 | outline-color: #2e1065;  |
| outline-purple-50 | outline-color: #faf5ff;  |
| outline-purple-100 | outline-color: #f3e8ff;  |
| outline-purple-200 | outline-color: #e9d5ff;  |
| outline-purple-300 | outline-color: #d8b4fe;  |
| outline-purple-400 | outline-color: #c084fc;  |
| outline-purple-500 | outline-color: #a855f7;  |
| outline-purple-600 | outline-color: #9333ea;  |
| outline-purple-700 | outline-color: #7e22ce;  |
| outline-purple-800 | outline-color: #6b21a8;  |
| outline-purple-900 | outline-color: #581c87;  |
| outline-purple-950 | outline-color: #3b0764;  |
| outline-fuchsia-50 | outline-color: #fdf4ff;  |
| outline-fuchsia-100 | outline-color: #fae8ff;  |
| outline-fuchsia-200 | outline-color: #f5d0fe;  |
| outline-fuchsia-300 | outline-color: #f0abfc;  |
| outline-fuchsia-400 | outline-color: #e879f9;  |
| outline-fuchsia-500 | outline-color: #d946ef;  |
| outline-fuchsia-600 | outline-color: #c026d3;  |
| outline-fuchsia-700 | outline-color: #a21caf;  |
| outline-fuchsia-800 | outline-color: #86198f;  |
| outline-fuchsia-900 | outline-color: #701a75;  |
| outline-fuchsia-950 | outline-color: #4a044e;  |
| outline-pink-50 | outline-color: #fdf2f8;  |
| outline-pink-100 | outline-color: #fce7f3;  |
| outline-pink-200 | outline-color: #fbcfe8;  |
| outline-pink-300 | outline-color: #f9a8d4;  |
| outline-pink-400 | outline-color: #f472b6;  |
| outline-pink-500 | outline-color: #ec4899;  |
| outline-pink-600 | outline-color: #db2777;  |
| outline-pink-700 | outline-color: #be185d;  |
| outline-pink-800 | outline-color: #9d174d;  |
| outline-pink-900 | outline-color: #831843;  |
| outline-pink-950 | outline-color: #500724;  |
| outline-rose-50 | outline-color: #fff1f2;  |
| outline-rose-100 | outline-color: #ffe4e6;  |
| outline-rose-200 | outline-color: #fecdd3;  |
| outline-rose-300 | outline-color: #fda4af;  |
| outline-rose-400 | outline-color: #fb7185;  |
| outline-rose-500 | outline-color: #f43f5e;  |
| outline-rose-600 | outline-color: #e11d48;  |
| outline-rose-700 | outline-color: #be123c;  |
| outline-rose-800 | outline-color: #9f1239;  |
| outline-rose-900 | outline-color: #881337;  |
| outline-rose-950 | outline-color: #4c0519;  |






Basic usage
-----------

 ### Setting the outline color

 Use the `outline-{color}` utilities to change the color of an element’s outline.

 
```
<button class="outline outline-offset-2 outline-blue-500 ...">Button A</button>
<button class="outline outline-offset-2 outline-cyan-500 ...">Button B</button>
<button class="outline outline-offset-2 outline-pink-500 ...">Button C</button>
```
 ### Changing the opacity

 Control the opacity of an element’s outline color using the color opacity modifier.

 
```
<button class="outline-2 outline-blue-500/50 ...">Save Changes</button>
```
 You can use any value defined in your [opacity scale](opacity), or use arbitrary values if you need to deviate from your design tokens.

 
```
<button class="outline-4 outline-pink-400/[.55] ..."></button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:outline-blue-400` to only apply the `outline-blue-400` utility on hover.



```
<button class="outline hover:outline-blue-400">
  <!-- ... -->
</button>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:outline-blue-400` to apply the `outline-blue-400` utility at only medium screen sizes and above.



```
<button class="outline md:outline-blue-400">
  <!-- ... -->
</button>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as outline colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your outline colors by editing `theme.outlineColor` or `theme.extend.outlineColor` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `outline-color` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<button class="outline-[#243c5a]">
  <!-- ... -->
</button>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/outline-color>

Outline Style
=============


Utilities for controlling the style of an element's outline.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| outline-none | outline: 2px solid transparent; outline-offset: 2px;  |
| outline | outline-style: solid;  |
| outline-dashed | outline-style: dashed;  |
| outline-dotted | outline-style: dotted;  |
| outline-double | outline-style: double;  |






Basic usage
-----------

 ### Setting the outline style

 Use the `outline-{style}` utilities to change the style of an element’s outline.

 
```
<button class="outline outline-2  outline-offset-2 ...">Button A</button>
<button class="outline-dashed outline-2 outline-offset-2 ...">Button B</button>
<button class="outline-dotted outline-2 outline-offset-2 ...">Button C</button>
<button class="outline-double outline-3 outline-offset-2 ...">Button D</button>
```
 ### Removing outlines

 Use `outline-none` to hide the default browser outline on focused elements.

 It is highly recommended to apply your own focus styling for accessibility when using this utility.

 
```
<input type="text"
  placeholder="Default focus style"
  class="..." />

<input type="text"
  placeholder="Custom focus style"
  class="focus:outline-none focus:ring focus:border-blue-500 ..." />
```
 The `outline-none` utility is implemented using a transparent outline under the hood to ensure elements are still visibly focused to [Windows high contrast mode](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/) users.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:outline-dashed` to only apply the `outline-dashed` utility on hover.



```
<div class="outline hover:outline-dashed">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:outline-dashed` to apply the `outline-dashed` utility at only medium screen sizes and above.



```
<div class="outline md:outline-dashed">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/outline-style>

Gradient Color Stops
====================


Utilities for controlling the color stops in background gradients.


Quick reference
---------------





| Class | Properties | 
Preview  |
| --- | --- | --- |
| from-inherit | --tw-gradient-from: inherit var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-current | --tw-gradient-from: currentColor var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-transparent | --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-black | --tw-gradient-from: #000 var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-white | --tw-gradient-from: #fff var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-slate-50 | --tw-gradient-from: #f8fafc var(--tw-gradient-from-position); --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-slate-100 | --tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position); --tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-slate-200 | --tw-gradient-from: #e2e8f0 var(--tw-gradient-from-position); --tw-gradient-to: rgb(226 232 240 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-slate-300 | --tw-gradient-from: #cbd5e1 var(--tw-gradient-from-position); --tw-gradient-to: rgb(203 213 225 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-slate-400 | --tw-gradient-from: #94a3b8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(148 163 184 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-slate-500 | --tw-gradient-from: #64748b var(--tw-gradient-from-position); --tw-gradient-to: rgb(100 116 139 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-slate-600 | --tw-gradient-from: #475569 var(--tw-gradient-from-position); --tw-gradient-to: rgb(71 85 105 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-slate-700 | --tw-gradient-from: #334155 var(--tw-gradient-from-position); --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-slate-800 | --tw-gradient-from: #1e293b var(--tw-gradient-from-position); --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-slate-900 | --tw-gradient-from: #0f172a var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-slate-950 | --tw-gradient-from: #020617 var(--tw-gradient-from-position); --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-gray-50 | --tw-gradient-from: #f9fafb var(--tw-gradient-from-position); --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-gray-100 | --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-gray-200 | --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position); --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-gray-300 | --tw-gradient-from: #d1d5db var(--tw-gradient-from-position); --tw-gradient-to: rgb(209 213 219 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-gray-400 | --tw-gradient-from: #9ca3af var(--tw-gradient-from-position); --tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-gray-500 | --tw-gradient-from: #6b7280 var(--tw-gradient-from-position); --tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-gray-600 | --tw-gradient-from: #4b5563 var(--tw-gradient-from-position); --tw-gradient-to: rgb(75 85 99 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-gray-700 | --tw-gradient-from: #374151 var(--tw-gradient-from-position); --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-gray-800 | --tw-gradient-from: #1f2937 var(--tw-gradient-from-position); --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-gray-900 | --tw-gradient-from: #111827 var(--tw-gradient-from-position); --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-gray-950 | --tw-gradient-from: #030712 var(--tw-gradient-from-position); --tw-gradient-to: rgb(3 7 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-zinc-50 | --tw-gradient-from: #fafafa var(--tw-gradient-from-position); --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-zinc-100 | --tw-gradient-from: #f4f4f5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-zinc-200 | --tw-gradient-from: #e4e4e7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(228 228 231 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-zinc-300 | --tw-gradient-from: #d4d4d8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(212 212 216 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-zinc-400 | --tw-gradient-from: #a1a1aa var(--tw-gradient-from-position); --tw-gradient-to: rgb(161 161 170 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-zinc-500 | --tw-gradient-from: #71717a var(--tw-gradient-from-position); --tw-gradient-to: rgb(113 113 122 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-zinc-600 | --tw-gradient-from: #52525b var(--tw-gradient-from-position); --tw-gradient-to: rgb(82 82 91 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-zinc-700 | --tw-gradient-from: #3f3f46 var(--tw-gradient-from-position); --tw-gradient-to: rgb(63 63 70 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-zinc-800 | --tw-gradient-from: #27272a var(--tw-gradient-from-position); --tw-gradient-to: rgb(39 39 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-zinc-900 | --tw-gradient-from: #18181b var(--tw-gradient-from-position); --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-zinc-950 | --tw-gradient-from: #09090b var(--tw-gradient-from-position); --tw-gradient-to: rgb(9 9 11 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-neutral-50 | --tw-gradient-from: #fafafa var(--tw-gradient-from-position); --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-neutral-100 | --tw-gradient-from: #f5f5f5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 245 245 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-neutral-200 | --tw-gradient-from: #e5e5e5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-neutral-300 | --tw-gradient-from: #d4d4d4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(212 212 212 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-neutral-400 | --tw-gradient-from: #a3a3a3 var(--tw-gradient-from-position); --tw-gradient-to: rgb(163 163 163 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-neutral-500 | --tw-gradient-from: #737373 var(--tw-gradient-from-position); --tw-gradient-to: rgb(115 115 115 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-neutral-600 | --tw-gradient-from: #525252 var(--tw-gradient-from-position); --tw-gradient-to: rgb(82 82 82 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-neutral-700 | --tw-gradient-from: #404040 var(--tw-gradient-from-position); --tw-gradient-to: rgb(64 64 64 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-neutral-800 | --tw-gradient-from: #262626 var(--tw-gradient-from-position); --tw-gradient-to: rgb(38 38 38 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-neutral-900 | --tw-gradient-from: #171717 var(--tw-gradient-from-position); --tw-gradient-to: rgb(23 23 23 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-neutral-950 | --tw-gradient-from: #0a0a0a var(--tw-gradient-from-position); --tw-gradient-to: rgb(10 10 10 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-stone-50 | --tw-gradient-from: #fafaf9 var(--tw-gradient-from-position); --tw-gradient-to: rgb(250 250 249 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-stone-100 | --tw-gradient-from: #f5f5f4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 245 244 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-stone-200 | --tw-gradient-from: #e7e5e4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(231 229 228 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-stone-300 | --tw-gradient-from: #d6d3d1 var(--tw-gradient-from-position); --tw-gradient-to: rgb(214 211 209 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-stone-400 | --tw-gradient-from: #a8a29e var(--tw-gradient-from-position); --tw-gradient-to: rgb(168 162 158 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-stone-500 | --tw-gradient-from: #78716c var(--tw-gradient-from-position); --tw-gradient-to: rgb(120 113 108 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-stone-600 | --tw-gradient-from: #57534e var(--tw-gradient-from-position); --tw-gradient-to: rgb(87 83 78 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-stone-700 | --tw-gradient-from: #44403c var(--tw-gradient-from-position); --tw-gradient-to: rgb(68 64 60 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-stone-800 | --tw-gradient-from: #292524 var(--tw-gradient-from-position); --tw-gradient-to: rgb(41 37 36 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-stone-900 | --tw-gradient-from: #1c1917 var(--tw-gradient-from-position); --tw-gradient-to: rgb(28 25 23 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-stone-950 | --tw-gradient-from: #0c0a09 var(--tw-gradient-from-position); --tw-gradient-to: rgb(12 10 9 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-red-50 | --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position); --tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-red-100 | --tw-gradient-from: #fee2e2 var(--tw-gradient-from-position); --tw-gradient-to: rgb(254 226 226 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-red-200 | --tw-gradient-from: #fecaca var(--tw-gradient-from-position); --tw-gradient-to: rgb(254 202 202 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-red-300 | --tw-gradient-from: #fca5a5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(252 165 165 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-red-400 | --tw-gradient-from: #f87171 var(--tw-gradient-from-position); --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-red-500 | --tw-gradient-from: #ef4444 var(--tw-gradient-from-position); --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-red-600 | --tw-gradient-from: #dc2626 var(--tw-gradient-from-position); --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-red-700 | --tw-gradient-from: #b91c1c var(--tw-gradient-from-position); --tw-gradient-to: rgb(185 28 28 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-red-800 | --tw-gradient-from: #991b1b var(--tw-gradient-from-position); --tw-gradient-to: rgb(153 27 27 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-red-900 | --tw-gradient-from: #7f1d1d var(--tw-gradient-from-position); --tw-gradient-to: rgb(127 29 29 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-red-950 | --tw-gradient-from: #450a0a var(--tw-gradient-from-position); --tw-gradient-to: rgb(69 10 10 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-orange-50 | --tw-gradient-from: #fff7ed var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-orange-100 | --tw-gradient-from: #ffedd5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 237 213 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-orange-200 | --tw-gradient-from: #fed7aa var(--tw-gradient-from-position); --tw-gradient-to: rgb(254 215 170 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-orange-300 | --tw-gradient-from: #fdba74 var(--tw-gradient-from-position); --tw-gradient-to: rgb(253 186 116 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-orange-400 | --tw-gradient-from: #fb923c var(--tw-gradient-from-position); --tw-gradient-to: rgb(251 146 60 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-orange-500 | --tw-gradient-from: #f97316 var(--tw-gradient-from-position); --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-orange-600 | --tw-gradient-from: #ea580c var(--tw-gradient-from-position); --tw-gradient-to: rgb(234 88 12 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-orange-700 | --tw-gradient-from: #c2410c var(--tw-gradient-from-position); --tw-gradient-to: rgb(194 65 12 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-orange-800 | --tw-gradient-from: #9a3412 var(--tw-gradient-from-position); --tw-gradient-to: rgb(154 52 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-orange-900 | --tw-gradient-from: #7c2d12 var(--tw-gradient-from-position); --tw-gradient-to: rgb(124 45 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-orange-950 | --tw-gradient-from: #431407 var(--tw-gradient-from-position); --tw-gradient-to: rgb(67 20 7 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-amber-50 | --tw-gradient-from: #fffbeb var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-amber-100 | --tw-gradient-from: #fef3c7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(254 243 199 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-amber-200 | --tw-gradient-from: #fde68a var(--tw-gradient-from-position); --tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-amber-300 | --tw-gradient-from: #fcd34d var(--tw-gradient-from-position); --tw-gradient-to: rgb(252 211 77 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-amber-400 | --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position); --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-amber-500 | --tw-gradient-from: #f59e0b var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-amber-600 | --tw-gradient-from: #d97706 var(--tw-gradient-from-position); --tw-gradient-to: rgb(217 119 6 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-amber-700 | --tw-gradient-from: #b45309 var(--tw-gradient-from-position); --tw-gradient-to: rgb(180 83 9 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-amber-800 | --tw-gradient-from: #92400e var(--tw-gradient-from-position); --tw-gradient-to: rgb(146 64 14 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-amber-900 | --tw-gradient-from: #78350f var(--tw-gradient-from-position); --tw-gradient-to: rgb(120 53 15 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-amber-950 | --tw-gradient-from: #451a03 var(--tw-gradient-from-position); --tw-gradient-to: rgb(69 26 3 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-yellow-50 | --tw-gradient-from: #fefce8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(254 252 232 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-yellow-100 | --tw-gradient-from: #fef9c3 var(--tw-gradient-from-position); --tw-gradient-to: rgb(254 249 195 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-yellow-200 | --tw-gradient-from: #fef08a var(--tw-gradient-from-position); --tw-gradient-to: rgb(254 240 138 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-yellow-300 | --tw-gradient-from: #fde047 var(--tw-gradient-from-position); --tw-gradient-to: rgb(253 224 71 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-yellow-400 | --tw-gradient-from: #facc15 var(--tw-gradient-from-position); --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-yellow-500 | --tw-gradient-from: #eab308 var(--tw-gradient-from-position); --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-yellow-600 | --tw-gradient-from: #ca8a04 var(--tw-gradient-from-position); --tw-gradient-to: rgb(202 138 4 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-yellow-700 | --tw-gradient-from: #a16207 var(--tw-gradient-from-position); --tw-gradient-to: rgb(161 98 7 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-yellow-800 | --tw-gradient-from: #854d0e var(--tw-gradient-from-position); --tw-gradient-to: rgb(133 77 14 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-yellow-900 | --tw-gradient-from: #713f12 var(--tw-gradient-from-position); --tw-gradient-to: rgb(113 63 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-yellow-950 | --tw-gradient-from: #422006 var(--tw-gradient-from-position); --tw-gradient-to: rgb(66 32 6 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-lime-50 | --tw-gradient-from: #f7fee7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(247 254 231 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-lime-100 | --tw-gradient-from: #ecfccb var(--tw-gradient-from-position); --tw-gradient-to: rgb(236 252 203 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-lime-200 | --tw-gradient-from: #d9f99d var(--tw-gradient-from-position); --tw-gradient-to: rgb(217 249 157 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-lime-300 | --tw-gradient-from: #bef264 var(--tw-gradient-from-position); --tw-gradient-to: rgb(190 242 100 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-lime-400 | --tw-gradient-from: #a3e635 var(--tw-gradient-from-position); --tw-gradient-to: rgb(163 230 53 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-lime-500 | --tw-gradient-from: #84cc16 var(--tw-gradient-from-position); --tw-gradient-to: rgb(132 204 22 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-lime-600 | --tw-gradient-from: #65a30d var(--tw-gradient-from-position); --tw-gradient-to: rgb(101 163 13 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-lime-700 | --tw-gradient-from: #4d7c0f var(--tw-gradient-from-position); --tw-gradient-to: rgb(77 124 15 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-lime-800 | --tw-gradient-from: #3f6212 var(--tw-gradient-from-position); --tw-gradient-to: rgb(63 98 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-lime-900 | --tw-gradient-from: #365314 var(--tw-gradient-from-position); --tw-gradient-to: rgb(54 83 20 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-lime-950 | --tw-gradient-from: #1a2e05 var(--tw-gradient-from-position); --tw-gradient-to: rgb(26 46 5 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-green-50 | --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-green-100 | --tw-gradient-from: #dcfce7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(220 252 231 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-green-200 | --tw-gradient-from: #bbf7d0 var(--tw-gradient-from-position); --tw-gradient-to: rgb(187 247 208 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-green-300 | --tw-gradient-from: #86efac var(--tw-gradient-from-position); --tw-gradient-to: rgb(134 239 172 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-green-400 | --tw-gradient-from: #4ade80 var(--tw-gradient-from-position); --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-green-500 | --tw-gradient-from: #22c55e var(--tw-gradient-from-position); --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-green-600 | --tw-gradient-from: #16a34a var(--tw-gradient-from-position); --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-green-700 | --tw-gradient-from: #15803d var(--tw-gradient-from-position); --tw-gradient-to: rgb(21 128 61 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-green-800 | --tw-gradient-from: #166534 var(--tw-gradient-from-position); --tw-gradient-to: rgb(22 101 52 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-green-900 | --tw-gradient-from: #14532d var(--tw-gradient-from-position); --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-green-950 | --tw-gradient-from: #052e16 var(--tw-gradient-from-position); --tw-gradient-to: rgb(5 46 22 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-emerald-50 | --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-emerald-100 | --tw-gradient-from: #d1fae5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(209 250 229 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-emerald-200 | --tw-gradient-from: #a7f3d0 var(--tw-gradient-from-position); --tw-gradient-to: rgb(167 243 208 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-emerald-300 | --tw-gradient-from: #6ee7b7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(110 231 183 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-emerald-400 | --tw-gradient-from: #34d399 var(--tw-gradient-from-position); --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-emerald-500 | --tw-gradient-from: #10b981 var(--tw-gradient-from-position); --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-emerald-600 | --tw-gradient-from: #059669 var(--tw-gradient-from-position); --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-emerald-700 | --tw-gradient-from: #047857 var(--tw-gradient-from-position); --tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-emerald-800 | --tw-gradient-from: #065f46 var(--tw-gradient-from-position); --tw-gradient-to: rgb(6 95 70 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-emerald-900 | --tw-gradient-from: #064e3b var(--tw-gradient-from-position); --tw-gradient-to: rgb(6 78 59 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-emerald-950 | --tw-gradient-from: #022c22 var(--tw-gradient-from-position); --tw-gradient-to: rgb(2 44 34 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-teal-50 | --tw-gradient-from: #f0fdfa var(--tw-gradient-from-position); --tw-gradient-to: rgb(240 253 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-teal-100 | --tw-gradient-from: #ccfbf1 var(--tw-gradient-from-position); --tw-gradient-to: rgb(204 251 241 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-teal-200 | --tw-gradient-from: #99f6e4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(153 246 228 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-teal-300 | --tw-gradient-from: #5eead4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(94 234 212 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-teal-400 | --tw-gradient-from: #2dd4bf var(--tw-gradient-from-position); --tw-gradient-to: rgb(45 212 191 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-teal-500 | --tw-gradient-from: #14b8a6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(20 184 166 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-teal-600 | --tw-gradient-from: #0d9488 var(--tw-gradient-from-position); --tw-gradient-to: rgb(13 148 136 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-teal-700 | --tw-gradient-from: #0f766e var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 118 110 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-teal-800 | --tw-gradient-from: #115e59 var(--tw-gradient-from-position); --tw-gradient-to: rgb(17 94 89 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-teal-900 | --tw-gradient-from: #134e4a var(--tw-gradient-from-position); --tw-gradient-to: rgb(19 78 74 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-teal-950 | --tw-gradient-from: #042f2e var(--tw-gradient-from-position); --tw-gradient-to: rgb(4 47 46 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-cyan-50 | --tw-gradient-from: #ecfeff var(--tw-gradient-from-position); --tw-gradient-to: rgb(236 254 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-cyan-100 | --tw-gradient-from: #cffafe var(--tw-gradient-from-position); --tw-gradient-to: rgb(207 250 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-cyan-200 | --tw-gradient-from: #a5f3fc var(--tw-gradient-from-position); --tw-gradient-to: rgb(165 243 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-cyan-300 | --tw-gradient-from: #67e8f9 var(--tw-gradient-from-position); --tw-gradient-to: rgb(103 232 249 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-cyan-400 | --tw-gradient-from: #22d3ee var(--tw-gradient-from-position); --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-cyan-500 | --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-cyan-600 | --tw-gradient-from: #0891b2 var(--tw-gradient-from-position); --tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-cyan-700 | --tw-gradient-from: #0e7490 var(--tw-gradient-from-position); --tw-gradient-to: rgb(14 116 144 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-cyan-800 | --tw-gradient-from: #155e75 var(--tw-gradient-from-position); --tw-gradient-to: rgb(21 94 117 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-cyan-900 | --tw-gradient-from: #164e63 var(--tw-gradient-from-position); --tw-gradient-to: rgb(22 78 99 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-cyan-950 | --tw-gradient-from: #083344 var(--tw-gradient-from-position); --tw-gradient-to: rgb(8 51 68 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-sky-50 | --tw-gradient-from: #f0f9ff var(--tw-gradient-from-position); --tw-gradient-to: rgb(240 249 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-sky-100 | --tw-gradient-from: #e0f2fe var(--tw-gradient-from-position); --tw-gradient-to: rgb(224 242 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-sky-200 | --tw-gradient-from: #bae6fd var(--tw-gradient-from-position); --tw-gradient-to: rgb(186 230 253 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-sky-300 | --tw-gradient-from: #7dd3fc var(--tw-gradient-from-position); --tw-gradient-to: rgb(125 211 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-sky-400 | --tw-gradient-from: #38bdf8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(56 189 248 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-sky-500 | --tw-gradient-from: #0ea5e9 var(--tw-gradient-from-position); --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-sky-600 | --tw-gradient-from: #0284c7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(2 132 199 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-sky-700 | --tw-gradient-from: #0369a1 var(--tw-gradient-from-position); --tw-gradient-to: rgb(3 105 161 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-sky-800 | --tw-gradient-from: #075985 var(--tw-gradient-from-position); --tw-gradient-to: rgb(7 89 133 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-sky-900 | --tw-gradient-from: #0c4a6e var(--tw-gradient-from-position); --tw-gradient-to: rgb(12 74 110 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-sky-950 | --tw-gradient-from: #082f49 var(--tw-gradient-from-position); --tw-gradient-to: rgb(8 47 73 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-blue-50 | --tw-gradient-from: #eff6ff var(--tw-gradient-from-position); --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-blue-100 | --tw-gradient-from: #dbeafe var(--tw-gradient-from-position); --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-blue-200 | --tw-gradient-from: #bfdbfe var(--tw-gradient-from-position); --tw-gradient-to: rgb(191 219 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-blue-300 | --tw-gradient-from: #93c5fd var(--tw-gradient-from-position); --tw-gradient-to: rgb(147 197 253 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-blue-400 | --tw-gradient-from: #60a5fa var(--tw-gradient-from-position); --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-blue-500 | --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-blue-600 | --tw-gradient-from: #2563eb var(--tw-gradient-from-position); --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-blue-700 | --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-blue-800 | --tw-gradient-from: #1e40af var(--tw-gradient-from-position); --tw-gradient-to: rgb(30 64 175 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-blue-900 | --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position); --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-blue-950 | --tw-gradient-from: #172554 var(--tw-gradient-from-position); --tw-gradient-to: rgb(23 37 84 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-indigo-50 | --tw-gradient-from: #eef2ff var(--tw-gradient-from-position); --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-indigo-100 | --tw-gradient-from: #e0e7ff var(--tw-gradient-from-position); --tw-gradient-to: rgb(224 231 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-indigo-200 | --tw-gradient-from: #c7d2fe var(--tw-gradient-from-position); --tw-gradient-to: rgb(199 210 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-indigo-300 | --tw-gradient-from: #a5b4fc var(--tw-gradient-from-position); --tw-gradient-to: rgb(165 180 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-indigo-400 | --tw-gradient-from: #818cf8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-indigo-500 | --tw-gradient-from: #6366f1 var(--tw-gradient-from-position); --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-indigo-600 | --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-indigo-700 | --tw-gradient-from: #4338ca var(--tw-gradient-from-position); --tw-gradient-to: rgb(67 56 202 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-indigo-800 | --tw-gradient-from: #3730a3 var(--tw-gradient-from-position); --tw-gradient-to: rgb(55 48 163 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-indigo-900 | --tw-gradient-from: #312e81 var(--tw-gradient-from-position); --tw-gradient-to: rgb(49 46 129 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-indigo-950 | --tw-gradient-from: #1e1b4b var(--tw-gradient-from-position); --tw-gradient-to: rgb(30 27 75 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-violet-50 | --tw-gradient-from: #f5f3ff var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 243 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-violet-100 | --tw-gradient-from: #ede9fe var(--tw-gradient-from-position); --tw-gradient-to: rgb(237 233 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-violet-200 | --tw-gradient-from: #ddd6fe var(--tw-gradient-from-position); --tw-gradient-to: rgb(221 214 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-violet-300 | --tw-gradient-from: #c4b5fd var(--tw-gradient-from-position); --tw-gradient-to: rgb(196 181 253 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-violet-400 | --tw-gradient-from: #a78bfa var(--tw-gradient-from-position); --tw-gradient-to: rgb(167 139 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-violet-500 | --tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-violet-600 | --tw-gradient-from: #7c3aed var(--tw-gradient-from-position); --tw-gradient-to: rgb(124 58 237 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-violet-700 | --tw-gradient-from: #6d28d9 var(--tw-gradient-from-position); --tw-gradient-to: rgb(109 40 217 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-violet-800 | --tw-gradient-from: #5b21b6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(91 33 182 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-violet-900 | --tw-gradient-from: #4c1d95 var(--tw-gradient-from-position); --tw-gradient-to: rgb(76 29 149 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-violet-950 | --tw-gradient-from: #2e1065 var(--tw-gradient-from-position); --tw-gradient-to: rgb(46 16 101 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-purple-50 | --tw-gradient-from: #faf5ff var(--tw-gradient-from-position); --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-purple-100 | --tw-gradient-from: #f3e8ff var(--tw-gradient-from-position); --tw-gradient-to: rgb(243 232 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-purple-200 | --tw-gradient-from: #e9d5ff var(--tw-gradient-from-position); --tw-gradient-to: rgb(233 213 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-purple-300 | --tw-gradient-from: #d8b4fe var(--tw-gradient-from-position); --tw-gradient-to: rgb(216 180 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-purple-400 | --tw-gradient-from: #c084fc var(--tw-gradient-from-position); --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-purple-500 | --tw-gradient-from: #a855f7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-purple-600 | --tw-gradient-from: #9333ea var(--tw-gradient-from-position); --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-purple-700 | --tw-gradient-from: #7e22ce var(--tw-gradient-from-position); --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-purple-800 | --tw-gradient-from: #6b21a8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(107 33 168 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-purple-900 | --tw-gradient-from: #581c87 var(--tw-gradient-from-position); --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-purple-950 | --tw-gradient-from: #3b0764 var(--tw-gradient-from-position); --tw-gradient-to: rgb(59 7 100 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-fuchsia-50 | --tw-gradient-from: #fdf4ff var(--tw-gradient-from-position); --tw-gradient-to: rgb(253 244 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-fuchsia-100 | --tw-gradient-from: #fae8ff var(--tw-gradient-from-position); --tw-gradient-to: rgb(250 232 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-fuchsia-200 | --tw-gradient-from: #f5d0fe var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 208 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-fuchsia-300 | --tw-gradient-from: #f0abfc var(--tw-gradient-from-position); --tw-gradient-to: rgb(240 171 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-fuchsia-400 | --tw-gradient-from: #e879f9 var(--tw-gradient-from-position); --tw-gradient-to: rgb(232 121 249 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-fuchsia-500 | --tw-gradient-from: #d946ef var(--tw-gradient-from-position); --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-fuchsia-600 | --tw-gradient-from: #c026d3 var(--tw-gradient-from-position); --tw-gradient-to: rgb(192 38 211 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-fuchsia-700 | --tw-gradient-from: #a21caf var(--tw-gradient-from-position); --tw-gradient-to: rgb(162 28 175 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-fuchsia-800 | --tw-gradient-from: #86198f var(--tw-gradient-from-position); --tw-gradient-to: rgb(134 25 143 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-fuchsia-900 | --tw-gradient-from: #701a75 var(--tw-gradient-from-position); --tw-gradient-to: rgb(112 26 117 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-fuchsia-950 | --tw-gradient-from: #4a044e var(--tw-gradient-from-position); --tw-gradient-to: rgb(74 4 78 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-pink-50 | --tw-gradient-from: #fdf2f8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(253 242 248 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-pink-100 | --tw-gradient-from: #fce7f3 var(--tw-gradient-from-position); --tw-gradient-to: rgb(252 231 243 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-pink-200 | --tw-gradient-from: #fbcfe8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(251 207 232 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-pink-300 | --tw-gradient-from: #f9a8d4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(249 168 212 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-pink-400 | --tw-gradient-from: #f472b6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-pink-500 | --tw-gradient-from: #ec4899 var(--tw-gradient-from-position); --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-pink-600 | --tw-gradient-from: #db2777 var(--tw-gradient-from-position); --tw-gradient-to: rgb(219 39 119 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-pink-700 | --tw-gradient-from: #be185d var(--tw-gradient-from-position); --tw-gradient-to: rgb(190 24 93 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-pink-800 | --tw-gradient-from: #9d174d var(--tw-gradient-from-position); --tw-gradient-to: rgb(157 23 77 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-pink-900 | --tw-gradient-from: #831843 var(--tw-gradient-from-position); --tw-gradient-to: rgb(131 24 67 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-pink-950 | --tw-gradient-from: #500724 var(--tw-gradient-from-position); --tw-gradient-to: rgb(80 7 36 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-rose-50 | --tw-gradient-from: #fff1f2 var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 241 242 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-rose-100 | --tw-gradient-from: #ffe4e6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 228 230 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-rose-200 | --tw-gradient-from: #fecdd3 var(--tw-gradient-from-position); --tw-gradient-to: rgb(254 205 211 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-rose-300 | --tw-gradient-from: #fda4af var(--tw-gradient-from-position); --tw-gradient-to: rgb(253 164 175 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-rose-400 | --tw-gradient-from: #fb7185 var(--tw-gradient-from-position); --tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-rose-500 | --tw-gradient-from: #f43f5e var(--tw-gradient-from-position); --tw-gradient-to: rgb(244 63 94 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-rose-600 | --tw-gradient-from: #e11d48 var(--tw-gradient-from-position); --tw-gradient-to: rgb(225 29 72 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-rose-700 | --tw-gradient-from: #be123c var(--tw-gradient-from-position); --tw-gradient-to: rgb(190 18 60 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-rose-800 | --tw-gradient-from: #9f1239 var(--tw-gradient-from-position); --tw-gradient-to: rgb(159 18 57 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-rose-900 | --tw-gradient-from: #881337 var(--tw-gradient-from-position); --tw-gradient-to: rgb(136 19 55 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-rose-950 | --tw-gradient-from: #4c0519 var(--tw-gradient-from-position); --tw-gradient-to: rgb(76 5 25 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);  |  |
| from-0% | --tw-gradient-from-position: 0%;  |  |
| from-5% | --tw-gradient-from-position: 5%;  |  |
| from-10% | --tw-gradient-from-position: 10%;  |  |
| from-15% | --tw-gradient-from-position: 15%;  |  |
| from-20% | --tw-gradient-from-position: 20%;  |  |
| from-25% | --tw-gradient-from-position: 25%;  |  |
| from-30% | --tw-gradient-from-position: 30%;  |  |
| from-35% | --tw-gradient-from-position: 35%;  |  |
| from-40% | --tw-gradient-from-position: 40%;  |  |
| from-45% | --tw-gradient-from-position: 45%;  |  |
| from-50% | --tw-gradient-from-position: 50%;  |  |
| from-55% | --tw-gradient-from-position: 55%;  |  |
| from-60% | --tw-gradient-from-position: 60%;  |  |
| from-65% | --tw-gradient-from-position: 65%;  |  |
| from-70% | --tw-gradient-from-position: 70%;  |  |
| from-75% | --tw-gradient-from-position: 75%;  |  |
| from-80% | --tw-gradient-from-position: 80%;  |  |
| from-85% | --tw-gradient-from-position: 85%;  |  |
| from-90% | --tw-gradient-from-position: 90%;  |  |
| from-95% | --tw-gradient-from-position: 95%;  |  |
| from-100% | --tw-gradient-from-position: 100%;  |  |
| via-inherit | --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), inherit var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-current | --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), currentColor var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-transparent | --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-black | --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #000 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-white | --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-slate-50 | --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f8fafc var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-slate-100 | --tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f1f5f9 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-slate-200 | --tw-gradient-to: rgb(226 232 240 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e2e8f0 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-slate-300 | --tw-gradient-to: rgb(203 213 225 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #cbd5e1 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-slate-400 | --tw-gradient-to: rgb(148 163 184 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #94a3b8 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-slate-500 | --tw-gradient-to: rgb(100 116 139 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #64748b var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-slate-600 | --tw-gradient-to: rgb(71 85 105 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #475569 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-slate-700 | --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #334155 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-slate-800 | --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1e293b var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-slate-900 | --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0f172a var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-slate-950 | --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #020617 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-gray-50 | --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f9fafb var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-gray-100 | --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f3f4f6 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-gray-200 | --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e5e7eb var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-gray-300 | --tw-gradient-to: rgb(209 213 219 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #d1d5db var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-gray-400 | --tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #9ca3af var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-gray-500 | --tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #6b7280 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-gray-600 | --tw-gradient-to: rgb(75 85 99 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #4b5563 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-gray-700 | --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #374151 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-gray-800 | --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-gray-900 | --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #111827 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-gray-950 | --tw-gradient-to: rgb(3 7 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #030712 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-zinc-50 | --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fafafa var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-zinc-100 | --tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f4f4f5 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-zinc-200 | --tw-gradient-to: rgb(228 228 231 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e4e4e7 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-zinc-300 | --tw-gradient-to: rgb(212 212 216 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #d4d4d8 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-zinc-400 | --tw-gradient-to: rgb(161 161 170 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a1a1aa var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-zinc-500 | --tw-gradient-to: rgb(113 113 122 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #71717a var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-zinc-600 | --tw-gradient-to: rgb(82 82 91 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #52525b var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-zinc-700 | --tw-gradient-to: rgb(63 63 70 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #3f3f46 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-zinc-800 | --tw-gradient-to: rgb(39 39 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #27272a var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-zinc-900 | --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-zinc-950 | --tw-gradient-to: rgb(9 9 11 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #09090b var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-neutral-50 | --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fafafa var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-neutral-100 | --tw-gradient-to: rgb(245 245 245 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f5f5f5 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-neutral-200 | --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e5e5e5 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-neutral-300 | --tw-gradient-to: rgb(212 212 212 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #d4d4d4 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-neutral-400 | --tw-gradient-to: rgb(163 163 163 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a3a3a3 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-neutral-500 | --tw-gradient-to: rgb(115 115 115 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #737373 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-neutral-600 | --tw-gradient-to: rgb(82 82 82 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #525252 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-neutral-700 | --tw-gradient-to: rgb(64 64 64 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #404040 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-neutral-800 | --tw-gradient-to: rgb(38 38 38 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #262626 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-neutral-900 | --tw-gradient-to: rgb(23 23 23 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #171717 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-neutral-950 | --tw-gradient-to: rgb(10 10 10 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0a0a0a var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-stone-50 | --tw-gradient-to: rgb(250 250 249 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fafaf9 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-stone-100 | --tw-gradient-to: rgb(245 245 244 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f5f5f4 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-stone-200 | --tw-gradient-to: rgb(231 229 228 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e7e5e4 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-stone-300 | --tw-gradient-to: rgb(214 211 209 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #d6d3d1 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-stone-400 | --tw-gradient-to: rgb(168 162 158 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a8a29e var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-stone-500 | --tw-gradient-to: rgb(120 113 108 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #78716c var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-stone-600 | --tw-gradient-to: rgb(87 83 78 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #57534e var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-stone-700 | --tw-gradient-to: rgb(68 64 60 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #44403c var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-stone-800 | --tw-gradient-to: rgb(41 37 36 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #292524 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-stone-900 | --tw-gradient-to: rgb(28 25 23 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1c1917 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-stone-950 | --tw-gradient-to: rgb(12 10 9 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0c0a09 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-red-50 | --tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fef2f2 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-red-100 | --tw-gradient-to: rgb(254 226 226 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fee2e2 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-red-200 | --tw-gradient-to: rgb(254 202 202 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fecaca var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-red-300 | --tw-gradient-to: rgb(252 165 165 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fca5a5 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-red-400 | --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f87171 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-red-500 | --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ef4444 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-red-600 | --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #dc2626 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-red-700 | --tw-gradient-to: rgb(185 28 28 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #b91c1c var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-red-800 | --tw-gradient-to: rgb(153 27 27 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #991b1b var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-red-900 | --tw-gradient-to: rgb(127 29 29 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #7f1d1d var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-red-950 | --tw-gradient-to: rgb(69 10 10 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #450a0a var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-orange-50 | --tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fff7ed var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-orange-100 | --tw-gradient-to: rgb(255 237 213 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ffedd5 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-orange-200 | --tw-gradient-to: rgb(254 215 170 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fed7aa var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-orange-300 | --tw-gradient-to: rgb(253 186 116 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fdba74 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-orange-400 | --tw-gradient-to: rgb(251 146 60 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fb923c var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-orange-500 | --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f97316 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-orange-600 | --tw-gradient-to: rgb(234 88 12 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ea580c var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-orange-700 | --tw-gradient-to: rgb(194 65 12 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #c2410c var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-orange-800 | --tw-gradient-to: rgb(154 52 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #9a3412 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-orange-900 | --tw-gradient-to: rgb(124 45 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #7c2d12 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-orange-950 | --tw-gradient-to: rgb(67 20 7 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #431407 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-amber-50 | --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fffbeb var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-amber-100 | --tw-gradient-to: rgb(254 243 199 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fef3c7 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-amber-200 | --tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fde68a var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-amber-300 | --tw-gradient-to: rgb(252 211 77 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fcd34d var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-amber-400 | --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fbbf24 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-amber-500 | --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f59e0b var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-amber-600 | --tw-gradient-to: rgb(217 119 6 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #d97706 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-amber-700 | --tw-gradient-to: rgb(180 83 9 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #b45309 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-amber-800 | --tw-gradient-to: rgb(146 64 14 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #92400e var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-amber-900 | --tw-gradient-to: rgb(120 53 15 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #78350f var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-amber-950 | --tw-gradient-to: rgb(69 26 3 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #451a03 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-yellow-50 | --tw-gradient-to: rgb(254 252 232 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fefce8 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-yellow-100 | --tw-gradient-to: rgb(254 249 195 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fef9c3 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-yellow-200 | --tw-gradient-to: rgb(254 240 138 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fef08a var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-yellow-300 | --tw-gradient-to: rgb(253 224 71 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fde047 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-yellow-400 | --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #facc15 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-yellow-500 | --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-yellow-600 | --tw-gradient-to: rgb(202 138 4 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ca8a04 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-yellow-700 | --tw-gradient-to: rgb(161 98 7 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a16207 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-yellow-800 | --tw-gradient-to: rgb(133 77 14 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #854d0e var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-yellow-900 | --tw-gradient-to: rgb(113 63 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #713f12 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-yellow-950 | --tw-gradient-to: rgb(66 32 6 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #422006 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-lime-50 | --tw-gradient-to: rgb(247 254 231 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f7fee7 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-lime-100 | --tw-gradient-to: rgb(236 252 203 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ecfccb var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-lime-200 | --tw-gradient-to: rgb(217 249 157 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #d9f99d var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-lime-300 | --tw-gradient-to: rgb(190 242 100 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #bef264 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-lime-400 | --tw-gradient-to: rgb(163 230 53 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a3e635 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-lime-500 | --tw-gradient-to: rgb(132 204 22 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #84cc16 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-lime-600 | --tw-gradient-to: rgb(101 163 13 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #65a30d var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-lime-700 | --tw-gradient-to: rgb(77 124 15 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #4d7c0f var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-lime-800 | --tw-gradient-to: rgb(63 98 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #3f6212 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-lime-900 | --tw-gradient-to: rgb(54 83 20 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #365314 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-lime-950 | --tw-gradient-to: rgb(26 46 5 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1a2e05 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-green-50 | --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f0fdf4 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-green-100 | --tw-gradient-to: rgb(220 252 231 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #dcfce7 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-green-200 | --tw-gradient-to: rgb(187 247 208 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #bbf7d0 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-green-300 | --tw-gradient-to: rgb(134 239 172 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #86efac var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-green-400 | --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #4ade80 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-green-500 | --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #22c55e var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-green-600 | --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #16a34a var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-green-700 | --tw-gradient-to: rgb(21 128 61 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #15803d var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-green-800 | --tw-gradient-to: rgb(22 101 52 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #166534 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-green-900 | --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #14532d var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-green-950 | --tw-gradient-to: rgb(5 46 22 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #052e16 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-emerald-50 | --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ecfdf5 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-emerald-100 | --tw-gradient-to: rgb(209 250 229 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #d1fae5 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-emerald-200 | --tw-gradient-to: rgb(167 243 208 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a7f3d0 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-emerald-300 | --tw-gradient-to: rgb(110 231 183 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #6ee7b7 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-emerald-400 | --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #34d399 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-emerald-500 | --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #10b981 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-emerald-600 | --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #059669 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-emerald-700 | --tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #047857 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-emerald-800 | --tw-gradient-to: rgb(6 95 70 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #065f46 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-emerald-900 | --tw-gradient-to: rgb(6 78 59 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #064e3b var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-emerald-950 | --tw-gradient-to: rgb(2 44 34 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #022c22 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-teal-50 | --tw-gradient-to: rgb(240 253 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f0fdfa var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-teal-100 | --tw-gradient-to: rgb(204 251 241 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ccfbf1 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-teal-200 | --tw-gradient-to: rgb(153 246 228 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #99f6e4 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-teal-300 | --tw-gradient-to: rgb(94 234 212 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #5eead4 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-teal-400 | --tw-gradient-to: rgb(45 212 191 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #2dd4bf var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-teal-500 | --tw-gradient-to: rgb(20 184 166 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #14b8a6 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-teal-600 | --tw-gradient-to: rgb(13 148 136 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0d9488 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-teal-700 | --tw-gradient-to: rgb(15 118 110 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0f766e var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-teal-800 | --tw-gradient-to: rgb(17 94 89 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #115e59 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-teal-900 | --tw-gradient-to: rgb(19 78 74 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #134e4a var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-teal-950 | --tw-gradient-to: rgb(4 47 46 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #042f2e var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-cyan-50 | --tw-gradient-to: rgb(236 254 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ecfeff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-cyan-100 | --tw-gradient-to: rgb(207 250 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #cffafe var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-cyan-200 | --tw-gradient-to: rgb(165 243 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a5f3fc var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-cyan-300 | --tw-gradient-to: rgb(103 232 249 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #67e8f9 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-cyan-400 | --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #22d3ee var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-cyan-500 | --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #06b6d4 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-cyan-600 | --tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0891b2 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-cyan-700 | --tw-gradient-to: rgb(14 116 144 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0e7490 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-cyan-800 | --tw-gradient-to: rgb(21 94 117 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #155e75 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-cyan-900 | --tw-gradient-to: rgb(22 78 99 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #164e63 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-cyan-950 | --tw-gradient-to: rgb(8 51 68 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #083344 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-sky-50 | --tw-gradient-to: rgb(240 249 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f0f9ff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-sky-100 | --tw-gradient-to: rgb(224 242 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e0f2fe var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-sky-200 | --tw-gradient-to: rgb(186 230 253 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #bae6fd var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-sky-300 | --tw-gradient-to: rgb(125 211 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #7dd3fc var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-sky-400 | --tw-gradient-to: rgb(56 189 248 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #38bdf8 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-sky-500 | --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0ea5e9 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-sky-600 | --tw-gradient-to: rgb(2 132 199 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0284c7 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-sky-700 | --tw-gradient-to: rgb(3 105 161 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0369a1 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-sky-800 | --tw-gradient-to: rgb(7 89 133 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #075985 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-sky-900 | --tw-gradient-to: rgb(12 74 110 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0c4a6e var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-sky-950 | --tw-gradient-to: rgb(8 47 73 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #082f49 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-blue-50 | --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #eff6ff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-blue-100 | --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #dbeafe var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-blue-200 | --tw-gradient-to: rgb(191 219 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #bfdbfe var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-blue-300 | --tw-gradient-to: rgb(147 197 253 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #93c5fd var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-blue-400 | --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #60a5fa var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-blue-500 | --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-blue-600 | --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #2563eb var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-blue-700 | --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-blue-800 | --tw-gradient-to: rgb(30 64 175 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1e40af var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-blue-900 | --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1e3a8a var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-blue-950 | --tw-gradient-to: rgb(23 37 84 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #172554 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-indigo-50 | --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #eef2ff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-indigo-100 | --tw-gradient-to: rgb(224 231 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e0e7ff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-indigo-200 | --tw-gradient-to: rgb(199 210 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #c7d2fe var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-indigo-300 | --tw-gradient-to: rgb(165 180 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a5b4fc var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-indigo-400 | --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #818cf8 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-indigo-500 | --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #6366f1 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-indigo-600 | --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #4f46e5 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-indigo-700 | --tw-gradient-to: rgb(67 56 202 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #4338ca var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-indigo-800 | --tw-gradient-to: rgb(55 48 163 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #3730a3 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-indigo-900 | --tw-gradient-to: rgb(49 46 129 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #312e81 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-indigo-950 | --tw-gradient-to: rgb(30 27 75 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1e1b4b var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-violet-50 | --tw-gradient-to: rgb(245 243 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f5f3ff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-violet-100 | --tw-gradient-to: rgb(237 233 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ede9fe var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-violet-200 | --tw-gradient-to: rgb(221 214 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ddd6fe var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-violet-300 | --tw-gradient-to: rgb(196 181 253 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #c4b5fd var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-violet-400 | --tw-gradient-to: rgb(167 139 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a78bfa var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-violet-500 | --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #8b5cf6 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-violet-600 | --tw-gradient-to: rgb(124 58 237 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #7c3aed var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-violet-700 | --tw-gradient-to: rgb(109 40 217 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #6d28d9 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-violet-800 | --tw-gradient-to: rgb(91 33 182 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #5b21b6 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-violet-900 | --tw-gradient-to: rgb(76 29 149 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #4c1d95 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-violet-950 | --tw-gradient-to: rgb(46 16 101 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #2e1065 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-purple-50 | --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #faf5ff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-purple-100 | --tw-gradient-to: rgb(243 232 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f3e8ff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-purple-200 | --tw-gradient-to: rgb(233 213 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-purple-300 | --tw-gradient-to: rgb(216 180 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #d8b4fe var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-purple-400 | --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #c084fc var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-purple-500 | --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-purple-600 | --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-purple-700 | --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #7e22ce var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-purple-800 | --tw-gradient-to: rgb(107 33 168 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #6b21a8 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-purple-900 | --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-purple-950 | --tw-gradient-to: rgb(59 7 100 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #3b0764 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-fuchsia-50 | --tw-gradient-to: rgb(253 244 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fdf4ff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-fuchsia-100 | --tw-gradient-to: rgb(250 232 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fae8ff var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-fuchsia-200 | --tw-gradient-to: rgb(245 208 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f5d0fe var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-fuchsia-300 | --tw-gradient-to: rgb(240 171 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f0abfc var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-fuchsia-400 | --tw-gradient-to: rgb(232 121 249 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e879f9 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-fuchsia-500 | --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #d946ef var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-fuchsia-600 | --tw-gradient-to: rgb(192 38 211 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #c026d3 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-fuchsia-700 | --tw-gradient-to: rgb(162 28 175 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #a21caf var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-fuchsia-800 | --tw-gradient-to: rgb(134 25 143 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #86198f var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-fuchsia-900 | --tw-gradient-to: rgb(112 26 117 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #701a75 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-fuchsia-950 | --tw-gradient-to: rgb(74 4 78 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #4a044e var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-pink-50 | --tw-gradient-to: rgb(253 242 248 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fdf2f8 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-pink-100 | --tw-gradient-to: rgb(252 231 243 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fce7f3 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-pink-200 | --tw-gradient-to: rgb(251 207 232 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fbcfe8 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-pink-300 | --tw-gradient-to: rgb(249 168 212 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f9a8d4 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-pink-400 | --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f472b6 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-pink-500 | --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-pink-600 | --tw-gradient-to: rgb(219 39 119 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #db2777 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-pink-700 | --tw-gradient-to: rgb(190 24 93 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #be185d var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-pink-800 | --tw-gradient-to: rgb(157 23 77 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #9d174d var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-pink-900 | --tw-gradient-to: rgb(131 24 67 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #831843 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-pink-950 | --tw-gradient-to: rgb(80 7 36 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #500724 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-rose-50 | --tw-gradient-to: rgb(255 241 242 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fff1f2 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-rose-100 | --tw-gradient-to: rgb(255 228 230 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #ffe4e6 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-rose-200 | --tw-gradient-to: rgb(254 205 211 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fecdd3 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-rose-300 | --tw-gradient-to: rgb(253 164 175 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fda4af var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-rose-400 | --tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #fb7185 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-rose-500 | --tw-gradient-to: rgb(244 63 94 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f43f5e var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-rose-600 | --tw-gradient-to: rgb(225 29 72 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e11d48 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-rose-700 | --tw-gradient-to: rgb(190 18 60 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #be123c var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-rose-800 | --tw-gradient-to: rgb(159 18 57 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #9f1239 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-rose-900 | --tw-gradient-to: rgb(136 19 55 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #881337 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-rose-950 | --tw-gradient-to: rgb(76 5 25 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #4c0519 var(--tw-gradient-via-position), var(--tw-gradient-to);  |  |
| via-0% | --tw-gradient-via-position: 0%;  |  |
| via-5% | --tw-gradient-via-position: 5%;  |  |
| via-10% | --tw-gradient-via-position: 10%;  |  |
| via-15% | --tw-gradient-via-position: 15%;  |  |
| via-20% | --tw-gradient-via-position: 20%;  |  |
| via-25% | --tw-gradient-via-position: 25%;  |  |
| via-30% | --tw-gradient-via-position: 30%;  |  |
| via-35% | --tw-gradient-via-position: 35%;  |  |
| via-40% | --tw-gradient-via-position: 40%;  |  |
| via-45% | --tw-gradient-via-position: 45%;  |  |
| via-50% | --tw-gradient-via-position: 50%;  |  |
| via-55% | --tw-gradient-via-position: 55%;  |  |
| via-60% | --tw-gradient-via-position: 60%;  |  |
| via-65% | --tw-gradient-via-position: 65%;  |  |
| via-70% | --tw-gradient-via-position: 70%;  |  |
| via-75% | --tw-gradient-via-position: 75%;  |  |
| via-80% | --tw-gradient-via-position: 80%;  |  |
| via-85% | --tw-gradient-via-position: 85%;  |  |
| via-90% | --tw-gradient-via-position: 90%;  |  |
| via-95% | --tw-gradient-via-position: 95%;  |  |
| via-100% | --tw-gradient-via-position: 100%;  |  |
| to-inherit | --tw-gradient-to: inherit var(--tw-gradient-to-position);  |  |
| to-current | --tw-gradient-to: currentColor var(--tw-gradient-to-position);  |  |
| to-transparent | --tw-gradient-to: transparent var(--tw-gradient-to-position);  |  |
| to-black | --tw-gradient-to: #000 var(--tw-gradient-to-position);  |  |
| to-white | --tw-gradient-to: #fff var(--tw-gradient-to-position);  |  |
| to-slate-50 | --tw-gradient-to: #f8fafc var(--tw-gradient-to-position);  |  |
| to-slate-100 | --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);  |  |
| to-slate-200 | --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position);  |  |
| to-slate-300 | --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position);  |  |
| to-slate-400 | --tw-gradient-to: #94a3b8 var(--tw-gradient-to-position);  |  |
| to-slate-500 | --tw-gradient-to: #64748b var(--tw-gradient-to-position);  |  |
| to-slate-600 | --tw-gradient-to: #475569 var(--tw-gradient-to-position);  |  |
| to-slate-700 | --tw-gradient-to: #334155 var(--tw-gradient-to-position);  |  |
| to-slate-800 | --tw-gradient-to: #1e293b var(--tw-gradient-to-position);  |  |
| to-slate-900 | --tw-gradient-to: #0f172a var(--tw-gradient-to-position);  |  |
| to-slate-950 | --tw-gradient-to: #020617 var(--tw-gradient-to-position);  |  |
| to-gray-50 | --tw-gradient-to: #f9fafb var(--tw-gradient-to-position);  |  |
| to-gray-100 | --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);  |  |
| to-gray-200 | --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);  |  |
| to-gray-300 | --tw-gradient-to: #d1d5db var(--tw-gradient-to-position);  |  |
| to-gray-400 | --tw-gradient-to: #9ca3af var(--tw-gradient-to-position);  |  |
| to-gray-500 | --tw-gradient-to: #6b7280 var(--tw-gradient-to-position);  |  |
| to-gray-600 | --tw-gradient-to: #4b5563 var(--tw-gradient-to-position);  |  |
| to-gray-700 | --tw-gradient-to: #374151 var(--tw-gradient-to-position);  |  |
| to-gray-800 | --tw-gradient-to: #1f2937 var(--tw-gradient-to-position);  |  |
| to-gray-900 | --tw-gradient-to: #111827 var(--tw-gradient-to-position);  |  |
| to-gray-950 | --tw-gradient-to: #030712 var(--tw-gradient-to-position);  |  |
| to-zinc-50 | --tw-gradient-to: #fafafa var(--tw-gradient-to-position);  |  |
| to-zinc-100 | --tw-gradient-to: #f4f4f5 var(--tw-gradient-to-position);  |  |
| to-zinc-200 | --tw-gradient-to: #e4e4e7 var(--tw-gradient-to-position);  |  |
| to-zinc-300 | --tw-gradient-to: #d4d4d8 var(--tw-gradient-to-position);  |  |
| to-zinc-400 | --tw-gradient-to: #a1a1aa var(--tw-gradient-to-position);  |  |
| to-zinc-500 | --tw-gradient-to: #71717a var(--tw-gradient-to-position);  |  |
| to-zinc-600 | --tw-gradient-to: #52525b var(--tw-gradient-to-position);  |  |
| to-zinc-700 | --tw-gradient-to: #3f3f46 var(--tw-gradient-to-position);  |  |
| to-zinc-800 | --tw-gradient-to: #27272a var(--tw-gradient-to-position);  |  |
| to-zinc-900 | --tw-gradient-to: #18181b var(--tw-gradient-to-position);  |  |
| to-zinc-950 | --tw-gradient-to: #09090b var(--tw-gradient-to-position);  |  |
| to-neutral-50 | --tw-gradient-to: #fafafa var(--tw-gradient-to-position);  |  |
| to-neutral-100 | --tw-gradient-to: #f5f5f5 var(--tw-gradient-to-position);  |  |
| to-neutral-200 | --tw-gradient-to: #e5e5e5 var(--tw-gradient-to-position);  |  |
| to-neutral-300 | --tw-gradient-to: #d4d4d4 var(--tw-gradient-to-position);  |  |
| to-neutral-400 | --tw-gradient-to: #a3a3a3 var(--tw-gradient-to-position);  |  |
| to-neutral-500 | --tw-gradient-to: #737373 var(--tw-gradient-to-position);  |  |
| to-neutral-600 | --tw-gradient-to: #525252 var(--tw-gradient-to-position);  |  |
| to-neutral-700 | --tw-gradient-to: #404040 var(--tw-gradient-to-position);  |  |
| to-neutral-800 | --tw-gradient-to: #262626 var(--tw-gradient-to-position);  |  |
| to-neutral-900 | --tw-gradient-to: #171717 var(--tw-gradient-to-position);  |  |
| to-neutral-950 | --tw-gradient-to: #0a0a0a var(--tw-gradient-to-position);  |  |
| to-stone-50 | --tw-gradient-to: #fafaf9 var(--tw-gradient-to-position);  |  |
| to-stone-100 | --tw-gradient-to: #f5f5f4 var(--tw-gradient-to-position);  |  |
| to-stone-200 | --tw-gradient-to: #e7e5e4 var(--tw-gradient-to-position);  |  |
| to-stone-300 | --tw-gradient-to: #d6d3d1 var(--tw-gradient-to-position);  |  |
| to-stone-400 | --tw-gradient-to: #a8a29e var(--tw-gradient-to-position);  |  |
| to-stone-500 | --tw-gradient-to: #78716c var(--tw-gradient-to-position);  |  |
| to-stone-600 | --tw-gradient-to: #57534e var(--tw-gradient-to-position);  |  |
| to-stone-700 | --tw-gradient-to: #44403c var(--tw-gradient-to-position);  |  |
| to-stone-800 | --tw-gradient-to: #292524 var(--tw-gradient-to-position);  |  |
| to-stone-900 | --tw-gradient-to: #1c1917 var(--tw-gradient-to-position);  |  |
| to-stone-950 | --tw-gradient-to: #0c0a09 var(--tw-gradient-to-position);  |  |
| to-red-50 | --tw-gradient-to: #fef2f2 var(--tw-gradient-to-position);  |  |
| to-red-100 | --tw-gradient-to: #fee2e2 var(--tw-gradient-to-position);  |  |
| to-red-200 | --tw-gradient-to: #fecaca var(--tw-gradient-to-position);  |  |
| to-red-300 | --tw-gradient-to: #fca5a5 var(--tw-gradient-to-position);  |  |
| to-red-400 | --tw-gradient-to: #f87171 var(--tw-gradient-to-position);  |  |
| to-red-500 | --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);  |  |
| to-red-600 | --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);  |  |
| to-red-700 | --tw-gradient-to: #b91c1c var(--tw-gradient-to-position);  |  |
| to-red-800 | --tw-gradient-to: #991b1b var(--tw-gradient-to-position);  |  |
| to-red-900 | --tw-gradient-to: #7f1d1d var(--tw-gradient-to-position);  |  |
| to-red-950 | --tw-gradient-to: #450a0a var(--tw-gradient-to-position);  |  |
| to-orange-50 | --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);  |  |
| to-orange-100 | --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position);  |  |
| to-orange-200 | --tw-gradient-to: #fed7aa var(--tw-gradient-to-position);  |  |
| to-orange-300 | --tw-gradient-to: #fdba74 var(--tw-gradient-to-position);  |  |
| to-orange-400 | --tw-gradient-to: #fb923c var(--tw-gradient-to-position);  |  |
| to-orange-500 | --tw-gradient-to: #f97316 var(--tw-gradient-to-position);  |  |
| to-orange-600 | --tw-gradient-to: #ea580c var(--tw-gradient-to-position);  |  |
| to-orange-700 | --tw-gradient-to: #c2410c var(--tw-gradient-to-position);  |  |
| to-orange-800 | --tw-gradient-to: #9a3412 var(--tw-gradient-to-position);  |  |
| to-orange-900 | --tw-gradient-to: #7c2d12 var(--tw-gradient-to-position);  |  |
| to-orange-950 | --tw-gradient-to: #431407 var(--tw-gradient-to-position);  |  |
| to-amber-50 | --tw-gradient-to: #fffbeb var(--tw-gradient-to-position);  |  |
| to-amber-100 | --tw-gradient-to: #fef3c7 var(--tw-gradient-to-position);  |  |
| to-amber-200 | --tw-gradient-to: #fde68a var(--tw-gradient-to-position);  |  |
| to-amber-300 | --tw-gradient-to: #fcd34d var(--tw-gradient-to-position);  |  |
| to-amber-400 | --tw-gradient-to: #fbbf24 var(--tw-gradient-to-position);  |  |
| to-amber-500 | --tw-gradient-to: #f59e0b var(--tw-gradient-to-position);  |  |
| to-amber-600 | --tw-gradient-to: #d97706 var(--tw-gradient-to-position);  |  |
| to-amber-700 | --tw-gradient-to: #b45309 var(--tw-gradient-to-position);  |  |
| to-amber-800 | --tw-gradient-to: #92400e var(--tw-gradient-to-position);  |  |
| to-amber-900 | --tw-gradient-to: #78350f var(--tw-gradient-to-position);  |  |
| to-amber-950 | --tw-gradient-to: #451a03 var(--tw-gradient-to-position);  |  |
| to-yellow-50 | --tw-gradient-to: #fefce8 var(--tw-gradient-to-position);  |  |
| to-yellow-100 | --tw-gradient-to: #fef9c3 var(--tw-gradient-to-position);  |  |
| to-yellow-200 | --tw-gradient-to: #fef08a var(--tw-gradient-to-position);  |  |
| to-yellow-300 | --tw-gradient-to: #fde047 var(--tw-gradient-to-position);  |  |
| to-yellow-400 | --tw-gradient-to: #facc15 var(--tw-gradient-to-position);  |  |
| to-yellow-500 | --tw-gradient-to: #eab308 var(--tw-gradient-to-position);  |  |
| to-yellow-600 | --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);  |  |
| to-yellow-700 | --tw-gradient-to: #a16207 var(--tw-gradient-to-position);  |  |
| to-yellow-800 | --tw-gradient-to: #854d0e var(--tw-gradient-to-position);  |  |
| to-yellow-900 | --tw-gradient-to: #713f12 var(--tw-gradient-to-position);  |  |
| to-yellow-950 | --tw-gradient-to: #422006 var(--tw-gradient-to-position);  |  |
| to-lime-50 | --tw-gradient-to: #f7fee7 var(--tw-gradient-to-position);  |  |
| to-lime-100 | --tw-gradient-to: #ecfccb var(--tw-gradient-to-position);  |  |
| to-lime-200 | --tw-gradient-to: #d9f99d var(--tw-gradient-to-position);  |  |
| to-lime-300 | --tw-gradient-to: #bef264 var(--tw-gradient-to-position);  |  |
| to-lime-400 | --tw-gradient-to: #a3e635 var(--tw-gradient-to-position);  |  |
| to-lime-500 | --tw-gradient-to: #84cc16 var(--tw-gradient-to-position);  |  |
| to-lime-600 | --tw-gradient-to: #65a30d var(--tw-gradient-to-position);  |  |
| to-lime-700 | --tw-gradient-to: #4d7c0f var(--tw-gradient-to-position);  |  |
| to-lime-800 | --tw-gradient-to: #3f6212 var(--tw-gradient-to-position);  |  |
| to-lime-900 | --tw-gradient-to: #365314 var(--tw-gradient-to-position);  |  |
| to-lime-950 | --tw-gradient-to: #1a2e05 var(--tw-gradient-to-position);  |  |
| to-green-50 | --tw-gradient-to: #f0fdf4 var(--tw-gradient-to-position);  |  |
| to-green-100 | --tw-gradient-to: #dcfce7 var(--tw-gradient-to-position);  |  |
| to-green-200 | --tw-gradient-to: #bbf7d0 var(--tw-gradient-to-position);  |  |
| to-green-300 | --tw-gradient-to: #86efac var(--tw-gradient-to-position);  |  |
| to-green-400 | --tw-gradient-to: #4ade80 var(--tw-gradient-to-position);  |  |
| to-green-500 | --tw-gradient-to: #22c55e var(--tw-gradient-to-position);  |  |
| to-green-600 | --tw-gradient-to: #16a34a var(--tw-gradient-to-position);  |  |
| to-green-700 | --tw-gradient-to: #15803d var(--tw-gradient-to-position);  |  |
| to-green-800 | --tw-gradient-to: #166534 var(--tw-gradient-to-position);  |  |
| to-green-900 | --tw-gradient-to: #14532d var(--tw-gradient-to-position);  |  |
| to-green-950 | --tw-gradient-to: #052e16 var(--tw-gradient-to-position);  |  |
| to-emerald-50 | --tw-gradient-to: #ecfdf5 var(--tw-gradient-to-position);  |  |
| to-emerald-100 | --tw-gradient-to: #d1fae5 var(--tw-gradient-to-position);  |  |
| to-emerald-200 | --tw-gradient-to: #a7f3d0 var(--tw-gradient-to-position);  |  |
| to-emerald-300 | --tw-gradient-to: #6ee7b7 var(--tw-gradient-to-position);  |  |
| to-emerald-400 | --tw-gradient-to: #34d399 var(--tw-gradient-to-position);  |  |
| to-emerald-500 | --tw-gradient-to: #10b981 var(--tw-gradient-to-position);  |  |
| to-emerald-600 | --tw-gradient-to: #059669 var(--tw-gradient-to-position);  |  |
| to-emerald-700 | --tw-gradient-to: #047857 var(--tw-gradient-to-position);  |  |
| to-emerald-800 | --tw-gradient-to: #065f46 var(--tw-gradient-to-position);  |  |
| to-emerald-900 | --tw-gradient-to: #064e3b var(--tw-gradient-to-position);  |  |
| to-emerald-950 | --tw-gradient-to: #022c22 var(--tw-gradient-to-position);  |  |
| to-teal-50 | --tw-gradient-to: #f0fdfa var(--tw-gradient-to-position);  |  |
| to-teal-100 | --tw-gradient-to: #ccfbf1 var(--tw-gradient-to-position);  |  |
| to-teal-200 | --tw-gradient-to: #99f6e4 var(--tw-gradient-to-position);  |  |
| to-teal-300 | --tw-gradient-to: #5eead4 var(--tw-gradient-to-position);  |  |
| to-teal-400 | --tw-gradient-to: #2dd4bf var(--tw-gradient-to-position);  |  |
| to-teal-500 | --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position);  |  |
| to-teal-600 | --tw-gradient-to: #0d9488 var(--tw-gradient-to-position);  |  |
| to-teal-700 | --tw-gradient-to: #0f766e var(--tw-gradient-to-position);  |  |
| to-teal-800 | --tw-gradient-to: #115e59 var(--tw-gradient-to-position);  |  |
| to-teal-900 | --tw-gradient-to: #134e4a var(--tw-gradient-to-position);  |  |
| to-teal-950 | --tw-gradient-to: #042f2e var(--tw-gradient-to-position);  |  |
| to-cyan-50 | --tw-gradient-to: #ecfeff var(--tw-gradient-to-position);  |  |
| to-cyan-100 | --tw-gradient-to: #cffafe var(--tw-gradient-to-position);  |  |
| to-cyan-200 | --tw-gradient-to: #a5f3fc var(--tw-gradient-to-position);  |  |
| to-cyan-300 | --tw-gradient-to: #67e8f9 var(--tw-gradient-to-position);  |  |
| to-cyan-400 | --tw-gradient-to: #22d3ee var(--tw-gradient-to-position);  |  |
| to-cyan-500 | --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);  |  |
| to-cyan-600 | --tw-gradient-to: #0891b2 var(--tw-gradient-to-position);  |  |
| to-cyan-700 | --tw-gradient-to: #0e7490 var(--tw-gradient-to-position);  |  |
| to-cyan-800 | --tw-gradient-to: #155e75 var(--tw-gradient-to-position);  |  |
| to-cyan-900 | --tw-gradient-to: #164e63 var(--tw-gradient-to-position);  |  |
| to-cyan-950 | --tw-gradient-to: #083344 var(--tw-gradient-to-position);  |  |
| to-sky-50 | --tw-gradient-to: #f0f9ff var(--tw-gradient-to-position);  |  |
| to-sky-100 | --tw-gradient-to: #e0f2fe var(--tw-gradient-to-position);  |  |
| to-sky-200 | --tw-gradient-to: #bae6fd var(--tw-gradient-to-position);  |  |
| to-sky-300 | --tw-gradient-to: #7dd3fc var(--tw-gradient-to-position);  |  |
| to-sky-400 | --tw-gradient-to: #38bdf8 var(--tw-gradient-to-position);  |  |
| to-sky-500 | --tw-gradient-to: #0ea5e9 var(--tw-gradient-to-position);  |  |
| to-sky-600 | --tw-gradient-to: #0284c7 var(--tw-gradient-to-position);  |  |
| to-sky-700 | --tw-gradient-to: #0369a1 var(--tw-gradient-to-position);  |  |
| to-sky-800 | --tw-gradient-to: #075985 var(--tw-gradient-to-position);  |  |
| to-sky-900 | --tw-gradient-to: #0c4a6e var(--tw-gradient-to-position);  |  |
| to-sky-950 | --tw-gradient-to: #082f49 var(--tw-gradient-to-position);  |  |
| to-blue-50 | --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);  |  |
| to-blue-100 | --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);  |  |
| to-blue-200 | --tw-gradient-to: #bfdbfe var(--tw-gradient-to-position);  |  |
| to-blue-300 | --tw-gradient-to: #93c5fd var(--tw-gradient-to-position);  |  |
| to-blue-400 | --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);  |  |
| to-blue-500 | --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);  |  |
| to-blue-600 | --tw-gradient-to: #2563eb var(--tw-gradient-to-position);  |  |
| to-blue-700 | --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);  |  |
| to-blue-800 | --tw-gradient-to: #1e40af var(--tw-gradient-to-position);  |  |
| to-blue-900 | --tw-gradient-to: #1e3a8a var(--tw-gradient-to-position);  |  |
| to-blue-950 | --tw-gradient-to: #172554 var(--tw-gradient-to-position);  |  |
| to-indigo-50 | --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);  |  |
| to-indigo-100 | --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position);  |  |
| to-indigo-200 | --tw-gradient-to: #c7d2fe var(--tw-gradient-to-position);  |  |
| to-indigo-300 | --tw-gradient-to: #a5b4fc var(--tw-gradient-to-position);  |  |
| to-indigo-400 | --tw-gradient-to: #818cf8 var(--tw-gradient-to-position);  |  |
| to-indigo-500 | --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);  |  |
| to-indigo-600 | --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);  |  |
| to-indigo-700 | --tw-gradient-to: #4338ca var(--tw-gradient-to-position);  |  |
| to-indigo-800 | --tw-gradient-to: #3730a3 var(--tw-gradient-to-position);  |  |
| to-indigo-900 | --tw-gradient-to: #312e81 var(--tw-gradient-to-position);  |  |
| to-indigo-950 | --tw-gradient-to: #1e1b4b var(--tw-gradient-to-position);  |  |
| to-violet-50 | --tw-gradient-to: #f5f3ff var(--tw-gradient-to-position);  |  |
| to-violet-100 | --tw-gradient-to: #ede9fe var(--tw-gradient-to-position);  |  |
| to-violet-200 | --tw-gradient-to: #ddd6fe var(--tw-gradient-to-position);  |  |
| to-violet-300 | --tw-gradient-to: #c4b5fd var(--tw-gradient-to-position);  |  |
| to-violet-400 | --tw-gradient-to: #a78bfa var(--tw-gradient-to-position);  |  |
| to-violet-500 | --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);  |  |
| to-violet-600 | --tw-gradient-to: #7c3aed var(--tw-gradient-to-position);  |  |
| to-violet-700 | --tw-gradient-to: #6d28d9 var(--tw-gradient-to-position);  |  |
| to-violet-800 | --tw-gradient-to: #5b21b6 var(--tw-gradient-to-position);  |  |
| to-violet-900 | --tw-gradient-to: #4c1d95 var(--tw-gradient-to-position);  |  |
| to-violet-950 | --tw-gradient-to: #2e1065 var(--tw-gradient-to-position);  |  |
| to-purple-50 | --tw-gradient-to: #faf5ff var(--tw-gradient-to-position);  |  |
| to-purple-100 | --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);  |  |
| to-purple-200 | --tw-gradient-to: #e9d5ff var(--tw-gradient-to-position);  |  |
| to-purple-300 | --tw-gradient-to: #d8b4fe var(--tw-gradient-to-position);  |  |
| to-purple-400 | --tw-gradient-to: #c084fc var(--tw-gradient-to-position);  |  |
| to-purple-500 | --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);  |  |
| to-purple-600 | --tw-gradient-to: #9333ea var(--tw-gradient-to-position);  |  |
| to-purple-700 | --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);  |  |
| to-purple-800 | --tw-gradient-to: #6b21a8 var(--tw-gradient-to-position);  |  |
| to-purple-900 | --tw-gradient-to: #581c87 var(--tw-gradient-to-position);  |  |
| to-purple-950 | --tw-gradient-to: #3b0764 var(--tw-gradient-to-position);  |  |
| to-fuchsia-50 | --tw-gradient-to: #fdf4ff var(--tw-gradient-to-position);  |  |
| to-fuchsia-100 | --tw-gradient-to: #fae8ff var(--tw-gradient-to-position);  |  |
| to-fuchsia-200 | --tw-gradient-to: #f5d0fe var(--tw-gradient-to-position);  |  |
| to-fuchsia-300 | --tw-gradient-to: #f0abfc var(--tw-gradient-to-position);  |  |
| to-fuchsia-400 | --tw-gradient-to: #e879f9 var(--tw-gradient-to-position);  |  |
| to-fuchsia-500 | --tw-gradient-to: #d946ef var(--tw-gradient-to-position);  |  |
| to-fuchsia-600 | --tw-gradient-to: #c026d3 var(--tw-gradient-to-position);  |  |
| to-fuchsia-700 | --tw-gradient-to: #a21caf var(--tw-gradient-to-position);  |  |
| to-fuchsia-800 | --tw-gradient-to: #86198f var(--tw-gradient-to-position);  |  |
| to-fuchsia-900 | --tw-gradient-to: #701a75 var(--tw-gradient-to-position);  |  |
| to-fuchsia-950 | --tw-gradient-to: #4a044e var(--tw-gradient-to-position);  |  |
| to-pink-50 | --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position);  |  |
| to-pink-100 | --tw-gradient-to: #fce7f3 var(--tw-gradient-to-position);  |  |
| to-pink-200 | --tw-gradient-to: #fbcfe8 var(--tw-gradient-to-position);  |  |
| to-pink-300 | --tw-gradient-to: #f9a8d4 var(--tw-gradient-to-position);  |  |
| to-pink-400 | --tw-gradient-to: #f472b6 var(--tw-gradient-to-position);  |  |
| to-pink-500 | --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);  |  |
| to-pink-600 | --tw-gradient-to: #db2777 var(--tw-gradient-to-position);  |  |
| to-pink-700 | --tw-gradient-to: #be185d var(--tw-gradient-to-position);  |  |
| to-pink-800 | --tw-gradient-to: #9d174d var(--tw-gradient-to-position);  |  |
| to-pink-900 | --tw-gradient-to: #831843 var(--tw-gradient-to-position);  |  |
| to-pink-950 | --tw-gradient-to: #500724 var(--tw-gradient-to-position);  |  |
| to-rose-50 | --tw-gradient-to: #fff1f2 var(--tw-gradient-to-position);  |  |
| to-rose-100 | --tw-gradient-to: #ffe4e6 var(--tw-gradient-to-position);  |  |
| to-rose-200 | --tw-gradient-to: #fecdd3 var(--tw-gradient-to-position);  |  |
| to-rose-300 | --tw-gradient-to: #fda4af var(--tw-gradient-to-position);  |  |
| to-rose-400 | --tw-gradient-to: #fb7185 var(--tw-gradient-to-position);  |  |
| to-rose-500 | --tw-gradient-to: #f43f5e var(--tw-gradient-to-position);  |  |
| to-rose-600 | --tw-gradient-to: #e11d48 var(--tw-gradient-to-position);  |  |
| to-rose-700 | --tw-gradient-to: #be123c var(--tw-gradient-to-position);  |  |
| to-rose-800 | --tw-gradient-to: #9f1239 var(--tw-gradient-to-position);  |  |
| to-rose-900 | --tw-gradient-to: #881337 var(--tw-gradient-to-position);  |  |
| to-rose-950 | --tw-gradient-to: #4c0519 var(--tw-gradient-to-position);  |  |
| to-0% | --tw-gradient-to-position: 0%;  |  |
| to-5% | --tw-gradient-to-position: 5%;  |  |
| to-10% | --tw-gradient-to-position: 10%;  |  |
| to-15% | --tw-gradient-to-position: 15%;  |  |
| to-20% | --tw-gradient-to-position: 20%;  |  |
| to-25% | --tw-gradient-to-position: 25%;  |  |
| to-30% | --tw-gradient-to-position: 30%;  |  |
| to-35% | --tw-gradient-to-position: 35%;  |  |
| to-40% | --tw-gradient-to-position: 40%;  |  |
| to-45% | --tw-gradient-to-position: 45%;  |  |
| to-50% | --tw-gradient-to-position: 50%;  |  |
| to-55% | --tw-gradient-to-position: 55%;  |  |
| to-60% | --tw-gradient-to-position: 60%;  |  |
| to-65% | --tw-gradient-to-position: 65%;  |  |
| to-70% | --tw-gradient-to-position: 70%;  |  |
| to-75% | --tw-gradient-to-position: 75%;  |  |
| to-80% | --tw-gradient-to-position: 80%;  |  |
| to-85% | --tw-gradient-to-position: 85%;  |  |
| to-90% | --tw-gradient-to-position: 90%;  |  |
| to-95% | --tw-gradient-to-position: 95%;  |  |
| to-100% | --tw-gradient-to-position: 100%;  |  |






 Basic usage
-----------

 ### Starting color

 Set the starting color of a gradient using the `from-{color}` utilities.

 
```
<div class="bg-gradient-to-r from-indigo-500 ..."></div>
```
 ### Ending color

 Set the ending color of a gradient using the `to-{color}` utilities.

 
```
<div class="bg-gradient-to-r from-cyan-500 to-blue-500 ..."></div>
```
 Gradients to **do not** fade in from transparent by default. To fade in from transparent, reverse the gradient direction and use a `from-{color}` utility.

 ### Middle color

 Add a middle color to a gradient using the `via-{color}` utilities.

 
```
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 ..."></div>
```
 Gradients with a `from-{color}` and `via-{color}` will fade out to transparent by default if no `to-{color}` is present.

 ### Specifying stop positions

 For more control over the gradient color stop positions, combine the `from-{position}`, `via-{position}` and `to-{position}` utilities with the gradient color utilities.

 
```
<div class="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ..."></div>
```
 ### Fading to transparent

 Gradients fade out to transparent by default, without requiring you to add `to-transparent` explicitly. Tailwind intelligently calculates the *right* “transparent” value to use based on the starting color to avoid [a bug in Safari < 15.4](https://bugs.webkit.org/show_bug.cgi?id=150940) that causes fading to simply the `transparent` keyword to fade through gray, which just looks awful.

 

Don’t add `to-transparent` explicitly


 
```
<div class="bg-gradient-to-r from-blue-500 to-transparent">
  <!-- ... -->
</div>
```
 

Only specify a from color and fade to transparent automatically


 
```
<div class="bg-gradient-to-r from-blue-500">
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:from-pink-500` to only apply the `from-pink-500` utility on hover.



```
<button type="button" class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 ...">
  Hover me
</button>
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:from-yellow-500` to apply the `from-yellow-500` utility at only medium screen sizes and above.



```
<div class="bg-gradient-to-r from-purple-400 md:from-yellow-500">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as gradient colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your gradient colors by editing `theme.gradientColorStops` or `theme.extend.gradientColorStops` in your `tailwind.config.js` file.

 In addition to the colors, you can also customize the gradient color stop positions by editing `theme.gradientColorStopPositions` or `theme.extend.gradientColorStopPositions`.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      gradientColorStopPositions: {
        33: '33%',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `from|via|to-{color|position}` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="from-[#243c5a]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/gradient-color-stops>

Outline Offset
==============


Utilities for controlling the offset of an element's outline.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| outline-offset-0 | outline-offset: 0px;  |
| outline-offset-1 | outline-offset: 1px;  |
| outline-offset-2 | outline-offset: 2px;  |
| outline-offset-4 | outline-offset: 4px;  |
| outline-offset-8 | outline-offset: 8px;  |






Basic usage
-----------

 ### Setting the outline offset

 Use the `outline-{offset}` utilities to change the offset of an element’s outline.

 
```
<button class="outline outline-offset-0 ...">Button A</button>
<button class="outline outline-offset-2 ...">Button B</button>
<button class="outline outline-offset-4 ...">Button C</button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:outline-offset-2` to only apply the `outline-offset-2` utility on hover.



```
<button class="outline hover:outline-offset-2">
  <!-- ... -->
</button>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:outline-offset-2` to apply the `outline-offset-2` utility at only medium screen sizes and above.



```
<button class="outline md:outline-offset-2">
  <!-- ... -->
</button>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 You can customize the `outline-offset-{width}` utilities by editing `theme.outlineOffset` or `theme.extend.outlineOffset` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      outlineOffset: {
        3: '3px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `outline-offset` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<button class="outline-offset-[3px]">
  <!-- ... -->
</button>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/outline-offset>

Ring Width
==========


Utilities for creating outline rings with box-shadows.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| ring-0 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);  |
| ring-1 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);  |
| ring-2 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);  |
| ring | box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);  |
| ring-4 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);  |
| ring-8 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);  |
| ring-inset | --tw-ring-inset: inset;  |






Basic usage
-----------

 ### Adding a ring

 Use the `ring-{width}` utilities to apply solid box-shadow of a specific thickness to an element. Rings are a semi-transparent blue color by default, similar to the default focus ring style in many systems.

 
```
<button class="... ring-offset-2 ring-2">Button A</button>
<button class="... ring-offset-2 ring">Button B</button>
<button class="... ring-offset-2 ring-4">Button C</button>
```
 Ring utilities compose gracefully with regular `shadow-{size}` utilities and can be combined on the same element.

 You can also control the color, opacity, and offset of rings using the [ringColor](ring-color), [ringOpacity](/docs/ring-color#changing-the-opacity), and [ringOffsetWidth](ring-offset-width) utilities.

 ### Focus rings

 The ring width utilities make it easy to use custom focus rings by adding `focus:` to the beginning of any `ring-{width}` utility.

 
```
<button class="... focus:ring-2">Save Changes</button>
```
 The `focus` variant is enabled by default for the [ringColor](ring-color), [ringOpacity](/docs/ring-color#changing-the-opacity), [ringOffsetWidth](ring-offset-width), and [ringOffsetColor](ring-offset-color) utilities as well.

 ### Inset rings

 Use the `ring-inset` utility to force a ring to render on the inside of an element instead of the outside. This can be useful for elements at the edge of the screen where part of the ring wouldn’t be visible.

 
```
<button class="... ring-2 ring-pink-300 ring-inset">
  Save Changes
</button><button class="... ring-2 ring-pink-500 ring-inset">
  Save Changes
</button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:ring-4` to only apply the `ring-4` utility on hover.



```
<div class="ring-2 hover:ring-4">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:ring-4` to apply the `ring-4` utility at only medium screen sizes and above.



```
<div class="ring-2 md:ring-4">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `ring-width` utilities. You can customize these values by editing `theme.ringWidth` or `theme.extend.ringWidth` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      ringWidth: {
        '10': '10px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `ring` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="ring-[10px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/ring-width>

Ring Color
==========


Utilities for setting the color of outline rings.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| ring-inherit | --tw-ring-color: inherit;  |
| ring-current | --tw-ring-color: currentColor;  |
| ring-transparent | --tw-ring-color: transparent;  |
| ring-black | --tw-ring-color: rgb(0 0 0);  |
| ring-white | --tw-ring-color: rgb(255 255 255);  |
| ring-slate-50 | --tw-ring-color: rgb(248 250 252);  |
| ring-slate-100 | --tw-ring-color: rgb(241 245 249);  |
| ring-slate-200 | --tw-ring-color: rgb(226 232 240);  |
| ring-slate-300 | --tw-ring-color: rgb(203 213 225);  |
| ring-slate-400 | --tw-ring-color: rgb(148 163 184);  |
| ring-slate-500 | --tw-ring-color: rgb(100 116 139);  |
| ring-slate-600 | --tw-ring-color: rgb(71 85 105);  |
| ring-slate-700 | --tw-ring-color: rgb(51 65 85);  |
| ring-slate-800 | --tw-ring-color: rgb(30 41 59);  |
| ring-slate-900 | --tw-ring-color: rgb(15 23 42);  |
| ring-slate-950 | --tw-ring-color: rgb(2 6 23);  |
| ring-gray-50 | --tw-ring-color: rgb(249 250 251);  |
| ring-gray-100 | --tw-ring-color: rgb(243 244 246);  |
| ring-gray-200 | --tw-ring-color: rgb(229 231 235);  |
| ring-gray-300 | --tw-ring-color: rgb(209 213 219);  |
| ring-gray-400 | --tw-ring-color: rgb(156 163 175);  |
| ring-gray-500 | --tw-ring-color: rgb(107 114 128);  |
| ring-gray-600 | --tw-ring-color: rgb(75 85 99);  |
| ring-gray-700 | --tw-ring-color: rgb(55 65 81);  |
| ring-gray-800 | --tw-ring-color: rgb(31 41 55);  |
| ring-gray-900 | --tw-ring-color: rgb(17 24 39);  |
| ring-gray-950 | --tw-ring-color: rgb(3 7 18);  |
| ring-zinc-50 | --tw-ring-color: rgb(250 250 250);  |
| ring-zinc-100 | --tw-ring-color: rgb(244 244 245);  |
| ring-zinc-200 | --tw-ring-color: rgb(228 228 231);  |
| ring-zinc-300 | --tw-ring-color: rgb(212 212 216);  |
| ring-zinc-400 | --tw-ring-color: rgb(161 161 170);  |
| ring-zinc-500 | --tw-ring-color: rgb(113 113 122);  |
| ring-zinc-600 | --tw-ring-color: rgb(82 82 91);  |
| ring-zinc-700 | --tw-ring-color: rgb(63 63 70);  |
| ring-zinc-800 | --tw-ring-color: rgb(39 39 42);  |
| ring-zinc-900 | --tw-ring-color: rgb(24 24 27);  |
| ring-zinc-950 | --tw-ring-color: rgb(9 9 11);  |
| ring-neutral-50 | --tw-ring-color: rgb(250 250 250);  |
| ring-neutral-100 | --tw-ring-color: rgb(245 245 245);  |
| ring-neutral-200 | --tw-ring-color: rgb(229 229 229);  |
| ring-neutral-300 | --tw-ring-color: rgb(212 212 212);  |
| ring-neutral-400 | --tw-ring-color: rgb(163 163 163);  |
| ring-neutral-500 | --tw-ring-color: rgb(115 115 115);  |
| ring-neutral-600 | --tw-ring-color: rgb(82 82 82);  |
| ring-neutral-700 | --tw-ring-color: rgb(64 64 64);  |
| ring-neutral-800 | --tw-ring-color: rgb(38 38 38);  |
| ring-neutral-900 | --tw-ring-color: rgb(23 23 23);  |
| ring-neutral-950 | --tw-ring-color: rgb(10 10 10);  |
| ring-stone-50 | --tw-ring-color: rgb(250 250 249);  |
| ring-stone-100 | --tw-ring-color: rgb(245 245 244);  |
| ring-stone-200 | --tw-ring-color: rgb(231 229 228);  |
| ring-stone-300 | --tw-ring-color: rgb(214 211 209);  |
| ring-stone-400 | --tw-ring-color: rgb(168 162 158);  |
| ring-stone-500 | --tw-ring-color: rgb(120 113 108);  |
| ring-stone-600 | --tw-ring-color: rgb(87 83 78);  |
| ring-stone-700 | --tw-ring-color: rgb(68 64 60);  |
| ring-stone-800 | --tw-ring-color: rgb(41 37 36);  |
| ring-stone-900 | --tw-ring-color: rgb(28 25 23);  |
| ring-stone-950 | --tw-ring-color: rgb(12 10 9);  |
| ring-red-50 | --tw-ring-color: rgb(254 242 242);  |
| ring-red-100 | --tw-ring-color: rgb(254 226 226);  |
| ring-red-200 | --tw-ring-color: rgb(254 202 202);  |
| ring-red-300 | --tw-ring-color: rgb(252 165 165);  |
| ring-red-400 | --tw-ring-color: rgb(248 113 113);  |
| ring-red-500 | --tw-ring-color: rgb(239 68 68);  |
| ring-red-600 | --tw-ring-color: rgb(220 38 38);  |
| ring-red-700 | --tw-ring-color: rgb(185 28 28);  |
| ring-red-800 | --tw-ring-color: rgb(153 27 27);  |
| ring-red-900 | --tw-ring-color: rgb(127 29 29);  |
| ring-red-950 | --tw-ring-color: rgb(69 10 10);  |
| ring-orange-50 | --tw-ring-color: rgb(255 247 237);  |
| ring-orange-100 | --tw-ring-color: rgb(255 237 213);  |
| ring-orange-200 | --tw-ring-color: rgb(254 215 170);  |
| ring-orange-300 | --tw-ring-color: rgb(253 186 116);  |
| ring-orange-400 | --tw-ring-color: rgb(251 146 60);  |
| ring-orange-500 | --tw-ring-color: rgb(249 115 22);  |
| ring-orange-600 | --tw-ring-color: rgb(234 88 12);  |
| ring-orange-700 | --tw-ring-color: rgb(194 65 12);  |
| ring-orange-800 | --tw-ring-color: rgb(154 52 18);  |
| ring-orange-900 | --tw-ring-color: rgb(124 45 18);  |
| ring-orange-950 | --tw-ring-color: rgb(67 20 7);  |
| ring-amber-50 | --tw-ring-color: rgb(255 251 235);  |
| ring-amber-100 | --tw-ring-color: rgb(254 243 199);  |
| ring-amber-200 | --tw-ring-color: rgb(253 230 138);  |
| ring-amber-300 | --tw-ring-color: rgb(252 211 77);  |
| ring-amber-400 | --tw-ring-color: rgb(251 191 36);  |
| ring-amber-500 | --tw-ring-color: rgb(245 158 11);  |
| ring-amber-600 | --tw-ring-color: rgb(217 119 6);  |
| ring-amber-700 | --tw-ring-color: rgb(180 83 9);  |
| ring-amber-800 | --tw-ring-color: rgb(146 64 14);  |
| ring-amber-900 | --tw-ring-color: rgb(120 53 15);  |
| ring-amber-950 | --tw-ring-color: rgb(69 26 3);  |
| ring-yellow-50 | --tw-ring-color: rgb(254 252 232);  |
| ring-yellow-100 | --tw-ring-color: rgb(254 249 195);  |
| ring-yellow-200 | --tw-ring-color: rgb(254 240 138);  |
| ring-yellow-300 | --tw-ring-color: rgb(253 224 71);  |
| ring-yellow-400 | --tw-ring-color: rgb(250 204 21);  |
| ring-yellow-500 | --tw-ring-color: rgb(234 179 8);  |
| ring-yellow-600 | --tw-ring-color: rgb(202 138 4);  |
| ring-yellow-700 | --tw-ring-color: rgb(161 98 7);  |
| ring-yellow-800 | --tw-ring-color: rgb(133 77 14);  |
| ring-yellow-900 | --tw-ring-color: rgb(113 63 18);  |
| ring-yellow-950 | --tw-ring-color: rgb(66 32 6);  |
| ring-lime-50 | --tw-ring-color: rgb(247 254 231);  |
| ring-lime-100 | --tw-ring-color: rgb(236 252 203);  |
| ring-lime-200 | --tw-ring-color: rgb(217 249 157);  |
| ring-lime-300 | --tw-ring-color: rgb(190 242 100);  |
| ring-lime-400 | --tw-ring-color: rgb(163 230 53);  |
| ring-lime-500 | --tw-ring-color: rgb(132 204 22);  |
| ring-lime-600 | --tw-ring-color: rgb(101 163 13);  |
| ring-lime-700 | --tw-ring-color: rgb(77 124 15);  |
| ring-lime-800 | --tw-ring-color: rgb(63 98 18);  |
| ring-lime-900 | --tw-ring-color: rgb(54 83 20);  |
| ring-lime-950 | --tw-ring-color: rgb(26 46 5);  |
| ring-green-50 | --tw-ring-color: rgb(240 253 244);  |
| ring-green-100 | --tw-ring-color: rgb(220 252 231);  |
| ring-green-200 | --tw-ring-color: rgb(187 247 208);  |
| ring-green-300 | --tw-ring-color: rgb(134 239 172);  |
| ring-green-400 | --tw-ring-color: rgb(74 222 128);  |
| ring-green-500 | --tw-ring-color: rgb(34 197 94);  |
| ring-green-600 | --tw-ring-color: rgb(22 163 74);  |
| ring-green-700 | --tw-ring-color: rgb(21 128 61);  |
| ring-green-800 | --tw-ring-color: rgb(22 101 52);  |
| ring-green-900 | --tw-ring-color: rgb(20 83 45);  |
| ring-green-950 | --tw-ring-color: rgb(5 46 22);  |
| ring-emerald-50 | --tw-ring-color: rgb(236 253 245);  |
| ring-emerald-100 | --tw-ring-color: rgb(209 250 229);  |
| ring-emerald-200 | --tw-ring-color: rgb(167 243 208);  |
| ring-emerald-300 | --tw-ring-color: rgb(110 231 183);  |
| ring-emerald-400 | --tw-ring-color: rgb(52 211 153);  |
| ring-emerald-500 | --tw-ring-color: rgb(16 185 129);  |
| ring-emerald-600 | --tw-ring-color: rgb(5 150 105);  |
| ring-emerald-700 | --tw-ring-color: rgb(4 120 87);  |
| ring-emerald-800 | --tw-ring-color: rgb(6 95 70);  |
| ring-emerald-900 | --tw-ring-color: rgb(6 78 59);  |
| ring-emerald-950 | --tw-ring-color: rgb(2 44 34);  |
| ring-teal-50 | --tw-ring-color: rgb(240 253 250);  |
| ring-teal-100 | --tw-ring-color: rgb(204 251 241);  |
| ring-teal-200 | --tw-ring-color: rgb(153 246 228);  |
| ring-teal-300 | --tw-ring-color: rgb(94 234 212);  |
| ring-teal-400 | --tw-ring-color: rgb(45 212 191);  |
| ring-teal-500 | --tw-ring-color: rgb(20 184 166);  |
| ring-teal-600 | --tw-ring-color: rgb(13 148 136);  |
| ring-teal-700 | --tw-ring-color: rgb(15 118 110);  |
| ring-teal-800 | --tw-ring-color: rgb(17 94 89);  |
| ring-teal-900 | --tw-ring-color: rgb(19 78 74);  |
| ring-teal-950 | --tw-ring-color: rgb(4 47 46);  |
| ring-cyan-50 | --tw-ring-color: rgb(236 254 255);  |
| ring-cyan-100 | --tw-ring-color: rgb(207 250 254);  |
| ring-cyan-200 | --tw-ring-color: rgb(165 243 252);  |
| ring-cyan-300 | --tw-ring-color: rgb(103 232 249);  |
| ring-cyan-400 | --tw-ring-color: rgb(34 211 238);  |
| ring-cyan-500 | --tw-ring-color: rgb(6 182 212);  |
| ring-cyan-600 | --tw-ring-color: rgb(8 145 178);  |
| ring-cyan-700 | --tw-ring-color: rgb(14 116 144);  |
| ring-cyan-800 | --tw-ring-color: rgb(21 94 117);  |
| ring-cyan-900 | --tw-ring-color: rgb(22 78 99);  |
| ring-cyan-950 | --tw-ring-color: rgb(8 51 68);  |
| ring-sky-50 | --tw-ring-color: rgb(240 249 255);  |
| ring-sky-100 | --tw-ring-color: rgb(224 242 254);  |
| ring-sky-200 | --tw-ring-color: rgb(186 230 253);  |
| ring-sky-300 | --tw-ring-color: rgb(125 211 252);  |
| ring-sky-400 | --tw-ring-color: rgb(56 189 248);  |
| ring-sky-500 | --tw-ring-color: rgb(14 165 233);  |
| ring-sky-600 | --tw-ring-color: rgb(2 132 199);  |
| ring-sky-700 | --tw-ring-color: rgb(3 105 161);  |
| ring-sky-800 | --tw-ring-color: rgb(7 89 133);  |
| ring-sky-900 | --tw-ring-color: rgb(12 74 110);  |
| ring-sky-950 | --tw-ring-color: rgb(8 47 73);  |
| ring-blue-50 | --tw-ring-color: rgb(239 246 255);  |
| ring-blue-100 | --tw-ring-color: rgb(219 234 254);  |
| ring-blue-200 | --tw-ring-color: rgb(191 219 254);  |
| ring-blue-300 | --tw-ring-color: rgb(147 197 253);  |
| ring-blue-400 | --tw-ring-color: rgb(96 165 250);  |
| ring-blue-500 | --tw-ring-color: rgb(59 130 246);  |
| ring-blue-600 | --tw-ring-color: rgb(37 99 235);  |
| ring-blue-700 | --tw-ring-color: rgb(29 78 216);  |
| ring-blue-800 | --tw-ring-color: rgb(30 64 175);  |
| ring-blue-900 | --tw-ring-color: rgb(30 58 138);  |
| ring-blue-950 | --tw-ring-color: rgb(23 37 84);  |
| ring-indigo-50 | --tw-ring-color: rgb(238 242 255);  |
| ring-indigo-100 | --tw-ring-color: rgb(224 231 255);  |
| ring-indigo-200 | --tw-ring-color: rgb(199 210 254);  |
| ring-indigo-300 | --tw-ring-color: rgb(165 180 252);  |
| ring-indigo-400 | --tw-ring-color: rgb(129 140 248);  |
| ring-indigo-500 | --tw-ring-color: rgb(99 102 241);  |
| ring-indigo-600 | --tw-ring-color: rgb(79 70 229);  |
| ring-indigo-700 | --tw-ring-color: rgb(67 56 202);  |
| ring-indigo-800 | --tw-ring-color: rgb(55 48 163);  |
| ring-indigo-900 | --tw-ring-color: rgb(49 46 129);  |
| ring-indigo-950 | --tw-ring-color: rgb(30 27 75);  |
| ring-violet-50 | --tw-ring-color: rgb(245 243 255);  |
| ring-violet-100 | --tw-ring-color: rgb(237 233 254);  |
| ring-violet-200 | --tw-ring-color: rgb(221 214 254);  |
| ring-violet-300 | --tw-ring-color: rgb(196 181 253);  |
| ring-violet-400 | --tw-ring-color: rgb(167 139 250);  |
| ring-violet-500 | --tw-ring-color: rgb(139 92 246);  |
| ring-violet-600 | --tw-ring-color: rgb(124 58 237);  |
| ring-violet-700 | --tw-ring-color: rgb(109 40 217);  |
| ring-violet-800 | --tw-ring-color: rgb(91 33 182);  |
| ring-violet-900 | --tw-ring-color: rgb(76 29 149);  |
| ring-violet-950 | --tw-ring-color: rgb(46 16 101);  |
| ring-purple-50 | --tw-ring-color: rgb(250 245 255);  |
| ring-purple-100 | --tw-ring-color: rgb(243 232 255);  |
| ring-purple-200 | --tw-ring-color: rgb(233 213 255);  |
| ring-purple-300 | --tw-ring-color: rgb(216 180 254);  |
| ring-purple-400 | --tw-ring-color: rgb(192 132 252);  |
| ring-purple-500 | --tw-ring-color: rgb(168 85 247);  |
| ring-purple-600 | --tw-ring-color: rgb(147 51 234);  |
| ring-purple-700 | --tw-ring-color: rgb(126 34 206);  |
| ring-purple-800 | --tw-ring-color: rgb(107 33 168);  |
| ring-purple-900 | --tw-ring-color: rgb(88 28 135);  |
| ring-purple-950 | --tw-ring-color: rgb(59 7 100);  |
| ring-fuchsia-50 | --tw-ring-color: rgb(253 244 255);  |
| ring-fuchsia-100 | --tw-ring-color: rgb(250 232 255);  |
| ring-fuchsia-200 | --tw-ring-color: rgb(245 208 254);  |
| ring-fuchsia-300 | --tw-ring-color: rgb(240 171 252);  |
| ring-fuchsia-400 | --tw-ring-color: rgb(232 121 249);  |
| ring-fuchsia-500 | --tw-ring-color: rgb(217 70 239);  |
| ring-fuchsia-600 | --tw-ring-color: rgb(192 38 211);  |
| ring-fuchsia-700 | --tw-ring-color: rgb(162 28 175);  |
| ring-fuchsia-800 | --tw-ring-color: rgb(134 25 143);  |
| ring-fuchsia-900 | --tw-ring-color: rgb(112 26 117);  |
| ring-fuchsia-950 | --tw-ring-color: rgb(74 4 78);  |
| ring-pink-50 | --tw-ring-color: rgb(253 242 248);  |
| ring-pink-100 | --tw-ring-color: rgb(252 231 243);  |
| ring-pink-200 | --tw-ring-color: rgb(251 207 232);  |
| ring-pink-300 | --tw-ring-color: rgb(249 168 212);  |
| ring-pink-400 | --tw-ring-color: rgb(244 114 182);  |
| ring-pink-500 | --tw-ring-color: rgb(236 72 153);  |
| ring-pink-600 | --tw-ring-color: rgb(219 39 119);  |
| ring-pink-700 | --tw-ring-color: rgb(190 24 93);  |
| ring-pink-800 | --tw-ring-color: rgb(157 23 77);  |
| ring-pink-900 | --tw-ring-color: rgb(131 24 67);  |
| ring-pink-950 | --tw-ring-color: rgb(80 7 36);  |
| ring-rose-50 | --tw-ring-color: rgb(255 241 242);  |
| ring-rose-100 | --tw-ring-color: rgb(255 228 230);  |
| ring-rose-200 | --tw-ring-color: rgb(254 205 211);  |
| ring-rose-300 | --tw-ring-color: rgb(253 164 175);  |
| ring-rose-400 | --tw-ring-color: rgb(251 113 133);  |
| ring-rose-500 | --tw-ring-color: rgb(244 63 94);  |
| ring-rose-600 | --tw-ring-color: rgb(225 29 72);  |
| ring-rose-700 | --tw-ring-color: rgb(190 18 60);  |
| ring-rose-800 | --tw-ring-color: rgb(159 18 57);  |
| ring-rose-900 | --tw-ring-color: rgb(136 19 55);  |
| ring-rose-950 | --tw-ring-color: rgb(76 5 25);  |






Basic usage
-----------

 ### Setting the ring color

 Use the `ring-{color}` utilities to set the color of an [outline ring](ring-width).

 
```
<button class="... ring-2 ring-blue-500">
  Create account
</button>
```
 ### Changing the opacity

 Control the opacity of an element’s background color using the color opacity modifier.

 
```
<button class="... ring-2 ring-blue-500/50">Subscribe</button>
```
 You can use any value defined in your [opacity scale](opacity), or use arbitrary values if you need to deviate from your design tokens.

 
```
<button class="... ring-2 ring-blue-500/[.55]">Subscribe</button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:ring-blue-500` to only apply the `ring-blue-500` utility on hover.



```
<div class="ring ring-blue-300 hover:ring-blue-500">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:ring-blue-500` to apply the `ring-blue-500` utility at only medium screen sizes and above.



```
<div class="ring ring-blue-300 md:ring-blue-500">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as ring colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your ring colors by editing `theme.ringColor` or `theme.extend.ringColor` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `ring-{color}` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="ring-[#50d71e]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/ring-color>

Ring Offset Width
=================


Utilities for simulating an offset when adding outline rings.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| ring-offset-0 | --tw-ring-offset-width: 0px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-1 | --tw-ring-offset-width: 1px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-2 | --tw-ring-offset-width: 2px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-4 | --tw-ring-offset-width: 4px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-8 | --tw-ring-offset-width: 8px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |






Basic usage
-----------

 ### Setting the ring offset width

 Use the `ring-offset-{width}` utilities to simulate an offset by adding solid white box-shadow and increasing the thickness of the accompanying outline ring to accommodate the offset.

 
```
<button class="... ring ring-pink-500 ring-offset-0">Button A</button>
<button class="... ring ring-pink-500 ring-offset-2">Button B</button>
<button class="... ring ring-pink-500 ring-offset-4">Button C</button>
```
 ### Changing the offset color

 You can’t actually offset a box-shadow in CSS, so we have to fake it using a solid color shadow that matches the parent background color. We use white by default, but if you are adding a ring offset over a different background color, you should use the `ring-offset-{color}` utilities to match the parent background color:

 
```
<button class="ring ring-pink-500 ring-offset-2 ring-offset-slate-50 dark:ring-offset-slate-900 ...">
  Save Changes
</button>
```
 For more information, see the [ring offset color](ring-offset-color) documentation.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:ring-offset-4` to only apply the `ring-offset-4` utility on hover.



```
<button class="ring-2 ring-offset-2 hover:ring-offset-4">
  <!-- ... -->
</button>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:ring-offset-4` to apply the `ring-offset-4` utility at only medium screen sizes and above.



```
<button class="ring-2 ring-offset-2 md:ring-offset-4">
  <!-- ... -->
</button>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 To customize which ring offset width utilities are generated, add your custom values under `ringOffsetWidth` key in the `theme` section of your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      ringOffsetWidth: {
        '3': '3px',
        '6': '6px',
        '10': '10px',
      }
    }
  }
}
```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `ring-offset` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="ring-offset-[3px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/ring-offset-width>

Ring Offset Color
=================


Utilities for setting the color of outline ring offsets.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| ring-offset-inherit | --tw-ring-offset-color: inherit; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-current | --tw-ring-offset-color: currentColor; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-transparent | --tw-ring-offset-color: transparent; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-black | --tw-ring-offset-color: #000; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-white | --tw-ring-offset-color: #fff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-slate-50 | --tw-ring-offset-color: #f8fafc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-slate-100 | --tw-ring-offset-color: #f1f5f9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-slate-200 | --tw-ring-offset-color: #e2e8f0; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-slate-300 | --tw-ring-offset-color: #cbd5e1; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-slate-400 | --tw-ring-offset-color: #94a3b8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-slate-500 | --tw-ring-offset-color: #64748b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-slate-600 | --tw-ring-offset-color: #475569; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-slate-700 | --tw-ring-offset-color: #334155; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-slate-800 | --tw-ring-offset-color: #1e293b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-slate-900 | --tw-ring-offset-color: #0f172a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-slate-950 | --tw-ring-offset-color: #020617; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-gray-50 | --tw-ring-offset-color: #f9fafb; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-gray-100 | --tw-ring-offset-color: #f3f4f6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-gray-200 | --tw-ring-offset-color: #e5e7eb; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-gray-300 | --tw-ring-offset-color: #d1d5db; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-gray-400 | --tw-ring-offset-color: #9ca3af; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-gray-500 | --tw-ring-offset-color: #6b7280; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-gray-600 | --tw-ring-offset-color: #4b5563; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-gray-700 | --tw-ring-offset-color: #374151; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-gray-800 | --tw-ring-offset-color: #1f2937; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-gray-900 | --tw-ring-offset-color: #111827; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-gray-950 | --tw-ring-offset-color: #030712; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-zinc-50 | --tw-ring-offset-color: #fafafa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-zinc-100 | --tw-ring-offset-color: #f4f4f5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-zinc-200 | --tw-ring-offset-color: #e4e4e7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-zinc-300 | --tw-ring-offset-color: #d4d4d8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-zinc-400 | --tw-ring-offset-color: #a1a1aa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-zinc-500 | --tw-ring-offset-color: #71717a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-zinc-600 | --tw-ring-offset-color: #52525b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-zinc-700 | --tw-ring-offset-color: #3f3f46; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-zinc-800 | --tw-ring-offset-color: #27272a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-zinc-900 | --tw-ring-offset-color: #18181b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-zinc-950 | --tw-ring-offset-color: #09090b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-neutral-50 | --tw-ring-offset-color: #fafafa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-neutral-100 | --tw-ring-offset-color: #f5f5f5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-neutral-200 | --tw-ring-offset-color: #e5e5e5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-neutral-300 | --tw-ring-offset-color: #d4d4d4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-neutral-400 | --tw-ring-offset-color: #a3a3a3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-neutral-500 | --tw-ring-offset-color: #737373; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-neutral-600 | --tw-ring-offset-color: #525252; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-neutral-700 | --tw-ring-offset-color: #404040; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-neutral-800 | --tw-ring-offset-color: #262626; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-neutral-900 | --tw-ring-offset-color: #171717; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-neutral-950 | --tw-ring-offset-color: #0a0a0a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-stone-50 | --tw-ring-offset-color: #fafaf9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-stone-100 | --tw-ring-offset-color: #f5f5f4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-stone-200 | --tw-ring-offset-color: #e7e5e4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-stone-300 | --tw-ring-offset-color: #d6d3d1; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-stone-400 | --tw-ring-offset-color: #a8a29e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-stone-500 | --tw-ring-offset-color: #78716c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-stone-600 | --tw-ring-offset-color: #57534e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-stone-700 | --tw-ring-offset-color: #44403c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-stone-800 | --tw-ring-offset-color: #292524; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-stone-900 | --tw-ring-offset-color: #1c1917; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-stone-950 | --tw-ring-offset-color: #0c0a09; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-red-50 | --tw-ring-offset-color: #fef2f2; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-red-100 | --tw-ring-offset-color: #fee2e2; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-red-200 | --tw-ring-offset-color: #fecaca; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-red-300 | --tw-ring-offset-color: #fca5a5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-red-400 | --tw-ring-offset-color: #f87171; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-red-500 | --tw-ring-offset-color: #ef4444; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-red-600 | --tw-ring-offset-color: #dc2626; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-red-700 | --tw-ring-offset-color: #b91c1c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-red-800 | --tw-ring-offset-color: #991b1b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-red-900 | --tw-ring-offset-color: #7f1d1d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-red-950 | --tw-ring-offset-color: #450a0a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-orange-50 | --tw-ring-offset-color: #fff7ed; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-orange-100 | --tw-ring-offset-color: #ffedd5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-orange-200 | --tw-ring-offset-color: #fed7aa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-orange-300 | --tw-ring-offset-color: #fdba74; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-orange-400 | --tw-ring-offset-color: #fb923c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-orange-500 | --tw-ring-offset-color: #f97316; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-orange-600 | --tw-ring-offset-color: #ea580c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-orange-700 | --tw-ring-offset-color: #c2410c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-orange-800 | --tw-ring-offset-color: #9a3412; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-orange-900 | --tw-ring-offset-color: #7c2d12; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-orange-950 | --tw-ring-offset-color: #431407; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-amber-50 | --tw-ring-offset-color: #fffbeb; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-amber-100 | --tw-ring-offset-color: #fef3c7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-amber-200 | --tw-ring-offset-color: #fde68a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-amber-300 | --tw-ring-offset-color: #fcd34d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-amber-400 | --tw-ring-offset-color: #fbbf24; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-amber-500 | --tw-ring-offset-color: #f59e0b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-amber-600 | --tw-ring-offset-color: #d97706; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-amber-700 | --tw-ring-offset-color: #b45309; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-amber-800 | --tw-ring-offset-color: #92400e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-amber-900 | --tw-ring-offset-color: #78350f; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-amber-950 | --tw-ring-offset-color: #451a03; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-yellow-50 | --tw-ring-offset-color: #fefce8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-yellow-100 | --tw-ring-offset-color: #fef9c3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-yellow-200 | --tw-ring-offset-color: #fef08a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-yellow-300 | --tw-ring-offset-color: #fde047; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-yellow-400 | --tw-ring-offset-color: #facc15; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-yellow-500 | --tw-ring-offset-color: #eab308; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-yellow-600 | --tw-ring-offset-color: #ca8a04; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-yellow-700 | --tw-ring-offset-color: #a16207; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-yellow-800 | --tw-ring-offset-color: #854d0e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-yellow-900 | --tw-ring-offset-color: #713f12; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-yellow-950 | --tw-ring-offset-color: #422006; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-lime-50 | --tw-ring-offset-color: #f7fee7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-lime-100 | --tw-ring-offset-color: #ecfccb; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-lime-200 | --tw-ring-offset-color: #d9f99d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-lime-300 | --tw-ring-offset-color: #bef264; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-lime-400 | --tw-ring-offset-color: #a3e635; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-lime-500 | --tw-ring-offset-color: #84cc16; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-lime-600 | --tw-ring-offset-color: #65a30d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-lime-700 | --tw-ring-offset-color: #4d7c0f; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-lime-800 | --tw-ring-offset-color: #3f6212; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-lime-900 | --tw-ring-offset-color: #365314; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-lime-950 | --tw-ring-offset-color: #1a2e05; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-green-50 | --tw-ring-offset-color: #f0fdf4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-green-100 | --tw-ring-offset-color: #dcfce7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-green-200 | --tw-ring-offset-color: #bbf7d0; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-green-300 | --tw-ring-offset-color: #86efac; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-green-400 | --tw-ring-offset-color: #4ade80; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-green-500 | --tw-ring-offset-color: #22c55e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-green-600 | --tw-ring-offset-color: #16a34a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-green-700 | --tw-ring-offset-color: #15803d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-green-800 | --tw-ring-offset-color: #166534; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-green-900 | --tw-ring-offset-color: #14532d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-green-950 | --tw-ring-offset-color: #052e16; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-emerald-50 | --tw-ring-offset-color: #ecfdf5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-emerald-100 | --tw-ring-offset-color: #d1fae5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-emerald-200 | --tw-ring-offset-color: #a7f3d0; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-emerald-300 | --tw-ring-offset-color: #6ee7b7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-emerald-400 | --tw-ring-offset-color: #34d399; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-emerald-500 | --tw-ring-offset-color: #10b981; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-emerald-600 | --tw-ring-offset-color: #059669; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-emerald-700 | --tw-ring-offset-color: #047857; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-emerald-800 | --tw-ring-offset-color: #065f46; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-emerald-900 | --tw-ring-offset-color: #064e3b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-emerald-950 | --tw-ring-offset-color: #022c22; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-teal-50 | --tw-ring-offset-color: #f0fdfa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-teal-100 | --tw-ring-offset-color: #ccfbf1; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-teal-200 | --tw-ring-offset-color: #99f6e4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-teal-300 | --tw-ring-offset-color: #5eead4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-teal-400 | --tw-ring-offset-color: #2dd4bf; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-teal-500 | --tw-ring-offset-color: #14b8a6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-teal-600 | --tw-ring-offset-color: #0d9488; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-teal-700 | --tw-ring-offset-color: #0f766e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-teal-800 | --tw-ring-offset-color: #115e59; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-teal-900 | --tw-ring-offset-color: #134e4a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-teal-950 | --tw-ring-offset-color: #042f2e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-cyan-50 | --tw-ring-offset-color: #ecfeff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-cyan-100 | --tw-ring-offset-color: #cffafe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-cyan-200 | --tw-ring-offset-color: #a5f3fc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-cyan-300 | --tw-ring-offset-color: #67e8f9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-cyan-400 | --tw-ring-offset-color: #22d3ee; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-cyan-500 | --tw-ring-offset-color: #06b6d4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-cyan-600 | --tw-ring-offset-color: #0891b2; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-cyan-700 | --tw-ring-offset-color: #0e7490; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-cyan-800 | --tw-ring-offset-color: #155e75; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-cyan-900 | --tw-ring-offset-color: #164e63; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-cyan-950 | --tw-ring-offset-color: #083344; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-sky-50 | --tw-ring-offset-color: #f0f9ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-sky-100 | --tw-ring-offset-color: #e0f2fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-sky-200 | --tw-ring-offset-color: #bae6fd; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-sky-300 | --tw-ring-offset-color: #7dd3fc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-sky-400 | --tw-ring-offset-color: #38bdf8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-sky-500 | --tw-ring-offset-color: #0ea5e9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-sky-600 | --tw-ring-offset-color: #0284c7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-sky-700 | --tw-ring-offset-color: #0369a1; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-sky-800 | --tw-ring-offset-color: #075985; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-sky-900 | --tw-ring-offset-color: #0c4a6e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-sky-950 | --tw-ring-offset-color: #082f49; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-blue-50 | --tw-ring-offset-color: #eff6ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-blue-100 | --tw-ring-offset-color: #dbeafe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-blue-200 | --tw-ring-offset-color: #bfdbfe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-blue-300 | --tw-ring-offset-color: #93c5fd; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-blue-400 | --tw-ring-offset-color: #60a5fa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-blue-500 | --tw-ring-offset-color: #3b82f6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-blue-600 | --tw-ring-offset-color: #2563eb; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-blue-700 | --tw-ring-offset-color: #1d4ed8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-blue-800 | --tw-ring-offset-color: #1e40af; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-blue-900 | --tw-ring-offset-color: #1e3a8a; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-blue-950 | --tw-ring-offset-color: #172554; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-indigo-50 | --tw-ring-offset-color: #eef2ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-indigo-100 | --tw-ring-offset-color: #e0e7ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-indigo-200 | --tw-ring-offset-color: #c7d2fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-indigo-300 | --tw-ring-offset-color: #a5b4fc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-indigo-400 | --tw-ring-offset-color: #818cf8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-indigo-500 | --tw-ring-offset-color: #6366f1; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-indigo-600 | --tw-ring-offset-color: #4f46e5; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-indigo-700 | --tw-ring-offset-color: #4338ca; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-indigo-800 | --tw-ring-offset-color: #3730a3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-indigo-900 | --tw-ring-offset-color: #312e81; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-indigo-950 | --tw-ring-offset-color: #1e1b4b; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-violet-50 | --tw-ring-offset-color: #f5f3ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-violet-100 | --tw-ring-offset-color: #ede9fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-violet-200 | --tw-ring-offset-color: #ddd6fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-violet-300 | --tw-ring-offset-color: #c4b5fd; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-violet-400 | --tw-ring-offset-color: #a78bfa; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-violet-500 | --tw-ring-offset-color: #8b5cf6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-violet-600 | --tw-ring-offset-color: #7c3aed; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-violet-700 | --tw-ring-offset-color: #6d28d9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-violet-800 | --tw-ring-offset-color: #5b21b6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-violet-900 | --tw-ring-offset-color: #4c1d95; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-violet-950 | --tw-ring-offset-color: #2e1065; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-purple-50 | --tw-ring-offset-color: #faf5ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-purple-100 | --tw-ring-offset-color: #f3e8ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-purple-200 | --tw-ring-offset-color: #e9d5ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-purple-300 | --tw-ring-offset-color: #d8b4fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-purple-400 | --tw-ring-offset-color: #c084fc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-purple-500 | --tw-ring-offset-color: #a855f7; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-purple-600 | --tw-ring-offset-color: #9333ea; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-purple-700 | --tw-ring-offset-color: #7e22ce; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-purple-800 | --tw-ring-offset-color: #6b21a8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-purple-900 | --tw-ring-offset-color: #581c87; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-purple-950 | --tw-ring-offset-color: #3b0764; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-fuchsia-50 | --tw-ring-offset-color: #fdf4ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-fuchsia-100 | --tw-ring-offset-color: #fae8ff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-fuchsia-200 | --tw-ring-offset-color: #f5d0fe; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-fuchsia-300 | --tw-ring-offset-color: #f0abfc; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-fuchsia-400 | --tw-ring-offset-color: #e879f9; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-fuchsia-500 | --tw-ring-offset-color: #d946ef; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-fuchsia-600 | --tw-ring-offset-color: #c026d3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-fuchsia-700 | --tw-ring-offset-color: #a21caf; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-fuchsia-800 | --tw-ring-offset-color: #86198f; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-fuchsia-900 | --tw-ring-offset-color: #701a75; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-fuchsia-950 | --tw-ring-offset-color: #4a044e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-pink-50 | --tw-ring-offset-color: #fdf2f8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-pink-100 | --tw-ring-offset-color: #fce7f3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-pink-200 | --tw-ring-offset-color: #fbcfe8; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-pink-300 | --tw-ring-offset-color: #f9a8d4; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-pink-400 | --tw-ring-offset-color: #f472b6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-pink-500 | --tw-ring-offset-color: #ec4899; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-pink-600 | --tw-ring-offset-color: #db2777; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-pink-700 | --tw-ring-offset-color: #be185d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-pink-800 | --tw-ring-offset-color: #9d174d; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-pink-900 | --tw-ring-offset-color: #831843; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-pink-950 | --tw-ring-offset-color: #500724; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-rose-50 | --tw-ring-offset-color: #fff1f2; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-rose-100 | --tw-ring-offset-color: #ffe4e6; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-rose-200 | --tw-ring-offset-color: #fecdd3; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-rose-300 | --tw-ring-offset-color: #fda4af; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-rose-400 | --tw-ring-offset-color: #fb7185; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-rose-500 | --tw-ring-offset-color: #f43f5e; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-rose-600 | --tw-ring-offset-color: #e11d48; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-rose-700 | --tw-ring-offset-color: #be123c; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-rose-800 | --tw-ring-offset-color: #9f1239; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-rose-900 | --tw-ring-offset-color: #881337; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |
| ring-offset-rose-950 | --tw-ring-offset-color: #4c0519; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);  |






Basic usage
-----------

 ### Setting the ring offset color

 Use the `ring-offset-{color}` utilities to change the color of a ring offset. Usually this is done to try and match the offset to the parent background color, since true box-shadow offsets aren’t actually possible in CSS.

 
```
<button class="ring-2 ring-purple-500 ring-offset-4 ring-offset-slate-50 dark:ring-offset-slate-900 ...">
  Save Changes
</button>
```
 ### Changing the opacity

 Control the opacity of an element’s ring offset color using the color opacity modifier.

 
```
<button class="ring-2 ring-purple-500 ring-offset-4 ring-offset-purple-100/50"></button>
```
 You can use any value defined in your [opacity scale](opacity), or use arbitrary values if you need to deviate from your design tokens.

 
```
<button class="ring-2 ring-purple-500 ring-offset-4 ring-offset-purple-100/[.55]"></button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:ring-offset-blue-500` to only apply the `ring-offset-blue-500` utility on hover.



```
<div class="ring-2 ring-offset-2 ring-offset-blue-300 hover:ring-offset-blue-500">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:ring-offset-blue-500` to apply the `ring-offset-blue-500` utility at only medium screen sizes and above.



```
<div class="ring-2 ring-offset-2 ring-offset-blue-300 md:ring-offset-blue-500">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as ring offset color colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your ring offset color colors by editing `theme.ringOffsetColor` or `theme.extend.ringOffsetColor` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `ring-offset-{color}` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="ring-offset-[#50d71e]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/ring-offset-color>

Box Shadow
==========


Utilities for controlling the box shadow of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| shadow-sm | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);  |
| shadow | box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);  |
| shadow-md | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);  |
| shadow-lg | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);  |
| shadow-xl | box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);  |
| shadow-2xl | box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);  |
| shadow-inner | box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);  |
| shadow-none | box-shadow: 0 0 #0000;  |






Basic usage
-----------

 ### Adding an outer shadow

 Use the `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, or `shadow-2xl` utilities to apply different sized outer box shadows to an element.

 
```
<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
<div class="shadow-xl ..."></div>
<div class="shadow-2xl ..."></div>
```
 ### Adding an inner shadow

 Use the `shadow-inner` utility to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells.

 
```
<div class="shadow-inner ..."></div>
```
 ### Removing the shadow

 Use `shadow-none` to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint.

 
```
<div class="shadow-none ..."></div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:shadow-lg` to only apply the `shadow-lg` utility on hover.



```
<div class="shadow hover:shadow-lg">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:shadow-lg` to apply the `shadow-lg` utility at only medium screen sizes and above.



```
<div class="shadow md:shadow-lg">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides six drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can customize these values by editing `theme.boxShadow` or `theme.extend.boxShadow` in your `tailwind.config.js` file.

 If a `DEFAULT` shadow is provided, it will be used for the non-suffixed `shadow` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `shadow-2` utility.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `box-shadow` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/box-shadow>

Box Shadow Color
================


Utilities for controlling the color of a box shadow.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| shadow-inherit | --tw-shadow-color: inherit;  |
| shadow-current | --tw-shadow-color: currentColor;  |
| shadow-transparent | --tw-shadow-color: transparent;  |
| shadow-black | --tw-shadow-color: #000;  |
| shadow-white | --tw-shadow-color: #fff;  |
| shadow-slate-50 | --tw-shadow-color: #f8fafc;  |
| shadow-slate-100 | --tw-shadow-color: #f1f5f9;  |
| shadow-slate-200 | --tw-shadow-color: #e2e8f0;  |
| shadow-slate-300 | --tw-shadow-color: #cbd5e1;  |
| shadow-slate-400 | --tw-shadow-color: #94a3b8;  |
| shadow-slate-500 | --tw-shadow-color: #64748b;  |
| shadow-slate-600 | --tw-shadow-color: #475569;  |
| shadow-slate-700 | --tw-shadow-color: #334155;  |
| shadow-slate-800 | --tw-shadow-color: #1e293b;  |
| shadow-slate-900 | --tw-shadow-color: #0f172a;  |
| shadow-slate-950 | --tw-shadow-color: #020617;  |
| shadow-gray-50 | --tw-shadow-color: #f9fafb;  |
| shadow-gray-100 | --tw-shadow-color: #f3f4f6;  |
| shadow-gray-200 | --tw-shadow-color: #e5e7eb;  |
| shadow-gray-300 | --tw-shadow-color: #d1d5db;  |
| shadow-gray-400 | --tw-shadow-color: #9ca3af;  |
| shadow-gray-500 | --tw-shadow-color: #6b7280;  |
| shadow-gray-600 | --tw-shadow-color: #4b5563;  |
| shadow-gray-700 | --tw-shadow-color: #374151;  |
| shadow-gray-800 | --tw-shadow-color: #1f2937;  |
| shadow-gray-900 | --tw-shadow-color: #111827;  |
| shadow-gray-950 | --tw-shadow-color: #030712;  |
| shadow-zinc-50 | --tw-shadow-color: #fafafa;  |
| shadow-zinc-100 | --tw-shadow-color: #f4f4f5;  |
| shadow-zinc-200 | --tw-shadow-color: #e4e4e7;  |
| shadow-zinc-300 | --tw-shadow-color: #d4d4d8;  |
| shadow-zinc-400 | --tw-shadow-color: #a1a1aa;  |
| shadow-zinc-500 | --tw-shadow-color: #71717a;  |
| shadow-zinc-600 | --tw-shadow-color: #52525b;  |
| shadow-zinc-700 | --tw-shadow-color: #3f3f46;  |
| shadow-zinc-800 | --tw-shadow-color: #27272a;  |
| shadow-zinc-900 | --tw-shadow-color: #18181b;  |
| shadow-zinc-950 | --tw-shadow-color: #09090b;  |
| shadow-neutral-50 | --tw-shadow-color: #fafafa;  |
| shadow-neutral-100 | --tw-shadow-color: #f5f5f5;  |
| shadow-neutral-200 | --tw-shadow-color: #e5e5e5;  |
| shadow-neutral-300 | --tw-shadow-color: #d4d4d4;  |
| shadow-neutral-400 | --tw-shadow-color: #a3a3a3;  |
| shadow-neutral-500 | --tw-shadow-color: #737373;  |
| shadow-neutral-600 | --tw-shadow-color: #525252;  |
| shadow-neutral-700 | --tw-shadow-color: #404040;  |
| shadow-neutral-800 | --tw-shadow-color: #262626;  |
| shadow-neutral-900 | --tw-shadow-color: #171717;  |
| shadow-neutral-950 | --tw-shadow-color: #0a0a0a;  |
| shadow-stone-50 | --tw-shadow-color: #fafaf9;  |
| shadow-stone-100 | --tw-shadow-color: #f5f5f4;  |
| shadow-stone-200 | --tw-shadow-color: #e7e5e4;  |
| shadow-stone-300 | --tw-shadow-color: #d6d3d1;  |
| shadow-stone-400 | --tw-shadow-color: #a8a29e;  |
| shadow-stone-500 | --tw-shadow-color: #78716c;  |
| shadow-stone-600 | --tw-shadow-color: #57534e;  |
| shadow-stone-700 | --tw-shadow-color: #44403c;  |
| shadow-stone-800 | --tw-shadow-color: #292524;  |
| shadow-stone-900 | --tw-shadow-color: #1c1917;  |
| shadow-stone-950 | --tw-shadow-color: #0c0a09;  |
| shadow-red-50 | --tw-shadow-color: #fef2f2;  |
| shadow-red-100 | --tw-shadow-color: #fee2e2;  |
| shadow-red-200 | --tw-shadow-color: #fecaca;  |
| shadow-red-300 | --tw-shadow-color: #fca5a5;  |
| shadow-red-400 | --tw-shadow-color: #f87171;  |
| shadow-red-500 | --tw-shadow-color: #ef4444;  |
| shadow-red-600 | --tw-shadow-color: #dc2626;  |
| shadow-red-700 | --tw-shadow-color: #b91c1c;  |
| shadow-red-800 | --tw-shadow-color: #991b1b;  |
| shadow-red-900 | --tw-shadow-color: #7f1d1d;  |
| shadow-red-950 | --tw-shadow-color: #450a0a;  |
| shadow-orange-50 | --tw-shadow-color: #fff7ed;  |
| shadow-orange-100 | --tw-shadow-color: #ffedd5;  |
| shadow-orange-200 | --tw-shadow-color: #fed7aa;  |
| shadow-orange-300 | --tw-shadow-color: #fdba74;  |
| shadow-orange-400 | --tw-shadow-color: #fb923c;  |
| shadow-orange-500 | --tw-shadow-color: #f97316;  |
| shadow-orange-600 | --tw-shadow-color: #ea580c;  |
| shadow-orange-700 | --tw-shadow-color: #c2410c;  |
| shadow-orange-800 | --tw-shadow-color: #9a3412;  |
| shadow-orange-900 | --tw-shadow-color: #7c2d12;  |
| shadow-orange-950 | --tw-shadow-color: #431407;  |
| shadow-amber-50 | --tw-shadow-color: #fffbeb;  |
| shadow-amber-100 | --tw-shadow-color: #fef3c7;  |
| shadow-amber-200 | --tw-shadow-color: #fde68a;  |
| shadow-amber-300 | --tw-shadow-color: #fcd34d;  |
| shadow-amber-400 | --tw-shadow-color: #fbbf24;  |
| shadow-amber-500 | --tw-shadow-color: #f59e0b;  |
| shadow-amber-600 | --tw-shadow-color: #d97706;  |
| shadow-amber-700 | --tw-shadow-color: #b45309;  |
| shadow-amber-800 | --tw-shadow-color: #92400e;  |
| shadow-amber-900 | --tw-shadow-color: #78350f;  |
| shadow-amber-950 | --tw-shadow-color: #451a03;  |
| shadow-yellow-50 | --tw-shadow-color: #fefce8;  |
| shadow-yellow-100 | --tw-shadow-color: #fef9c3;  |
| shadow-yellow-200 | --tw-shadow-color: #fef08a;  |
| shadow-yellow-300 | --tw-shadow-color: #fde047;  |
| shadow-yellow-400 | --tw-shadow-color: #facc15;  |
| shadow-yellow-500 | --tw-shadow-color: #eab308;  |
| shadow-yellow-600 | --tw-shadow-color: #ca8a04;  |
| shadow-yellow-700 | --tw-shadow-color: #a16207;  |
| shadow-yellow-800 | --tw-shadow-color: #854d0e;  |
| shadow-yellow-900 | --tw-shadow-color: #713f12;  |
| shadow-yellow-950 | --tw-shadow-color: #422006;  |
| shadow-lime-50 | --tw-shadow-color: #f7fee7;  |
| shadow-lime-100 | --tw-shadow-color: #ecfccb;  |
| shadow-lime-200 | --tw-shadow-color: #d9f99d;  |
| shadow-lime-300 | --tw-shadow-color: #bef264;  |
| shadow-lime-400 | --tw-shadow-color: #a3e635;  |
| shadow-lime-500 | --tw-shadow-color: #84cc16;  |
| shadow-lime-600 | --tw-shadow-color: #65a30d;  |
| shadow-lime-700 | --tw-shadow-color: #4d7c0f;  |
| shadow-lime-800 | --tw-shadow-color: #3f6212;  |
| shadow-lime-900 | --tw-shadow-color: #365314;  |
| shadow-lime-950 | --tw-shadow-color: #1a2e05;  |
| shadow-green-50 | --tw-shadow-color: #f0fdf4;  |
| shadow-green-100 | --tw-shadow-color: #dcfce7;  |
| shadow-green-200 | --tw-shadow-color: #bbf7d0;  |
| shadow-green-300 | --tw-shadow-color: #86efac;  |
| shadow-green-400 | --tw-shadow-color: #4ade80;  |
| shadow-green-500 | --tw-shadow-color: #22c55e;  |
| shadow-green-600 | --tw-shadow-color: #16a34a;  |
| shadow-green-700 | --tw-shadow-color: #15803d;  |
| shadow-green-800 | --tw-shadow-color: #166534;  |
| shadow-green-900 | --tw-shadow-color: #14532d;  |
| shadow-green-950 | --tw-shadow-color: #052e16;  |
| shadow-emerald-50 | --tw-shadow-color: #ecfdf5;  |
| shadow-emerald-100 | --tw-shadow-color: #d1fae5;  |
| shadow-emerald-200 | --tw-shadow-color: #a7f3d0;  |
| shadow-emerald-300 | --tw-shadow-color: #6ee7b7;  |
| shadow-emerald-400 | --tw-shadow-color: #34d399;  |
| shadow-emerald-500 | --tw-shadow-color: #10b981;  |
| shadow-emerald-600 | --tw-shadow-color: #059669;  |
| shadow-emerald-700 | --tw-shadow-color: #047857;  |
| shadow-emerald-800 | --tw-shadow-color: #065f46;  |
| shadow-emerald-900 | --tw-shadow-color: #064e3b;  |
| shadow-emerald-950 | --tw-shadow-color: #022c22;  |
| shadow-teal-50 | --tw-shadow-color: #f0fdfa;  |
| shadow-teal-100 | --tw-shadow-color: #ccfbf1;  |
| shadow-teal-200 | --tw-shadow-color: #99f6e4;  |
| shadow-teal-300 | --tw-shadow-color: #5eead4;  |
| shadow-teal-400 | --tw-shadow-color: #2dd4bf;  |
| shadow-teal-500 | --tw-shadow-color: #14b8a6;  |
| shadow-teal-600 | --tw-shadow-color: #0d9488;  |
| shadow-teal-700 | --tw-shadow-color: #0f766e;  |
| shadow-teal-800 | --tw-shadow-color: #115e59;  |
| shadow-teal-900 | --tw-shadow-color: #134e4a;  |
| shadow-teal-950 | --tw-shadow-color: #042f2e;  |
| shadow-cyan-50 | --tw-shadow-color: #ecfeff;  |
| shadow-cyan-100 | --tw-shadow-color: #cffafe;  |
| shadow-cyan-200 | --tw-shadow-color: #a5f3fc;  |
| shadow-cyan-300 | --tw-shadow-color: #67e8f9;  |
| shadow-cyan-400 | --tw-shadow-color: #22d3ee;  |
| shadow-cyan-500 | --tw-shadow-color: #06b6d4;  |
| shadow-cyan-600 | --tw-shadow-color: #0891b2;  |
| shadow-cyan-700 | --tw-shadow-color: #0e7490;  |
| shadow-cyan-800 | --tw-shadow-color: #155e75;  |
| shadow-cyan-900 | --tw-shadow-color: #164e63;  |
| shadow-cyan-950 | --tw-shadow-color: #083344;  |
| shadow-sky-50 | --tw-shadow-color: #f0f9ff;  |
| shadow-sky-100 | --tw-shadow-color: #e0f2fe;  |
| shadow-sky-200 | --tw-shadow-color: #bae6fd;  |
| shadow-sky-300 | --tw-shadow-color: #7dd3fc;  |
| shadow-sky-400 | --tw-shadow-color: #38bdf8;  |
| shadow-sky-500 | --tw-shadow-color: #0ea5e9;  |
| shadow-sky-600 | --tw-shadow-color: #0284c7;  |
| shadow-sky-700 | --tw-shadow-color: #0369a1;  |
| shadow-sky-800 | --tw-shadow-color: #075985;  |
| shadow-sky-900 | --tw-shadow-color: #0c4a6e;  |
| shadow-sky-950 | --tw-shadow-color: #082f49;  |
| shadow-blue-50 | --tw-shadow-color: #eff6ff;  |
| shadow-blue-100 | --tw-shadow-color: #dbeafe;  |
| shadow-blue-200 | --tw-shadow-color: #bfdbfe;  |
| shadow-blue-300 | --tw-shadow-color: #93c5fd;  |
| shadow-blue-400 | --tw-shadow-color: #60a5fa;  |
| shadow-blue-500 | --tw-shadow-color: #3b82f6;  |
| shadow-blue-600 | --tw-shadow-color: #2563eb;  |
| shadow-blue-700 | --tw-shadow-color: #1d4ed8;  |
| shadow-blue-800 | --tw-shadow-color: #1e40af;  |
| shadow-blue-900 | --tw-shadow-color: #1e3a8a;  |
| shadow-blue-950 | --tw-shadow-color: #172554;  |
| shadow-indigo-50 | --tw-shadow-color: #eef2ff;  |
| shadow-indigo-100 | --tw-shadow-color: #e0e7ff;  |
| shadow-indigo-200 | --tw-shadow-color: #c7d2fe;  |
| shadow-indigo-300 | --tw-shadow-color: #a5b4fc;  |
| shadow-indigo-400 | --tw-shadow-color: #818cf8;  |
| shadow-indigo-500 | --tw-shadow-color: #6366f1;  |
| shadow-indigo-600 | --tw-shadow-color: #4f46e5;  |
| shadow-indigo-700 | --tw-shadow-color: #4338ca;  |
| shadow-indigo-800 | --tw-shadow-color: #3730a3;  |
| shadow-indigo-900 | --tw-shadow-color: #312e81;  |
| shadow-indigo-950 | --tw-shadow-color: #1e1b4b;  |
| shadow-violet-50 | --tw-shadow-color: #f5f3ff;  |
| shadow-violet-100 | --tw-shadow-color: #ede9fe;  |
| shadow-violet-200 | --tw-shadow-color: #ddd6fe;  |
| shadow-violet-300 | --tw-shadow-color: #c4b5fd;  |
| shadow-violet-400 | --tw-shadow-color: #a78bfa;  |
| shadow-violet-500 | --tw-shadow-color: #8b5cf6;  |
| shadow-violet-600 | --tw-shadow-color: #7c3aed;  |
| shadow-violet-700 | --tw-shadow-color: #6d28d9;  |
| shadow-violet-800 | --tw-shadow-color: #5b21b6;  |
| shadow-violet-900 | --tw-shadow-color: #4c1d95;  |
| shadow-violet-950 | --tw-shadow-color: #2e1065;  |
| shadow-purple-50 | --tw-shadow-color: #faf5ff;  |
| shadow-purple-100 | --tw-shadow-color: #f3e8ff;  |
| shadow-purple-200 | --tw-shadow-color: #e9d5ff;  |
| shadow-purple-300 | --tw-shadow-color: #d8b4fe;  |
| shadow-purple-400 | --tw-shadow-color: #c084fc;  |
| shadow-purple-500 | --tw-shadow-color: #a855f7;  |
| shadow-purple-600 | --tw-shadow-color: #9333ea;  |
| shadow-purple-700 | --tw-shadow-color: #7e22ce;  |
| shadow-purple-800 | --tw-shadow-color: #6b21a8;  |
| shadow-purple-900 | --tw-shadow-color: #581c87;  |
| shadow-purple-950 | --tw-shadow-color: #3b0764;  |
| shadow-fuchsia-50 | --tw-shadow-color: #fdf4ff;  |
| shadow-fuchsia-100 | --tw-shadow-color: #fae8ff;  |
| shadow-fuchsia-200 | --tw-shadow-color: #f5d0fe;  |
| shadow-fuchsia-300 | --tw-shadow-color: #f0abfc;  |
| shadow-fuchsia-400 | --tw-shadow-color: #e879f9;  |
| shadow-fuchsia-500 | --tw-shadow-color: #d946ef;  |
| shadow-fuchsia-600 | --tw-shadow-color: #c026d3;  |
| shadow-fuchsia-700 | --tw-shadow-color: #a21caf;  |
| shadow-fuchsia-800 | --tw-shadow-color: #86198f;  |
| shadow-fuchsia-900 | --tw-shadow-color: #701a75;  |
| shadow-fuchsia-950 | --tw-shadow-color: #4a044e;  |
| shadow-pink-50 | --tw-shadow-color: #fdf2f8;  |
| shadow-pink-100 | --tw-shadow-color: #fce7f3;  |
| shadow-pink-200 | --tw-shadow-color: #fbcfe8;  |
| shadow-pink-300 | --tw-shadow-color: #f9a8d4;  |
| shadow-pink-400 | --tw-shadow-color: #f472b6;  |
| shadow-pink-500 | --tw-shadow-color: #ec4899;  |
| shadow-pink-600 | --tw-shadow-color: #db2777;  |
| shadow-pink-700 | --tw-shadow-color: #be185d;  |
| shadow-pink-800 | --tw-shadow-color: #9d174d;  |
| shadow-pink-900 | --tw-shadow-color: #831843;  |
| shadow-pink-950 | --tw-shadow-color: #500724;  |
| shadow-rose-50 | --tw-shadow-color: #fff1f2;  |
| shadow-rose-100 | --tw-shadow-color: #ffe4e6;  |
| shadow-rose-200 | --tw-shadow-color: #fecdd3;  |
| shadow-rose-300 | --tw-shadow-color: #fda4af;  |
| shadow-rose-400 | --tw-shadow-color: #fb7185;  |
| shadow-rose-500 | --tw-shadow-color: #f43f5e;  |
| shadow-rose-600 | --tw-shadow-color: #e11d48;  |
| shadow-rose-700 | --tw-shadow-color: #be123c;  |
| shadow-rose-800 | --tw-shadow-color: #9f1239;  |
| shadow-rose-900 | --tw-shadow-color: #881337;  |
| shadow-rose-950 | --tw-shadow-color: #4c0519;  |






Basic usage
-----------

 ### Setting the box shadow color

 Use the `shadow-{color}` utilities to change the color of an existing box shadow. By default colored shadows have an opacity of 100%, but you can adjust this using the opacity modifier.

 
```
<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>
```
 ### Using shadows on colored backgrounds

 When using shadows on a colored background, colored shadows can often look more natural than the default black-based shadows, which tend to appear gray and washed-out.

 
```
<!-- Default shadow-->
<button class="shadow-lg">Subscribe</button>

<!-- Colored shadow-->
<button class="shadow-lg shadow-indigo-500/40 ...">Subscribe</button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:shadow-indigo-500/40` to only apply the `shadow-indigo-500/40` utility on hover.



```
<button class="shadow shadow-blue-500/40 hover:shadow-indigo-500/40">
  <!-- ... -->
</button>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:shadow-indigo-500/40` to apply the `shadow-indigo-500/40` utility at only medium screen sizes and above.



```
<button class="shadow shadow-blue-500/40 md:shadow-indigo-500/40">
  <!-- ... -->
</button>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 ### Preserving shadow color when changing the shadow size

 Note that if you change the [box shadow](box-shadow) size at a different breakpoint, or on another state like hover, it will override any existing shadow colors.

 
```
<!-- This shadow will NOT be red at medium screens and above -->
<div class="shadow-lg shadow-red-500 md:shadow-xl"></div>
```
 To preserve the shadow color in these states, it needs to be respecified:

 
```
<!-- This shadow WILL be red at medium screens and above -->
<div class="shadow-lg shadow-red-500 md:shadow-xl md:shadow-red-500"></div>
```
 It’s necessary for Tailwind to work this way, as otherwise there would be no way to switch back to the default shadow.

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as box shadow colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your box shadow colors by editing `theme.boxShadowColor` or `theme.extend.boxShadowColor` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `box-shadow` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<button class="shadow-[#50d71e]">
  <!-- ... -->
</button>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/box-shadow-color>

Opacity
=======


Utilities for controlling the opacity of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| opacity-0 | opacity: 0;  |
| opacity-5 | opacity: 0.05;  |
| opacity-10 | opacity: 0.1;  |
| opacity-20 | opacity: 0.2;  |
| opacity-25 | opacity: 0.25;  |
| opacity-30 | opacity: 0.3;  |
| opacity-40 | opacity: 0.4;  |
| opacity-50 | opacity: 0.5;  |
| opacity-60 | opacity: 0.6;  |
| opacity-70 | opacity: 0.7;  |
| opacity-75 | opacity: 0.75;  |
| opacity-80 | opacity: 0.8;  |
| opacity-90 | opacity: 0.9;  |
| opacity-95 | opacity: 0.95;  |
| opacity-100 | opacity: 1;  |






Basic usage
-----------

 ### Changing an element’s opacity

 Control the opacity of an element using the `opacity-{amount}` utilities.

 
```
<button class="bg-indigo-500 opacity-100 ..."></button>
<button class="bg-indigo-500 opacity-75 ..."></button>
<button class="bg-indigo-500 opacity-50 ..."></button>
<button class="bg-indigo-500 opacity-25 ..."></button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:opacity-100` to only apply the `opacity-100` utility on hover.



```
<div class="opacity-50 hover:opacity-100">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:opacity-100` to apply the `opacity-100` utility at only medium screen sizes and above.



```
<div class="opacity-50 md:opacity-100">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides several opacity utilities for general purpose use. You can customize these values by editing `theme.opacity` or `theme.extend.opacity` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      opacity: {
        '67': '.67',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `opacity` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="opacity-[.67]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/opacity>

Mix Blend Mode
==============


Utilities for controlling how an element should blend with the background.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| mix-blend-normal | mix-blend-mode: normal;  |
| mix-blend-multiply | mix-blend-mode: multiply;  |
| mix-blend-screen | mix-blend-mode: screen;  |
| mix-blend-overlay | mix-blend-mode: overlay;  |
| mix-blend-darken | mix-blend-mode: darken;  |
| mix-blend-lighten | mix-blend-mode: lighten;  |
| mix-blend-color-dodge | mix-blend-mode: color-dodge;  |
| mix-blend-color-burn | mix-blend-mode: color-burn;  |
| mix-blend-hard-light | mix-blend-mode: hard-light;  |
| mix-blend-soft-light | mix-blend-mode: soft-light;  |
| mix-blend-difference | mix-blend-mode: difference;  |
| mix-blend-exclusion | mix-blend-mode: exclusion;  |
| mix-blend-hue | mix-blend-mode: hue;  |
| mix-blend-saturation | mix-blend-mode: saturation;  |
| mix-blend-color | mix-blend-mode: color;  |
| mix-blend-luminosity | mix-blend-mode: luminosity;  |
| mix-blend-plus-lighter | mix-blend-mode: plus-lighter;  |






Basic usage
-----------

 ### Setting an element’s blend mode

 Use the `mix-blend-{mode}` utilities to control how an element’s content should be blended with the background.

 
```
<div class="flex justify-center -space-x-14">
  <div class="mix-blend-multiply bg-blue-400 ..."></div>
  <div class="mix-blend-multiply bg-pink-400 ..."></div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:mix-blend-overlay` to only apply the `mix-blend-overlay` utility on hover.



```
<div class="mix-blend-multiply hover:mix-blend-overlay">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:mix-blend-overlay` to apply the `mix-blend-overlay` utility at only medium screen sizes and above.



```
<div class="mix-blend-multiply md:mix-blend-overlay">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/mix-blend-mode>

Background Blend Mode
=====================


Utilities for controlling how an element's background image should blend with its background color.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| 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;  |






Basic usage
-----------

 ### Setting the background blend mode

 Use the `bg-blend-{mode}` utilities to control how an element’s background image(s) should blend with its background color.

 
```
<div class="bg-blend-multiply ...">
  <!-- ... -->
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:bg-blend-darken` to only apply the `bg-blend-darken` utility on hover.



```
<div class="bg-blend-lighten hover:bg-blend-darken">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:bg-blend-darken` to apply the `bg-blend-darken` utility at only medium screen sizes and above.



```
<div class="bg-blend-lighten md:bg-blend-darken">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/background-blend-mode>

Blur
====


Utilities for applying blur filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| blur-none | filter: blur(0);  |
| blur-sm | filter: blur(4px);  |
| blur | filter: blur(8px);  |
| blur-md | filter: blur(12px);  |
| blur-lg | filter: blur(16px);  |
| blur-xl | filter: blur(24px);  |
| blur-2xl | filter: blur(40px);  |
| blur-3xl | filter: blur(64px);  |






Basic usage
-----------

 ### Blurring elements

 Use the `blur-{amount?}` utilities to blur an element.

 
```
<div class="blur-none ...">
  <!-- ... -->
</div>
<div class="blur-sm ...">
  <!-- ... -->
</div>
<div class="blur-lg ...">
  <!-- ... -->
</div>
<div class="blur-2xl ...">
  <!-- ... -->
</div>
```
 ### Removing filters

 To remove all of the filters on an element at once, use the `filter-none` utility:



```
<div class="blur-md invert brightness-150 md:filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:blur-lg` to only apply the `blur-lg` utility on hover.



```
<div class="blur hover:blur-lg">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:blur-lg` to apply the `blur-lg` utility at only medium screen sizes and above.



```
<div class="blur md:blur-lg">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `blur` utilities. You can customize these values by editing `theme.blur` or `theme.extend.blur` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      blur: {
        xs: '2px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `blur` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="blur-[2px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/blur>

Brightness
==========


Utilities for applying brightness filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| brightness-0 | filter: brightness(0);  |
| brightness-50 | filter: brightness(.5);  |
| brightness-75 | filter: brightness(.75);  |
| brightness-90 | filter: brightness(.9);  |
| brightness-95 | filter: brightness(.95);  |
| brightness-100 | filter: brightness(1);  |
| brightness-105 | filter: brightness(1.05);  |
| brightness-110 | filter: brightness(1.1);  |
| brightness-125 | filter: brightness(1.25);  |
| brightness-150 | filter: brightness(1.5);  |
| brightness-200 | filter: brightness(2);  |






Basic usage
-----------

 ### Changing element brightness

 Use the `brightness-{amount?}` utilities to control an element’s brightness.

 
```
<div class="brightness-50 ...">
  <!-- ... -->
</div>
<div class="brightness-100 ...">
  <!-- ... -->
</div>
<div class="brightness-125 ...">
  <!-- ... -->
</div>
<div class="brightness-200 ...">
  <!-- ... -->
</div>
```
 ### Removing filters

 To remove all of the filters on an element at once, use the `filter-none` utility:



```
<div class="blur-md invert brightness-150 md:filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:brightness-150` to only apply the `brightness-150` utility on hover.



```
<div class="brightness-110 hover:brightness-150">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:brightness-150` to apply the `brightness-150` utility at only medium screen sizes and above.



```
<div class="brightness-110 md:brightness-150">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `brightness` utilities. You can customize these values by editing `theme.brightness` or `theme.extend.brightness` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      brightness: {
        25: '.25',
        175: '1.75',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `brightness` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="brightness-[1.75]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/brightness>

Contrast
========


Utilities for applying contrast filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| contrast-0 | filter: contrast(0);  |
| contrast-50 | filter: contrast(.5);  |
| contrast-75 | filter: contrast(.75);  |
| contrast-100 | filter: contrast(1);  |
| contrast-125 | filter: contrast(1.25);  |
| contrast-150 | filter: contrast(1.5);  |
| contrast-200 | filter: contrast(2);  |






Basic usage
-----------

 ### Changing element contrast

 Use the `contrast-{amount?}` utilities to control an element’s contrast.

 
```
<div class="contrast-50 ...">
  <!-- ... -->
</div>
<div class="contrast-100 ...">
  <!-- ... -->
</div>
<div class="contrast-125 ...">
  <!-- ... -->
</div>
<div class="contrast-200 ...">
  <!-- ... -->
</div>
```
 ### Removing filters

 To remove all of the filters on an element at once, use the `filter-none` utility:



```
<div class="blur-md invert contrast-125 md:filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:contrast-150` to only apply the `contrast-150` utility on hover.



```
<div class="contrast-125 hover:contrast-150">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:contrast-150` to apply the `contrast-150` utility at only medium screen sizes and above.



```
<div class="contrast-125 md:contrast-150">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `contrast` utilities. You can customize these values by editing `theme.contrast` or `theme.extend.contrast` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      contrast: {
        25: '.25',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `contrast` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="contrast-[.25]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/contrast>

Drop Shadow
===========


Utilities for applying drop-shadow filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| drop-shadow-sm | filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));  |
| drop-shadow | filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));  |
| drop-shadow-md | filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));  |
| drop-shadow-lg | filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));  |
| drop-shadow-xl | filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));  |
| drop-shadow-2xl | filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));  |
| drop-shadow-none | filter: drop-shadow(0 0 #0000);  |






Basic usage
-----------

 ### Adding a drop shadow

 Use the `drop-shadow-{amount}` utilities to add a drop shadow to an element.

 
```
<div class="drop-shadow-md ...">
  <!-- ... -->
</div>
<div class="drop-shadow-lg ...">
  <!-- ... -->
</div>
<div class="drop-shadow-xl ...">
  <!-- ... -->
</div>
<div class="drop-shadow-2xl ...">
  <!-- ... -->
</div>
```
 ### Removing filters

 To remove all of the filters on an element at once, use the `filter-none` utility:



```
<div class="blur-md invert drop-shadow-xl md:filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:drop-shadow-xl` to only apply the `drop-shadow-xl` utility on hover.



```
<div class="drop-shadow-md hover:drop-shadow-xl">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:drop-shadow-xl` to apply the `drop-shadow-xl` utility at only medium screen sizes and above.



```
<div class="drop-shadow-md md:drop-shadow-xl">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `dropShadow` utilities. You can customize these values by editing `theme.dropShadow` or `theme.extend.dropShadow` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      dropShadow: {
        '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
        '4xl': [
            '0 35px 35px rgba(0, 0, 0, 0.25)',
            '0 45px 65px rgba(0, 0, 0, 0.15)'
        ]
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `drop-shadow` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/drop-shadow>

Grayscale
=========


Utilities for applying grayscale filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| grayscale-0 | filter: grayscale(0);  |
| grayscale | filter: grayscale(100%);  |






Basic usage
-----------

 ### Making an element grayscale

 Use the `grayscale` and `grayscale-0` utilities to control whether an element should be rendered as grayscale or in full color.

 
```
<div class="grayscale-0 ...">
  <!-- ... -->
</div>
<div class="grayscale ...">
  <!-- ... -->
</div>
```
 ### Removing filters

 To remove all of the filters on an element at once, use the `filter-none` utility:



```
<div class="blur-md invert grayscale md:filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:grayscale-0` to only apply the `grayscale-0` utility on hover.



```
<div class="grayscale hover:grayscale-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:grayscale-0` to apply the `grayscale-0` utility at only medium screen sizes and above.



```
<div class="grayscale md:grayscale-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `grayscale` utilities. You can customize these values by editing `theme.grayscale` or `theme.extend.grayscale` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      grayscale: {
        50: '50%',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `grayscale` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="grayscale-[50%]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/grayscale>

Hue Rotate
==========


Utilities for applying hue-rotate filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| hue-rotate-0 | filter: hue-rotate(0deg);  |
| hue-rotate-15 | filter: hue-rotate(15deg);  |
| hue-rotate-30 | filter: hue-rotate(30deg);  |
| hue-rotate-60 | filter: hue-rotate(60deg);  |
| hue-rotate-90 | filter: hue-rotate(90deg);  |
| hue-rotate-180 | filter: hue-rotate(180deg);  |






Basic usage
-----------

 ### Rotating an element’s hue

 Use the `hue-rotate-{amount}` utilities to rotate the hue of an element.

 
```
<div class="hue-rotate-15 ...">
  <!-- ... -->
</div>
<div class="hue-rotate-90 ...">
  <!-- ... -->
</div>
<div class="hue-rotate-180 ...">
  <!-- ... -->
</div>
<div class="-hue-rotate-60 ...">
  <!-- ... -->
</div>
```
 ### Using negative values

 To use a negative hue-rotate value, prefix the class name with a dash to convert it to a negative value.

 
```
<div class="-hue-rotate-60 ...">
  <!-- ... -->
</div>
```
 ### Removing filters

 To remove all of the filters on an element at once, use the `filter-none` utility:



```
<div class="blur-md invert hue-rotate-180 md:filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:hue-rotate-0` to only apply the `hue-rotate-0` utility on hover.



```
<div class="hue-rotate-60 hover:hue-rotate-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:hue-rotate-0` to apply the `hue-rotate-0` utility at only medium screen sizes and above.



```
<div class="hue-rotate-60 md:hue-rotate-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `hue-rotate` utilities. You can customize these values by editing `theme.hueRotate` or `theme.extend.hueRotate` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      hueRotate: {
        '-270': '-270deg',
        270: '270deg',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `hue-rotate` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="hue-rotate-[270deg]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/hue-rotate>

Invert
======


Utilities for applying invert filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| invert-0 | filter: invert(0);  |
| invert | filter: invert(100%);  |






Basic usage
-----------

 ### Inverting an element’s color

 Use the `invert` and `invert-0` utilities to control whether an element should be rendered with inverted colors or normally.

 
```
<div class="invert-0 ...">
  <!-- ... -->
</div>
<div class="invert ...">
  <!-- ... -->
</div>
```
 ### Removing filters

 To remove all of the filters on an element at once, use the `filter-none` utility:



```
<div class="blur-md invert brightness-150 md:filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:invert-0` to only apply the `invert-0` utility on hover.



```
<div class="invert hover:invert-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:invert-0` to apply the `invert-0` utility at only medium screen sizes and above.



```
<div class="invert md:invert-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `invert` utilities. You can customize these values by editing `theme.invert` or `theme.extend.invert` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      invert: {
        25: '.25',
        50: '.5',
        75: '.75',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `invert` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="invert-[.25]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/invert>

Saturate
========


Utilities for applying saturation filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| saturate-0 | filter: saturate(0);  |
| saturate-50 | filter: saturate(.5);  |
| saturate-100 | filter: saturate(1);  |
| saturate-150 | filter: saturate(1.5);  |
| saturate-200 | filter: saturate(2);  |






Basic usage
-----------

 ### Changing element saturation

 Use the `saturate-{amount}` utilities to control an element’s saturation.

 
```
<div class="saturate-50 ...">
  <!-- ... -->
</div>
<div class="saturate-100 ...">
  <!-- ... -->
</div>
<div class="saturate-150 ...">
  <!-- ... -->
</div>
<div class="saturate-200 ...">
  <!-- ... -->
</div>
```
 ### Removing filters

 To remove all of the filters on an element at once, use the `filter-none` utility:



```
<div class="blur-md invert saturate-150 md:filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:saturate-150` to only apply the `saturate-150` utility on hover.



```
<div class="saturate-50 hover:saturate-150">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:saturate-150` to apply the `saturate-150` utility at only medium screen sizes and above.



```
<div class="saturate-50 md:saturate-150">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `saturate` utilities. You can customize these values by editing `theme.saturate` or `theme.extend.saturate` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      saturate: {
        25: '.25',
        75: '.75',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `saturate` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="saturate-[.25]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/saturate>

Sepia
=====


Utilities for applying sepia filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| sepia-0 | filter: sepia(0);  |
| sepia | filter: sepia(100%);  |






Basic usage
-----------

 ### Adding sepia filters

 Use the `sepia` and `sepia-0` utilities to control whether an element should be rendered as sepia or in full color.

 
```
<div class="sepia-0 ...">
  <!-- ... -->
</div>
<div class="sepia ...">
  <!-- ... -->
</div>
```
 ### Removing filters

 To remove all of the filters on an element at once, use the `filter-none` utility:



```
<div class="blur-md invert sepia md:filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:sepia-0` to only apply the `sepia-0` utility on hover.



```
<div class="sepia hover:sepia-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:sepia-0` to apply the `sepia-0` utility at only medium screen sizes and above.



```
<div class="sepia md:sepia-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `sepia` utilities. You can customize these values by editing `theme.sepia` or `theme.extend.sepia` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      sepia: {
        25: '.25',
        75: '.75',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `sepia` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="sepia-[.25]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/sepia>

Backdrop Blur
=============


Utilities for applying backdrop blur filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| backdrop-blur-none | backdrop-filter: blur(0);  |
| backdrop-blur-sm | backdrop-filter: blur(4px);  |
| backdrop-blur | backdrop-filter: blur(8px);  |
| backdrop-blur-md | backdrop-filter: blur(12px);  |
| backdrop-blur-lg | backdrop-filter: blur(16px);  |
| backdrop-blur-xl | backdrop-filter: blur(24px);  |
| backdrop-blur-2xl | backdrop-filter: blur(40px);  |
| backdrop-blur-3xl | backdrop-filter: blur(64px);  |






Basic usage
-----------

 ### Blurring behind an element

 Use the `backdrop-blur-{amount?}` utilities to control an element’s backdrop blur.

 
```
<div class="backdrop-blur-sm bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-blur-md bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-blur-xl bg-white/30 ...">
  <!-- ... -->
</div>
```
 ### Removing backdrop filters

 To remove all of the backdrop filters on an element at once, use the `backdrop-filter-none` utility:



```
<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove backdrop filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:backdrop-blur-lg` to only apply the `backdrop-blur-lg` utility on hover.



```
<div class="backdrop-blur-sm hover:backdrop-blur-lg">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:backdrop-blur-lg` to apply the `backdrop-blur-lg` utility at only medium screen sizes and above.



```
<div class="backdrop-blur-sm md:backdrop-blur-lg">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `backdrop-blur` utilities. You can customize these values by editing `theme.backdropBlur` or `theme.extend.backdropBlur` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      backdropBlur: {
        xs: '2px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `backdrop-blur` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="backdrop-blur-[2px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/backdrop-blur>

Backdrop Brightness
===================


Utilities for applying backdrop brightness filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| backdrop-brightness-0 | backdrop-filter: brightness(0);  |
| backdrop-brightness-50 | backdrop-filter: brightness(.5);  |
| backdrop-brightness-75 | backdrop-filter: brightness(.75);  |
| backdrop-brightness-90 | backdrop-filter: brightness(.9);  |
| backdrop-brightness-95 | backdrop-filter: brightness(.95);  |
| backdrop-brightness-100 | backdrop-filter: brightness(1);  |
| backdrop-brightness-105 | backdrop-filter: brightness(1.05);  |
| backdrop-brightness-110 | backdrop-filter: brightness(1.1);  |
| backdrop-brightness-125 | backdrop-filter: brightness(1.25);  |
| backdrop-brightness-150 | backdrop-filter: brightness(1.5);  |
| backdrop-brightness-200 | backdrop-filter: brightness(2);  |






Basic usage
-----------

 ### Controlling backdrop brightness

 Use the `backdrop-brightness-{amount?}` utilities to control an element’s backdrop brightness.

 
```
<div class="backdrop-brightness-50 bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-brightness-125 bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-brightness-200 bg-white/30 ...">
  <!-- ... -->
</div>
```
 ### Removing backdrop filters

 To remove all of the backdrop filters on an element at once, use the `backdrop-filter-none` utility:



```
<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove backdrop filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:backdrop-brightness-150` to only apply the `backdrop-brightness-150` utility on hover.



```
<div class="backdrop-brightness-110 hover:backdrop-brightness-150">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:backdrop-brightness-150` to apply the `backdrop-brightness-150` utility at only medium screen sizes and above.



```
<div class="backdrop-brightness-110 md:backdrop-brightness-150">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `backdrop-brightness` utilities. You can customize these values by editing `theme.backdropBrightness` or `theme.extend.backdropBrightness` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      backdropBrightness: {
        25: '.25',
        175: '1.75',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `backdrop-brightness` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="backdrop-brightness-[1.75]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/backdrop-brightness>

Backdrop Contrast
=================


Utilities for applying backdrop contrast filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| backdrop-contrast-0 | backdrop-filter: contrast(0);  |
| backdrop-contrast-50 | backdrop-filter: contrast(.5);  |
| backdrop-contrast-75 | backdrop-filter: contrast(.75);  |
| backdrop-contrast-100 | backdrop-filter: contrast(1);  |
| backdrop-contrast-125 | backdrop-filter: contrast(1.25);  |
| backdrop-contrast-150 | backdrop-filter: contrast(1.5);  |
| backdrop-contrast-200 | backdrop-filter: contrast(2);  |






Basic usage
-----------

 ### Controlling backdrop contrast

 Use the `backdrop-contrast-{amount?}` utilities to control an element’s backdrop contrast.

 
```
<div class="backdrop-contrast-50 bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-contrast-125 bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-contrast-200 bg-white/30 ...">
  <!-- ... -->
</div>
```
 ### Removing backdrop filters

 To remove all of the backdrop filters on an element at once, use the `backdrop-filter-none` utility:



```
<div class="backdrop-blur-md backdrop-contrast-125 md:backdrop-filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove backdrop filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:backdrop-contrast-150` to only apply the `backdrop-contrast-150` utility on hover.



```
<div class="backdrop-contrast-125 hover:backdrop-contrast-150">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:backdrop-contrast-150` to apply the `backdrop-contrast-150` utility at only medium screen sizes and above.



```
<div class="backdrop-contrast-125 md:backdrop-contrast-150">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `backdrop-contrast` utilities. You can customize these values by editing `theme.backdropContrast` or `theme.extend.backdropContrast` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      backdropContrast: {
        25: '.25',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `backdrop-contrast` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="backdrop-contrast-[.25]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/backdrop-contrast>

Backdrop Grayscale
==================


Utilities for applying backdrop grayscale filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| backdrop-grayscale-0 | backdrop-filter: grayscale(0);  |
| backdrop-grayscale | backdrop-filter: grayscale(100%);  |






Basic usage
-----------

 ### Making an element grayscale

 Use the `backdrop-grayscale` and `backdrop-grayscale-0` utilities to control whether an element’s backdrop should be rendered as grayscale or in full color.

 
```
<div class="backdrop-grayscale-0 bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-grayscale bg-white/30 ...">
  <!-- ... -->
</div>
```
 ### Removing backdrop filters

 To remove all of the backdrop filters on an element at once, use the `backdrop-filter-none` utility:



```
<div class="backdrop-blur-md backdrop-grayscale md:backdrop-filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove backdrop filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:backdrop-grayscale-0` to only apply the `backdrop-grayscale-0` utility on hover.



```
<div class="backdrop-grayscale hover:backdrop-grayscale-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:backdrop-grayscale-0` to apply the `backdrop-grayscale-0` utility at only medium screen sizes and above.



```
<div class="backdrop-grayscale md:backdrop-grayscale-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `backdrop-grayscale` utilities. You can customize these values by editing `theme.backdropGrayscale` or `theme.extend.backdropGrayscale` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      backdropGrayscale: {
        50: '.5',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `backdrop-grayscale` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="backdrop-grayscale-[.5]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/backdrop-grayscale>

Backdrop Hue Rotate
===================


Utilities for applying backdrop hue-rotate filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| backdrop-hue-rotate-0 | backdrop-filter: hue-rotate(0deg);  |
| backdrop-hue-rotate-15 | backdrop-filter: hue-rotate(15deg);  |
| backdrop-hue-rotate-30 | backdrop-filter: hue-rotate(30deg);  |
| backdrop-hue-rotate-60 | backdrop-filter: hue-rotate(60deg);  |
| backdrop-hue-rotate-90 | backdrop-filter: hue-rotate(90deg);  |
| backdrop-hue-rotate-180 | backdrop-filter: hue-rotate(180deg);  |






Basic usage
-----------

 ### Rotating the backdrop’s hue

 Use the `backdrop-hue-rotate-{amount}` utilities to rotate the hue of an element’s backdrop.

 
```
<div class="backdrop-hue-rotate-90 bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-hue-rotate-180 bg-white/30 ...">
  <!-- ... -->
</div>
<div class="-backdrop-hue-rotate-60 bg-white/30 ...">
  <!-- ... -->
</div>
```
 ### Using negative values

 To use a negative backdrop hue rotate value, prefix the class name with a dash to convert it to a negative value.

 
```
<div class="-backdrop-hue-rotate-60">
  <!-- ... -->
</div>
```
 ### Removing backdrop filters

 To remove all of the backdrop filters on an element at once, use the `backdrop-filter-none` utility:



```
<div class="backdrop-blur-md backdrop-hue-rotate-180 md:backdrop-filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove backdrop filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:backdrop-hue-rotate-60` to only apply the `backdrop-hue-rotate-60` utility on hover.



```
<div class="backdrop-hue-rotate-15 hover:backdrop-hue-rotate-60">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:backdrop-hue-rotate-60` to apply the `backdrop-hue-rotate-60` utility at only medium screen sizes and above.



```
<div class="backdrop-hue-rotate-15 md:backdrop-hue-rotate-60">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `backdrop-hue-rotate` utilities. You can customize these values by editing `theme.backdropHueRotate` or `theme.extend.backdropHueRotate` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      backdropHueRotate: {
        '-270': '-270deg',
        270: '270deg',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `backdrop-hue-rotate` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="backdrop-hue-rotate-[270deg]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/backdrop-hue-rotate>

Backdrop Invert
===============


Utilities for applying backdrop invert filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| backdrop-invert-0 | backdrop-filter: invert(0);  |
| backdrop-invert | backdrop-filter: invert(100%);  |






Basic usage
-----------

 ### Inverting an element’s backdrop

 Use the `backdrop-invert` and `backdrop-invert-0` utilities to control whether an element should be rendered with inverted backdrop colors or normally.

 
```
<div class="backdrop-invert-0 bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-invert bg-white/30 ...">
  <!-- ... -->
</div>
```
 ### Removing backdrop filters

 To remove all of the backdrop filters on an element at once, use the `backdrop-filter-none` utility:



```
<div class="backdrop-blur-md backdrop-invert md:backdrop-filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove backdrop filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:backdrop-invert-0` to only apply the `backdrop-invert-0` utility on hover.



```
<div class="backdrop-invert hover:backdrop-invert-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:backdrop-invert-0` to apply the `backdrop-invert-0` utility at only medium screen sizes and above.



```
<div class="backdrop-invert md:backdrop-invert-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `backdrop-invert` utilities. You can customize these values by editing `theme.backdropInvert` or `theme.extend.backdropInvert` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      backdropInvert: {
        25: '.25',
        75: '.75',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `backdrop-invert` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="backdrop-invert-[.25]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/backdrop-invert>

Backdrop Opacity
================


Utilities for applying backdrop opacity filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| backdrop-opacity-0 | backdrop-filter: opacity(0);  |
| backdrop-opacity-5 | backdrop-filter: opacity(0.05);  |
| backdrop-opacity-10 | backdrop-filter: opacity(0.1);  |
| backdrop-opacity-20 | backdrop-filter: opacity(0.2);  |
| backdrop-opacity-25 | backdrop-filter: opacity(0.25);  |
| backdrop-opacity-30 | backdrop-filter: opacity(0.3);  |
| backdrop-opacity-40 | backdrop-filter: opacity(0.4);  |
| backdrop-opacity-50 | backdrop-filter: opacity(0.5);  |
| backdrop-opacity-60 | backdrop-filter: opacity(0.6);  |
| backdrop-opacity-70 | backdrop-filter: opacity(0.7);  |
| backdrop-opacity-75 | backdrop-filter: opacity(0.75);  |
| backdrop-opacity-80 | backdrop-filter: opacity(0.8);  |
| backdrop-opacity-90 | backdrop-filter: opacity(0.9);  |
| backdrop-opacity-95 | backdrop-filter: opacity(0.95);  |
| backdrop-opacity-100 | backdrop-filter: opacity(1);  |






Basic usage
-----------

 ### Controlling opacity of backdrop filters

 Use the `backdrop-opacity-{amount}` utilities to control the opacity of other backdrop filters applied to an element.

 
```
<div class="backdrop-opacity-10 backdrop-invert bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-opacity-60 backdrop-invert bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-opacity-95 backdrop-invert bg-white/30 ...">
  <!-- ... -->
</div>
```
 ### Removing backdrop filters

 To remove all of the backdrop filters on an element at once, use the `backdrop-filter-none` utility:



```
<div class="backdrop-blur-md backdrop-opacity-60 md:backdrop-filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove backdrop filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:backdrop-opacity-60` to only apply the `backdrop-opacity-60` utility on hover.



```
<div class="backdrop-opacity-100 hover:backdrop-opacity-60">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:backdrop-opacity-60` to apply the `backdrop-opacity-60` utility at only medium screen sizes and above.



```
<div class="backdrop-opacity-100 md:backdrop-opacity-60">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `backdrop-opacity` utilities. You can customize these values by editing `theme.backdropOpacity` or `theme.extend.backdropOpacity` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      backdropOpacity: {
        15: '.15',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `backdrop-opacity` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="backdrop-opacity-[.15]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/backdrop-opacity>

Backdrop Saturate
=================


Utilities for applying backdrop saturation filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| backdrop-saturate-0 | backdrop-filter: saturate(0);  |
| backdrop-saturate-50 | backdrop-filter: saturate(.5);  |
| backdrop-saturate-100 | backdrop-filter: saturate(1);  |
| backdrop-saturate-150 | backdrop-filter: saturate(1.5);  |
| backdrop-saturate-200 | backdrop-filter: saturate(2);  |






Basic usage
-----------

 ### Changing backdrop saturation

 Use the `backdrop-saturate-{amount}` utilities to control an element’s backdrop saturation.

 
```
<div class="backdrop-saturate-50 bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-saturate-125 bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-saturate-200 bg-white/30 ...">
  <!-- ... -->
</div>
```
 ### Removing backdrop filters

 To remove all of the backdrop filters on an element at once, use the `backdrop-filter-none` utility:



```
<div class="backdrop-blur-md backdrop-saturate-150 md:backdrop-filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove backdrop filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:backdrop-saturate-150` to only apply the `backdrop-saturate-150` utility on hover.



```
<div class="backdrop-saturate-50 hover:backdrop-saturate-150">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:backdrop-saturate-150` to apply the `backdrop-saturate-150` utility at only medium screen sizes and above.



```
<div class="backdrop-saturate-50 md:backdrop-saturate-150">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `backdrop-saturate` utilities. You can customize these values by editing `theme.backdropSaturate` or `theme.extend.backdropSaturate` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      backdropSaturate: {
        25: '.25',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `backdrop-saturate` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="backdrop-saturate-[.25]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/backdrop-saturate>

Backdrop Sepia
==============


Utilities for applying backdrop sepia filters to an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| backdrop-sepia-0 | backdrop-filter: sepia(0);  |
| backdrop-sepia | backdrop-filter: sepia(100%);  |






Basic usage
-----------

 ### Adding backdrop sepia filters

 Use the `backdrop-sepia` and `backdrop-sepia-0` utilities to control whether an element’s backdrop should be rendered as sepia or in full color.

 
```
<div class="backdrop-sepia-0 bg-white/30 ...">
  <!-- ... -->
</div>
<div class="backdrop-sepia bg-white/30 ...">
  <!-- ... -->
</div>
```
 ### Removing backdrop filters

 To remove all of the backdrop filters on an element at once, use the `backdrop-filter-none` utility:



```
<div class="backdrop-blur-md backdrop-sepia md:backdrop-filter-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove backdrop filters conditionally, such as on hover or at a particular breakpoint.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:backdrop-sepia-0` to only apply the `backdrop-sepia-0` utility on hover.



```
<div class="backdrop-sepia hover:backdrop-sepia-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:backdrop-sepia-0` to apply the `backdrop-sepia-0` utility at only medium screen sizes and above.



```
<div class="backdrop-sepia md:backdrop-sepia-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `backdrop-sepia` utilities. You can customize these values by editing `theme.backdropSepia` or `theme.extend.backdropSepia` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      backdropSepia: {
        25: '.25',
        75: '.75',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `backdrop-sepia` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="backdrop-sepia-[.25]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/backdrop-sepia>

Border Collapse
===============


Utilities for controlling whether table borders should collapse or be separated.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| border-collapse | border-collapse: collapse;  |
| border-separate | border-collapse: separate;  |






Basic usage
-----------

 ### Collapse

 Use `border-collapse` to combine adjacent cell borders into a single border when possible. Note that this includes collapsing borders on the top-level `<table>` tag.

 
```
<table class="border-collapse border border-slate-400 ...">
  <thead>
    <tr>
      <th class="border border-slate-300 ...">State</th>
      <th class="border border-slate-300 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-300 ...">Indiana</td>
      <td class="border border-slate-300 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Ohio</td>
      <td class="border border-slate-300 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Michigan</td>
      <td class="border border-slate-300 ...">Detroit</td>
    </tr>
  </tbody>
</table><table class="border-collapse border border-slate-500 ...">
  <thead>
    <tr>
      <th class="border border-slate-600 ...">State</th>
      <th class="border border-slate-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-700 ...">Indiana</td>
      <td class="border border-slate-700 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Ohio</td>
      <td class="border border-slate-700 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Michigan</td>
      <td class="border border-slate-700 ...">Detroit</td>
    </tr>
  </tbody>
</table>
```
 ### Separate

 Use `border-separate` to force each cell to display its own separate borders.

 
```
<table class="border-separate border border-slate-400 ...">
  <thead>
    <tr>
      <th class="border border-slate-300 ...">State</th>
      <th class="border border-slate-300 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-300 ...">Indiana</td>
      <td class="border border-slate-300 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Ohio</td>
      <td class="border border-slate-300 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Michigan</td>
      <td class="border border-slate-300 ...">Detroit</td>
    </tr>
  </tbody>
</table><table class="border-separate border border-slate-500 ...">
  <thead>
    <tr>
      <th class="border border-slate-600 ...">State</th>
      <th class="border border-slate-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-700 ...">Indiana</td>
      <td class="border border-slate-700 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Ohio</td>
      <td class="border border-slate-700 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Michigan</td>
      <td class="border border-slate-700 ...">Detroit</td>
    </tr>
  </tbody>
</table>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:border-collapse` to only apply the `border-collapse` utility on hover.



```
<table class="hover:border-collapse">
  <!-- ... -->
</table>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:border-collapse` to apply the `border-collapse` utility at only medium screen sizes and above.



```
<table class="md:border-collapse">
  <!-- ... -->
</table>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/border-collapse>

Border Color
============


Utilities for controlling the color of an element's borders.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| border-inherit | border-color: inherit;  |
| border-current | border-color: currentColor;  |
| border-transparent | border-color: transparent;  |
| border-black | border-color: rgb(0 0 0);  |
| border-white | border-color: rgb(255 255 255);  |
| border-slate-50 | border-color: rgb(248 250 252);  |
| border-slate-100 | border-color: rgb(241 245 249);  |
| border-slate-200 | border-color: rgb(226 232 240);  |
| border-slate-300 | border-color: rgb(203 213 225);  |
| border-slate-400 | border-color: rgb(148 163 184);  |
| border-slate-500 | border-color: rgb(100 116 139);  |
| border-slate-600 | border-color: rgb(71 85 105);  |
| border-slate-700 | border-color: rgb(51 65 85);  |
| border-slate-800 | border-color: rgb(30 41 59);  |
| border-slate-900 | border-color: rgb(15 23 42);  |
| border-slate-950 | border-color: rgb(2 6 23);  |
| border-gray-50 | border-color: rgb(249 250 251);  |
| border-gray-100 | border-color: rgb(243 244 246);  |
| border-gray-200 | border-color: rgb(229 231 235);  |
| border-gray-300 | border-color: rgb(209 213 219);  |
| border-gray-400 | border-color: rgb(156 163 175);  |
| border-gray-500 | border-color: rgb(107 114 128);  |
| border-gray-600 | border-color: rgb(75 85 99);  |
| border-gray-700 | border-color: rgb(55 65 81);  |
| border-gray-800 | border-color: rgb(31 41 55);  |
| border-gray-900 | border-color: rgb(17 24 39);  |
| border-gray-950 | border-color: rgb(3 7 18);  |
| border-zinc-50 | border-color: rgb(250 250 250);  |
| border-zinc-100 | border-color: rgb(244 244 245);  |
| border-zinc-200 | border-color: rgb(228 228 231);  |
| border-zinc-300 | border-color: rgb(212 212 216);  |
| border-zinc-400 | border-color: rgb(161 161 170);  |
| border-zinc-500 | border-color: rgb(113 113 122);  |
| border-zinc-600 | border-color: rgb(82 82 91);  |
| border-zinc-700 | border-color: rgb(63 63 70);  |
| border-zinc-800 | border-color: rgb(39 39 42);  |
| border-zinc-900 | border-color: rgb(24 24 27);  |
| border-zinc-950 | border-color: rgb(9 9 11);  |
| border-neutral-50 | border-color: rgb(250 250 250);  |
| border-neutral-100 | border-color: rgb(245 245 245);  |
| border-neutral-200 | border-color: rgb(229 229 229);  |
| border-neutral-300 | border-color: rgb(212 212 212);  |
| border-neutral-400 | border-color: rgb(163 163 163);  |
| border-neutral-500 | border-color: rgb(115 115 115);  |
| border-neutral-600 | border-color: rgb(82 82 82);  |
| border-neutral-700 | border-color: rgb(64 64 64);  |
| border-neutral-800 | border-color: rgb(38 38 38);  |
| border-neutral-900 | border-color: rgb(23 23 23);  |
| border-neutral-950 | border-color: rgb(10 10 10);  |
| border-stone-50 | border-color: rgb(250 250 249);  |
| border-stone-100 | border-color: rgb(245 245 244);  |
| border-stone-200 | border-color: rgb(231 229 228);  |
| border-stone-300 | border-color: rgb(214 211 209);  |
| border-stone-400 | border-color: rgb(168 162 158);  |
| border-stone-500 | border-color: rgb(120 113 108);  |
| border-stone-600 | border-color: rgb(87 83 78);  |
| border-stone-700 | border-color: rgb(68 64 60);  |
| border-stone-800 | border-color: rgb(41 37 36);  |
| border-stone-900 | border-color: rgb(28 25 23);  |
| border-stone-950 | border-color: rgb(12 10 9);  |
| border-red-50 | border-color: rgb(254 242 242);  |
| border-red-100 | border-color: rgb(254 226 226);  |
| border-red-200 | border-color: rgb(254 202 202);  |
| border-red-300 | border-color: rgb(252 165 165);  |
| border-red-400 | border-color: rgb(248 113 113);  |
| border-red-500 | border-color: rgb(239 68 68);  |
| border-red-600 | border-color: rgb(220 38 38);  |
| border-red-700 | border-color: rgb(185 28 28);  |
| border-red-800 | border-color: rgb(153 27 27);  |
| border-red-900 | border-color: rgb(127 29 29);  |
| border-red-950 | border-color: rgb(69 10 10);  |
| border-orange-50 | border-color: rgb(255 247 237);  |
| border-orange-100 | border-color: rgb(255 237 213);  |
| border-orange-200 | border-color: rgb(254 215 170);  |
| border-orange-300 | border-color: rgb(253 186 116);  |
| border-orange-400 | border-color: rgb(251 146 60);  |
| border-orange-500 | border-color: rgb(249 115 22);  |
| border-orange-600 | border-color: rgb(234 88 12);  |
| border-orange-700 | border-color: rgb(194 65 12);  |
| border-orange-800 | border-color: rgb(154 52 18);  |
| border-orange-900 | border-color: rgb(124 45 18);  |
| border-orange-950 | border-color: rgb(67 20 7);  |
| border-amber-50 | border-color: rgb(255 251 235);  |
| border-amber-100 | border-color: rgb(254 243 199);  |
| border-amber-200 | border-color: rgb(253 230 138);  |
| border-amber-300 | border-color: rgb(252 211 77);  |
| border-amber-400 | border-color: rgb(251 191 36);  |
| border-amber-500 | border-color: rgb(245 158 11);  |
| border-amber-600 | border-color: rgb(217 119 6);  |
| border-amber-700 | border-color: rgb(180 83 9);  |
| border-amber-800 | border-color: rgb(146 64 14);  |
| border-amber-900 | border-color: rgb(120 53 15);  |
| border-amber-950 | border-color: rgb(69 26 3);  |
| border-yellow-50 | border-color: rgb(254 252 232);  |
| border-yellow-100 | border-color: rgb(254 249 195);  |
| border-yellow-200 | border-color: rgb(254 240 138);  |
| border-yellow-300 | border-color: rgb(253 224 71);  |
| border-yellow-400 | border-color: rgb(250 204 21);  |
| border-yellow-500 | border-color: rgb(234 179 8);  |
| border-yellow-600 | border-color: rgb(202 138 4);  |
| border-yellow-700 | border-color: rgb(161 98 7);  |
| border-yellow-800 | border-color: rgb(133 77 14);  |
| border-yellow-900 | border-color: rgb(113 63 18);  |
| border-yellow-950 | border-color: rgb(66 32 6);  |
| border-lime-50 | border-color: rgb(247 254 231);  |
| border-lime-100 | border-color: rgb(236 252 203);  |
| border-lime-200 | border-color: rgb(217 249 157);  |
| border-lime-300 | border-color: rgb(190 242 100);  |
| border-lime-400 | border-color: rgb(163 230 53);  |
| border-lime-500 | border-color: rgb(132 204 22);  |
| border-lime-600 | border-color: rgb(101 163 13);  |
| border-lime-700 | border-color: rgb(77 124 15);  |
| border-lime-800 | border-color: rgb(63 98 18);  |
| border-lime-900 | border-color: rgb(54 83 20);  |
| border-lime-950 | border-color: rgb(26 46 5);  |
| border-green-50 | border-color: rgb(240 253 244);  |
| border-green-100 | border-color: rgb(220 252 231);  |
| border-green-200 | border-color: rgb(187 247 208);  |
| border-green-300 | border-color: rgb(134 239 172);  |
| border-green-400 | border-color: rgb(74 222 128);  |
| border-green-500 | border-color: rgb(34 197 94);  |
| border-green-600 | border-color: rgb(22 163 74);  |
| border-green-700 | border-color: rgb(21 128 61);  |
| border-green-800 | border-color: rgb(22 101 52);  |
| border-green-900 | border-color: rgb(20 83 45);  |
| border-green-950 | border-color: rgb(5 46 22);  |
| border-emerald-50 | border-color: rgb(236 253 245);  |
| border-emerald-100 | border-color: rgb(209 250 229);  |
| border-emerald-200 | border-color: rgb(167 243 208);  |
| border-emerald-300 | border-color: rgb(110 231 183);  |
| border-emerald-400 | border-color: rgb(52 211 153);  |
| border-emerald-500 | border-color: rgb(16 185 129);  |
| border-emerald-600 | border-color: rgb(5 150 105);  |
| border-emerald-700 | border-color: rgb(4 120 87);  |
| border-emerald-800 | border-color: rgb(6 95 70);  |
| border-emerald-900 | border-color: rgb(6 78 59);  |
| border-emerald-950 | border-color: rgb(2 44 34);  |
| border-teal-50 | border-color: rgb(240 253 250);  |
| border-teal-100 | border-color: rgb(204 251 241);  |
| border-teal-200 | border-color: rgb(153 246 228);  |
| border-teal-300 | border-color: rgb(94 234 212);  |
| border-teal-400 | border-color: rgb(45 212 191);  |
| border-teal-500 | border-color: rgb(20 184 166);  |
| border-teal-600 | border-color: rgb(13 148 136);  |
| border-teal-700 | border-color: rgb(15 118 110);  |
| border-teal-800 | border-color: rgb(17 94 89);  |
| border-teal-900 | border-color: rgb(19 78 74);  |
| border-teal-950 | border-color: rgb(4 47 46);  |
| border-cyan-50 | border-color: rgb(236 254 255);  |
| border-cyan-100 | border-color: rgb(207 250 254);  |
| border-cyan-200 | border-color: rgb(165 243 252);  |
| border-cyan-300 | border-color: rgb(103 232 249);  |
| border-cyan-400 | border-color: rgb(34 211 238);  |
| border-cyan-500 | border-color: rgb(6 182 212);  |
| border-cyan-600 | border-color: rgb(8 145 178);  |
| border-cyan-700 | border-color: rgb(14 116 144);  |
| border-cyan-800 | border-color: rgb(21 94 117);  |
| border-cyan-900 | border-color: rgb(22 78 99);  |
| border-cyan-950 | border-color: rgb(8 51 68);  |
| border-sky-50 | border-color: rgb(240 249 255);  |
| border-sky-100 | border-color: rgb(224 242 254);  |
| border-sky-200 | border-color: rgb(186 230 253);  |
| border-sky-300 | border-color: rgb(125 211 252);  |
| border-sky-400 | border-color: rgb(56 189 248);  |
| border-sky-500 | border-color: rgb(14 165 233);  |
| border-sky-600 | border-color: rgb(2 132 199);  |
| border-sky-700 | border-color: rgb(3 105 161);  |
| border-sky-800 | border-color: rgb(7 89 133);  |
| border-sky-900 | border-color: rgb(12 74 110);  |
| border-sky-950 | border-color: rgb(8 47 73);  |
| border-blue-50 | border-color: rgb(239 246 255);  |
| border-blue-100 | border-color: rgb(219 234 254);  |
| border-blue-200 | border-color: rgb(191 219 254);  |
| border-blue-300 | border-color: rgb(147 197 253);  |
| border-blue-400 | border-color: rgb(96 165 250);  |
| border-blue-500 | border-color: rgb(59 130 246);  |
| border-blue-600 | border-color: rgb(37 99 235);  |
| border-blue-700 | border-color: rgb(29 78 216);  |
| border-blue-800 | border-color: rgb(30 64 175);  |
| border-blue-900 | border-color: rgb(30 58 138);  |
| border-blue-950 | border-color: rgb(23 37 84);  |
| border-indigo-50 | border-color: rgb(238 242 255);  |
| border-indigo-100 | border-color: rgb(224 231 255);  |
| border-indigo-200 | border-color: rgb(199 210 254);  |
| border-indigo-300 | border-color: rgb(165 180 252);  |
| border-indigo-400 | border-color: rgb(129 140 248);  |
| border-indigo-500 | border-color: rgb(99 102 241);  |
| border-indigo-600 | border-color: rgb(79 70 229);  |
| border-indigo-700 | border-color: rgb(67 56 202);  |
| border-indigo-800 | border-color: rgb(55 48 163);  |
| border-indigo-900 | border-color: rgb(49 46 129);  |
| border-indigo-950 | border-color: rgb(30 27 75);  |
| border-violet-50 | border-color: rgb(245 243 255);  |
| border-violet-100 | border-color: rgb(237 233 254);  |
| border-violet-200 | border-color: rgb(221 214 254);  |
| border-violet-300 | border-color: rgb(196 181 253);  |
| border-violet-400 | border-color: rgb(167 139 250);  |
| border-violet-500 | border-color: rgb(139 92 246);  |
| border-violet-600 | border-color: rgb(124 58 237);  |
| border-violet-700 | border-color: rgb(109 40 217);  |
| border-violet-800 | border-color: rgb(91 33 182);  |
| border-violet-900 | border-color: rgb(76 29 149);  |
| border-violet-950 | border-color: rgb(46 16 101);  |
| border-purple-50 | border-color: rgb(250 245 255);  |
| border-purple-100 | border-color: rgb(243 232 255);  |
| border-purple-200 | border-color: rgb(233 213 255);  |
| border-purple-300 | border-color: rgb(216 180 254);  |
| border-purple-400 | border-color: rgb(192 132 252);  |
| border-purple-500 | border-color: rgb(168 85 247);  |
| border-purple-600 | border-color: rgb(147 51 234);  |
| border-purple-700 | border-color: rgb(126 34 206);  |
| border-purple-800 | border-color: rgb(107 33 168);  |
| border-purple-900 | border-color: rgb(88 28 135);  |
| border-purple-950 | border-color: rgb(59 7 100);  |
| border-fuchsia-50 | border-color: rgb(253 244 255);  |
| border-fuchsia-100 | border-color: rgb(250 232 255);  |
| border-fuchsia-200 | border-color: rgb(245 208 254);  |
| border-fuchsia-300 | border-color: rgb(240 171 252);  |
| border-fuchsia-400 | border-color: rgb(232 121 249);  |
| border-fuchsia-500 | border-color: rgb(217 70 239);  |
| border-fuchsia-600 | border-color: rgb(192 38 211);  |
| border-fuchsia-700 | border-color: rgb(162 28 175);  |
| border-fuchsia-800 | border-color: rgb(134 25 143);  |
| border-fuchsia-900 | border-color: rgb(112 26 117);  |
| border-fuchsia-950 | border-color: rgb(74 4 78);  |
| border-pink-50 | border-color: rgb(253 242 248);  |
| border-pink-100 | border-color: rgb(252 231 243);  |
| border-pink-200 | border-color: rgb(251 207 232);  |
| border-pink-300 | border-color: rgb(249 168 212);  |
| border-pink-400 | border-color: rgb(244 114 182);  |
| border-pink-500 | border-color: rgb(236 72 153);  |
| border-pink-600 | border-color: rgb(219 39 119);  |
| border-pink-700 | border-color: rgb(190 24 93);  |
| border-pink-800 | border-color: rgb(157 23 77);  |
| border-pink-900 | border-color: rgb(131 24 67);  |
| border-pink-950 | border-color: rgb(80 7 36);  |
| border-rose-50 | border-color: rgb(255 241 242);  |
| border-rose-100 | border-color: rgb(255 228 230);  |
| border-rose-200 | border-color: rgb(254 205 211);  |
| border-rose-300 | border-color: rgb(253 164 175);  |
| border-rose-400 | border-color: rgb(251 113 133);  |
| border-rose-500 | border-color: rgb(244 63 94);  |
| border-rose-600 | border-color: rgb(225 29 72);  |
| border-rose-700 | border-color: rgb(190 18 60);  |
| border-rose-800 | border-color: rgb(159 18 57);  |
| border-rose-900 | border-color: rgb(136 19 55);  |
| border-rose-950 | border-color: rgb(76 5 25);  |
| border-x-inherit | border-left-color: inherit; border-right-color: inherit;  |
| border-x-current | border-left-color: currentColor; border-right-color: currentColor;  |
| border-x-transparent | border-left-color: transparent; border-right-color: transparent;  |
| border-x-black | border-left-color: rgb(0 0 0); border-right-color: rgb(0 0 0);  |
| border-x-white | border-left-color: rgb(255 255 255); border-right-color: rgb(255 255 255);  |
| border-x-slate-50 | border-left-color: rgb(248 250 252); border-right-color: rgb(248 250 252);  |
| border-x-slate-100 | border-left-color: rgb(241 245 249); border-right-color: rgb(241 245 249);  |
| border-x-slate-200 | border-left-color: rgb(226 232 240); border-right-color: rgb(226 232 240);  |
| border-x-slate-300 | border-left-color: rgb(203 213 225); border-right-color: rgb(203 213 225);  |
| border-x-slate-400 | border-left-color: rgb(148 163 184); border-right-color: rgb(148 163 184);  |
| border-x-slate-500 | border-left-color: rgb(100 116 139); border-right-color: rgb(100 116 139);  |
| border-x-slate-600 | border-left-color: rgb(71 85 105); border-right-color: rgb(71 85 105);  |
| border-x-slate-700 | border-left-color: rgb(51 65 85); border-right-color: rgb(51 65 85);  |
| border-x-slate-800 | border-left-color: rgb(30 41 59); border-right-color: rgb(30 41 59);  |
| border-x-slate-900 | border-left-color: rgb(15 23 42); border-right-color: rgb(15 23 42);  |
| border-x-slate-950 | border-left-color: rgb(2 6 23); border-right-color: rgb(2 6 23);  |
| border-x-gray-50 | border-left-color: rgb(249 250 251); border-right-color: rgb(249 250 251);  |
| border-x-gray-100 | border-left-color: rgb(243 244 246); border-right-color: rgb(243 244 246);  |
| border-x-gray-200 | border-left-color: rgb(229 231 235); border-right-color: rgb(229 231 235);  |
| border-x-gray-300 | border-left-color: rgb(209 213 219); border-right-color: rgb(209 213 219);  |
| border-x-gray-400 | border-left-color: rgb(156 163 175); border-right-color: rgb(156 163 175);  |
| border-x-gray-500 | border-left-color: rgb(107 114 128); border-right-color: rgb(107 114 128);  |
| border-x-gray-600 | border-left-color: rgb(75 85 99); border-right-color: rgb(75 85 99);  |
| border-x-gray-700 | border-left-color: rgb(55 65 81); border-right-color: rgb(55 65 81);  |
| border-x-gray-800 | border-left-color: rgb(31 41 55); border-right-color: rgb(31 41 55);  |
| border-x-gray-900 | border-left-color: rgb(17 24 39); border-right-color: rgb(17 24 39);  |
| border-x-gray-950 | border-left-color: rgb(3 7 18); border-right-color: rgb(3 7 18);  |
| border-x-zinc-50 | border-left-color: rgb(250 250 250); border-right-color: rgb(250 250 250);  |
| border-x-zinc-100 | border-left-color: rgb(244 244 245); border-right-color: rgb(244 244 245);  |
| border-x-zinc-200 | border-left-color: rgb(228 228 231); border-right-color: rgb(228 228 231);  |
| border-x-zinc-300 | border-left-color: rgb(212 212 216); border-right-color: rgb(212 212 216);  |
| border-x-zinc-400 | border-left-color: rgb(161 161 170); border-right-color: rgb(161 161 170);  |
| border-x-zinc-500 | border-left-color: rgb(113 113 122); border-right-color: rgb(113 113 122);  |
| border-x-zinc-600 | border-left-color: rgb(82 82 91); border-right-color: rgb(82 82 91);  |
| border-x-zinc-700 | border-left-color: rgb(63 63 70); border-right-color: rgb(63 63 70);  |
| border-x-zinc-800 | border-left-color: rgb(39 39 42); border-right-color: rgb(39 39 42);  |
| border-x-zinc-900 | border-left-color: rgb(24 24 27); border-right-color: rgb(24 24 27);  |
| border-x-zinc-950 | border-left-color: rgb(9 9 11); border-right-color: rgb(9 9 11);  |
| border-x-neutral-50 | border-left-color: rgb(250 250 250); border-right-color: rgb(250 250 250);  |
| border-x-neutral-100 | border-left-color: rgb(245 245 245); border-right-color: rgb(245 245 245);  |
| border-x-neutral-200 | border-left-color: rgb(229 229 229); border-right-color: rgb(229 229 229);  |
| border-x-neutral-300 | border-left-color: rgb(212 212 212); border-right-color: rgb(212 212 212);  |
| border-x-neutral-400 | border-left-color: rgb(163 163 163); border-right-color: rgb(163 163 163);  |
| border-x-neutral-500 | border-left-color: rgb(115 115 115); border-right-color: rgb(115 115 115);  |
| border-x-neutral-600 | border-left-color: rgb(82 82 82); border-right-color: rgb(82 82 82);  |
| border-x-neutral-700 | border-left-color: rgb(64 64 64); border-right-color: rgb(64 64 64);  |
| border-x-neutral-800 | border-left-color: rgb(38 38 38); border-right-color: rgb(38 38 38);  |
| border-x-neutral-900 | border-left-color: rgb(23 23 23); border-right-color: rgb(23 23 23);  |
| border-x-neutral-950 | border-left-color: rgb(10 10 10); border-right-color: rgb(10 10 10);  |
| border-x-stone-50 | border-left-color: rgb(250 250 249); border-right-color: rgb(250 250 249);  |
| border-x-stone-100 | border-left-color: rgb(245 245 244); border-right-color: rgb(245 245 244);  |
| border-x-stone-200 | border-left-color: rgb(231 229 228); border-right-color: rgb(231 229 228);  |
| border-x-stone-300 | border-left-color: rgb(214 211 209); border-right-color: rgb(214 211 209);  |
| border-x-stone-400 | border-left-color: rgb(168 162 158); border-right-color: rgb(168 162 158);  |
| border-x-stone-500 | border-left-color: rgb(120 113 108); border-right-color: rgb(120 113 108);  |
| border-x-stone-600 | border-left-color: rgb(87 83 78); border-right-color: rgb(87 83 78);  |
| border-x-stone-700 | border-left-color: rgb(68 64 60); border-right-color: rgb(68 64 60);  |
| border-x-stone-800 | border-left-color: rgb(41 37 36); border-right-color: rgb(41 37 36);  |
| border-x-stone-900 | border-left-color: rgb(28 25 23); border-right-color: rgb(28 25 23);  |
| border-x-stone-950 | border-left-color: rgb(12 10 9); border-right-color: rgb(12 10 9);  |
| border-x-red-50 | border-left-color: rgb(254 242 242); border-right-color: rgb(254 242 242);  |
| border-x-red-100 | border-left-color: rgb(254 226 226); border-right-color: rgb(254 226 226);  |
| border-x-red-200 | border-left-color: rgb(254 202 202); border-right-color: rgb(254 202 202);  |
| border-x-red-300 | border-left-color: rgb(252 165 165); border-right-color: rgb(252 165 165);  |
| border-x-red-400 | border-left-color: rgb(248 113 113); border-right-color: rgb(248 113 113);  |
| border-x-red-500 | border-left-color: rgb(239 68 68); border-right-color: rgb(239 68 68);  |
| border-x-red-600 | border-left-color: rgb(220 38 38); border-right-color: rgb(220 38 38);  |
| border-x-red-700 | border-left-color: rgb(185 28 28); border-right-color: rgb(185 28 28);  |
| border-x-red-800 | border-left-color: rgb(153 27 27); border-right-color: rgb(153 27 27);  |
| border-x-red-900 | border-left-color: rgb(127 29 29); border-right-color: rgb(127 29 29);  |
| border-x-red-950 | border-left-color: rgb(69 10 10); border-right-color: rgb(69 10 10);  |
| border-x-orange-50 | border-left-color: rgb(255 247 237); border-right-color: rgb(255 247 237);  |
| border-x-orange-100 | border-left-color: rgb(255 237 213); border-right-color: rgb(255 237 213);  |
| border-x-orange-200 | border-left-color: rgb(254 215 170); border-right-color: rgb(254 215 170);  |
| border-x-orange-300 | border-left-color: rgb(253 186 116); border-right-color: rgb(253 186 116);  |
| border-x-orange-400 | border-left-color: rgb(251 146 60); border-right-color: rgb(251 146 60);  |
| border-x-orange-500 | border-left-color: rgb(249 115 22); border-right-color: rgb(249 115 22);  |
| border-x-orange-600 | border-left-color: rgb(234 88 12); border-right-color: rgb(234 88 12);  |
| border-x-orange-700 | border-left-color: rgb(194 65 12); border-right-color: rgb(194 65 12);  |
| border-x-orange-800 | border-left-color: rgb(154 52 18); border-right-color: rgb(154 52 18);  |
| border-x-orange-900 | border-left-color: rgb(124 45 18); border-right-color: rgb(124 45 18);  |
| border-x-orange-950 | border-left-color: rgb(67 20 7); border-right-color: rgb(67 20 7);  |
| border-x-amber-50 | border-left-color: rgb(255 251 235); border-right-color: rgb(255 251 235);  |
| border-x-amber-100 | border-left-color: rgb(254 243 199); border-right-color: rgb(254 243 199);  |
| border-x-amber-200 | border-left-color: rgb(253 230 138); border-right-color: rgb(253 230 138);  |
| border-x-amber-300 | border-left-color: rgb(252 211 77); border-right-color: rgb(252 211 77);  |
| border-x-amber-400 | border-left-color: rgb(251 191 36); border-right-color: rgb(251 191 36);  |
| border-x-amber-500 | border-left-color: rgb(245 158 11); border-right-color: rgb(245 158 11);  |
| border-x-amber-600 | border-left-color: rgb(217 119 6); border-right-color: rgb(217 119 6);  |
| border-x-amber-700 | border-left-color: rgb(180 83 9); border-right-color: rgb(180 83 9);  |
| border-x-amber-800 | border-left-color: rgb(146 64 14); border-right-color: rgb(146 64 14);  |
| border-x-amber-900 | border-left-color: rgb(120 53 15); border-right-color: rgb(120 53 15);  |
| border-x-amber-950 | border-left-color: rgb(69 26 3); border-right-color: rgb(69 26 3);  |
| border-x-yellow-50 | border-left-color: rgb(254 252 232); border-right-color: rgb(254 252 232);  |
| border-x-yellow-100 | border-left-color: rgb(254 249 195); border-right-color: rgb(254 249 195);  |
| border-x-yellow-200 | border-left-color: rgb(254 240 138); border-right-color: rgb(254 240 138);  |
| border-x-yellow-300 | border-left-color: rgb(253 224 71); border-right-color: rgb(253 224 71);  |
| border-x-yellow-400 | border-left-color: rgb(250 204 21); border-right-color: rgb(250 204 21);  |
| border-x-yellow-500 | border-left-color: rgb(234 179 8); border-right-color: rgb(234 179 8);  |
| border-x-yellow-600 | border-left-color: rgb(202 138 4); border-right-color: rgb(202 138 4);  |
| border-x-yellow-700 | border-left-color: rgb(161 98 7); border-right-color: rgb(161 98 7);  |
| border-x-yellow-800 | border-left-color: rgb(133 77 14); border-right-color: rgb(133 77 14);  |
| border-x-yellow-900 | border-left-color: rgb(113 63 18); border-right-color: rgb(113 63 18);  |
| border-x-yellow-950 | border-left-color: rgb(66 32 6); border-right-color: rgb(66 32 6);  |
| border-x-lime-50 | border-left-color: rgb(247 254 231); border-right-color: rgb(247 254 231);  |
| border-x-lime-100 | border-left-color: rgb(236 252 203); border-right-color: rgb(236 252 203);  |
| border-x-lime-200 | border-left-color: rgb(217 249 157); border-right-color: rgb(217 249 157);  |
| border-x-lime-300 | border-left-color: rgb(190 242 100); border-right-color: rgb(190 242 100);  |
| border-x-lime-400 | border-left-color: rgb(163 230 53); border-right-color: rgb(163 230 53);  |
| border-x-lime-500 | border-left-color: rgb(132 204 22); border-right-color: rgb(132 204 22);  |
| border-x-lime-600 | border-left-color: rgb(101 163 13); border-right-color: rgb(101 163 13);  |
| border-x-lime-700 | border-left-color: rgb(77 124 15); border-right-color: rgb(77 124 15);  |
| border-x-lime-800 | border-left-color: rgb(63 98 18); border-right-color: rgb(63 98 18);  |
| border-x-lime-900 | border-left-color: rgb(54 83 20); border-right-color: rgb(54 83 20);  |
| border-x-lime-950 | border-left-color: rgb(26 46 5); border-right-color: rgb(26 46 5);  |
| border-x-green-50 | border-left-color: rgb(240 253 244); border-right-color: rgb(240 253 244);  |
| border-x-green-100 | border-left-color: rgb(220 252 231); border-right-color: rgb(220 252 231);  |
| border-x-green-200 | border-left-color: rgb(187 247 208); border-right-color: rgb(187 247 208);  |
| border-x-green-300 | border-left-color: rgb(134 239 172); border-right-color: rgb(134 239 172);  |
| border-x-green-400 | border-left-color: rgb(74 222 128); border-right-color: rgb(74 222 128);  |
| border-x-green-500 | border-left-color: rgb(34 197 94); border-right-color: rgb(34 197 94);  |
| border-x-green-600 | border-left-color: rgb(22 163 74); border-right-color: rgb(22 163 74);  |
| border-x-green-700 | border-left-color: rgb(21 128 61); border-right-color: rgb(21 128 61);  |
| border-x-green-800 | border-left-color: rgb(22 101 52); border-right-color: rgb(22 101 52);  |
| border-x-green-900 | border-left-color: rgb(20 83 45); border-right-color: rgb(20 83 45);  |
| border-x-green-950 | border-left-color: rgb(5 46 22); border-right-color: rgb(5 46 22);  |
| border-x-emerald-50 | border-left-color: rgb(236 253 245); border-right-color: rgb(236 253 245);  |
| border-x-emerald-100 | border-left-color: rgb(209 250 229); border-right-color: rgb(209 250 229);  |
| border-x-emerald-200 | border-left-color: rgb(167 243 208); border-right-color: rgb(167 243 208);  |
| border-x-emerald-300 | border-left-color: rgb(110 231 183); border-right-color: rgb(110 231 183);  |
| border-x-emerald-400 | border-left-color: rgb(52 211 153); border-right-color: rgb(52 211 153);  |
| border-x-emerald-500 | border-left-color: rgb(16 185 129); border-right-color: rgb(16 185 129);  |
| border-x-emerald-600 | border-left-color: rgb(5 150 105); border-right-color: rgb(5 150 105);  |
| border-x-emerald-700 | border-left-color: rgb(4 120 87); border-right-color: rgb(4 120 87);  |
| border-x-emerald-800 | border-left-color: rgb(6 95 70); border-right-color: rgb(6 95 70);  |
| border-x-emerald-900 | border-left-color: rgb(6 78 59); border-right-color: rgb(6 78 59);  |
| border-x-emerald-950 | border-left-color: rgb(2 44 34); border-right-color: rgb(2 44 34);  |
| border-x-teal-50 | border-left-color: rgb(240 253 250); border-right-color: rgb(240 253 250);  |
| border-x-teal-100 | border-left-color: rgb(204 251 241); border-right-color: rgb(204 251 241);  |
| border-x-teal-200 | border-left-color: rgb(153 246 228); border-right-color: rgb(153 246 228);  |
| border-x-teal-300 | border-left-color: rgb(94 234 212); border-right-color: rgb(94 234 212);  |
| border-x-teal-400 | border-left-color: rgb(45 212 191); border-right-color: rgb(45 212 191);  |
| border-x-teal-500 | border-left-color: rgb(20 184 166); border-right-color: rgb(20 184 166);  |
| border-x-teal-600 | border-left-color: rgb(13 148 136); border-right-color: rgb(13 148 136);  |
| border-x-teal-700 | border-left-color: rgb(15 118 110); border-right-color: rgb(15 118 110);  |
| border-x-teal-800 | border-left-color: rgb(17 94 89); border-right-color: rgb(17 94 89);  |
| border-x-teal-900 | border-left-color: rgb(19 78 74); border-right-color: rgb(19 78 74);  |
| border-x-teal-950 | border-left-color: rgb(4 47 46); border-right-color: rgb(4 47 46);  |
| border-x-cyan-50 | border-left-color: rgb(236 254 255); border-right-color: rgb(236 254 255);  |
| border-x-cyan-100 | border-left-color: rgb(207 250 254); border-right-color: rgb(207 250 254);  |
| border-x-cyan-200 | border-left-color: rgb(165 243 252); border-right-color: rgb(165 243 252);  |
| border-x-cyan-300 | border-left-color: rgb(103 232 249); border-right-color: rgb(103 232 249);  |
| border-x-cyan-400 | border-left-color: rgb(34 211 238); border-right-color: rgb(34 211 238);  |
| border-x-cyan-500 | border-left-color: rgb(6 182 212); border-right-color: rgb(6 182 212);  |
| border-x-cyan-600 | border-left-color: rgb(8 145 178); border-right-color: rgb(8 145 178);  |
| border-x-cyan-700 | border-left-color: rgb(14 116 144); border-right-color: rgb(14 116 144);  |
| border-x-cyan-800 | border-left-color: rgb(21 94 117); border-right-color: rgb(21 94 117);  |
| border-x-cyan-900 | border-left-color: rgb(22 78 99); border-right-color: rgb(22 78 99);  |
| border-x-cyan-950 | border-left-color: rgb(8 51 68); border-right-color: rgb(8 51 68);  |
| border-x-sky-50 | border-left-color: rgb(240 249 255); border-right-color: rgb(240 249 255);  |
| border-x-sky-100 | border-left-color: rgb(224 242 254); border-right-color: rgb(224 242 254);  |
| border-x-sky-200 | border-left-color: rgb(186 230 253); border-right-color: rgb(186 230 253);  |
| border-x-sky-300 | border-left-color: rgb(125 211 252); border-right-color: rgb(125 211 252);  |
| border-x-sky-400 | border-left-color: rgb(56 189 248); border-right-color: rgb(56 189 248);  |
| border-x-sky-500 | border-left-color: rgb(14 165 233); border-right-color: rgb(14 165 233);  |
| border-x-sky-600 | border-left-color: rgb(2 132 199); border-right-color: rgb(2 132 199);  |
| border-x-sky-700 | border-left-color: rgb(3 105 161); border-right-color: rgb(3 105 161);  |
| border-x-sky-800 | border-left-color: rgb(7 89 133); border-right-color: rgb(7 89 133);  |
| border-x-sky-900 | border-left-color: rgb(12 74 110); border-right-color: rgb(12 74 110);  |
| border-x-sky-950 | border-left-color: rgb(8 47 73); border-right-color: rgb(8 47 73);  |
| border-x-blue-50 | border-left-color: rgb(239 246 255); border-right-color: rgb(239 246 255);  |
| border-x-blue-100 | border-left-color: rgb(219 234 254); border-right-color: rgb(219 234 254);  |
| border-x-blue-200 | border-left-color: rgb(191 219 254); border-right-color: rgb(191 219 254);  |
| border-x-blue-300 | border-left-color: rgb(147 197 253); border-right-color: rgb(147 197 253);  |
| border-x-blue-400 | border-left-color: rgb(96 165 250); border-right-color: rgb(96 165 250);  |
| border-x-blue-500 | border-left-color: rgb(59 130 246); border-right-color: rgb(59 130 246);  |
| border-x-blue-600 | border-left-color: rgb(37 99 235); border-right-color: rgb(37 99 235);  |
| border-x-blue-700 | border-left-color: rgb(29 78 216); border-right-color: rgb(29 78 216);  |
| border-x-blue-800 | border-left-color: rgb(30 64 175); border-right-color: rgb(30 64 175);  |
| border-x-blue-900 | border-left-color: rgb(30 58 138); border-right-color: rgb(30 58 138);  |
| border-x-blue-950 | border-left-color: rgb(23 37 84); border-right-color: rgb(23 37 84);  |
| border-x-indigo-50 | border-left-color: rgb(238 242 255); border-right-color: rgb(238 242 255);  |
| border-x-indigo-100 | border-left-color: rgb(224 231 255); border-right-color: rgb(224 231 255);  |
| border-x-indigo-200 | border-left-color: rgb(199 210 254); border-right-color: rgb(199 210 254);  |
| border-x-indigo-300 | border-left-color: rgb(165 180 252); border-right-color: rgb(165 180 252);  |
| border-x-indigo-400 | border-left-color: rgb(129 140 248); border-right-color: rgb(129 140 248);  |
| border-x-indigo-500 | border-left-color: rgb(99 102 241); border-right-color: rgb(99 102 241);  |
| border-x-indigo-600 | border-left-color: rgb(79 70 229); border-right-color: rgb(79 70 229);  |
| border-x-indigo-700 | border-left-color: rgb(67 56 202); border-right-color: rgb(67 56 202);  |
| border-x-indigo-800 | border-left-color: rgb(55 48 163); border-right-color: rgb(55 48 163);  |
| border-x-indigo-900 | border-left-color: rgb(49 46 129); border-right-color: rgb(49 46 129);  |
| border-x-indigo-950 | border-left-color: rgb(30 27 75); border-right-color: rgb(30 27 75);  |
| border-x-violet-50 | border-left-color: rgb(245 243 255); border-right-color: rgb(245 243 255);  |
| border-x-violet-100 | border-left-color: rgb(237 233 254); border-right-color: rgb(237 233 254);  |
| border-x-violet-200 | border-left-color: rgb(221 214 254); border-right-color: rgb(221 214 254);  |
| border-x-violet-300 | border-left-color: rgb(196 181 253); border-right-color: rgb(196 181 253);  |
| border-x-violet-400 | border-left-color: rgb(167 139 250); border-right-color: rgb(167 139 250);  |
| border-x-violet-500 | border-left-color: rgb(139 92 246); border-right-color: rgb(139 92 246);  |
| border-x-violet-600 | border-left-color: rgb(124 58 237); border-right-color: rgb(124 58 237);  |
| border-x-violet-700 | border-left-color: rgb(109 40 217); border-right-color: rgb(109 40 217);  |
| border-x-violet-800 | border-left-color: rgb(91 33 182); border-right-color: rgb(91 33 182);  |
| border-x-violet-900 | border-left-color: rgb(76 29 149); border-right-color: rgb(76 29 149);  |
| border-x-violet-950 | border-left-color: rgb(46 16 101); border-right-color: rgb(46 16 101);  |
| border-x-purple-50 | border-left-color: rgb(250 245 255); border-right-color: rgb(250 245 255);  |
| border-x-purple-100 | border-left-color: rgb(243 232 255); border-right-color: rgb(243 232 255);  |
| border-x-purple-200 | border-left-color: rgb(233 213 255); border-right-color: rgb(233 213 255);  |
| border-x-purple-300 | border-left-color: rgb(216 180 254); border-right-color: rgb(216 180 254);  |
| border-x-purple-400 | border-left-color: rgb(192 132 252); border-right-color: rgb(192 132 252);  |
| border-x-purple-500 | border-left-color: rgb(168 85 247); border-right-color: rgb(168 85 247);  |
| border-x-purple-600 | border-left-color: rgb(147 51 234); border-right-color: rgb(147 51 234);  |
| border-x-purple-700 | border-left-color: rgb(126 34 206); border-right-color: rgb(126 34 206);  |
| border-x-purple-800 | border-left-color: rgb(107 33 168); border-right-color: rgb(107 33 168);  |
| border-x-purple-900 | border-left-color: rgb(88 28 135); border-right-color: rgb(88 28 135);  |
| border-x-purple-950 | border-left-color: rgb(59 7 100); border-right-color: rgb(59 7 100);  |
| border-x-fuchsia-50 | border-left-color: rgb(253 244 255); border-right-color: rgb(253 244 255);  |
| border-x-fuchsia-100 | border-left-color: rgb(250 232 255); border-right-color: rgb(250 232 255);  |
| border-x-fuchsia-200 | border-left-color: rgb(245 208 254); border-right-color: rgb(245 208 254);  |
| border-x-fuchsia-300 | border-left-color: rgb(240 171 252); border-right-color: rgb(240 171 252);  |
| border-x-fuchsia-400 | border-left-color: rgb(232 121 249); border-right-color: rgb(232 121 249);  |
| border-x-fuchsia-500 | border-left-color: rgb(217 70 239); border-right-color: rgb(217 70 239);  |
| border-x-fuchsia-600 | border-left-color: rgb(192 38 211); border-right-color: rgb(192 38 211);  |
| border-x-fuchsia-700 | border-left-color: rgb(162 28 175); border-right-color: rgb(162 28 175);  |
| border-x-fuchsia-800 | border-left-color: rgb(134 25 143); border-right-color: rgb(134 25 143);  |
| border-x-fuchsia-900 | border-left-color: rgb(112 26 117); border-right-color: rgb(112 26 117);  |
| border-x-fuchsia-950 | border-left-color: rgb(74 4 78); border-right-color: rgb(74 4 78);  |
| border-x-pink-50 | border-left-color: rgb(253 242 248); border-right-color: rgb(253 242 248);  |
| border-x-pink-100 | border-left-color: rgb(252 231 243); border-right-color: rgb(252 231 243);  |
| border-x-pink-200 | border-left-color: rgb(251 207 232); border-right-color: rgb(251 207 232);  |
| border-x-pink-300 | border-left-color: rgb(249 168 212); border-right-color: rgb(249 168 212);  |
| border-x-pink-400 | border-left-color: rgb(244 114 182); border-right-color: rgb(244 114 182);  |
| border-x-pink-500 | border-left-color: rgb(236 72 153); border-right-color: rgb(236 72 153);  |
| border-x-pink-600 | border-left-color: rgb(219 39 119); border-right-color: rgb(219 39 119);  |
| border-x-pink-700 | border-left-color: rgb(190 24 93); border-right-color: rgb(190 24 93);  |
| border-x-pink-800 | border-left-color: rgb(157 23 77); border-right-color: rgb(157 23 77);  |
| border-x-pink-900 | border-left-color: rgb(131 24 67); border-right-color: rgb(131 24 67);  |
| border-x-pink-950 | border-left-color: rgb(80 7 36); border-right-color: rgb(80 7 36);  |
| border-x-rose-50 | border-left-color: rgb(255 241 242); border-right-color: rgb(255 241 242);  |
| border-x-rose-100 | border-left-color: rgb(255 228 230); border-right-color: rgb(255 228 230);  |
| border-x-rose-200 | border-left-color: rgb(254 205 211); border-right-color: rgb(254 205 211);  |
| border-x-rose-300 | border-left-color: rgb(253 164 175); border-right-color: rgb(253 164 175);  |
| border-x-rose-400 | border-left-color: rgb(251 113 133); border-right-color: rgb(251 113 133);  |
| border-x-rose-500 | border-left-color: rgb(244 63 94); border-right-color: rgb(244 63 94);  |
| border-x-rose-600 | border-left-color: rgb(225 29 72); border-right-color: rgb(225 29 72);  |
| border-x-rose-700 | border-left-color: rgb(190 18 60); border-right-color: rgb(190 18 60);  |
| border-x-rose-800 | border-left-color: rgb(159 18 57); border-right-color: rgb(159 18 57);  |
| border-x-rose-900 | border-left-color: rgb(136 19 55); border-right-color: rgb(136 19 55);  |
| border-x-rose-950 | border-left-color: rgb(76 5 25); border-right-color: rgb(76 5 25);  |
| border-y-inherit | border-top-color: inherit; border-bottom-color: inherit;  |
| border-y-current | border-top-color: currentColor; border-bottom-color: currentColor;  |
| border-y-transparent | border-top-color: transparent; border-bottom-color: transparent;  |
| border-y-black | border-top-color: rgb(0 0 0); border-bottom-color: rgb(0 0 0);  |
| border-y-white | border-top-color: rgb(255 255 255); border-bottom-color: rgb(255 255 255);  |
| border-y-slate-50 | border-top-color: rgb(248 250 252); border-bottom-color: rgb(248 250 252);  |
| border-y-slate-100 | border-top-color: rgb(241 245 249); border-bottom-color: rgb(241 245 249);  |
| border-y-slate-200 | border-top-color: rgb(226 232 240); border-bottom-color: rgb(226 232 240);  |
| border-y-slate-300 | border-top-color: rgb(203 213 225); border-bottom-color: rgb(203 213 225);  |
| border-y-slate-400 | border-top-color: rgb(148 163 184); border-bottom-color: rgb(148 163 184);  |
| border-y-slate-500 | border-top-color: rgb(100 116 139); border-bottom-color: rgb(100 116 139);  |
| border-y-slate-600 | border-top-color: rgb(71 85 105); border-bottom-color: rgb(71 85 105);  |
| border-y-slate-700 | border-top-color: rgb(51 65 85); border-bottom-color: rgb(51 65 85);  |
| border-y-slate-800 | border-top-color: rgb(30 41 59); border-bottom-color: rgb(30 41 59);  |
| border-y-slate-900 | border-top-color: rgb(15 23 42); border-bottom-color: rgb(15 23 42);  |
| border-y-slate-950 | border-top-color: rgb(2 6 23); border-bottom-color: rgb(2 6 23);  |
| border-y-gray-50 | border-top-color: rgb(249 250 251); border-bottom-color: rgb(249 250 251);  |
| border-y-gray-100 | border-top-color: rgb(243 244 246); border-bottom-color: rgb(243 244 246);  |
| border-y-gray-200 | border-top-color: rgb(229 231 235); border-bottom-color: rgb(229 231 235);  |
| border-y-gray-300 | border-top-color: rgb(209 213 219); border-bottom-color: rgb(209 213 219);  |
| border-y-gray-400 | border-top-color: rgb(156 163 175); border-bottom-color: rgb(156 163 175);  |
| border-y-gray-500 | border-top-color: rgb(107 114 128); border-bottom-color: rgb(107 114 128);  |
| border-y-gray-600 | border-top-color: rgb(75 85 99); border-bottom-color: rgb(75 85 99);  |
| border-y-gray-700 | border-top-color: rgb(55 65 81); border-bottom-color: rgb(55 65 81);  |
| border-y-gray-800 | border-top-color: rgb(31 41 55); border-bottom-color: rgb(31 41 55);  |
| border-y-gray-900 | border-top-color: rgb(17 24 39); border-bottom-color: rgb(17 24 39);  |
| border-y-gray-950 | border-top-color: rgb(3 7 18); border-bottom-color: rgb(3 7 18);  |
| border-y-zinc-50 | border-top-color: rgb(250 250 250); border-bottom-color: rgb(250 250 250);  |
| border-y-zinc-100 | border-top-color: rgb(244 244 245); border-bottom-color: rgb(244 244 245);  |
| border-y-zinc-200 | border-top-color: rgb(228 228 231); border-bottom-color: rgb(228 228 231);  |
| border-y-zinc-300 | border-top-color: rgb(212 212 216); border-bottom-color: rgb(212 212 216);  |
| border-y-zinc-400 | border-top-color: rgb(161 161 170); border-bottom-color: rgb(161 161 170);  |
| border-y-zinc-500 | border-top-color: rgb(113 113 122); border-bottom-color: rgb(113 113 122);  |
| border-y-zinc-600 | border-top-color: rgb(82 82 91); border-bottom-color: rgb(82 82 91);  |
| border-y-zinc-700 | border-top-color: rgb(63 63 70); border-bottom-color: rgb(63 63 70);  |
| border-y-zinc-800 | border-top-color: rgb(39 39 42); border-bottom-color: rgb(39 39 42);  |
| border-y-zinc-900 | border-top-color: rgb(24 24 27); border-bottom-color: rgb(24 24 27);  |
| border-y-zinc-950 | border-top-color: rgb(9 9 11); border-bottom-color: rgb(9 9 11);  |
| border-y-neutral-50 | border-top-color: rgb(250 250 250); border-bottom-color: rgb(250 250 250);  |
| border-y-neutral-100 | border-top-color: rgb(245 245 245); border-bottom-color: rgb(245 245 245);  |
| border-y-neutral-200 | border-top-color: rgb(229 229 229); border-bottom-color: rgb(229 229 229);  |
| border-y-neutral-300 | border-top-color: rgb(212 212 212); border-bottom-color: rgb(212 212 212);  |
| border-y-neutral-400 | border-top-color: rgb(163 163 163); border-bottom-color: rgb(163 163 163);  |
| border-y-neutral-500 | border-top-color: rgb(115 115 115); border-bottom-color: rgb(115 115 115);  |
| border-y-neutral-600 | border-top-color: rgb(82 82 82); border-bottom-color: rgb(82 82 82);  |
| border-y-neutral-700 | border-top-color: rgb(64 64 64); border-bottom-color: rgb(64 64 64);  |
| border-y-neutral-800 | border-top-color: rgb(38 38 38); border-bottom-color: rgb(38 38 38);  |
| border-y-neutral-900 | border-top-color: rgb(23 23 23); border-bottom-color: rgb(23 23 23);  |
| border-y-neutral-950 | border-top-color: rgb(10 10 10); border-bottom-color: rgb(10 10 10);  |
| border-y-stone-50 | border-top-color: rgb(250 250 249); border-bottom-color: rgb(250 250 249);  |
| border-y-stone-100 | border-top-color: rgb(245 245 244); border-bottom-color: rgb(245 245 244);  |
| border-y-stone-200 | border-top-color: rgb(231 229 228); border-bottom-color: rgb(231 229 228);  |
| border-y-stone-300 | border-top-color: rgb(214 211 209); border-bottom-color: rgb(214 211 209);  |
| border-y-stone-400 | border-top-color: rgb(168 162 158); border-bottom-color: rgb(168 162 158);  |
| border-y-stone-500 | border-top-color: rgb(120 113 108); border-bottom-color: rgb(120 113 108);  |
| border-y-stone-600 | border-top-color: rgb(87 83 78); border-bottom-color: rgb(87 83 78);  |
| border-y-stone-700 | border-top-color: rgb(68 64 60); border-bottom-color: rgb(68 64 60);  |
| border-y-stone-800 | border-top-color: rgb(41 37 36); border-bottom-color: rgb(41 37 36);  |
| border-y-stone-900 | border-top-color: rgb(28 25 23); border-bottom-color: rgb(28 25 23);  |
| border-y-stone-950 | border-top-color: rgb(12 10 9); border-bottom-color: rgb(12 10 9);  |
| border-y-red-50 | border-top-color: rgb(254 242 242); border-bottom-color: rgb(254 242 242);  |
| border-y-red-100 | border-top-color: rgb(254 226 226); border-bottom-color: rgb(254 226 226);  |
| border-y-red-200 | border-top-color: rgb(254 202 202); border-bottom-color: rgb(254 202 202);  |
| border-y-red-300 | border-top-color: rgb(252 165 165); border-bottom-color: rgb(252 165 165);  |
| border-y-red-400 | border-top-color: rgb(248 113 113); border-bottom-color: rgb(248 113 113);  |
| border-y-red-500 | border-top-color: rgb(239 68 68); border-bottom-color: rgb(239 68 68);  |
| border-y-red-600 | border-top-color: rgb(220 38 38); border-bottom-color: rgb(220 38 38);  |
| border-y-red-700 | border-top-color: rgb(185 28 28); border-bottom-color: rgb(185 28 28);  |
| border-y-red-800 | border-top-color: rgb(153 27 27); border-bottom-color: rgb(153 27 27);  |
| border-y-red-900 | border-top-color: rgb(127 29 29); border-bottom-color: rgb(127 29 29);  |
| border-y-red-950 | border-top-color: rgb(69 10 10); border-bottom-color: rgb(69 10 10);  |
| border-y-orange-50 | border-top-color: rgb(255 247 237); border-bottom-color: rgb(255 247 237);  |
| border-y-orange-100 | border-top-color: rgb(255 237 213); border-bottom-color: rgb(255 237 213);  |
| border-y-orange-200 | border-top-color: rgb(254 215 170); border-bottom-color: rgb(254 215 170);  |
| border-y-orange-300 | border-top-color: rgb(253 186 116); border-bottom-color: rgb(253 186 116);  |
| border-y-orange-400 | border-top-color: rgb(251 146 60); border-bottom-color: rgb(251 146 60);  |
| border-y-orange-500 | border-top-color: rgb(249 115 22); border-bottom-color: rgb(249 115 22);  |
| border-y-orange-600 | border-top-color: rgb(234 88 12); border-bottom-color: rgb(234 88 12);  |
| border-y-orange-700 | border-top-color: rgb(194 65 12); border-bottom-color: rgb(194 65 12);  |
| border-y-orange-800 | border-top-color: rgb(154 52 18); border-bottom-color: rgb(154 52 18);  |
| border-y-orange-900 | border-top-color: rgb(124 45 18); border-bottom-color: rgb(124 45 18);  |
| border-y-orange-950 | border-top-color: rgb(67 20 7); border-bottom-color: rgb(67 20 7);  |
| border-y-amber-50 | border-top-color: rgb(255 251 235); border-bottom-color: rgb(255 251 235);  |
| border-y-amber-100 | border-top-color: rgb(254 243 199); border-bottom-color: rgb(254 243 199);  |
| border-y-amber-200 | border-top-color: rgb(253 230 138); border-bottom-color: rgb(253 230 138);  |
| border-y-amber-300 | border-top-color: rgb(252 211 77); border-bottom-color: rgb(252 211 77);  |
| border-y-amber-400 | border-top-color: rgb(251 191 36); border-bottom-color: rgb(251 191 36);  |
| border-y-amber-500 | border-top-color: rgb(245 158 11); border-bottom-color: rgb(245 158 11);  |
| border-y-amber-600 | border-top-color: rgb(217 119 6); border-bottom-color: rgb(217 119 6);  |
| border-y-amber-700 | border-top-color: rgb(180 83 9); border-bottom-color: rgb(180 83 9);  |
| border-y-amber-800 | border-top-color: rgb(146 64 14); border-bottom-color: rgb(146 64 14);  |
| border-y-amber-900 | border-top-color: rgb(120 53 15); border-bottom-color: rgb(120 53 15);  |
| border-y-amber-950 | border-top-color: rgb(69 26 3); border-bottom-color: rgb(69 26 3);  |
| border-y-yellow-50 | border-top-color: rgb(254 252 232); border-bottom-color: rgb(254 252 232);  |
| border-y-yellow-100 | border-top-color: rgb(254 249 195); border-bottom-color: rgb(254 249 195);  |
| border-y-yellow-200 | border-top-color: rgb(254 240 138); border-bottom-color: rgb(254 240 138);  |
| border-y-yellow-300 | border-top-color: rgb(253 224 71); border-bottom-color: rgb(253 224 71);  |
| border-y-yellow-400 | border-top-color: rgb(250 204 21); border-bottom-color: rgb(250 204 21);  |
| border-y-yellow-500 | border-top-color: rgb(234 179 8); border-bottom-color: rgb(234 179 8);  |
| border-y-yellow-600 | border-top-color: rgb(202 138 4); border-bottom-color: rgb(202 138 4);  |
| border-y-yellow-700 | border-top-color: rgb(161 98 7); border-bottom-color: rgb(161 98 7);  |
| border-y-yellow-800 | border-top-color: rgb(133 77 14); border-bottom-color: rgb(133 77 14);  |
| border-y-yellow-900 | border-top-color: rgb(113 63 18); border-bottom-color: rgb(113 63 18);  |
| border-y-yellow-950 | border-top-color: rgb(66 32 6); border-bottom-color: rgb(66 32 6);  |
| border-y-lime-50 | border-top-color: rgb(247 254 231); border-bottom-color: rgb(247 254 231);  |
| border-y-lime-100 | border-top-color: rgb(236 252 203); border-bottom-color: rgb(236 252 203);  |
| border-y-lime-200 | border-top-color: rgb(217 249 157); border-bottom-color: rgb(217 249 157);  |
| border-y-lime-300 | border-top-color: rgb(190 242 100); border-bottom-color: rgb(190 242 100);  |
| border-y-lime-400 | border-top-color: rgb(163 230 53); border-bottom-color: rgb(163 230 53);  |
| border-y-lime-500 | border-top-color: rgb(132 204 22); border-bottom-color: rgb(132 204 22);  |
| border-y-lime-600 | border-top-color: rgb(101 163 13); border-bottom-color: rgb(101 163 13);  |
| border-y-lime-700 | border-top-color: rgb(77 124 15); border-bottom-color: rgb(77 124 15);  |
| border-y-lime-800 | border-top-color: rgb(63 98 18); border-bottom-color: rgb(63 98 18);  |
| border-y-lime-900 | border-top-color: rgb(54 83 20); border-bottom-color: rgb(54 83 20);  |
| border-y-lime-950 | border-top-color: rgb(26 46 5); border-bottom-color: rgb(26 46 5);  |
| border-y-green-50 | border-top-color: rgb(240 253 244); border-bottom-color: rgb(240 253 244);  |
| border-y-green-100 | border-top-color: rgb(220 252 231); border-bottom-color: rgb(220 252 231);  |
| border-y-green-200 | border-top-color: rgb(187 247 208); border-bottom-color: rgb(187 247 208);  |
| border-y-green-300 | border-top-color: rgb(134 239 172); border-bottom-color: rgb(134 239 172);  |
| border-y-green-400 | border-top-color: rgb(74 222 128); border-bottom-color: rgb(74 222 128);  |
| border-y-green-500 | border-top-color: rgb(34 197 94); border-bottom-color: rgb(34 197 94);  |
| border-y-green-600 | border-top-color: rgb(22 163 74); border-bottom-color: rgb(22 163 74);  |
| border-y-green-700 | border-top-color: rgb(21 128 61); border-bottom-color: rgb(21 128 61);  |
| border-y-green-800 | border-top-color: rgb(22 101 52); border-bottom-color: rgb(22 101 52);  |
| border-y-green-900 | border-top-color: rgb(20 83 45); border-bottom-color: rgb(20 83 45);  |
| border-y-green-950 | border-top-color: rgb(5 46 22); border-bottom-color: rgb(5 46 22);  |
| border-y-emerald-50 | border-top-color: rgb(236 253 245); border-bottom-color: rgb(236 253 245);  |
| border-y-emerald-100 | border-top-color: rgb(209 250 229); border-bottom-color: rgb(209 250 229);  |
| border-y-emerald-200 | border-top-color: rgb(167 243 208); border-bottom-color: rgb(167 243 208);  |
| border-y-emerald-300 | border-top-color: rgb(110 231 183); border-bottom-color: rgb(110 231 183);  |
| border-y-emerald-400 | border-top-color: rgb(52 211 153); border-bottom-color: rgb(52 211 153);  |
| border-y-emerald-500 | border-top-color: rgb(16 185 129); border-bottom-color: rgb(16 185 129);  |
| border-y-emerald-600 | border-top-color: rgb(5 150 105); border-bottom-color: rgb(5 150 105);  |
| border-y-emerald-700 | border-top-color: rgb(4 120 87); border-bottom-color: rgb(4 120 87);  |
| border-y-emerald-800 | border-top-color: rgb(6 95 70); border-bottom-color: rgb(6 95 70);  |
| border-y-emerald-900 | border-top-color: rgb(6 78 59); border-bottom-color: rgb(6 78 59);  |
| border-y-emerald-950 | border-top-color: rgb(2 44 34); border-bottom-color: rgb(2 44 34);  |
| border-y-teal-50 | border-top-color: rgb(240 253 250); border-bottom-color: rgb(240 253 250);  |
| border-y-teal-100 | border-top-color: rgb(204 251 241); border-bottom-color: rgb(204 251 241);  |
| border-y-teal-200 | border-top-color: rgb(153 246 228); border-bottom-color: rgb(153 246 228);  |
| border-y-teal-300 | border-top-color: rgb(94 234 212); border-bottom-color: rgb(94 234 212);  |
| border-y-teal-400 | border-top-color: rgb(45 212 191); border-bottom-color: rgb(45 212 191);  |
| border-y-teal-500 | border-top-color: rgb(20 184 166); border-bottom-color: rgb(20 184 166);  |
| border-y-teal-600 | border-top-color: rgb(13 148 136); border-bottom-color: rgb(13 148 136);  |
| border-y-teal-700 | border-top-color: rgb(15 118 110); border-bottom-color: rgb(15 118 110);  |
| border-y-teal-800 | border-top-color: rgb(17 94 89); border-bottom-color: rgb(17 94 89);  |
| border-y-teal-900 | border-top-color: rgb(19 78 74); border-bottom-color: rgb(19 78 74);  |
| border-y-teal-950 | border-top-color: rgb(4 47 46); border-bottom-color: rgb(4 47 46);  |
| border-y-cyan-50 | border-top-color: rgb(236 254 255); border-bottom-color: rgb(236 254 255);  |
| border-y-cyan-100 | border-top-color: rgb(207 250 254); border-bottom-color: rgb(207 250 254);  |
| border-y-cyan-200 | border-top-color: rgb(165 243 252); border-bottom-color: rgb(165 243 252);  |
| border-y-cyan-300 | border-top-color: rgb(103 232 249); border-bottom-color: rgb(103 232 249);  |
| border-y-cyan-400 | border-top-color: rgb(34 211 238); border-bottom-color: rgb(34 211 238);  |
| border-y-cyan-500 | border-top-color: rgb(6 182 212); border-bottom-color: rgb(6 182 212);  |
| border-y-cyan-600 | border-top-color: rgb(8 145 178); border-bottom-color: rgb(8 145 178);  |
| border-y-cyan-700 | border-top-color: rgb(14 116 144); border-bottom-color: rgb(14 116 144);  |
| border-y-cyan-800 | border-top-color: rgb(21 94 117); border-bottom-color: rgb(21 94 117);  |
| border-y-cyan-900 | border-top-color: rgb(22 78 99); border-bottom-color: rgb(22 78 99);  |
| border-y-cyan-950 | border-top-color: rgb(8 51 68); border-bottom-color: rgb(8 51 68);  |
| border-y-sky-50 | border-top-color: rgb(240 249 255); border-bottom-color: rgb(240 249 255);  |
| border-y-sky-100 | border-top-color: rgb(224 242 254); border-bottom-color: rgb(224 242 254);  |
| border-y-sky-200 | border-top-color: rgb(186 230 253); border-bottom-color: rgb(186 230 253);  |
| border-y-sky-300 | border-top-color: rgb(125 211 252); border-bottom-color: rgb(125 211 252);  |
| border-y-sky-400 | border-top-color: rgb(56 189 248); border-bottom-color: rgb(56 189 248);  |
| border-y-sky-500 | border-top-color: rgb(14 165 233); border-bottom-color: rgb(14 165 233);  |
| border-y-sky-600 | border-top-color: rgb(2 132 199); border-bottom-color: rgb(2 132 199);  |
| border-y-sky-700 | border-top-color: rgb(3 105 161); border-bottom-color: rgb(3 105 161);  |
| border-y-sky-800 | border-top-color: rgb(7 89 133); border-bottom-color: rgb(7 89 133);  |
| border-y-sky-900 | border-top-color: rgb(12 74 110); border-bottom-color: rgb(12 74 110);  |
| border-y-sky-950 | border-top-color: rgb(8 47 73); border-bottom-color: rgb(8 47 73);  |
| border-y-blue-50 | border-top-color: rgb(239 246 255); border-bottom-color: rgb(239 246 255);  |
| border-y-blue-100 | border-top-color: rgb(219 234 254); border-bottom-color: rgb(219 234 254);  |
| border-y-blue-200 | border-top-color: rgb(191 219 254); border-bottom-color: rgb(191 219 254);  |
| border-y-blue-300 | border-top-color: rgb(147 197 253); border-bottom-color: rgb(147 197 253);  |
| border-y-blue-400 | border-top-color: rgb(96 165 250); border-bottom-color: rgb(96 165 250);  |
| border-y-blue-500 | border-top-color: rgb(59 130 246); border-bottom-color: rgb(59 130 246);  |
| border-y-blue-600 | border-top-color: rgb(37 99 235); border-bottom-color: rgb(37 99 235);  |
| border-y-blue-700 | border-top-color: rgb(29 78 216); border-bottom-color: rgb(29 78 216);  |
| border-y-blue-800 | border-top-color: rgb(30 64 175); border-bottom-color: rgb(30 64 175);  |
| border-y-blue-900 | border-top-color: rgb(30 58 138); border-bottom-color: rgb(30 58 138);  |
| border-y-blue-950 | border-top-color: rgb(23 37 84); border-bottom-color: rgb(23 37 84);  |
| border-y-indigo-50 | border-top-color: rgb(238 242 255); border-bottom-color: rgb(238 242 255);  |
| border-y-indigo-100 | border-top-color: rgb(224 231 255); border-bottom-color: rgb(224 231 255);  |
| border-y-indigo-200 | border-top-color: rgb(199 210 254); border-bottom-color: rgb(199 210 254);  |
| border-y-indigo-300 | border-top-color: rgb(165 180 252); border-bottom-color: rgb(165 180 252);  |
| border-y-indigo-400 | border-top-color: rgb(129 140 248); border-bottom-color: rgb(129 140 248);  |
| border-y-indigo-500 | border-top-color: rgb(99 102 241); border-bottom-color: rgb(99 102 241);  |
| border-y-indigo-600 | border-top-color: rgb(79 70 229); border-bottom-color: rgb(79 70 229);  |
| border-y-indigo-700 | border-top-color: rgb(67 56 202); border-bottom-color: rgb(67 56 202);  |
| border-y-indigo-800 | border-top-color: rgb(55 48 163); border-bottom-color: rgb(55 48 163);  |
| border-y-indigo-900 | border-top-color: rgb(49 46 129); border-bottom-color: rgb(49 46 129);  |
| border-y-indigo-950 | border-top-color: rgb(30 27 75); border-bottom-color: rgb(30 27 75);  |
| border-y-violet-50 | border-top-color: rgb(245 243 255); border-bottom-color: rgb(245 243 255);  |
| border-y-violet-100 | border-top-color: rgb(237 233 254); border-bottom-color: rgb(237 233 254);  |
| border-y-violet-200 | border-top-color: rgb(221 214 254); border-bottom-color: rgb(221 214 254);  |
| border-y-violet-300 | border-top-color: rgb(196 181 253); border-bottom-color: rgb(196 181 253);  |
| border-y-violet-400 | border-top-color: rgb(167 139 250); border-bottom-color: rgb(167 139 250);  |
| border-y-violet-500 | border-top-color: rgb(139 92 246); border-bottom-color: rgb(139 92 246);  |
| border-y-violet-600 | border-top-color: rgb(124 58 237); border-bottom-color: rgb(124 58 237);  |
| border-y-violet-700 | border-top-color: rgb(109 40 217); border-bottom-color: rgb(109 40 217);  |
| border-y-violet-800 | border-top-color: rgb(91 33 182); border-bottom-color: rgb(91 33 182);  |
| border-y-violet-900 | border-top-color: rgb(76 29 149); border-bottom-color: rgb(76 29 149);  |
| border-y-violet-950 | border-top-color: rgb(46 16 101); border-bottom-color: rgb(46 16 101);  |
| border-y-purple-50 | border-top-color: rgb(250 245 255); border-bottom-color: rgb(250 245 255);  |
| border-y-purple-100 | border-top-color: rgb(243 232 255); border-bottom-color: rgb(243 232 255);  |
| border-y-purple-200 | border-top-color: rgb(233 213 255); border-bottom-color: rgb(233 213 255);  |
| border-y-purple-300 | border-top-color: rgb(216 180 254); border-bottom-color: rgb(216 180 254);  |
| border-y-purple-400 | border-top-color: rgb(192 132 252); border-bottom-color: rgb(192 132 252);  |
| border-y-purple-500 | border-top-color: rgb(168 85 247); border-bottom-color: rgb(168 85 247);  |
| border-y-purple-600 | border-top-color: rgb(147 51 234); border-bottom-color: rgb(147 51 234);  |
| border-y-purple-700 | border-top-color: rgb(126 34 206); border-bottom-color: rgb(126 34 206);  |
| border-y-purple-800 | border-top-color: rgb(107 33 168); border-bottom-color: rgb(107 33 168);  |
| border-y-purple-900 | border-top-color: rgb(88 28 135); border-bottom-color: rgb(88 28 135);  |
| border-y-purple-950 | border-top-color: rgb(59 7 100); border-bottom-color: rgb(59 7 100);  |
| border-y-fuchsia-50 | border-top-color: rgb(253 244 255); border-bottom-color: rgb(253 244 255);  |
| border-y-fuchsia-100 | border-top-color: rgb(250 232 255); border-bottom-color: rgb(250 232 255);  |
| border-y-fuchsia-200 | border-top-color: rgb(245 208 254); border-bottom-color: rgb(245 208 254);  |
| border-y-fuchsia-300 | border-top-color: rgb(240 171 252); border-bottom-color: rgb(240 171 252);  |
| border-y-fuchsia-400 | border-top-color: rgb(232 121 249); border-bottom-color: rgb(232 121 249);  |
| border-y-fuchsia-500 | border-top-color: rgb(217 70 239); border-bottom-color: rgb(217 70 239);  |
| border-y-fuchsia-600 | border-top-color: rgb(192 38 211); border-bottom-color: rgb(192 38 211);  |
| border-y-fuchsia-700 | border-top-color: rgb(162 28 175); border-bottom-color: rgb(162 28 175);  |
| border-y-fuchsia-800 | border-top-color: rgb(134 25 143); border-bottom-color: rgb(134 25 143);  |
| border-y-fuchsia-900 | border-top-color: rgb(112 26 117); border-bottom-color: rgb(112 26 117);  |
| border-y-fuchsia-950 | border-top-color: rgb(74 4 78); border-bottom-color: rgb(74 4 78);  |
| border-y-pink-50 | border-top-color: rgb(253 242 248); border-bottom-color: rgb(253 242 248);  |
| border-y-pink-100 | border-top-color: rgb(252 231 243); border-bottom-color: rgb(252 231 243);  |
| border-y-pink-200 | border-top-color: rgb(251 207 232); border-bottom-color: rgb(251 207 232);  |
| border-y-pink-300 | border-top-color: rgb(249 168 212); border-bottom-color: rgb(249 168 212);  |
| border-y-pink-400 | border-top-color: rgb(244 114 182); border-bottom-color: rgb(244 114 182);  |
| border-y-pink-500 | border-top-color: rgb(236 72 153); border-bottom-color: rgb(236 72 153);  |
| border-y-pink-600 | border-top-color: rgb(219 39 119); border-bottom-color: rgb(219 39 119);  |
| border-y-pink-700 | border-top-color: rgb(190 24 93); border-bottom-color: rgb(190 24 93);  |
| border-y-pink-800 | border-top-color: rgb(157 23 77); border-bottom-color: rgb(157 23 77);  |
| border-y-pink-900 | border-top-color: rgb(131 24 67); border-bottom-color: rgb(131 24 67);  |
| border-y-pink-950 | border-top-color: rgb(80 7 36); border-bottom-color: rgb(80 7 36);  |
| border-y-rose-50 | border-top-color: rgb(255 241 242); border-bottom-color: rgb(255 241 242);  |
| border-y-rose-100 | border-top-color: rgb(255 228 230); border-bottom-color: rgb(255 228 230);  |
| border-y-rose-200 | border-top-color: rgb(254 205 211); border-bottom-color: rgb(254 205 211);  |
| border-y-rose-300 | border-top-color: rgb(253 164 175); border-bottom-color: rgb(253 164 175);  |
| border-y-rose-400 | border-top-color: rgb(251 113 133); border-bottom-color: rgb(251 113 133);  |
| border-y-rose-500 | border-top-color: rgb(244 63 94); border-bottom-color: rgb(244 63 94);  |
| border-y-rose-600 | border-top-color: rgb(225 29 72); border-bottom-color: rgb(225 29 72);  |
| border-y-rose-700 | border-top-color: rgb(190 18 60); border-bottom-color: rgb(190 18 60);  |
| border-y-rose-800 | border-top-color: rgb(159 18 57); border-bottom-color: rgb(159 18 57);  |
| border-y-rose-900 | border-top-color: rgb(136 19 55); border-bottom-color: rgb(136 19 55);  |
| border-y-rose-950 | border-top-color: rgb(76 5 25); border-bottom-color: rgb(76 5 25);  |
| border-s-inherit | border-inline-start-color: inherit;  |
| border-s-current | border-inline-start-color: currentColor;  |
| border-s-transparent | border-inline-start-color: transparent;  |
| border-s-black | border-inline-start-color: rgb(0 0 0);  |
| border-s-white | border-inline-start-color: rgb(255 255 255);  |
| border-s-slate-50 | border-inline-start-color: rgb(248 250 252);  |
| border-s-slate-100 | border-inline-start-color: rgb(241 245 249);  |
| border-s-slate-200 | border-inline-start-color: rgb(226 232 240);  |
| border-s-slate-300 | border-inline-start-color: rgb(203 213 225);  |
| border-s-slate-400 | border-inline-start-color: rgb(148 163 184);  |
| border-s-slate-500 | border-inline-start-color: rgb(100 116 139);  |
| border-s-slate-600 | border-inline-start-color: rgb(71 85 105);  |
| border-s-slate-700 | border-inline-start-color: rgb(51 65 85);  |
| border-s-slate-800 | border-inline-start-color: rgb(30 41 59);  |
| border-s-slate-900 | border-inline-start-color: rgb(15 23 42);  |
| border-s-slate-950 | border-inline-start-color: rgb(2 6 23);  |
| border-s-gray-50 | border-inline-start-color: rgb(249 250 251);  |
| border-s-gray-100 | border-inline-start-color: rgb(243 244 246);  |
| border-s-gray-200 | border-inline-start-color: rgb(229 231 235);  |
| border-s-gray-300 | border-inline-start-color: rgb(209 213 219);  |
| border-s-gray-400 | border-inline-start-color: rgb(156 163 175);  |
| border-s-gray-500 | border-inline-start-color: rgb(107 114 128);  |
| border-s-gray-600 | border-inline-start-color: rgb(75 85 99);  |
| border-s-gray-700 | border-inline-start-color: rgb(55 65 81);  |
| border-s-gray-800 | border-inline-start-color: rgb(31 41 55);  |
| border-s-gray-900 | border-inline-start-color: rgb(17 24 39);  |
| border-s-gray-950 | border-inline-start-color: rgb(3 7 18);  |
| border-s-zinc-50 | border-inline-start-color: rgb(250 250 250);  |
| border-s-zinc-100 | border-inline-start-color: rgb(244 244 245);  |
| border-s-zinc-200 | border-inline-start-color: rgb(228 228 231);  |
| border-s-zinc-300 | border-inline-start-color: rgb(212 212 216);  |
| border-s-zinc-400 | border-inline-start-color: rgb(161 161 170);  |
| border-s-zinc-500 | border-inline-start-color: rgb(113 113 122);  |
| border-s-zinc-600 | border-inline-start-color: rgb(82 82 91);  |
| border-s-zinc-700 | border-inline-start-color: rgb(63 63 70);  |
| border-s-zinc-800 | border-inline-start-color: rgb(39 39 42);  |
| border-s-zinc-900 | border-inline-start-color: rgb(24 24 27);  |
| border-s-zinc-950 | border-inline-start-color: rgb(9 9 11);  |
| border-s-neutral-50 | border-inline-start-color: rgb(250 250 250);  |
| border-s-neutral-100 | border-inline-start-color: rgb(245 245 245);  |
| border-s-neutral-200 | border-inline-start-color: rgb(229 229 229);  |
| border-s-neutral-300 | border-inline-start-color: rgb(212 212 212);  |
| border-s-neutral-400 | border-inline-start-color: rgb(163 163 163);  |
| border-s-neutral-500 | border-inline-start-color: rgb(115 115 115);  |
| border-s-neutral-600 | border-inline-start-color: rgb(82 82 82);  |
| border-s-neutral-700 | border-inline-start-color: rgb(64 64 64);  |
| border-s-neutral-800 | border-inline-start-color: rgb(38 38 38);  |
| border-s-neutral-900 | border-inline-start-color: rgb(23 23 23);  |
| border-s-neutral-950 | border-inline-start-color: rgb(10 10 10);  |
| border-s-stone-50 | border-inline-start-color: rgb(250 250 249);  |
| border-s-stone-100 | border-inline-start-color: rgb(245 245 244);  |
| border-s-stone-200 | border-inline-start-color: rgb(231 229 228);  |
| border-s-stone-300 | border-inline-start-color: rgb(214 211 209);  |
| border-s-stone-400 | border-inline-start-color: rgb(168 162 158);  |
| border-s-stone-500 | border-inline-start-color: rgb(120 113 108);  |
| border-s-stone-600 | border-inline-start-color: rgb(87 83 78);  |
| border-s-stone-700 | border-inline-start-color: rgb(68 64 60);  |
| border-s-stone-800 | border-inline-start-color: rgb(41 37 36);  |
| border-s-stone-900 | border-inline-start-color: rgb(28 25 23);  |
| border-s-stone-950 | border-inline-start-color: rgb(12 10 9);  |
| border-s-red-50 | border-inline-start-color: rgb(254 242 242);  |
| border-s-red-100 | border-inline-start-color: rgb(254 226 226);  |
| border-s-red-200 | border-inline-start-color: rgb(254 202 202);  |
| border-s-red-300 | border-inline-start-color: rgb(252 165 165);  |
| border-s-red-400 | border-inline-start-color: rgb(248 113 113);  |
| border-s-red-500 | border-inline-start-color: rgb(239 68 68);  |
| border-s-red-600 | border-inline-start-color: rgb(220 38 38);  |
| border-s-red-700 | border-inline-start-color: rgb(185 28 28);  |
| border-s-red-800 | border-inline-start-color: rgb(153 27 27);  |
| border-s-red-900 | border-inline-start-color: rgb(127 29 29);  |
| border-s-red-950 | border-inline-start-color: rgb(69 10 10);  |
| border-s-orange-50 | border-inline-start-color: rgb(255 247 237);  |
| border-s-orange-100 | border-inline-start-color: rgb(255 237 213);  |
| border-s-orange-200 | border-inline-start-color: rgb(254 215 170);  |
| border-s-orange-300 | border-inline-start-color: rgb(253 186 116);  |
| border-s-orange-400 | border-inline-start-color: rgb(251 146 60);  |
| border-s-orange-500 | border-inline-start-color: rgb(249 115 22);  |
| border-s-orange-600 | border-inline-start-color: rgb(234 88 12);  |
| border-s-orange-700 | border-inline-start-color: rgb(194 65 12);  |
| border-s-orange-800 | border-inline-start-color: rgb(154 52 18);  |
| border-s-orange-900 | border-inline-start-color: rgb(124 45 18);  |
| border-s-orange-950 | border-inline-start-color: rgb(67 20 7);  |
| border-s-amber-50 | border-inline-start-color: rgb(255 251 235);  |
| border-s-amber-100 | border-inline-start-color: rgb(254 243 199);  |
| border-s-amber-200 | border-inline-start-color: rgb(253 230 138);  |
| border-s-amber-300 | border-inline-start-color: rgb(252 211 77);  |
| border-s-amber-400 | border-inline-start-color: rgb(251 191 36);  |
| border-s-amber-500 | border-inline-start-color: rgb(245 158 11);  |
| border-s-amber-600 | border-inline-start-color: rgb(217 119 6);  |
| border-s-amber-700 | border-inline-start-color: rgb(180 83 9);  |
| border-s-amber-800 | border-inline-start-color: rgb(146 64 14);  |
| border-s-amber-900 | border-inline-start-color: rgb(120 53 15);  |
| border-s-amber-950 | border-inline-start-color: rgb(69 26 3);  |
| border-s-yellow-50 | border-inline-start-color: rgb(254 252 232);  |
| border-s-yellow-100 | border-inline-start-color: rgb(254 249 195);  |
| border-s-yellow-200 | border-inline-start-color: rgb(254 240 138);  |
| border-s-yellow-300 | border-inline-start-color: rgb(253 224 71);  |
| border-s-yellow-400 | border-inline-start-color: rgb(250 204 21);  |
| border-s-yellow-500 | border-inline-start-color: rgb(234 179 8);  |
| border-s-yellow-600 | border-inline-start-color: rgb(202 138 4);  |
| border-s-yellow-700 | border-inline-start-color: rgb(161 98 7);  |
| border-s-yellow-800 | border-inline-start-color: rgb(133 77 14);  |
| border-s-yellow-900 | border-inline-start-color: rgb(113 63 18);  |
| border-s-yellow-950 | border-inline-start-color: rgb(66 32 6);  |
| border-s-lime-50 | border-inline-start-color: rgb(247 254 231);  |
| border-s-lime-100 | border-inline-start-color: rgb(236 252 203);  |
| border-s-lime-200 | border-inline-start-color: rgb(217 249 157);  |
| border-s-lime-300 | border-inline-start-color: rgb(190 242 100);  |
| border-s-lime-400 | border-inline-start-color: rgb(163 230 53);  |
| border-s-lime-500 | border-inline-start-color: rgb(132 204 22);  |
| border-s-lime-600 | border-inline-start-color: rgb(101 163 13);  |
| border-s-lime-700 | border-inline-start-color: rgb(77 124 15);  |
| border-s-lime-800 | border-inline-start-color: rgb(63 98 18);  |
| border-s-lime-900 | border-inline-start-color: rgb(54 83 20);  |
| border-s-lime-950 | border-inline-start-color: rgb(26 46 5);  |
| border-s-green-50 | border-inline-start-color: rgb(240 253 244);  |
| border-s-green-100 | border-inline-start-color: rgb(220 252 231);  |
| border-s-green-200 | border-inline-start-color: rgb(187 247 208);  |
| border-s-green-300 | border-inline-start-color: rgb(134 239 172);  |
| border-s-green-400 | border-inline-start-color: rgb(74 222 128);  |
| border-s-green-500 | border-inline-start-color: rgb(34 197 94);  |
| border-s-green-600 | border-inline-start-color: rgb(22 163 74);  |
| border-s-green-700 | border-inline-start-color: rgb(21 128 61);  |
| border-s-green-800 | border-inline-start-color: rgb(22 101 52);  |
| border-s-green-900 | border-inline-start-color: rgb(20 83 45);  |
| border-s-green-950 | border-inline-start-color: rgb(5 46 22);  |
| border-s-emerald-50 | border-inline-start-color: rgb(236 253 245);  |
| border-s-emerald-100 | border-inline-start-color: rgb(209 250 229);  |
| border-s-emerald-200 | border-inline-start-color: rgb(167 243 208);  |
| border-s-emerald-300 | border-inline-start-color: rgb(110 231 183);  |
| border-s-emerald-400 | border-inline-start-color: rgb(52 211 153);  |
| border-s-emerald-500 | border-inline-start-color: rgb(16 185 129);  |
| border-s-emerald-600 | border-inline-start-color: rgb(5 150 105);  |
| border-s-emerald-700 | border-inline-start-color: rgb(4 120 87);  |
| border-s-emerald-800 | border-inline-start-color: rgb(6 95 70);  |
| border-s-emerald-900 | border-inline-start-color: rgb(6 78 59);  |
| border-s-emerald-950 | border-inline-start-color: rgb(2 44 34);  |
| border-s-teal-50 | border-inline-start-color: rgb(240 253 250);  |
| border-s-teal-100 | border-inline-start-color: rgb(204 251 241);  |
| border-s-teal-200 | border-inline-start-color: rgb(153 246 228);  |
| border-s-teal-300 | border-inline-start-color: rgb(94 234 212);  |
| border-s-teal-400 | border-inline-start-color: rgb(45 212 191);  |
| border-s-teal-500 | border-inline-start-color: rgb(20 184 166);  |
| border-s-teal-600 | border-inline-start-color: rgb(13 148 136);  |
| border-s-teal-700 | border-inline-start-color: rgb(15 118 110);  |
| border-s-teal-800 | border-inline-start-color: rgb(17 94 89);  |
| border-s-teal-900 | border-inline-start-color: rgb(19 78 74);  |
| border-s-teal-950 | border-inline-start-color: rgb(4 47 46);  |
| border-s-cyan-50 | border-inline-start-color: rgb(236 254 255);  |
| border-s-cyan-100 | border-inline-start-color: rgb(207 250 254);  |
| border-s-cyan-200 | border-inline-start-color: rgb(165 243 252);  |
| border-s-cyan-300 | border-inline-start-color: rgb(103 232 249);  |
| border-s-cyan-400 | border-inline-start-color: rgb(34 211 238);  |
| border-s-cyan-500 | border-inline-start-color: rgb(6 182 212);  |
| border-s-cyan-600 | border-inline-start-color: rgb(8 145 178);  |
| border-s-cyan-700 | border-inline-start-color: rgb(14 116 144);  |
| border-s-cyan-800 | border-inline-start-color: rgb(21 94 117);  |
| border-s-cyan-900 | border-inline-start-color: rgb(22 78 99);  |
| border-s-cyan-950 | border-inline-start-color: rgb(8 51 68);  |
| border-s-sky-50 | border-inline-start-color: rgb(240 249 255);  |
| border-s-sky-100 | border-inline-start-color: rgb(224 242 254);  |
| border-s-sky-200 | border-inline-start-color: rgb(186 230 253);  |
| border-s-sky-300 | border-inline-start-color: rgb(125 211 252);  |
| border-s-sky-400 | border-inline-start-color: rgb(56 189 248);  |
| border-s-sky-500 | border-inline-start-color: rgb(14 165 233);  |
| border-s-sky-600 | border-inline-start-color: rgb(2 132 199);  |
| border-s-sky-700 | border-inline-start-color: rgb(3 105 161);  |
| border-s-sky-800 | border-inline-start-color: rgb(7 89 133);  |
| border-s-sky-900 | border-inline-start-color: rgb(12 74 110);  |
| border-s-sky-950 | border-inline-start-color: rgb(8 47 73);  |
| border-s-blue-50 | border-inline-start-color: rgb(239 246 255);  |
| border-s-blue-100 | border-inline-start-color: rgb(219 234 254);  |
| border-s-blue-200 | border-inline-start-color: rgb(191 219 254);  |
| border-s-blue-300 | border-inline-start-color: rgb(147 197 253);  |
| border-s-blue-400 | border-inline-start-color: rgb(96 165 250);  |
| border-s-blue-500 | border-inline-start-color: rgb(59 130 246);  |
| border-s-blue-600 | border-inline-start-color: rgb(37 99 235);  |
| border-s-blue-700 | border-inline-start-color: rgb(29 78 216);  |
| border-s-blue-800 | border-inline-start-color: rgb(30 64 175);  |
| border-s-blue-900 | border-inline-start-color: rgb(30 58 138);  |
| border-s-blue-950 | border-inline-start-color: rgb(23 37 84);  |
| border-s-indigo-50 | border-inline-start-color: rgb(238 242 255);  |
| border-s-indigo-100 | border-inline-start-color: rgb(224 231 255);  |
| border-s-indigo-200 | border-inline-start-color: rgb(199 210 254);  |
| border-s-indigo-300 | border-inline-start-color: rgb(165 180 252);  |
| border-s-indigo-400 | border-inline-start-color: rgb(129 140 248);  |
| border-s-indigo-500 | border-inline-start-color: rgb(99 102 241);  |
| border-s-indigo-600 | border-inline-start-color: rgb(79 70 229);  |
| border-s-indigo-700 | border-inline-start-color: rgb(67 56 202);  |
| border-s-indigo-800 | border-inline-start-color: rgb(55 48 163);  |
| border-s-indigo-900 | border-inline-start-color: rgb(49 46 129);  |
| border-s-indigo-950 | border-inline-start-color: rgb(30 27 75);  |
| border-s-violet-50 | border-inline-start-color: rgb(245 243 255);  |
| border-s-violet-100 | border-inline-start-color: rgb(237 233 254);  |
| border-s-violet-200 | border-inline-start-color: rgb(221 214 254);  |
| border-s-violet-300 | border-inline-start-color: rgb(196 181 253);  |
| border-s-violet-400 | border-inline-start-color: rgb(167 139 250);  |
| border-s-violet-500 | border-inline-start-color: rgb(139 92 246);  |
| border-s-violet-600 | border-inline-start-color: rgb(124 58 237);  |
| border-s-violet-700 | border-inline-start-color: rgb(109 40 217);  |
| border-s-violet-800 | border-inline-start-color: rgb(91 33 182);  |
| border-s-violet-900 | border-inline-start-color: rgb(76 29 149);  |
| border-s-violet-950 | border-inline-start-color: rgb(46 16 101);  |
| border-s-purple-50 | border-inline-start-color: rgb(250 245 255);  |
| border-s-purple-100 | border-inline-start-color: rgb(243 232 255);  |
| border-s-purple-200 | border-inline-start-color: rgb(233 213 255);  |
| border-s-purple-300 | border-inline-start-color: rgb(216 180 254);  |
| border-s-purple-400 | border-inline-start-color: rgb(192 132 252);  |
| border-s-purple-500 | border-inline-start-color: rgb(168 85 247);  |
| border-s-purple-600 | border-inline-start-color: rgb(147 51 234);  |
| border-s-purple-700 | border-inline-start-color: rgb(126 34 206);  |
| border-s-purple-800 | border-inline-start-color: rgb(107 33 168);  |
| border-s-purple-900 | border-inline-start-color: rgb(88 28 135);  |
| border-s-purple-950 | border-inline-start-color: rgb(59 7 100);  |
| border-s-fuchsia-50 | border-inline-start-color: rgb(253 244 255);  |
| border-s-fuchsia-100 | border-inline-start-color: rgb(250 232 255);  |
| border-s-fuchsia-200 | border-inline-start-color: rgb(245 208 254);  |
| border-s-fuchsia-300 | border-inline-start-color: rgb(240 171 252);  |
| border-s-fuchsia-400 | border-inline-start-color: rgb(232 121 249);  |
| border-s-fuchsia-500 | border-inline-start-color: rgb(217 70 239);  |
| border-s-fuchsia-600 | border-inline-start-color: rgb(192 38 211);  |
| border-s-fuchsia-700 | border-inline-start-color: rgb(162 28 175);  |
| border-s-fuchsia-800 | border-inline-start-color: rgb(134 25 143);  |
| border-s-fuchsia-900 | border-inline-start-color: rgb(112 26 117);  |
| border-s-fuchsia-950 | border-inline-start-color: rgb(74 4 78);  |
| border-s-pink-50 | border-inline-start-color: rgb(253 242 248);  |
| border-s-pink-100 | border-inline-start-color: rgb(252 231 243);  |
| border-s-pink-200 | border-inline-start-color: rgb(251 207 232);  |
| border-s-pink-300 | border-inline-start-color: rgb(249 168 212);  |
| border-s-pink-400 | border-inline-start-color: rgb(244 114 182);  |
| border-s-pink-500 | border-inline-start-color: rgb(236 72 153);  |
| border-s-pink-600 | border-inline-start-color: rgb(219 39 119);  |
| border-s-pink-700 | border-inline-start-color: rgb(190 24 93);  |
| border-s-pink-800 | border-inline-start-color: rgb(157 23 77);  |
| border-s-pink-900 | border-inline-start-color: rgb(131 24 67);  |
| border-s-pink-950 | border-inline-start-color: rgb(80 7 36);  |
| border-s-rose-50 | border-inline-start-color: rgb(255 241 242);  |
| border-s-rose-100 | border-inline-start-color: rgb(255 228 230);  |
| border-s-rose-200 | border-inline-start-color: rgb(254 205 211);  |
| border-s-rose-300 | border-inline-start-color: rgb(253 164 175);  |
| border-s-rose-400 | border-inline-start-color: rgb(251 113 133);  |
| border-s-rose-500 | border-inline-start-color: rgb(244 63 94);  |
| border-s-rose-600 | border-inline-start-color: rgb(225 29 72);  |
| border-s-rose-700 | border-inline-start-color: rgb(190 18 60);  |
| border-s-rose-800 | border-inline-start-color: rgb(159 18 57);  |
| border-s-rose-900 | border-inline-start-color: rgb(136 19 55);  |
| border-s-rose-950 | border-inline-start-color: rgb(76 5 25);  |
| border-e-inherit | border-inline-end-color: inherit;  |
| border-e-current | border-inline-end-color: currentColor;  |
| border-e-transparent | border-inline-end-color: transparent;  |
| border-e-black | border-inline-end-color: rgb(0 0 0);  |
| border-e-white | border-inline-end-color: rgb(255 255 255);  |
| border-e-slate-50 | border-inline-end-color: rgb(248 250 252);  |
| border-e-slate-100 | border-inline-end-color: rgb(241 245 249);  |
| border-e-slate-200 | border-inline-end-color: rgb(226 232 240);  |
| border-e-slate-300 | border-inline-end-color: rgb(203 213 225);  |
| border-e-slate-400 | border-inline-end-color: rgb(148 163 184);  |
| border-e-slate-500 | border-inline-end-color: rgb(100 116 139);  |
| border-e-slate-600 | border-inline-end-color: rgb(71 85 105);  |
| border-e-slate-700 | border-inline-end-color: rgb(51 65 85);  |
| border-e-slate-800 | border-inline-end-color: rgb(30 41 59);  |
| border-e-slate-900 | border-inline-end-color: rgb(15 23 42);  |
| border-e-slate-950 | border-inline-end-color: rgb(2 6 23);  |
| border-e-gray-50 | border-inline-end-color: rgb(249 250 251);  |
| border-e-gray-100 | border-inline-end-color: rgb(243 244 246);  |
| border-e-gray-200 | border-inline-end-color: rgb(229 231 235);  |
| border-e-gray-300 | border-inline-end-color: rgb(209 213 219);  |
| border-e-gray-400 | border-inline-end-color: rgb(156 163 175);  |
| border-e-gray-500 | border-inline-end-color: rgb(107 114 128);  |
| border-e-gray-600 | border-inline-end-color: rgb(75 85 99);  |
| border-e-gray-700 | border-inline-end-color: rgb(55 65 81);  |
| border-e-gray-800 | border-inline-end-color: rgb(31 41 55);  |
| border-e-gray-900 | border-inline-end-color: rgb(17 24 39);  |
| border-e-gray-950 | border-inline-end-color: rgb(3 7 18);  |
| border-e-zinc-50 | border-inline-end-color: rgb(250 250 250);  |
| border-e-zinc-100 | border-inline-end-color: rgb(244 244 245);  |
| border-e-zinc-200 | border-inline-end-color: rgb(228 228 231);  |
| border-e-zinc-300 | border-inline-end-color: rgb(212 212 216);  |
| border-e-zinc-400 | border-inline-end-color: rgb(161 161 170);  |
| border-e-zinc-500 | border-inline-end-color: rgb(113 113 122);  |
| border-e-zinc-600 | border-inline-end-color: rgb(82 82 91);  |
| border-e-zinc-700 | border-inline-end-color: rgb(63 63 70);  |
| border-e-zinc-800 | border-inline-end-color: rgb(39 39 42);  |
| border-e-zinc-900 | border-inline-end-color: rgb(24 24 27);  |
| border-e-zinc-950 | border-inline-end-color: rgb(9 9 11);  |
| border-e-neutral-50 | border-inline-end-color: rgb(250 250 250);  |
| border-e-neutral-100 | border-inline-end-color: rgb(245 245 245);  |
| border-e-neutral-200 | border-inline-end-color: rgb(229 229 229);  |
| border-e-neutral-300 | border-inline-end-color: rgb(212 212 212);  |
| border-e-neutral-400 | border-inline-end-color: rgb(163 163 163);  |
| border-e-neutral-500 | border-inline-end-color: rgb(115 115 115);  |
| border-e-neutral-600 | border-inline-end-color: rgb(82 82 82);  |
| border-e-neutral-700 | border-inline-end-color: rgb(64 64 64);  |
| border-e-neutral-800 | border-inline-end-color: rgb(38 38 38);  |
| border-e-neutral-900 | border-inline-end-color: rgb(23 23 23);  |
| border-e-neutral-950 | border-inline-end-color: rgb(10 10 10);  |
| border-e-stone-50 | border-inline-end-color: rgb(250 250 249);  |
| border-e-stone-100 | border-inline-end-color: rgb(245 245 244);  |
| border-e-stone-200 | border-inline-end-color: rgb(231 229 228);  |
| border-e-stone-300 | border-inline-end-color: rgb(214 211 209);  |
| border-e-stone-400 | border-inline-end-color: rgb(168 162 158);  |
| border-e-stone-500 | border-inline-end-color: rgb(120 113 108);  |
| border-e-stone-600 | border-inline-end-color: rgb(87 83 78);  |
| border-e-stone-700 | border-inline-end-color: rgb(68 64 60);  |
| border-e-stone-800 | border-inline-end-color: rgb(41 37 36);  |
| border-e-stone-900 | border-inline-end-color: rgb(28 25 23);  |
| border-e-stone-950 | border-inline-end-color: rgb(12 10 9);  |
| border-e-red-50 | border-inline-end-color: rgb(254 242 242);  |
| border-e-red-100 | border-inline-end-color: rgb(254 226 226);  |
| border-e-red-200 | border-inline-end-color: rgb(254 202 202);  |
| border-e-red-300 | border-inline-end-color: rgb(252 165 165);  |
| border-e-red-400 | border-inline-end-color: rgb(248 113 113);  |
| border-e-red-500 | border-inline-end-color: rgb(239 68 68);  |
| border-e-red-600 | border-inline-end-color: rgb(220 38 38);  |
| border-e-red-700 | border-inline-end-color: rgb(185 28 28);  |
| border-e-red-800 | border-inline-end-color: rgb(153 27 27);  |
| border-e-red-900 | border-inline-end-color: rgb(127 29 29);  |
| border-e-red-950 | border-inline-end-color: rgb(69 10 10);  |
| border-e-orange-50 | border-inline-end-color: rgb(255 247 237);  |
| border-e-orange-100 | border-inline-end-color: rgb(255 237 213);  |
| border-e-orange-200 | border-inline-end-color: rgb(254 215 170);  |
| border-e-orange-300 | border-inline-end-color: rgb(253 186 116);  |
| border-e-orange-400 | border-inline-end-color: rgb(251 146 60);  |
| border-e-orange-500 | border-inline-end-color: rgb(249 115 22);  |
| border-e-orange-600 | border-inline-end-color: rgb(234 88 12);  |
| border-e-orange-700 | border-inline-end-color: rgb(194 65 12);  |
| border-e-orange-800 | border-inline-end-color: rgb(154 52 18);  |
| border-e-orange-900 | border-inline-end-color: rgb(124 45 18);  |
| border-e-orange-950 | border-inline-end-color: rgb(67 20 7);  |
| border-e-amber-50 | border-inline-end-color: rgb(255 251 235);  |
| border-e-amber-100 | border-inline-end-color: rgb(254 243 199);  |
| border-e-amber-200 | border-inline-end-color: rgb(253 230 138);  |
| border-e-amber-300 | border-inline-end-color: rgb(252 211 77);  |
| border-e-amber-400 | border-inline-end-color: rgb(251 191 36);  |
| border-e-amber-500 | border-inline-end-color: rgb(245 158 11);  |
| border-e-amber-600 | border-inline-end-color: rgb(217 119 6);  |
| border-e-amber-700 | border-inline-end-color: rgb(180 83 9);  |
| border-e-amber-800 | border-inline-end-color: rgb(146 64 14);  |
| border-e-amber-900 | border-inline-end-color: rgb(120 53 15);  |
| border-e-amber-950 | border-inline-end-color: rgb(69 26 3);  |
| border-e-yellow-50 | border-inline-end-color: rgb(254 252 232);  |
| border-e-yellow-100 | border-inline-end-color: rgb(254 249 195);  |
| border-e-yellow-200 | border-inline-end-color: rgb(254 240 138);  |
| border-e-yellow-300 | border-inline-end-color: rgb(253 224 71);  |
| border-e-yellow-400 | border-inline-end-color: rgb(250 204 21);  |
| border-e-yellow-500 | border-inline-end-color: rgb(234 179 8);  |
| border-e-yellow-600 | border-inline-end-color: rgb(202 138 4);  |
| border-e-yellow-700 | border-inline-end-color: rgb(161 98 7);  |
| border-e-yellow-800 | border-inline-end-color: rgb(133 77 14);  |
| border-e-yellow-900 | border-inline-end-color: rgb(113 63 18);  |
| border-e-yellow-950 | border-inline-end-color: rgb(66 32 6);  |
| border-e-lime-50 | border-inline-end-color: rgb(247 254 231);  |
| border-e-lime-100 | border-inline-end-color: rgb(236 252 203);  |
| border-e-lime-200 | border-inline-end-color: rgb(217 249 157);  |
| border-e-lime-300 | border-inline-end-color: rgb(190 242 100);  |
| border-e-lime-400 | border-inline-end-color: rgb(163 230 53);  |
| border-e-lime-500 | border-inline-end-color: rgb(132 204 22);  |
| border-e-lime-600 | border-inline-end-color: rgb(101 163 13);  |
| border-e-lime-700 | border-inline-end-color: rgb(77 124 15);  |
| border-e-lime-800 | border-inline-end-color: rgb(63 98 18);  |
| border-e-lime-900 | border-inline-end-color: rgb(54 83 20);  |
| border-e-lime-950 | border-inline-end-color: rgb(26 46 5);  |
| border-e-green-50 | border-inline-end-color: rgb(240 253 244);  |
| border-e-green-100 | border-inline-end-color: rgb(220 252 231);  |
| border-e-green-200 | border-inline-end-color: rgb(187 247 208);  |
| border-e-green-300 | border-inline-end-color: rgb(134 239 172);  |
| border-e-green-400 | border-inline-end-color: rgb(74 222 128);  |
| border-e-green-500 | border-inline-end-color: rgb(34 197 94);  |
| border-e-green-600 | border-inline-end-color: rgb(22 163 74);  |
| border-e-green-700 | border-inline-end-color: rgb(21 128 61);  |
| border-e-green-800 | border-inline-end-color: rgb(22 101 52);  |
| border-e-green-900 | border-inline-end-color: rgb(20 83 45);  |
| border-e-green-950 | border-inline-end-color: rgb(5 46 22);  |
| border-e-emerald-50 | border-inline-end-color: rgb(236 253 245);  |
| border-e-emerald-100 | border-inline-end-color: rgb(209 250 229);  |
| border-e-emerald-200 | border-inline-end-color: rgb(167 243 208);  |
| border-e-emerald-300 | border-inline-end-color: rgb(110 231 183);  |
| border-e-emerald-400 | border-inline-end-color: rgb(52 211 153);  |
| border-e-emerald-500 | border-inline-end-color: rgb(16 185 129);  |
| border-e-emerald-600 | border-inline-end-color: rgb(5 150 105);  |
| border-e-emerald-700 | border-inline-end-color: rgb(4 120 87);  |
| border-e-emerald-800 | border-inline-end-color: rgb(6 95 70);  |
| border-e-emerald-900 | border-inline-end-color: rgb(6 78 59);  |
| border-e-emerald-950 | border-inline-end-color: rgb(2 44 34);  |
| border-e-teal-50 | border-inline-end-color: rgb(240 253 250);  |
| border-e-teal-100 | border-inline-end-color: rgb(204 251 241);  |
| border-e-teal-200 | border-inline-end-color: rgb(153 246 228);  |
| border-e-teal-300 | border-inline-end-color: rgb(94 234 212);  |
| border-e-teal-400 | border-inline-end-color: rgb(45 212 191);  |
| border-e-teal-500 | border-inline-end-color: rgb(20 184 166);  |
| border-e-teal-600 | border-inline-end-color: rgb(13 148 136);  |
| border-e-teal-700 | border-inline-end-color: rgb(15 118 110);  |
| border-e-teal-800 | border-inline-end-color: rgb(17 94 89);  |
| border-e-teal-900 | border-inline-end-color: rgb(19 78 74);  |
| border-e-teal-950 | border-inline-end-color: rgb(4 47 46);  |
| border-e-cyan-50 | border-inline-end-color: rgb(236 254 255);  |
| border-e-cyan-100 | border-inline-end-color: rgb(207 250 254);  |
| border-e-cyan-200 | border-inline-end-color: rgb(165 243 252);  |
| border-e-cyan-300 | border-inline-end-color: rgb(103 232 249);  |
| border-e-cyan-400 | border-inline-end-color: rgb(34 211 238);  |
| border-e-cyan-500 | border-inline-end-color: rgb(6 182 212);  |
| border-e-cyan-600 | border-inline-end-color: rgb(8 145 178);  |
| border-e-cyan-700 | border-inline-end-color: rgb(14 116 144);  |
| border-e-cyan-800 | border-inline-end-color: rgb(21 94 117);  |
| border-e-cyan-900 | border-inline-end-color: rgb(22 78 99);  |
| border-e-cyan-950 | border-inline-end-color: rgb(8 51 68);  |
| border-e-sky-50 | border-inline-end-color: rgb(240 249 255);  |
| border-e-sky-100 | border-inline-end-color: rgb(224 242 254);  |
| border-e-sky-200 | border-inline-end-color: rgb(186 230 253);  |
| border-e-sky-300 | border-inline-end-color: rgb(125 211 252);  |
| border-e-sky-400 | border-inline-end-color: rgb(56 189 248);  |
| border-e-sky-500 | border-inline-end-color: rgb(14 165 233);  |
| border-e-sky-600 | border-inline-end-color: rgb(2 132 199);  |
| border-e-sky-700 | border-inline-end-color: rgb(3 105 161);  |
| border-e-sky-800 | border-inline-end-color: rgb(7 89 133);  |
| border-e-sky-900 | border-inline-end-color: rgb(12 74 110);  |
| border-e-sky-950 | border-inline-end-color: rgb(8 47 73);  |
| border-e-blue-50 | border-inline-end-color: rgb(239 246 255);  |
| border-e-blue-100 | border-inline-end-color: rgb(219 234 254);  |
| border-e-blue-200 | border-inline-end-color: rgb(191 219 254);  |
| border-e-blue-300 | border-inline-end-color: rgb(147 197 253);  |
| border-e-blue-400 | border-inline-end-color: rgb(96 165 250);  |
| border-e-blue-500 | border-inline-end-color: rgb(59 130 246);  |
| border-e-blue-600 | border-inline-end-color: rgb(37 99 235);  |
| border-e-blue-700 | border-inline-end-color: rgb(29 78 216);  |
| border-e-blue-800 | border-inline-end-color: rgb(30 64 175);  |
| border-e-blue-900 | border-inline-end-color: rgb(30 58 138);  |
| border-e-blue-950 | border-inline-end-color: rgb(23 37 84);  |
| border-e-indigo-50 | border-inline-end-color: rgb(238 242 255);  |
| border-e-indigo-100 | border-inline-end-color: rgb(224 231 255);  |
| border-e-indigo-200 | border-inline-end-color: rgb(199 210 254);  |
| border-e-indigo-300 | border-inline-end-color: rgb(165 180 252);  |
| border-e-indigo-400 | border-inline-end-color: rgb(129 140 248);  |
| border-e-indigo-500 | border-inline-end-color: rgb(99 102 241);  |
| border-e-indigo-600 | border-inline-end-color: rgb(79 70 229);  |
| border-e-indigo-700 | border-inline-end-color: rgb(67 56 202);  |
| border-e-indigo-800 | border-inline-end-color: rgb(55 48 163);  |
| border-e-indigo-900 | border-inline-end-color: rgb(49 46 129);  |
| border-e-indigo-950 | border-inline-end-color: rgb(30 27 75);  |
| border-e-violet-50 | border-inline-end-color: rgb(245 243 255);  |
| border-e-violet-100 | border-inline-end-color: rgb(237 233 254);  |
| border-e-violet-200 | border-inline-end-color: rgb(221 214 254);  |
| border-e-violet-300 | border-inline-end-color: rgb(196 181 253);  |
| border-e-violet-400 | border-inline-end-color: rgb(167 139 250);  |
| border-e-violet-500 | border-inline-end-color: rgb(139 92 246);  |
| border-e-violet-600 | border-inline-end-color: rgb(124 58 237);  |
| border-e-violet-700 | border-inline-end-color: rgb(109 40 217);  |
| border-e-violet-800 | border-inline-end-color: rgb(91 33 182);  |
| border-e-violet-900 | border-inline-end-color: rgb(76 29 149);  |
| border-e-violet-950 | border-inline-end-color: rgb(46 16 101);  |
| border-e-purple-50 | border-inline-end-color: rgb(250 245 255);  |
| border-e-purple-100 | border-inline-end-color: rgb(243 232 255);  |
| border-e-purple-200 | border-inline-end-color: rgb(233 213 255);  |
| border-e-purple-300 | border-inline-end-color: rgb(216 180 254);  |
| border-e-purple-400 | border-inline-end-color: rgb(192 132 252);  |
| border-e-purple-500 | border-inline-end-color: rgb(168 85 247);  |
| border-e-purple-600 | border-inline-end-color: rgb(147 51 234);  |
| border-e-purple-700 | border-inline-end-color: rgb(126 34 206);  |
| border-e-purple-800 | border-inline-end-color: rgb(107 33 168);  |
| border-e-purple-900 | border-inline-end-color: rgb(88 28 135);  |
| border-e-purple-950 | border-inline-end-color: rgb(59 7 100);  |
| border-e-fuchsia-50 | border-inline-end-color: rgb(253 244 255);  |
| border-e-fuchsia-100 | border-inline-end-color: rgb(250 232 255);  |
| border-e-fuchsia-200 | border-inline-end-color: rgb(245 208 254);  |
| border-e-fuchsia-300 | border-inline-end-color: rgb(240 171 252);  |
| border-e-fuchsia-400 | border-inline-end-color: rgb(232 121 249);  |
| border-e-fuchsia-500 | border-inline-end-color: rgb(217 70 239);  |
| border-e-fuchsia-600 | border-inline-end-color: rgb(192 38 211);  |
| border-e-fuchsia-700 | border-inline-end-color: rgb(162 28 175);  |
| border-e-fuchsia-800 | border-inline-end-color: rgb(134 25 143);  |
| border-e-fuchsia-900 | border-inline-end-color: rgb(112 26 117);  |
| border-e-fuchsia-950 | border-inline-end-color: rgb(74 4 78);  |
| border-e-pink-50 | border-inline-end-color: rgb(253 242 248);  |
| border-e-pink-100 | border-inline-end-color: rgb(252 231 243);  |
| border-e-pink-200 | border-inline-end-color: rgb(251 207 232);  |
| border-e-pink-300 | border-inline-end-color: rgb(249 168 212);  |
| border-e-pink-400 | border-inline-end-color: rgb(244 114 182);  |
| border-e-pink-500 | border-inline-end-color: rgb(236 72 153);  |
| border-e-pink-600 | border-inline-end-color: rgb(219 39 119);  |
| border-e-pink-700 | border-inline-end-color: rgb(190 24 93);  |
| border-e-pink-800 | border-inline-end-color: rgb(157 23 77);  |
| border-e-pink-900 | border-inline-end-color: rgb(131 24 67);  |
| border-e-pink-950 | border-inline-end-color: rgb(80 7 36);  |
| border-e-rose-50 | border-inline-end-color: rgb(255 241 242);  |
| border-e-rose-100 | border-inline-end-color: rgb(255 228 230);  |
| border-e-rose-200 | border-inline-end-color: rgb(254 205 211);  |
| border-e-rose-300 | border-inline-end-color: rgb(253 164 175);  |
| border-e-rose-400 | border-inline-end-color: rgb(251 113 133);  |
| border-e-rose-500 | border-inline-end-color: rgb(244 63 94);  |
| border-e-rose-600 | border-inline-end-color: rgb(225 29 72);  |
| border-e-rose-700 | border-inline-end-color: rgb(190 18 60);  |
| border-e-rose-800 | border-inline-end-color: rgb(159 18 57);  |
| border-e-rose-900 | border-inline-end-color: rgb(136 19 55);  |
| border-e-rose-950 | border-inline-end-color: rgb(76 5 25);  |
| border-t-inherit | border-top-color: inherit;  |
| border-t-current | border-top-color: currentColor;  |
| border-t-transparent | border-top-color: transparent;  |
| border-t-black | border-top-color: rgb(0 0 0);  |
| border-t-white | border-top-color: rgb(255 255 255);  |
| border-t-slate-50 | border-top-color: rgb(248 250 252);  |
| border-t-slate-100 | border-top-color: rgb(241 245 249);  |
| border-t-slate-200 | border-top-color: rgb(226 232 240);  |
| border-t-slate-300 | border-top-color: rgb(203 213 225);  |
| border-t-slate-400 | border-top-color: rgb(148 163 184);  |
| border-t-slate-500 | border-top-color: rgb(100 116 139);  |
| border-t-slate-600 | border-top-color: rgb(71 85 105);  |
| border-t-slate-700 | border-top-color: rgb(51 65 85);  |
| border-t-slate-800 | border-top-color: rgb(30 41 59);  |
| border-t-slate-900 | border-top-color: rgb(15 23 42);  |
| border-t-slate-950 | border-top-color: rgb(2 6 23);  |
| border-t-gray-50 | border-top-color: rgb(249 250 251);  |
| border-t-gray-100 | border-top-color: rgb(243 244 246);  |
| border-t-gray-200 | border-top-color: rgb(229 231 235);  |
| border-t-gray-300 | border-top-color: rgb(209 213 219);  |
| border-t-gray-400 | border-top-color: rgb(156 163 175);  |
| border-t-gray-500 | border-top-color: rgb(107 114 128);  |
| border-t-gray-600 | border-top-color: rgb(75 85 99);  |
| border-t-gray-700 | border-top-color: rgb(55 65 81);  |
| border-t-gray-800 | border-top-color: rgb(31 41 55);  |
| border-t-gray-900 | border-top-color: rgb(17 24 39);  |
| border-t-gray-950 | border-top-color: rgb(3 7 18);  |
| border-t-zinc-50 | border-top-color: rgb(250 250 250);  |
| border-t-zinc-100 | border-top-color: rgb(244 244 245);  |
| border-t-zinc-200 | border-top-color: rgb(228 228 231);  |
| border-t-zinc-300 | border-top-color: rgb(212 212 216);  |
| border-t-zinc-400 | border-top-color: rgb(161 161 170);  |
| border-t-zinc-500 | border-top-color: rgb(113 113 122);  |
| border-t-zinc-600 | border-top-color: rgb(82 82 91);  |
| border-t-zinc-700 | border-top-color: rgb(63 63 70);  |
| border-t-zinc-800 | border-top-color: rgb(39 39 42);  |
| border-t-zinc-900 | border-top-color: rgb(24 24 27);  |
| border-t-zinc-950 | border-top-color: rgb(9 9 11);  |
| border-t-neutral-50 | border-top-color: rgb(250 250 250);  |
| border-t-neutral-100 | border-top-color: rgb(245 245 245);  |
| border-t-neutral-200 | border-top-color: rgb(229 229 229);  |
| border-t-neutral-300 | border-top-color: rgb(212 212 212);  |
| border-t-neutral-400 | border-top-color: rgb(163 163 163);  |
| border-t-neutral-500 | border-top-color: rgb(115 115 115);  |
| border-t-neutral-600 | border-top-color: rgb(82 82 82);  |
| border-t-neutral-700 | border-top-color: rgb(64 64 64);  |
| border-t-neutral-800 | border-top-color: rgb(38 38 38);  |
| border-t-neutral-900 | border-top-color: rgb(23 23 23);  |
| border-t-neutral-950 | border-top-color: rgb(10 10 10);  |
| border-t-stone-50 | border-top-color: rgb(250 250 249);  |
| border-t-stone-100 | border-top-color: rgb(245 245 244);  |
| border-t-stone-200 | border-top-color: rgb(231 229 228);  |
| border-t-stone-300 | border-top-color: rgb(214 211 209);  |
| border-t-stone-400 | border-top-color: rgb(168 162 158);  |
| border-t-stone-500 | border-top-color: rgb(120 113 108);  |
| border-t-stone-600 | border-top-color: rgb(87 83 78);  |
| border-t-stone-700 | border-top-color: rgb(68 64 60);  |
| border-t-stone-800 | border-top-color: rgb(41 37 36);  |
| border-t-stone-900 | border-top-color: rgb(28 25 23);  |
| border-t-stone-950 | border-top-color: rgb(12 10 9);  |
| border-t-red-50 | border-top-color: rgb(254 242 242);  |
| border-t-red-100 | border-top-color: rgb(254 226 226);  |
| border-t-red-200 | border-top-color: rgb(254 202 202);  |
| border-t-red-300 | border-top-color: rgb(252 165 165);  |
| border-t-red-400 | border-top-color: rgb(248 113 113);  |
| border-t-red-500 | border-top-color: rgb(239 68 68);  |
| border-t-red-600 | border-top-color: rgb(220 38 38);  |
| border-t-red-700 | border-top-color: rgb(185 28 28);  |
| border-t-red-800 | border-top-color: rgb(153 27 27);  |
| border-t-red-900 | border-top-color: rgb(127 29 29);  |
| border-t-red-950 | border-top-color: rgb(69 10 10);  |
| border-t-orange-50 | border-top-color: rgb(255 247 237);  |
| border-t-orange-100 | border-top-color: rgb(255 237 213);  |
| border-t-orange-200 | border-top-color: rgb(254 215 170);  |
| border-t-orange-300 | border-top-color: rgb(253 186 116);  |
| border-t-orange-400 | border-top-color: rgb(251 146 60);  |
| border-t-orange-500 | border-top-color: rgb(249 115 22);  |
| border-t-orange-600 | border-top-color: rgb(234 88 12);  |
| border-t-orange-700 | border-top-color: rgb(194 65 12);  |
| border-t-orange-800 | border-top-color: rgb(154 52 18);  |
| border-t-orange-900 | border-top-color: rgb(124 45 18);  |
| border-t-orange-950 | border-top-color: rgb(67 20 7);  |
| border-t-amber-50 | border-top-color: rgb(255 251 235);  |
| border-t-amber-100 | border-top-color: rgb(254 243 199);  |
| border-t-amber-200 | border-top-color: rgb(253 230 138);  |
| border-t-amber-300 | border-top-color: rgb(252 211 77);  |
| border-t-amber-400 | border-top-color: rgb(251 191 36);  |
| border-t-amber-500 | border-top-color: rgb(245 158 11);  |
| border-t-amber-600 | border-top-color: rgb(217 119 6);  |
| border-t-amber-700 | border-top-color: rgb(180 83 9);  |
| border-t-amber-800 | border-top-color: rgb(146 64 14);  |
| border-t-amber-900 | border-top-color: rgb(120 53 15);  |
| border-t-amber-950 | border-top-color: rgb(69 26 3);  |
| border-t-yellow-50 | border-top-color: rgb(254 252 232);  |
| border-t-yellow-100 | border-top-color: rgb(254 249 195);  |
| border-t-yellow-200 | border-top-color: rgb(254 240 138);  |
| border-t-yellow-300 | border-top-color: rgb(253 224 71);  |
| border-t-yellow-400 | border-top-color: rgb(250 204 21);  |
| border-t-yellow-500 | border-top-color: rgb(234 179 8);  |
| border-t-yellow-600 | border-top-color: rgb(202 138 4);  |
| border-t-yellow-700 | border-top-color: rgb(161 98 7);  |
| border-t-yellow-800 | border-top-color: rgb(133 77 14);  |
| border-t-yellow-900 | border-top-color: rgb(113 63 18);  |
| border-t-yellow-950 | border-top-color: rgb(66 32 6);  |
| border-t-lime-50 | border-top-color: rgb(247 254 231);  |
| border-t-lime-100 | border-top-color: rgb(236 252 203);  |
| border-t-lime-200 | border-top-color: rgb(217 249 157);  |
| border-t-lime-300 | border-top-color: rgb(190 242 100);  |
| border-t-lime-400 | border-top-color: rgb(163 230 53);  |
| border-t-lime-500 | border-top-color: rgb(132 204 22);  |
| border-t-lime-600 | border-top-color: rgb(101 163 13);  |
| border-t-lime-700 | border-top-color: rgb(77 124 15);  |
| border-t-lime-800 | border-top-color: rgb(63 98 18);  |
| border-t-lime-900 | border-top-color: rgb(54 83 20);  |
| border-t-lime-950 | border-top-color: rgb(26 46 5);  |
| border-t-green-50 | border-top-color: rgb(240 253 244);  |
| border-t-green-100 | border-top-color: rgb(220 252 231);  |
| border-t-green-200 | border-top-color: rgb(187 247 208);  |
| border-t-green-300 | border-top-color: rgb(134 239 172);  |
| border-t-green-400 | border-top-color: rgb(74 222 128);  |
| border-t-green-500 | border-top-color: rgb(34 197 94);  |
| border-t-green-600 | border-top-color: rgb(22 163 74);  |
| border-t-green-700 | border-top-color: rgb(21 128 61);  |
| border-t-green-800 | border-top-color: rgb(22 101 52);  |
| border-t-green-900 | border-top-color: rgb(20 83 45);  |
| border-t-green-950 | border-top-color: rgb(5 46 22);  |
| border-t-emerald-50 | border-top-color: rgb(236 253 245);  |
| border-t-emerald-100 | border-top-color: rgb(209 250 229);  |
| border-t-emerald-200 | border-top-color: rgb(167 243 208);  |
| border-t-emerald-300 | border-top-color: rgb(110 231 183);  |
| border-t-emerald-400 | border-top-color: rgb(52 211 153);  |
| border-t-emerald-500 | border-top-color: rgb(16 185 129);  |
| border-t-emerald-600 | border-top-color: rgb(5 150 105);  |
| border-t-emerald-700 | border-top-color: rgb(4 120 87);  |
| border-t-emerald-800 | border-top-color: rgb(6 95 70);  |
| border-t-emerald-900 | border-top-color: rgb(6 78 59);  |
| border-t-emerald-950 | border-top-color: rgb(2 44 34);  |
| border-t-teal-50 | border-top-color: rgb(240 253 250);  |
| border-t-teal-100 | border-top-color: rgb(204 251 241);  |
| border-t-teal-200 | border-top-color: rgb(153 246 228);  |
| border-t-teal-300 | border-top-color: rgb(94 234 212);  |
| border-t-teal-400 | border-top-color: rgb(45 212 191);  |
| border-t-teal-500 | border-top-color: rgb(20 184 166);  |
| border-t-teal-600 | border-top-color: rgb(13 148 136);  |
| border-t-teal-700 | border-top-color: rgb(15 118 110);  |
| border-t-teal-800 | border-top-color: rgb(17 94 89);  |
| border-t-teal-900 | border-top-color: rgb(19 78 74);  |
| border-t-teal-950 | border-top-color: rgb(4 47 46);  |
| border-t-cyan-50 | border-top-color: rgb(236 254 255);  |
| border-t-cyan-100 | border-top-color: rgb(207 250 254);  |
| border-t-cyan-200 | border-top-color: rgb(165 243 252);  |
| border-t-cyan-300 | border-top-color: rgb(103 232 249);  |
| border-t-cyan-400 | border-top-color: rgb(34 211 238);  |
| border-t-cyan-500 | border-top-color: rgb(6 182 212);  |
| border-t-cyan-600 | border-top-color: rgb(8 145 178);  |
| border-t-cyan-700 | border-top-color: rgb(14 116 144);  |
| border-t-cyan-800 | border-top-color: rgb(21 94 117);  |
| border-t-cyan-900 | border-top-color: rgb(22 78 99);  |
| border-t-cyan-950 | border-top-color: rgb(8 51 68);  |
| border-t-sky-50 | border-top-color: rgb(240 249 255);  |
| border-t-sky-100 | border-top-color: rgb(224 242 254);  |
| border-t-sky-200 | border-top-color: rgb(186 230 253);  |
| border-t-sky-300 | border-top-color: rgb(125 211 252);  |
| border-t-sky-400 | border-top-color: rgb(56 189 248);  |
| border-t-sky-500 | border-top-color: rgb(14 165 233);  |
| border-t-sky-600 | border-top-color: rgb(2 132 199);  |
| border-t-sky-700 | border-top-color: rgb(3 105 161);  |
| border-t-sky-800 | border-top-color: rgb(7 89 133);  |
| border-t-sky-900 | border-top-color: rgb(12 74 110);  |
| border-t-sky-950 | border-top-color: rgb(8 47 73);  |
| border-t-blue-50 | border-top-color: rgb(239 246 255);  |
| border-t-blue-100 | border-top-color: rgb(219 234 254);  |
| border-t-blue-200 | border-top-color: rgb(191 219 254);  |
| border-t-blue-300 | border-top-color: rgb(147 197 253);  |
| border-t-blue-400 | border-top-color: rgb(96 165 250);  |
| border-t-blue-500 | border-top-color: rgb(59 130 246);  |
| border-t-blue-600 | border-top-color: rgb(37 99 235);  |
| border-t-blue-700 | border-top-color: rgb(29 78 216);  |
| border-t-blue-800 | border-top-color: rgb(30 64 175);  |
| border-t-blue-900 | border-top-color: rgb(30 58 138);  |
| border-t-blue-950 | border-top-color: rgb(23 37 84);  |
| border-t-indigo-50 | border-top-color: rgb(238 242 255);  |
| border-t-indigo-100 | border-top-color: rgb(224 231 255);  |
| border-t-indigo-200 | border-top-color: rgb(199 210 254);  |
| border-t-indigo-300 | border-top-color: rgb(165 180 252);  |
| border-t-indigo-400 | border-top-color: rgb(129 140 248);  |
| border-t-indigo-500 | border-top-color: rgb(99 102 241);  |
| border-t-indigo-600 | border-top-color: rgb(79 70 229);  |
| border-t-indigo-700 | border-top-color: rgb(67 56 202);  |
| border-t-indigo-800 | border-top-color: rgb(55 48 163);  |
| border-t-indigo-900 | border-top-color: rgb(49 46 129);  |
| border-t-indigo-950 | border-top-color: rgb(30 27 75);  |
| border-t-violet-50 | border-top-color: rgb(245 243 255);  |
| border-t-violet-100 | border-top-color: rgb(237 233 254);  |
| border-t-violet-200 | border-top-color: rgb(221 214 254);  |
| border-t-violet-300 | border-top-color: rgb(196 181 253);  |
| border-t-violet-400 | border-top-color: rgb(167 139 250);  |
| border-t-violet-500 | border-top-color: rgb(139 92 246);  |
| border-t-violet-600 | border-top-color: rgb(124 58 237);  |
| border-t-violet-700 | border-top-color: rgb(109 40 217);  |
| border-t-violet-800 | border-top-color: rgb(91 33 182);  |
| border-t-violet-900 | border-top-color: rgb(76 29 149);  |
| border-t-violet-950 | border-top-color: rgb(46 16 101);  |
| border-t-purple-50 | border-top-color: rgb(250 245 255);  |
| border-t-purple-100 | border-top-color: rgb(243 232 255);  |
| border-t-purple-200 | border-top-color: rgb(233 213 255);  |
| border-t-purple-300 | border-top-color: rgb(216 180 254);  |
| border-t-purple-400 | border-top-color: rgb(192 132 252);  |
| border-t-purple-500 | border-top-color: rgb(168 85 247);  |
| border-t-purple-600 | border-top-color: rgb(147 51 234);  |
| border-t-purple-700 | border-top-color: rgb(126 34 206);  |
| border-t-purple-800 | border-top-color: rgb(107 33 168);  |
| border-t-purple-900 | border-top-color: rgb(88 28 135);  |
| border-t-purple-950 | border-top-color: rgb(59 7 100);  |
| border-t-fuchsia-50 | border-top-color: rgb(253 244 255);  |
| border-t-fuchsia-100 | border-top-color: rgb(250 232 255);  |
| border-t-fuchsia-200 | border-top-color: rgb(245 208 254);  |
| border-t-fuchsia-300 | border-top-color: rgb(240 171 252);  |
| border-t-fuchsia-400 | border-top-color: rgb(232 121 249);  |
| border-t-fuchsia-500 | border-top-color: rgb(217 70 239);  |
| border-t-fuchsia-600 | border-top-color: rgb(192 38 211);  |
| border-t-fuchsia-700 | border-top-color: rgb(162 28 175);  |
| border-t-fuchsia-800 | border-top-color: rgb(134 25 143);  |
| border-t-fuchsia-900 | border-top-color: rgb(112 26 117);  |
| border-t-fuchsia-950 | border-top-color: rgb(74 4 78);  |
| border-t-pink-50 | border-top-color: rgb(253 242 248);  |
| border-t-pink-100 | border-top-color: rgb(252 231 243);  |
| border-t-pink-200 | border-top-color: rgb(251 207 232);  |
| border-t-pink-300 | border-top-color: rgb(249 168 212);  |
| border-t-pink-400 | border-top-color: rgb(244 114 182);  |
| border-t-pink-500 | border-top-color: rgb(236 72 153);  |
| border-t-pink-600 | border-top-color: rgb(219 39 119);  |
| border-t-pink-700 | border-top-color: rgb(190 24 93);  |
| border-t-pink-800 | border-top-color: rgb(157 23 77);  |
| border-t-pink-900 | border-top-color: rgb(131 24 67);  |
| border-t-pink-950 | border-top-color: rgb(80 7 36);  |
| border-t-rose-50 | border-top-color: rgb(255 241 242);  |
| border-t-rose-100 | border-top-color: rgb(255 228 230);  |
| border-t-rose-200 | border-top-color: rgb(254 205 211);  |
| border-t-rose-300 | border-top-color: rgb(253 164 175);  |
| border-t-rose-400 | border-top-color: rgb(251 113 133);  |
| border-t-rose-500 | border-top-color: rgb(244 63 94);  |
| border-t-rose-600 | border-top-color: rgb(225 29 72);  |
| border-t-rose-700 | border-top-color: rgb(190 18 60);  |
| border-t-rose-800 | border-top-color: rgb(159 18 57);  |
| border-t-rose-900 | border-top-color: rgb(136 19 55);  |
| border-t-rose-950 | border-top-color: rgb(76 5 25);  |
| border-r-inherit | border-right-color: inherit;  |
| border-r-current | border-right-color: currentColor;  |
| border-r-transparent | border-right-color: transparent;  |
| border-r-black | border-right-color: rgb(0 0 0);  |
| border-r-white | border-right-color: rgb(255 255 255);  |
| border-r-slate-50 | border-right-color: rgb(248 250 252);  |
| border-r-slate-100 | border-right-color: rgb(241 245 249);  |
| border-r-slate-200 | border-right-color: rgb(226 232 240);  |
| border-r-slate-300 | border-right-color: rgb(203 213 225);  |
| border-r-slate-400 | border-right-color: rgb(148 163 184);  |
| border-r-slate-500 | border-right-color: rgb(100 116 139);  |
| border-r-slate-600 | border-right-color: rgb(71 85 105);  |
| border-r-slate-700 | border-right-color: rgb(51 65 85);  |
| border-r-slate-800 | border-right-color: rgb(30 41 59);  |
| border-r-slate-900 | border-right-color: rgb(15 23 42);  |
| border-r-slate-950 | border-right-color: rgb(2 6 23);  |
| border-r-gray-50 | border-right-color: rgb(249 250 251);  |
| border-r-gray-100 | border-right-color: rgb(243 244 246);  |
| border-r-gray-200 | border-right-color: rgb(229 231 235);  |
| border-r-gray-300 | border-right-color: rgb(209 213 219);  |
| border-r-gray-400 | border-right-color: rgb(156 163 175);  |
| border-r-gray-500 | border-right-color: rgb(107 114 128);  |
| border-r-gray-600 | border-right-color: rgb(75 85 99);  |
| border-r-gray-700 | border-right-color: rgb(55 65 81);  |
| border-r-gray-800 | border-right-color: rgb(31 41 55);  |
| border-r-gray-900 | border-right-color: rgb(17 24 39);  |
| border-r-gray-950 | border-right-color: rgb(3 7 18);  |
| border-r-zinc-50 | border-right-color: rgb(250 250 250);  |
| border-r-zinc-100 | border-right-color: rgb(244 244 245);  |
| border-r-zinc-200 | border-right-color: rgb(228 228 231);  |
| border-r-zinc-300 | border-right-color: rgb(212 212 216);  |
| border-r-zinc-400 | border-right-color: rgb(161 161 170);  |
| border-r-zinc-500 | border-right-color: rgb(113 113 122);  |
| border-r-zinc-600 | border-right-color: rgb(82 82 91);  |
| border-r-zinc-700 | border-right-color: rgb(63 63 70);  |
| border-r-zinc-800 | border-right-color: rgb(39 39 42);  |
| border-r-zinc-900 | border-right-color: rgb(24 24 27);  |
| border-r-zinc-950 | border-right-color: rgb(9 9 11);  |
| border-r-neutral-50 | border-right-color: rgb(250 250 250);  |
| border-r-neutral-100 | border-right-color: rgb(245 245 245);  |
| border-r-neutral-200 | border-right-color: rgb(229 229 229);  |
| border-r-neutral-300 | border-right-color: rgb(212 212 212);  |
| border-r-neutral-400 | border-right-color: rgb(163 163 163);  |
| border-r-neutral-500 | border-right-color: rgb(115 115 115);  |
| border-r-neutral-600 | border-right-color: rgb(82 82 82);  |
| border-r-neutral-700 | border-right-color: rgb(64 64 64);  |
| border-r-neutral-800 | border-right-color: rgb(38 38 38);  |
| border-r-neutral-900 | border-right-color: rgb(23 23 23);  |
| border-r-neutral-950 | border-right-color: rgb(10 10 10);  |
| border-r-stone-50 | border-right-color: rgb(250 250 249);  |
| border-r-stone-100 | border-right-color: rgb(245 245 244);  |
| border-r-stone-200 | border-right-color: rgb(231 229 228);  |
| border-r-stone-300 | border-right-color: rgb(214 211 209);  |
| border-r-stone-400 | border-right-color: rgb(168 162 158);  |
| border-r-stone-500 | border-right-color: rgb(120 113 108);  |
| border-r-stone-600 | border-right-color: rgb(87 83 78);  |
| border-r-stone-700 | border-right-color: rgb(68 64 60);  |
| border-r-stone-800 | border-right-color: rgb(41 37 36);  |
| border-r-stone-900 | border-right-color: rgb(28 25 23);  |
| border-r-stone-950 | border-right-color: rgb(12 10 9);  |
| border-r-red-50 | border-right-color: rgb(254 242 242);  |
| border-r-red-100 | border-right-color: rgb(254 226 226);  |
| border-r-red-200 | border-right-color: rgb(254 202 202);  |
| border-r-red-300 | border-right-color: rgb(252 165 165);  |
| border-r-red-400 | border-right-color: rgb(248 113 113);  |
| border-r-red-500 | border-right-color: rgb(239 68 68);  |
| border-r-red-600 | border-right-color: rgb(220 38 38);  |
| border-r-red-700 | border-right-color: rgb(185 28 28);  |
| border-r-red-800 | border-right-color: rgb(153 27 27);  |
| border-r-red-900 | border-right-color: rgb(127 29 29);  |
| border-r-red-950 | border-right-color: rgb(69 10 10);  |
| border-r-orange-50 | border-right-color: rgb(255 247 237);  |
| border-r-orange-100 | border-right-color: rgb(255 237 213);  |
| border-r-orange-200 | border-right-color: rgb(254 215 170);  |
| border-r-orange-300 | border-right-color: rgb(253 186 116);  |
| border-r-orange-400 | border-right-color: rgb(251 146 60);  |
| border-r-orange-500 | border-right-color: rgb(249 115 22);  |
| border-r-orange-600 | border-right-color: rgb(234 88 12);  |
| border-r-orange-700 | border-right-color: rgb(194 65 12);  |
| border-r-orange-800 | border-right-color: rgb(154 52 18);  |
| border-r-orange-900 | border-right-color: rgb(124 45 18);  |
| border-r-orange-950 | border-right-color: rgb(67 20 7);  |
| border-r-amber-50 | border-right-color: rgb(255 251 235);  |
| border-r-amber-100 | border-right-color: rgb(254 243 199);  |
| border-r-amber-200 | border-right-color: rgb(253 230 138);  |
| border-r-amber-300 | border-right-color: rgb(252 211 77);  |
| border-r-amber-400 | border-right-color: rgb(251 191 36);  |
| border-r-amber-500 | border-right-color: rgb(245 158 11);  |
| border-r-amber-600 | border-right-color: rgb(217 119 6);  |
| border-r-amber-700 | border-right-color: rgb(180 83 9);  |
| border-r-amber-800 | border-right-color: rgb(146 64 14);  |
| border-r-amber-900 | border-right-color: rgb(120 53 15);  |
| border-r-amber-950 | border-right-color: rgb(69 26 3);  |
| border-r-yellow-50 | border-right-color: rgb(254 252 232);  |
| border-r-yellow-100 | border-right-color: rgb(254 249 195);  |
| border-r-yellow-200 | border-right-color: rgb(254 240 138);  |
| border-r-yellow-300 | border-right-color: rgb(253 224 71);  |
| border-r-yellow-400 | border-right-color: rgb(250 204 21);  |
| border-r-yellow-500 | border-right-color: rgb(234 179 8);  |
| border-r-yellow-600 | border-right-color: rgb(202 138 4);  |
| border-r-yellow-700 | border-right-color: rgb(161 98 7);  |
| border-r-yellow-800 | border-right-color: rgb(133 77 14);  |
| border-r-yellow-900 | border-right-color: rgb(113 63 18);  |
| border-r-yellow-950 | border-right-color: rgb(66 32 6);  |
| border-r-lime-50 | border-right-color: rgb(247 254 231);  |
| border-r-lime-100 | border-right-color: rgb(236 252 203);  |
| border-r-lime-200 | border-right-color: rgb(217 249 157);  |
| border-r-lime-300 | border-right-color: rgb(190 242 100);  |
| border-r-lime-400 | border-right-color: rgb(163 230 53);  |
| border-r-lime-500 | border-right-color: rgb(132 204 22);  |
| border-r-lime-600 | border-right-color: rgb(101 163 13);  |
| border-r-lime-700 | border-right-color: rgb(77 124 15);  |
| border-r-lime-800 | border-right-color: rgb(63 98 18);  |
| border-r-lime-900 | border-right-color: rgb(54 83 20);  |
| border-r-lime-950 | border-right-color: rgb(26 46 5);  |
| border-r-green-50 | border-right-color: rgb(240 253 244);  |
| border-r-green-100 | border-right-color: rgb(220 252 231);  |
| border-r-green-200 | border-right-color: rgb(187 247 208);  |
| border-r-green-300 | border-right-color: rgb(134 239 172);  |
| border-r-green-400 | border-right-color: rgb(74 222 128);  |
| border-r-green-500 | border-right-color: rgb(34 197 94);  |
| border-r-green-600 | border-right-color: rgb(22 163 74);  |
| border-r-green-700 | border-right-color: rgb(21 128 61);  |
| border-r-green-800 | border-right-color: rgb(22 101 52);  |
| border-r-green-900 | border-right-color: rgb(20 83 45);  |
| border-r-green-950 | border-right-color: rgb(5 46 22);  |
| border-r-emerald-50 | border-right-color: rgb(236 253 245);  |
| border-r-emerald-100 | border-right-color: rgb(209 250 229);  |
| border-r-emerald-200 | border-right-color: rgb(167 243 208);  |
| border-r-emerald-300 | border-right-color: rgb(110 231 183);  |
| border-r-emerald-400 | border-right-color: rgb(52 211 153);  |
| border-r-emerald-500 | border-right-color: rgb(16 185 129);  |
| border-r-emerald-600 | border-right-color: rgb(5 150 105);  |
| border-r-emerald-700 | border-right-color: rgb(4 120 87);  |
| border-r-emerald-800 | border-right-color: rgb(6 95 70);  |
| border-r-emerald-900 | border-right-color: rgb(6 78 59);  |
| border-r-emerald-950 | border-right-color: rgb(2 44 34);  |
| border-r-teal-50 | border-right-color: rgb(240 253 250);  |
| border-r-teal-100 | border-right-color: rgb(204 251 241);  |
| border-r-teal-200 | border-right-color: rgb(153 246 228);  |
| border-r-teal-300 | border-right-color: rgb(94 234 212);  |
| border-r-teal-400 | border-right-color: rgb(45 212 191);  |
| border-r-teal-500 | border-right-color: rgb(20 184 166);  |
| border-r-teal-600 | border-right-color: rgb(13 148 136);  |
| border-r-teal-700 | border-right-color: rgb(15 118 110);  |
| border-r-teal-800 | border-right-color: rgb(17 94 89);  |
| border-r-teal-900 | border-right-color: rgb(19 78 74);  |
| border-r-teal-950 | border-right-color: rgb(4 47 46);  |
| border-r-cyan-50 | border-right-color: rgb(236 254 255);  |
| border-r-cyan-100 | border-right-color: rgb(207 250 254);  |
| border-r-cyan-200 | border-right-color: rgb(165 243 252);  |
| border-r-cyan-300 | border-right-color: rgb(103 232 249);  |
| border-r-cyan-400 | border-right-color: rgb(34 211 238);  |
| border-r-cyan-500 | border-right-color: rgb(6 182 212);  |
| border-r-cyan-600 | border-right-color: rgb(8 145 178);  |
| border-r-cyan-700 | border-right-color: rgb(14 116 144);  |
| border-r-cyan-800 | border-right-color: rgb(21 94 117);  |
| border-r-cyan-900 | border-right-color: rgb(22 78 99);  |
| border-r-cyan-950 | border-right-color: rgb(8 51 68);  |
| border-r-sky-50 | border-right-color: rgb(240 249 255);  |
| border-r-sky-100 | border-right-color: rgb(224 242 254);  |
| border-r-sky-200 | border-right-color: rgb(186 230 253);  |
| border-r-sky-300 | border-right-color: rgb(125 211 252);  |
| border-r-sky-400 | border-right-color: rgb(56 189 248);  |
| border-r-sky-500 | border-right-color: rgb(14 165 233);  |
| border-r-sky-600 | border-right-color: rgb(2 132 199);  |
| border-r-sky-700 | border-right-color: rgb(3 105 161);  |
| border-r-sky-800 | border-right-color: rgb(7 89 133);  |
| border-r-sky-900 | border-right-color: rgb(12 74 110);  |
| border-r-sky-950 | border-right-color: rgb(8 47 73);  |
| border-r-blue-50 | border-right-color: rgb(239 246 255);  |
| border-r-blue-100 | border-right-color: rgb(219 234 254);  |
| border-r-blue-200 | border-right-color: rgb(191 219 254);  |
| border-r-blue-300 | border-right-color: rgb(147 197 253);  |
| border-r-blue-400 | border-right-color: rgb(96 165 250);  |
| border-r-blue-500 | border-right-color: rgb(59 130 246);  |
| border-r-blue-600 | border-right-color: rgb(37 99 235);  |
| border-r-blue-700 | border-right-color: rgb(29 78 216);  |
| border-r-blue-800 | border-right-color: rgb(30 64 175);  |
| border-r-blue-900 | border-right-color: rgb(30 58 138);  |
| border-r-blue-950 | border-right-color: rgb(23 37 84);  |
| border-r-indigo-50 | border-right-color: rgb(238 242 255);  |
| border-r-indigo-100 | border-right-color: rgb(224 231 255);  |
| border-r-indigo-200 | border-right-color: rgb(199 210 254);  |
| border-r-indigo-300 | border-right-color: rgb(165 180 252);  |
| border-r-indigo-400 | border-right-color: rgb(129 140 248);  |
| border-r-indigo-500 | border-right-color: rgb(99 102 241);  |
| border-r-indigo-600 | border-right-color: rgb(79 70 229);  |
| border-r-indigo-700 | border-right-color: rgb(67 56 202);  |
| border-r-indigo-800 | border-right-color: rgb(55 48 163);  |
| border-r-indigo-900 | border-right-color: rgb(49 46 129);  |
| border-r-indigo-950 | border-right-color: rgb(30 27 75);  |
| border-r-violet-50 | border-right-color: rgb(245 243 255);  |
| border-r-violet-100 | border-right-color: rgb(237 233 254);  |
| border-r-violet-200 | border-right-color: rgb(221 214 254);  |
| border-r-violet-300 | border-right-color: rgb(196 181 253);  |
| border-r-violet-400 | border-right-color: rgb(167 139 250);  |
| border-r-violet-500 | border-right-color: rgb(139 92 246);  |
| border-r-violet-600 | border-right-color: rgb(124 58 237);  |
| border-r-violet-700 | border-right-color: rgb(109 40 217);  |
| border-r-violet-800 | border-right-color: rgb(91 33 182);  |
| border-r-violet-900 | border-right-color: rgb(76 29 149);  |
| border-r-violet-950 | border-right-color: rgb(46 16 101);  |
| border-r-purple-50 | border-right-color: rgb(250 245 255);  |
| border-r-purple-100 | border-right-color: rgb(243 232 255);  |
| border-r-purple-200 | border-right-color: rgb(233 213 255);  |
| border-r-purple-300 | border-right-color: rgb(216 180 254);  |
| border-r-purple-400 | border-right-color: rgb(192 132 252);  |
| border-r-purple-500 | border-right-color: rgb(168 85 247);  |
| border-r-purple-600 | border-right-color: rgb(147 51 234);  |
| border-r-purple-700 | border-right-color: rgb(126 34 206);  |
| border-r-purple-800 | border-right-color: rgb(107 33 168);  |
| border-r-purple-900 | border-right-color: rgb(88 28 135);  |
| border-r-purple-950 | border-right-color: rgb(59 7 100);  |
| border-r-fuchsia-50 | border-right-color: rgb(253 244 255);  |
| border-r-fuchsia-100 | border-right-color: rgb(250 232 255);  |
| border-r-fuchsia-200 | border-right-color: rgb(245 208 254);  |
| border-r-fuchsia-300 | border-right-color: rgb(240 171 252);  |
| border-r-fuchsia-400 | border-right-color: rgb(232 121 249);  |
| border-r-fuchsia-500 | border-right-color: rgb(217 70 239);  |
| border-r-fuchsia-600 | border-right-color: rgb(192 38 211);  |
| border-r-fuchsia-700 | border-right-color: rgb(162 28 175);  |
| border-r-fuchsia-800 | border-right-color: rgb(134 25 143);  |
| border-r-fuchsia-900 | border-right-color: rgb(112 26 117);  |
| border-r-fuchsia-950 | border-right-color: rgb(74 4 78);  |
| border-r-pink-50 | border-right-color: rgb(253 242 248);  |
| border-r-pink-100 | border-right-color: rgb(252 231 243);  |
| border-r-pink-200 | border-right-color: rgb(251 207 232);  |
| border-r-pink-300 | border-right-color: rgb(249 168 212);  |
| border-r-pink-400 | border-right-color: rgb(244 114 182);  |
| border-r-pink-500 | border-right-color: rgb(236 72 153);  |
| border-r-pink-600 | border-right-color: rgb(219 39 119);  |
| border-r-pink-700 | border-right-color: rgb(190 24 93);  |
| border-r-pink-800 | border-right-color: rgb(157 23 77);  |
| border-r-pink-900 | border-right-color: rgb(131 24 67);  |
| border-r-pink-950 | border-right-color: rgb(80 7 36);  |
| border-r-rose-50 | border-right-color: rgb(255 241 242);  |
| border-r-rose-100 | border-right-color: rgb(255 228 230);  |
| border-r-rose-200 | border-right-color: rgb(254 205 211);  |
| border-r-rose-300 | border-right-color: rgb(253 164 175);  |
| border-r-rose-400 | border-right-color: rgb(251 113 133);  |
| border-r-rose-500 | border-right-color: rgb(244 63 94);  |
| border-r-rose-600 | border-right-color: rgb(225 29 72);  |
| border-r-rose-700 | border-right-color: rgb(190 18 60);  |
| border-r-rose-800 | border-right-color: rgb(159 18 57);  |
| border-r-rose-900 | border-right-color: rgb(136 19 55);  |
| border-r-rose-950 | border-right-color: rgb(76 5 25);  |
| border-b-inherit | border-bottom-color: inherit;  |
| border-b-current | border-bottom-color: currentColor;  |
| border-b-transparent | border-bottom-color: transparent;  |
| border-b-black | border-bottom-color: rgb(0 0 0);  |
| border-b-white | border-bottom-color: rgb(255 255 255);  |
| border-b-slate-50 | border-bottom-color: rgb(248 250 252);  |
| border-b-slate-100 | border-bottom-color: rgb(241 245 249);  |
| border-b-slate-200 | border-bottom-color: rgb(226 232 240);  |
| border-b-slate-300 | border-bottom-color: rgb(203 213 225);  |
| border-b-slate-400 | border-bottom-color: rgb(148 163 184);  |
| border-b-slate-500 | border-bottom-color: rgb(100 116 139);  |
| border-b-slate-600 | border-bottom-color: rgb(71 85 105);  |
| border-b-slate-700 | border-bottom-color: rgb(51 65 85);  |
| border-b-slate-800 | border-bottom-color: rgb(30 41 59);  |
| border-b-slate-900 | border-bottom-color: rgb(15 23 42);  |
| border-b-slate-950 | border-bottom-color: rgb(2 6 23);  |
| border-b-gray-50 | border-bottom-color: rgb(249 250 251);  |
| border-b-gray-100 | border-bottom-color: rgb(243 244 246);  |
| border-b-gray-200 | border-bottom-color: rgb(229 231 235);  |
| border-b-gray-300 | border-bottom-color: rgb(209 213 219);  |
| border-b-gray-400 | border-bottom-color: rgb(156 163 175);  |
| border-b-gray-500 | border-bottom-color: rgb(107 114 128);  |
| border-b-gray-600 | border-bottom-color: rgb(75 85 99);  |
| border-b-gray-700 | border-bottom-color: rgb(55 65 81);  |
| border-b-gray-800 | border-bottom-color: rgb(31 41 55);  |
| border-b-gray-900 | border-bottom-color: rgb(17 24 39);  |
| border-b-gray-950 | border-bottom-color: rgb(3 7 18);  |
| border-b-zinc-50 | border-bottom-color: rgb(250 250 250);  |
| border-b-zinc-100 | border-bottom-color: rgb(244 244 245);  |
| border-b-zinc-200 | border-bottom-color: rgb(228 228 231);  |
| border-b-zinc-300 | border-bottom-color: rgb(212 212 216);  |
| border-b-zinc-400 | border-bottom-color: rgb(161 161 170);  |
| border-b-zinc-500 | border-bottom-color: rgb(113 113 122);  |
| border-b-zinc-600 | border-bottom-color: rgb(82 82 91);  |
| border-b-zinc-700 | border-bottom-color: rgb(63 63 70);  |
| border-b-zinc-800 | border-bottom-color: rgb(39 39 42);  |
| border-b-zinc-900 | border-bottom-color: rgb(24 24 27);  |
| border-b-zinc-950 | border-bottom-color: rgb(9 9 11);  |
| border-b-neutral-50 | border-bottom-color: rgb(250 250 250);  |
| border-b-neutral-100 | border-bottom-color: rgb(245 245 245);  |
| border-b-neutral-200 | border-bottom-color: rgb(229 229 229);  |
| border-b-neutral-300 | border-bottom-color: rgb(212 212 212);  |
| border-b-neutral-400 | border-bottom-color: rgb(163 163 163);  |
| border-b-neutral-500 | border-bottom-color: rgb(115 115 115);  |
| border-b-neutral-600 | border-bottom-color: rgb(82 82 82);  |
| border-b-neutral-700 | border-bottom-color: rgb(64 64 64);  |
| border-b-neutral-800 | border-bottom-color: rgb(38 38 38);  |
| border-b-neutral-900 | border-bottom-color: rgb(23 23 23);  |
| border-b-neutral-950 | border-bottom-color: rgb(10 10 10);  |
| border-b-stone-50 | border-bottom-color: rgb(250 250 249);  |
| border-b-stone-100 | border-bottom-color: rgb(245 245 244);  |
| border-b-stone-200 | border-bottom-color: rgb(231 229 228);  |
| border-b-stone-300 | border-bottom-color: rgb(214 211 209);  |
| border-b-stone-400 | border-bottom-color: rgb(168 162 158);  |
| border-b-stone-500 | border-bottom-color: rgb(120 113 108);  |
| border-b-stone-600 | border-bottom-color: rgb(87 83 78);  |
| border-b-stone-700 | border-bottom-color: rgb(68 64 60);  |
| border-b-stone-800 | border-bottom-color: rgb(41 37 36);  |
| border-b-stone-900 | border-bottom-color: rgb(28 25 23);  |
| border-b-stone-950 | border-bottom-color: rgb(12 10 9);  |
| border-b-red-50 | border-bottom-color: rgb(254 242 242);  |
| border-b-red-100 | border-bottom-color: rgb(254 226 226);  |
| border-b-red-200 | border-bottom-color: rgb(254 202 202);  |
| border-b-red-300 | border-bottom-color: rgb(252 165 165);  |
| border-b-red-400 | border-bottom-color: rgb(248 113 113);  |
| border-b-red-500 | border-bottom-color: rgb(239 68 68);  |
| border-b-red-600 | border-bottom-color: rgb(220 38 38);  |
| border-b-red-700 | border-bottom-color: rgb(185 28 28);  |
| border-b-red-800 | border-bottom-color: rgb(153 27 27);  |
| border-b-red-900 | border-bottom-color: rgb(127 29 29);  |
| border-b-red-950 | border-bottom-color: rgb(69 10 10);  |
| border-b-orange-50 | border-bottom-color: rgb(255 247 237);  |
| border-b-orange-100 | border-bottom-color: rgb(255 237 213);  |
| border-b-orange-200 | border-bottom-color: rgb(254 215 170);  |
| border-b-orange-300 | border-bottom-color: rgb(253 186 116);  |
| border-b-orange-400 | border-bottom-color: rgb(251 146 60);  |
| border-b-orange-500 | border-bottom-color: rgb(249 115 22);  |
| border-b-orange-600 | border-bottom-color: rgb(234 88 12);  |
| border-b-orange-700 | border-bottom-color: rgb(194 65 12);  |
| border-b-orange-800 | border-bottom-color: rgb(154 52 18);  |
| border-b-orange-900 | border-bottom-color: rgb(124 45 18);  |
| border-b-orange-950 | border-bottom-color: rgb(67 20 7);  |
| border-b-amber-50 | border-bottom-color: rgb(255 251 235);  |
| border-b-amber-100 | border-bottom-color: rgb(254 243 199);  |
| border-b-amber-200 | border-bottom-color: rgb(253 230 138);  |
| border-b-amber-300 | border-bottom-color: rgb(252 211 77);  |
| border-b-amber-400 | border-bottom-color: rgb(251 191 36);  |
| border-b-amber-500 | border-bottom-color: rgb(245 158 11);  |
| border-b-amber-600 | border-bottom-color: rgb(217 119 6);  |
| border-b-amber-700 | border-bottom-color: rgb(180 83 9);  |
| border-b-amber-800 | border-bottom-color: rgb(146 64 14);  |
| border-b-amber-900 | border-bottom-color: rgb(120 53 15);  |
| border-b-amber-950 | border-bottom-color: rgb(69 26 3);  |
| border-b-yellow-50 | border-bottom-color: rgb(254 252 232);  |
| border-b-yellow-100 | border-bottom-color: rgb(254 249 195);  |
| border-b-yellow-200 | border-bottom-color: rgb(254 240 138);  |
| border-b-yellow-300 | border-bottom-color: rgb(253 224 71);  |
| border-b-yellow-400 | border-bottom-color: rgb(250 204 21);  |
| border-b-yellow-500 | border-bottom-color: rgb(234 179 8);  |
| border-b-yellow-600 | border-bottom-color: rgb(202 138 4);  |
| border-b-yellow-700 | border-bottom-color: rgb(161 98 7);  |
| border-b-yellow-800 | border-bottom-color: rgb(133 77 14);  |
| border-b-yellow-900 | border-bottom-color: rgb(113 63 18);  |
| border-b-yellow-950 | border-bottom-color: rgb(66 32 6);  |
| border-b-lime-50 | border-bottom-color: rgb(247 254 231);  |
| border-b-lime-100 | border-bottom-color: rgb(236 252 203);  |
| border-b-lime-200 | border-bottom-color: rgb(217 249 157);  |
| border-b-lime-300 | border-bottom-color: rgb(190 242 100);  |
| border-b-lime-400 | border-bottom-color: rgb(163 230 53);  |
| border-b-lime-500 | border-bottom-color: rgb(132 204 22);  |
| border-b-lime-600 | border-bottom-color: rgb(101 163 13);  |
| border-b-lime-700 | border-bottom-color: rgb(77 124 15);  |
| border-b-lime-800 | border-bottom-color: rgb(63 98 18);  |
| border-b-lime-900 | border-bottom-color: rgb(54 83 20);  |
| border-b-lime-950 | border-bottom-color: rgb(26 46 5);  |
| border-b-green-50 | border-bottom-color: rgb(240 253 244);  |
| border-b-green-100 | border-bottom-color: rgb(220 252 231);  |
| border-b-green-200 | border-bottom-color: rgb(187 247 208);  |
| border-b-green-300 | border-bottom-color: rgb(134 239 172);  |
| border-b-green-400 | border-bottom-color: rgb(74 222 128);  |
| border-b-green-500 | border-bottom-color: rgb(34 197 94);  |
| border-b-green-600 | border-bottom-color: rgb(22 163 74);  |
| border-b-green-700 | border-bottom-color: rgb(21 128 61);  |
| border-b-green-800 | border-bottom-color: rgb(22 101 52);  |
| border-b-green-900 | border-bottom-color: rgb(20 83 45);  |
| border-b-green-950 | border-bottom-color: rgb(5 46 22);  |
| border-b-emerald-50 | border-bottom-color: rgb(236 253 245);  |
| border-b-emerald-100 | border-bottom-color: rgb(209 250 229);  |
| border-b-emerald-200 | border-bottom-color: rgb(167 243 208);  |
| border-b-emerald-300 | border-bottom-color: rgb(110 231 183);  |
| border-b-emerald-400 | border-bottom-color: rgb(52 211 153);  |
| border-b-emerald-500 | border-bottom-color: rgb(16 185 129);  |
| border-b-emerald-600 | border-bottom-color: rgb(5 150 105);  |
| border-b-emerald-700 | border-bottom-color: rgb(4 120 87);  |
| border-b-emerald-800 | border-bottom-color: rgb(6 95 70);  |
| border-b-emerald-900 | border-bottom-color: rgb(6 78 59);  |
| border-b-emerald-950 | border-bottom-color: rgb(2 44 34);  |
| border-b-teal-50 | border-bottom-color: rgb(240 253 250);  |
| border-b-teal-100 | border-bottom-color: rgb(204 251 241);  |
| border-b-teal-200 | border-bottom-color: rgb(153 246 228);  |
| border-b-teal-300 | border-bottom-color: rgb(94 234 212);  |
| border-b-teal-400 | border-bottom-color: rgb(45 212 191);  |
| border-b-teal-500 | border-bottom-color: rgb(20 184 166);  |
| border-b-teal-600 | border-bottom-color: rgb(13 148 136);  |
| border-b-teal-700 | border-bottom-color: rgb(15 118 110);  |
| border-b-teal-800 | border-bottom-color: rgb(17 94 89);  |
| border-b-teal-900 | border-bottom-color: rgb(19 78 74);  |
| border-b-teal-950 | border-bottom-color: rgb(4 47 46);  |
| border-b-cyan-50 | border-bottom-color: rgb(236 254 255);  |
| border-b-cyan-100 | border-bottom-color: rgb(207 250 254);  |
| border-b-cyan-200 | border-bottom-color: rgb(165 243 252);  |
| border-b-cyan-300 | border-bottom-color: rgb(103 232 249);  |
| border-b-cyan-400 | border-bottom-color: rgb(34 211 238);  |
| border-b-cyan-500 | border-bottom-color: rgb(6 182 212);  |
| border-b-cyan-600 | border-bottom-color: rgb(8 145 178);  |
| border-b-cyan-700 | border-bottom-color: rgb(14 116 144);  |
| border-b-cyan-800 | border-bottom-color: rgb(21 94 117);  |
| border-b-cyan-900 | border-bottom-color: rgb(22 78 99);  |
| border-b-cyan-950 | border-bottom-color: rgb(8 51 68);  |
| border-b-sky-50 | border-bottom-color: rgb(240 249 255);  |
| border-b-sky-100 | border-bottom-color: rgb(224 242 254);  |
| border-b-sky-200 | border-bottom-color: rgb(186 230 253);  |
| border-b-sky-300 | border-bottom-color: rgb(125 211 252);  |
| border-b-sky-400 | border-bottom-color: rgb(56 189 248);  |
| border-b-sky-500 | border-bottom-color: rgb(14 165 233);  |
| border-b-sky-600 | border-bottom-color: rgb(2 132 199);  |
| border-b-sky-700 | border-bottom-color: rgb(3 105 161);  |
| border-b-sky-800 | border-bottom-color: rgb(7 89 133);  |
| border-b-sky-900 | border-bottom-color: rgb(12 74 110);  |
| border-b-sky-950 | border-bottom-color: rgb(8 47 73);  |
| border-b-blue-50 | border-bottom-color: rgb(239 246 255);  |
| border-b-blue-100 | border-bottom-color: rgb(219 234 254);  |
| border-b-blue-200 | border-bottom-color: rgb(191 219 254);  |
| border-b-blue-300 | border-bottom-color: rgb(147 197 253);  |
| border-b-blue-400 | border-bottom-color: rgb(96 165 250);  |
| border-b-blue-500 | border-bottom-color: rgb(59 130 246);  |
| border-b-blue-600 | border-bottom-color: rgb(37 99 235);  |
| border-b-blue-700 | border-bottom-color: rgb(29 78 216);  |
| border-b-blue-800 | border-bottom-color: rgb(30 64 175);  |
| border-b-blue-900 | border-bottom-color: rgb(30 58 138);  |
| border-b-blue-950 | border-bottom-color: rgb(23 37 84);  |
| border-b-indigo-50 | border-bottom-color: rgb(238 242 255);  |
| border-b-indigo-100 | border-bottom-color: rgb(224 231 255);  |
| border-b-indigo-200 | border-bottom-color: rgb(199 210 254);  |
| border-b-indigo-300 | border-bottom-color: rgb(165 180 252);  |
| border-b-indigo-400 | border-bottom-color: rgb(129 140 248);  |
| border-b-indigo-500 | border-bottom-color: rgb(99 102 241);  |
| border-b-indigo-600 | border-bottom-color: rgb(79 70 229);  |
| border-b-indigo-700 | border-bottom-color: rgb(67 56 202);  |
| border-b-indigo-800 | border-bottom-color: rgb(55 48 163);  |
| border-b-indigo-900 | border-bottom-color: rgb(49 46 129);  |
| border-b-indigo-950 | border-bottom-color: rgb(30 27 75);  |
| border-b-violet-50 | border-bottom-color: rgb(245 243 255);  |
| border-b-violet-100 | border-bottom-color: rgb(237 233 254);  |
| border-b-violet-200 | border-bottom-color: rgb(221 214 254);  |
| border-b-violet-300 | border-bottom-color: rgb(196 181 253);  |
| border-b-violet-400 | border-bottom-color: rgb(167 139 250);  |
| border-b-violet-500 | border-bottom-color: rgb(139 92 246);  |
| border-b-violet-600 | border-bottom-color: rgb(124 58 237);  |
| border-b-violet-700 | border-bottom-color: rgb(109 40 217);  |
| border-b-violet-800 | border-bottom-color: rgb(91 33 182);  |
| border-b-violet-900 | border-bottom-color: rgb(76 29 149);  |
| border-b-violet-950 | border-bottom-color: rgb(46 16 101);  |
| border-b-purple-50 | border-bottom-color: rgb(250 245 255);  |
| border-b-purple-100 | border-bottom-color: rgb(243 232 255);  |
| border-b-purple-200 | border-bottom-color: rgb(233 213 255);  |
| border-b-purple-300 | border-bottom-color: rgb(216 180 254);  |
| border-b-purple-400 | border-bottom-color: rgb(192 132 252);  |
| border-b-purple-500 | border-bottom-color: rgb(168 85 247);  |
| border-b-purple-600 | border-bottom-color: rgb(147 51 234);  |
| border-b-purple-700 | border-bottom-color: rgb(126 34 206);  |
| border-b-purple-800 | border-bottom-color: rgb(107 33 168);  |
| border-b-purple-900 | border-bottom-color: rgb(88 28 135);  |
| border-b-purple-950 | border-bottom-color: rgb(59 7 100);  |
| border-b-fuchsia-50 | border-bottom-color: rgb(253 244 255);  |
| border-b-fuchsia-100 | border-bottom-color: rgb(250 232 255);  |
| border-b-fuchsia-200 | border-bottom-color: rgb(245 208 254);  |
| border-b-fuchsia-300 | border-bottom-color: rgb(240 171 252);  |
| border-b-fuchsia-400 | border-bottom-color: rgb(232 121 249);  |
| border-b-fuchsia-500 | border-bottom-color: rgb(217 70 239);  |
| border-b-fuchsia-600 | border-bottom-color: rgb(192 38 211);  |
| border-b-fuchsia-700 | border-bottom-color: rgb(162 28 175);  |
| border-b-fuchsia-800 | border-bottom-color: rgb(134 25 143);  |
| border-b-fuchsia-900 | border-bottom-color: rgb(112 26 117);  |
| border-b-fuchsia-950 | border-bottom-color: rgb(74 4 78);  |
| border-b-pink-50 | border-bottom-color: rgb(253 242 248);  |
| border-b-pink-100 | border-bottom-color: rgb(252 231 243);  |
| border-b-pink-200 | border-bottom-color: rgb(251 207 232);  |
| border-b-pink-300 | border-bottom-color: rgb(249 168 212);  |
| border-b-pink-400 | border-bottom-color: rgb(244 114 182);  |
| border-b-pink-500 | border-bottom-color: rgb(236 72 153);  |
| border-b-pink-600 | border-bottom-color: rgb(219 39 119);  |
| border-b-pink-700 | border-bottom-color: rgb(190 24 93);  |
| border-b-pink-800 | border-bottom-color: rgb(157 23 77);  |
| border-b-pink-900 | border-bottom-color: rgb(131 24 67);  |
| border-b-pink-950 | border-bottom-color: rgb(80 7 36);  |
| border-b-rose-50 | border-bottom-color: rgb(255 241 242);  |
| border-b-rose-100 | border-bottom-color: rgb(255 228 230);  |
| border-b-rose-200 | border-bottom-color: rgb(254 205 211);  |
| border-b-rose-300 | border-bottom-color: rgb(253 164 175);  |
| border-b-rose-400 | border-bottom-color: rgb(251 113 133);  |
| border-b-rose-500 | border-bottom-color: rgb(244 63 94);  |
| border-b-rose-600 | border-bottom-color: rgb(225 29 72);  |
| border-b-rose-700 | border-bottom-color: rgb(190 18 60);  |
| border-b-rose-800 | border-bottom-color: rgb(159 18 57);  |
| border-b-rose-900 | border-bottom-color: rgb(136 19 55);  |
| border-b-rose-950 | border-bottom-color: rgb(76 5 25);  |
| border-l-inherit | border-left-color: inherit;  |
| border-l-current | border-left-color: currentColor;  |
| border-l-transparent | border-left-color: transparent;  |
| border-l-black | border-left-color: rgb(0 0 0);  |
| border-l-white | border-left-color: rgb(255 255 255);  |
| border-l-slate-50 | border-left-color: rgb(248 250 252);  |
| border-l-slate-100 | border-left-color: rgb(241 245 249);  |
| border-l-slate-200 | border-left-color: rgb(226 232 240);  |
| border-l-slate-300 | border-left-color: rgb(203 213 225);  |
| border-l-slate-400 | border-left-color: rgb(148 163 184);  |
| border-l-slate-500 | border-left-color: rgb(100 116 139);  |
| border-l-slate-600 | border-left-color: rgb(71 85 105);  |
| border-l-slate-700 | border-left-color: rgb(51 65 85);  |
| border-l-slate-800 | border-left-color: rgb(30 41 59);  |
| border-l-slate-900 | border-left-color: rgb(15 23 42);  |
| border-l-slate-950 | border-left-color: rgb(2 6 23);  |
| border-l-gray-50 | border-left-color: rgb(249 250 251);  |
| border-l-gray-100 | border-left-color: rgb(243 244 246);  |
| border-l-gray-200 | border-left-color: rgb(229 231 235);  |
| border-l-gray-300 | border-left-color: rgb(209 213 219);  |
| border-l-gray-400 | border-left-color: rgb(156 163 175);  |
| border-l-gray-500 | border-left-color: rgb(107 114 128);  |
| border-l-gray-600 | border-left-color: rgb(75 85 99);  |
| border-l-gray-700 | border-left-color: rgb(55 65 81);  |
| border-l-gray-800 | border-left-color: rgb(31 41 55);  |
| border-l-gray-900 | border-left-color: rgb(17 24 39);  |
| border-l-gray-950 | border-left-color: rgb(3 7 18);  |
| border-l-zinc-50 | border-left-color: rgb(250 250 250);  |
| border-l-zinc-100 | border-left-color: rgb(244 244 245);  |
| border-l-zinc-200 | border-left-color: rgb(228 228 231);  |
| border-l-zinc-300 | border-left-color: rgb(212 212 216);  |
| border-l-zinc-400 | border-left-color: rgb(161 161 170);  |
| border-l-zinc-500 | border-left-color: rgb(113 113 122);  |
| border-l-zinc-600 | border-left-color: rgb(82 82 91);  |
| border-l-zinc-700 | border-left-color: rgb(63 63 70);  |
| border-l-zinc-800 | border-left-color: rgb(39 39 42);  |
| border-l-zinc-900 | border-left-color: rgb(24 24 27);  |
| border-l-zinc-950 | border-left-color: rgb(9 9 11);  |
| border-l-neutral-50 | border-left-color: rgb(250 250 250);  |
| border-l-neutral-100 | border-left-color: rgb(245 245 245);  |
| border-l-neutral-200 | border-left-color: rgb(229 229 229);  |
| border-l-neutral-300 | border-left-color: rgb(212 212 212);  |
| border-l-neutral-400 | border-left-color: rgb(163 163 163);  |
| border-l-neutral-500 | border-left-color: rgb(115 115 115);  |
| border-l-neutral-600 | border-left-color: rgb(82 82 82);  |
| border-l-neutral-700 | border-left-color: rgb(64 64 64);  |
| border-l-neutral-800 | border-left-color: rgb(38 38 38);  |
| border-l-neutral-900 | border-left-color: rgb(23 23 23);  |
| border-l-neutral-950 | border-left-color: rgb(10 10 10);  |
| border-l-stone-50 | border-left-color: rgb(250 250 249);  |
| border-l-stone-100 | border-left-color: rgb(245 245 244);  |
| border-l-stone-200 | border-left-color: rgb(231 229 228);  |
| border-l-stone-300 | border-left-color: rgb(214 211 209);  |
| border-l-stone-400 | border-left-color: rgb(168 162 158);  |
| border-l-stone-500 | border-left-color: rgb(120 113 108);  |
| border-l-stone-600 | border-left-color: rgb(87 83 78);  |
| border-l-stone-700 | border-left-color: rgb(68 64 60);  |
| border-l-stone-800 | border-left-color: rgb(41 37 36);  |
| border-l-stone-900 | border-left-color: rgb(28 25 23);  |
| border-l-stone-950 | border-left-color: rgb(12 10 9);  |
| border-l-red-50 | border-left-color: rgb(254 242 242);  |
| border-l-red-100 | border-left-color: rgb(254 226 226);  |
| border-l-red-200 | border-left-color: rgb(254 202 202);  |
| border-l-red-300 | border-left-color: rgb(252 165 165);  |
| border-l-red-400 | border-left-color: rgb(248 113 113);  |
| border-l-red-500 | border-left-color: rgb(239 68 68);  |
| border-l-red-600 | border-left-color: rgb(220 38 38);  |
| border-l-red-700 | border-left-color: rgb(185 28 28);  |
| border-l-red-800 | border-left-color: rgb(153 27 27);  |
| border-l-red-900 | border-left-color: rgb(127 29 29);  |
| border-l-red-950 | border-left-color: rgb(69 10 10);  |
| border-l-orange-50 | border-left-color: rgb(255 247 237);  |
| border-l-orange-100 | border-left-color: rgb(255 237 213);  |
| border-l-orange-200 | border-left-color: rgb(254 215 170);  |
| border-l-orange-300 | border-left-color: rgb(253 186 116);  |
| border-l-orange-400 | border-left-color: rgb(251 146 60);  |
| border-l-orange-500 | border-left-color: rgb(249 115 22);  |
| border-l-orange-600 | border-left-color: rgb(234 88 12);  |
| border-l-orange-700 | border-left-color: rgb(194 65 12);  |
| border-l-orange-800 | border-left-color: rgb(154 52 18);  |
| border-l-orange-900 | border-left-color: rgb(124 45 18);  |
| border-l-orange-950 | border-left-color: rgb(67 20 7);  |
| border-l-amber-50 | border-left-color: rgb(255 251 235);  |
| border-l-amber-100 | border-left-color: rgb(254 243 199);  |
| border-l-amber-200 | border-left-color: rgb(253 230 138);  |
| border-l-amber-300 | border-left-color: rgb(252 211 77);  |
| border-l-amber-400 | border-left-color: rgb(251 191 36);  |
| border-l-amber-500 | border-left-color: rgb(245 158 11);  |
| border-l-amber-600 | border-left-color: rgb(217 119 6);  |
| border-l-amber-700 | border-left-color: rgb(180 83 9);  |
| border-l-amber-800 | border-left-color: rgb(146 64 14);  |
| border-l-amber-900 | border-left-color: rgb(120 53 15);  |
| border-l-amber-950 | border-left-color: rgb(69 26 3);  |
| border-l-yellow-50 | border-left-color: rgb(254 252 232);  |
| border-l-yellow-100 | border-left-color: rgb(254 249 195);  |
| border-l-yellow-200 | border-left-color: rgb(254 240 138);  |
| border-l-yellow-300 | border-left-color: rgb(253 224 71);  |
| border-l-yellow-400 | border-left-color: rgb(250 204 21);  |
| border-l-yellow-500 | border-left-color: rgb(234 179 8);  |
| border-l-yellow-600 | border-left-color: rgb(202 138 4);  |
| border-l-yellow-700 | border-left-color: rgb(161 98 7);  |
| border-l-yellow-800 | border-left-color: rgb(133 77 14);  |
| border-l-yellow-900 | border-left-color: rgb(113 63 18);  |
| border-l-yellow-950 | border-left-color: rgb(66 32 6);  |
| border-l-lime-50 | border-left-color: rgb(247 254 231);  |
| border-l-lime-100 | border-left-color: rgb(236 252 203);  |
| border-l-lime-200 | border-left-color: rgb(217 249 157);  |
| border-l-lime-300 | border-left-color: rgb(190 242 100);  |
| border-l-lime-400 | border-left-color: rgb(163 230 53);  |
| border-l-lime-500 | border-left-color: rgb(132 204 22);  |
| border-l-lime-600 | border-left-color: rgb(101 163 13);  |
| border-l-lime-700 | border-left-color: rgb(77 124 15);  |
| border-l-lime-800 | border-left-color: rgb(63 98 18);  |
| border-l-lime-900 | border-left-color: rgb(54 83 20);  |
| border-l-lime-950 | border-left-color: rgb(26 46 5);  |
| border-l-green-50 | border-left-color: rgb(240 253 244);  |
| border-l-green-100 | border-left-color: rgb(220 252 231);  |
| border-l-green-200 | border-left-color: rgb(187 247 208);  |
| border-l-green-300 | border-left-color: rgb(134 239 172);  |
| border-l-green-400 | border-left-color: rgb(74 222 128);  |
| border-l-green-500 | border-left-color: rgb(34 197 94);  |
| border-l-green-600 | border-left-color: rgb(22 163 74);  |
| border-l-green-700 | border-left-color: rgb(21 128 61);  |
| border-l-green-800 | border-left-color: rgb(22 101 52);  |
| border-l-green-900 | border-left-color: rgb(20 83 45);  |
| border-l-green-950 | border-left-color: rgb(5 46 22);  |
| border-l-emerald-50 | border-left-color: rgb(236 253 245);  |
| border-l-emerald-100 | border-left-color: rgb(209 250 229);  |
| border-l-emerald-200 | border-left-color: rgb(167 243 208);  |
| border-l-emerald-300 | border-left-color: rgb(110 231 183);  |
| border-l-emerald-400 | border-left-color: rgb(52 211 153);  |
| border-l-emerald-500 | border-left-color: rgb(16 185 129);  |
| border-l-emerald-600 | border-left-color: rgb(5 150 105);  |
| border-l-emerald-700 | border-left-color: rgb(4 120 87);  |
| border-l-emerald-800 | border-left-color: rgb(6 95 70);  |
| border-l-emerald-900 | border-left-color: rgb(6 78 59);  |
| border-l-emerald-950 | border-left-color: rgb(2 44 34);  |
| border-l-teal-50 | border-left-color: rgb(240 253 250);  |
| border-l-teal-100 | border-left-color: rgb(204 251 241);  |
| border-l-teal-200 | border-left-color: rgb(153 246 228);  |
| border-l-teal-300 | border-left-color: rgb(94 234 212);  |
| border-l-teal-400 | border-left-color: rgb(45 212 191);  |
| border-l-teal-500 | border-left-color: rgb(20 184 166);  |
| border-l-teal-600 | border-left-color: rgb(13 148 136);  |
| border-l-teal-700 | border-left-color: rgb(15 118 110);  |
| border-l-teal-800 | border-left-color: rgb(17 94 89);  |
| border-l-teal-900 | border-left-color: rgb(19 78 74);  |
| border-l-teal-950 | border-left-color: rgb(4 47 46);  |
| border-l-cyan-50 | border-left-color: rgb(236 254 255);  |
| border-l-cyan-100 | border-left-color: rgb(207 250 254);  |
| border-l-cyan-200 | border-left-color: rgb(165 243 252);  |
| border-l-cyan-300 | border-left-color: rgb(103 232 249);  |
| border-l-cyan-400 | border-left-color: rgb(34 211 238);  |
| border-l-cyan-500 | border-left-color: rgb(6 182 212);  |
| border-l-cyan-600 | border-left-color: rgb(8 145 178);  |
| border-l-cyan-700 | border-left-color: rgb(14 116 144);  |
| border-l-cyan-800 | border-left-color: rgb(21 94 117);  |
| border-l-cyan-900 | border-left-color: rgb(22 78 99);  |
| border-l-cyan-950 | border-left-color: rgb(8 51 68);  |
| border-l-sky-50 | border-left-color: rgb(240 249 255);  |
| border-l-sky-100 | border-left-color: rgb(224 242 254);  |
| border-l-sky-200 | border-left-color: rgb(186 230 253);  |
| border-l-sky-300 | border-left-color: rgb(125 211 252);  |
| border-l-sky-400 | border-left-color: rgb(56 189 248);  |
| border-l-sky-500 | border-left-color: rgb(14 165 233);  |
| border-l-sky-600 | border-left-color: rgb(2 132 199);  |
| border-l-sky-700 | border-left-color: rgb(3 105 161);  |
| border-l-sky-800 | border-left-color: rgb(7 89 133);  |
| border-l-sky-900 | border-left-color: rgb(12 74 110);  |
| border-l-sky-950 | border-left-color: rgb(8 47 73);  |
| border-l-blue-50 | border-left-color: rgb(239 246 255);  |
| border-l-blue-100 | border-left-color: rgb(219 234 254);  |
| border-l-blue-200 | border-left-color: rgb(191 219 254);  |
| border-l-blue-300 | border-left-color: rgb(147 197 253);  |
| border-l-blue-400 | border-left-color: rgb(96 165 250);  |
| border-l-blue-500 | border-left-color: rgb(59 130 246);  |
| border-l-blue-600 | border-left-color: rgb(37 99 235);  |
| border-l-blue-700 | border-left-color: rgb(29 78 216);  |
| border-l-blue-800 | border-left-color: rgb(30 64 175);  |
| border-l-blue-900 | border-left-color: rgb(30 58 138);  |
| border-l-blue-950 | border-left-color: rgb(23 37 84);  |
| border-l-indigo-50 | border-left-color: rgb(238 242 255);  |
| border-l-indigo-100 | border-left-color: rgb(224 231 255);  |
| border-l-indigo-200 | border-left-color: rgb(199 210 254);  |
| border-l-indigo-300 | border-left-color: rgb(165 180 252);  |
| border-l-indigo-400 | border-left-color: rgb(129 140 248);  |
| border-l-indigo-500 | border-left-color: rgb(99 102 241);  |
| border-l-indigo-600 | border-left-color: rgb(79 70 229);  |
| border-l-indigo-700 | border-left-color: rgb(67 56 202);  |
| border-l-indigo-800 | border-left-color: rgb(55 48 163);  |
| border-l-indigo-900 | border-left-color: rgb(49 46 129);  |
| border-l-indigo-950 | border-left-color: rgb(30 27 75);  |
| border-l-violet-50 | border-left-color: rgb(245 243 255);  |
| border-l-violet-100 | border-left-color: rgb(237 233 254);  |
| border-l-violet-200 | border-left-color: rgb(221 214 254);  |
| border-l-violet-300 | border-left-color: rgb(196 181 253);  |
| border-l-violet-400 | border-left-color: rgb(167 139 250);  |
| border-l-violet-500 | border-left-color: rgb(139 92 246);  |
| border-l-violet-600 | border-left-color: rgb(124 58 237);  |
| border-l-violet-700 | border-left-color: rgb(109 40 217);  |
| border-l-violet-800 | border-left-color: rgb(91 33 182);  |
| border-l-violet-900 | border-left-color: rgb(76 29 149);  |
| border-l-violet-950 | border-left-color: rgb(46 16 101);  |
| border-l-purple-50 | border-left-color: rgb(250 245 255);  |
| border-l-purple-100 | border-left-color: rgb(243 232 255);  |
| border-l-purple-200 | border-left-color: rgb(233 213 255);  |
| border-l-purple-300 | border-left-color: rgb(216 180 254);  |
| border-l-purple-400 | border-left-color: rgb(192 132 252);  |
| border-l-purple-500 | border-left-color: rgb(168 85 247);  |
| border-l-purple-600 | border-left-color: rgb(147 51 234);  |
| border-l-purple-700 | border-left-color: rgb(126 34 206);  |
| border-l-purple-800 | border-left-color: rgb(107 33 168);  |
| border-l-purple-900 | border-left-color: rgb(88 28 135);  |
| border-l-purple-950 | border-left-color: rgb(59 7 100);  |
| border-l-fuchsia-50 | border-left-color: rgb(253 244 255);  |
| border-l-fuchsia-100 | border-left-color: rgb(250 232 255);  |
| border-l-fuchsia-200 | border-left-color: rgb(245 208 254);  |
| border-l-fuchsia-300 | border-left-color: rgb(240 171 252);  |
| border-l-fuchsia-400 | border-left-color: rgb(232 121 249);  |
| border-l-fuchsia-500 | border-left-color: rgb(217 70 239);  |
| border-l-fuchsia-600 | border-left-color: rgb(192 38 211);  |
| border-l-fuchsia-700 | border-left-color: rgb(162 28 175);  |
| border-l-fuchsia-800 | border-left-color: rgb(134 25 143);  |
| border-l-fuchsia-900 | border-left-color: rgb(112 26 117);  |
| border-l-fuchsia-950 | border-left-color: rgb(74 4 78);  |
| border-l-pink-50 | border-left-color: rgb(253 242 248);  |
| border-l-pink-100 | border-left-color: rgb(252 231 243);  |
| border-l-pink-200 | border-left-color: rgb(251 207 232);  |
| border-l-pink-300 | border-left-color: rgb(249 168 212);  |
| border-l-pink-400 | border-left-color: rgb(244 114 182);  |
| border-l-pink-500 | border-left-color: rgb(236 72 153);  |
| border-l-pink-600 | border-left-color: rgb(219 39 119);  |
| border-l-pink-700 | border-left-color: rgb(190 24 93);  |
| border-l-pink-800 | border-left-color: rgb(157 23 77);  |
| border-l-pink-900 | border-left-color: rgb(131 24 67);  |
| border-l-pink-950 | border-left-color: rgb(80 7 36);  |
| border-l-rose-50 | border-left-color: rgb(255 241 242);  |
| border-l-rose-100 | border-left-color: rgb(255 228 230);  |
| border-l-rose-200 | border-left-color: rgb(254 205 211);  |
| border-l-rose-300 | border-left-color: rgb(253 164 175);  |
| border-l-rose-400 | border-left-color: rgb(251 113 133);  |
| border-l-rose-500 | border-left-color: rgb(244 63 94);  |
| border-l-rose-600 | border-left-color: rgb(225 29 72);  |
| border-l-rose-700 | border-left-color: rgb(190 18 60);  |
| border-l-rose-800 | border-left-color: rgb(159 18 57);  |
| border-l-rose-900 | border-left-color: rgb(136 19 55);  |
| border-l-rose-950 | border-left-color: rgb(76 5 25);  |






Basic usage
-----------

 ### Setting the border color

 Control the border color of an element using the `border-{color}` utilities.

 
```
<input class="border-2 border-rose-600 ..."><input class="border-2 border-rose-500 ...">
```
 ### Changing the opacity

 Control the opacity of an element’s border color using the color opacity modifier.

 
```
<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>
```
 You can use any value defined in your [opacity scale](opacity), or use arbitrary values if you need to deviate from your design tokens.

 
```
<div class="border-4 border-indigo-600/[.55] ..."></div>
```
 ### Individual sides

 Use the `border-{side}-{color}` utilities to set the border color for one side of an element.

 
```
<div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-r-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-b-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-l-indigo-500 ..."></div>
```
 ### Horizontal and vertical sides

 Use the `border-{x|y}-{color}` utilities to set the border color on two sides of an element at the same time.

 
```
<div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div>
```
 ### Using logical properties

 Use the `border-s-*` and `border-e-*` utilities 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.

 
```
<div dir="ltr">
  <div class="border-s-indigo-500 ..."></div>
<div>

<div dir="rtl">
  <div class="border-s-indigo-500 ..."></div>
<div>
```
 For more control, you can also use the [LTR and RTL modifiers](hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:border-gray-500` to only apply the `border-gray-500` utility on hover.



```
<button class="border border-slate-300 hover:border-indigo-300 ...">
  Send email
</button><button class="border border-slate-300 hover:border-slate-400 ...">
  Send email
</button>
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:border-green-500` to apply the `border-green-500` utility at only medium screen sizes and above.



```
<button class="border-blue-500 md:border-green-500">
  <!-- ... -->
</button>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as border colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your border colors by editing `theme.borderColor` or `theme.extend.borderColor` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `border-color` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<button class="border-[#243c5a]">
  <!-- ... -->
</button>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/border-color>

Border Spacing
==============


Utilities for controlling the spacing between table borders.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| border-spacing-0 | border-spacing: 0px 0px;  |
| border-spacing-x-0 | border-spacing: 0px var(--tw-border-spacing-y);  |
| border-spacing-y-0 | border-spacing: var(--tw-border-spacing-x) 0px;  |
| border-spacing-px | border-spacing: 1px 1px;  |
| border-spacing-x-px | border-spacing: 1px var(--tw-border-spacing-y);  |
| border-spacing-y-px | border-spacing: var(--tw-border-spacing-x) 1px;  |
| border-spacing-0.5 | border-spacing: 0.125rem 0.125rem;  |
| border-spacing-x-0.5 | border-spacing: 0.125rem var(--tw-border-spacing-y);  |
| border-spacing-y-0.5 | border-spacing: var(--tw-border-spacing-x) 0.125rem;  |
| border-spacing-1 | border-spacing: 0.25rem 0.25rem;  |
| border-spacing-x-1 | border-spacing: 0.25rem var(--tw-border-spacing-y);  |
| border-spacing-y-1 | border-spacing: var(--tw-border-spacing-x) 0.25rem;  |
| border-spacing-1.5 | border-spacing: 0.375rem 0.375rem;  |
| border-spacing-x-1.5 | border-spacing: 0.375rem var(--tw-border-spacing-y);  |
| border-spacing-y-1.5 | border-spacing: var(--tw-border-spacing-x) 0.375rem;  |
| border-spacing-2 | border-spacing: 0.5rem 0.5rem;  |
| border-spacing-x-2 | border-spacing: 0.5rem var(--tw-border-spacing-y);  |
| border-spacing-y-2 | border-spacing: var(--tw-border-spacing-x) 0.5rem;  |
| border-spacing-2.5 | border-spacing: 0.625rem 0.625rem;  |
| border-spacing-x-2.5 | border-spacing: 0.625rem var(--tw-border-spacing-y);  |
| border-spacing-y-2.5 | border-spacing: var(--tw-border-spacing-x) 0.625rem;  |
| border-spacing-3 | border-spacing: 0.75rem 0.75rem;  |
| border-spacing-x-3 | border-spacing: 0.75rem var(--tw-border-spacing-y);  |
| border-spacing-y-3 | border-spacing: var(--tw-border-spacing-x) 0.75rem;  |
| border-spacing-3.5 | border-spacing: 0.875rem 0.875rem;  |
| border-spacing-x-3.5 | border-spacing: 0.875rem var(--tw-border-spacing-y);  |
| border-spacing-y-3.5 | border-spacing: var(--tw-border-spacing-x) 0.875rem;  |
| border-spacing-4 | border-spacing: 1rem 1rem;  |
| border-spacing-x-4 | border-spacing: 1rem var(--tw-border-spacing-y);  |
| border-spacing-y-4 | border-spacing: var(--tw-border-spacing-x) 1rem;  |
| border-spacing-5 | border-spacing: 1.25rem 1.25rem;  |
| border-spacing-x-5 | border-spacing: 1.25rem var(--tw-border-spacing-y);  |
| border-spacing-y-5 | border-spacing: var(--tw-border-spacing-x) 1.25rem;  |
| border-spacing-6 | border-spacing: 1.5rem 1.5rem;  |
| border-spacing-x-6 | border-spacing: 1.5rem var(--tw-border-spacing-y);  |
| border-spacing-y-6 | border-spacing: var(--tw-border-spacing-x) 1.5rem;  |
| border-spacing-7 | border-spacing: 1.75rem 1.75rem;  |
| border-spacing-x-7 | border-spacing: 1.75rem var(--tw-border-spacing-y);  |
| border-spacing-y-7 | border-spacing: var(--tw-border-spacing-x) 1.75rem;  |
| border-spacing-8 | border-spacing: 2rem 2rem;  |
| border-spacing-x-8 | border-spacing: 2rem var(--tw-border-spacing-y);  |
| border-spacing-y-8 | border-spacing: var(--tw-border-spacing-x) 2rem;  |
| border-spacing-9 | border-spacing: 2.25rem 2.25rem;  |
| border-spacing-x-9 | border-spacing: 2.25rem var(--tw-border-spacing-y);  |
| border-spacing-y-9 | border-spacing: var(--tw-border-spacing-x) 2.25rem;  |
| border-spacing-10 | border-spacing: 2.5rem 2.5rem;  |
| border-spacing-x-10 | border-spacing: 2.5rem var(--tw-border-spacing-y);  |
| border-spacing-y-10 | border-spacing: var(--tw-border-spacing-x) 2.5rem;  |
| border-spacing-11 | border-spacing: 2.75rem 2.75rem;  |
| border-spacing-x-11 | border-spacing: 2.75rem var(--tw-border-spacing-y);  |
| border-spacing-y-11 | border-spacing: var(--tw-border-spacing-x) 2.75rem;  |
| border-spacing-12 | border-spacing: 3rem 3rem;  |
| border-spacing-x-12 | border-spacing: 3rem var(--tw-border-spacing-y);  |
| border-spacing-y-12 | border-spacing: var(--tw-border-spacing-x) 3rem;  |
| border-spacing-14 | border-spacing: 3.5rem 3.5rem;  |
| border-spacing-x-14 | border-spacing: 3.5rem var(--tw-border-spacing-y);  |
| border-spacing-y-14 | border-spacing: var(--tw-border-spacing-x) 3.5rem;  |
| border-spacing-16 | border-spacing: 4rem 4rem;  |
| border-spacing-x-16 | border-spacing: 4rem var(--tw-border-spacing-y);  |
| border-spacing-y-16 | border-spacing: var(--tw-border-spacing-x) 4rem;  |
| border-spacing-20 | border-spacing: 5rem 5rem;  |
| border-spacing-x-20 | border-spacing: 5rem var(--tw-border-spacing-y);  |
| border-spacing-y-20 | border-spacing: var(--tw-border-spacing-x) 5rem;  |
| border-spacing-24 | border-spacing: 6rem 6rem;  |
| border-spacing-x-24 | border-spacing: 6rem var(--tw-border-spacing-y);  |
| border-spacing-y-24 | border-spacing: var(--tw-border-spacing-x) 6rem;  |
| border-spacing-28 | border-spacing: 7rem 7rem;  |
| border-spacing-x-28 | border-spacing: 7rem var(--tw-border-spacing-y);  |
| border-spacing-y-28 | border-spacing: var(--tw-border-spacing-x) 7rem;  |
| border-spacing-32 | border-spacing: 8rem 8rem;  |
| border-spacing-x-32 | border-spacing: 8rem var(--tw-border-spacing-y);  |
| border-spacing-y-32 | border-spacing: var(--tw-border-spacing-x) 8rem;  |
| border-spacing-36 | border-spacing: 9rem 9rem;  |
| border-spacing-x-36 | border-spacing: 9rem var(--tw-border-spacing-y);  |
| border-spacing-y-36 | border-spacing: var(--tw-border-spacing-x) 9rem;  |
| border-spacing-40 | border-spacing: 10rem 10rem;  |
| border-spacing-x-40 | border-spacing: 10rem var(--tw-border-spacing-y);  |
| border-spacing-y-40 | border-spacing: var(--tw-border-spacing-x) 10rem;  |
| border-spacing-44 | border-spacing: 11rem 11rem;  |
| border-spacing-x-44 | border-spacing: 11rem var(--tw-border-spacing-y);  |
| border-spacing-y-44 | border-spacing: var(--tw-border-spacing-x) 11rem;  |
| border-spacing-48 | border-spacing: 12rem 12rem;  |
| border-spacing-x-48 | border-spacing: 12rem var(--tw-border-spacing-y);  |
| border-spacing-y-48 | border-spacing: var(--tw-border-spacing-x) 12rem;  |
| border-spacing-52 | border-spacing: 13rem 13rem;  |
| border-spacing-x-52 | border-spacing: 13rem var(--tw-border-spacing-y);  |
| border-spacing-y-52 | border-spacing: var(--tw-border-spacing-x) 13rem;  |
| border-spacing-56 | border-spacing: 14rem 14rem;  |
| border-spacing-x-56 | border-spacing: 14rem var(--tw-border-spacing-y);  |
| border-spacing-y-56 | border-spacing: var(--tw-border-spacing-x) 14rem;  |
| border-spacing-60 | border-spacing: 15rem 15rem;  |
| border-spacing-x-60 | border-spacing: 15rem var(--tw-border-spacing-y);  |
| border-spacing-y-60 | border-spacing: var(--tw-border-spacing-x) 15rem;  |
| border-spacing-64 | border-spacing: 16rem 16rem;  |
| border-spacing-x-64 | border-spacing: 16rem var(--tw-border-spacing-y);  |
| border-spacing-y-64 | border-spacing: var(--tw-border-spacing-x) 16rem;  |
| border-spacing-72 | border-spacing: 18rem 18rem;  |
| border-spacing-x-72 | border-spacing: 18rem var(--tw-border-spacing-y);  |
| border-spacing-y-72 | border-spacing: var(--tw-border-spacing-x) 18rem;  |
| border-spacing-80 | border-spacing: 20rem 20rem;  |
| border-spacing-x-80 | border-spacing: 20rem var(--tw-border-spacing-y);  |
| border-spacing-y-80 | border-spacing: var(--tw-border-spacing-x) 20rem;  |
| border-spacing-96 | border-spacing: 24rem 24rem;  |
| border-spacing-x-96 | border-spacing: 24rem var(--tw-border-spacing-y);  |
| border-spacing-y-96 | border-spacing: var(--tw-border-spacing-x) 24rem;  |






Basic usage
-----------

 ### Setting the border spacing

 Use the `border-spacing-*`, `border-spacing-x-*`, and `border-spacing-y-*` utilities to control the space between the borders of table cells with [separate borders](border-collapse#separate).

 
```
<table class="border-separate border-spacing-2 border border-slate-400 ...">
  <thead>
    <tr>
      <th class="border border-slate-300 ...">State</th>
      <th class="border border-slate-300 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-300 ...">Indiana</td>
      <td class="border border-slate-300 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Ohio</td>
      <td class="border border-slate-300 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Michigan</td>
      <td class="border border-slate-300 ...">Detroit</td>
    </tr>
  </tbody>
</table><table class="border-separate border-spacing-2 border border-slate-500 ...">
  <thead>
    <tr>
      <th class="border border-slate-600 ...">State</th>
      <th class="border border-slate-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-700 ...">Indiana</td>
      <td class="border border-slate-700 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Ohio</td>
      <td class="border border-slate-700 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Michigan</td>
      <td class="border border-slate-700 ...">Detroit</td>
    </tr>
  </tbody>
</table>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:border-spacing-2` to only apply the `border-spacing-2` utility on hover.



```
<table class="hover:border-spacing-2">
  <!-- ... -->
</table>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:border-spacing-4` to apply the `border-spacing-4` utility at only medium screen sizes and above.



```
<table class="md:border-spacing-4">
  <!-- ... -->
</table>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind’s border spacing utilities use the [default spacing scale](customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
      }
    }
  }
}

```

 Alternatively, you can customize just the border spacing scale by editing `theme.borderSpacing` or `theme.extend.borderSpacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      borderSpacing: {
        '13': '3.25rem',
      },
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `border-spacing` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="border-spacing-[7px]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/border-spacing>

Table Layout
============


Utilities for controlling the table layout algorithm.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| table-auto | table-layout: auto;  |
| table-fixed | table-layout: fixed;  |






Basic usage
-----------

 ### Auto

 Use `table-auto` to allow the table to automatically size columns to fit the contents of the cell.

 
```
<table class="table-auto">
  <thead>
    <tr>
      <th>Song</th>
      <th>Artist</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>
```
 ### Fixed

 Use `table-fixed` to allow the table to ignore the content and use fixed widths for columns. The width of the first row will set the column widths for the whole table.

 You can manually set the widths for some columns and the rest of the available width will be divided evenly amongst the columns without explicit width.

 
```
<table class="table-fixed">
  <thead>
    <tr>
      <th>Song</th>
      <th>Artist</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:table-fixed` to only apply the `table-fixed` utility on hover.



```
<table class="hover:table-fixed">
  <!-- ... -->
</table>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:table-fixed` to apply the `table-fixed` utility at only medium screen sizes and above.



```
<table class="md:table-fixed">
  <!-- ... -->
</table>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/table-layout>

Caption Side
============


Utilities for controlling the alignment of a caption element inside of a table.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| caption-top | caption-side: top;  |
| caption-bottom | caption-side: bottom;  |






Basic usage
-----------

 ### Top

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

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

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

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

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:caption-bottom` to only apply the `caption-bottom` utility on hover.



```
<table class="caption-top hover:caption-bottom">
  <!-- ... -->
</table>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:caption-bottom` to apply the `caption-bottom` utility at only medium screen sizes and above.



```
<table class="caption-top md:caption-bottom">
  <!-- ... -->
</table>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/caption-side>

Transition Property
===================


Utilities for controlling which CSS properties transition.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| transition-none | transition-property: none;  |
| transition-all | transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;  |
| transition | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;  |
| transition-colors | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;  |
| transition-opacity | transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;  |
| transition-shadow | transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;  |
| transition-transform | transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;  |






Basic usage
-----------

 ### Controlling transitioned properties

 Use the `transition-{properties}` utilities to specify which properties should transition when they change.

 
```
<button class="transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 ...">
  Save Changes
</button>
```
 ### Prefers-reduced-motion

 For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the `motion-safe` and `motion-reduce` variants:

 
```
<button class="transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none ...">
  Hover me
</button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:transition-all` to only apply the `transition-all` utility on hover.



```
<div class="hover:transition-all">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:transition-all` to apply the `transition-all` utility at only medium screen sizes and above.



```
<div class="md:transition-all">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides transition-property utilities for seven common property combinations. You can customize these values by editing `theme.transitionProperty` or `theme.extend.transitionProperty` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        'height': 'height',
        'spacing': 'margin, padding',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `transition-property` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="transition-[height]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/transition-property>

Transition Duration
===================


Utilities for controlling the duration of CSS transitions.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| duration-0 | transition-duration: 0s;  |
| duration-75 | transition-duration: 75ms;  |
| duration-100 | transition-duration: 100ms;  |
| duration-150 | transition-duration: 150ms;  |
| duration-200 | transition-duration: 200ms;  |
| duration-300 | transition-duration: 300ms;  |
| duration-500 | transition-duration: 500ms;  |
| duration-700 | transition-duration: 700ms;  |
| duration-1000 | transition-duration: 1000ms;  |






Basic usage
-----------

 ### Changing transition duration

 Use the `duration-{amount}` utilities to control an element’s transition-duration.

 
```
<button class="transition duration-150 ease-in-out ...">Button A</button>
<button class="transition duration-300 ease-in-out ...">Button B</button>
<button class="transition duration-700 ease-in-out ...">Button C</button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:duration-150` to only apply the `duration-150` utility on hover.



```
<div class="transition duration-0 hover:duration-150">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:duration-150` to apply the `duration-150` utility at only medium screen sizes and above.



```
<div class="transition duration-0 md:duration-150">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides eight general purpose transition-duration utilities. You can customize these values by editing `theme.transitionDuration` or `theme.extend.transitionDuration` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      transitionDuration: {
        '2000': '2000ms',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `transition-duration` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="duration-[2000ms]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/transition-duration>

Transition Timing Function
==========================


Utilities for controlling the easing of CSS transitions.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| ease-linear | transition-timing-function: linear;  |
| ease-in | transition-timing-function: cubic-bezier(0.4, 0, 1, 1);  |
| ease-out | transition-timing-function: cubic-bezier(0, 0, 0.2, 1);  |
| ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);  |






Basic usage
-----------

 ### Controlling the easing curve

 Use the `ease-{timing}` utilities to control an element’s easing curve.

 
```
<button class="ease-in duration-300 ...">Button A</button>
<button class="ease-out duration-300 ...">Button B</button>
<button class="ease-in-out duration-300 ...">Button C</button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:ease-in` to only apply the `ease-in` utility on hover.



```
<div class="transition duration-150 ease-out hover:ease-in">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:ease-in` to apply the `ease-in` utility at only medium screen sizes and above.



```
<div class="transition duration-150 ease-out md:ease-in">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides four general purpose transition-timing-function utilities. You can customize these values by editing `theme.transitionTimingFunction` or `theme.extend.transitionTimingFunction` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: {
        'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
        'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `transition-timing-function` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="ease-[cubic-bezier(0.95,0.05,0.795,0.035)]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/transition-timing-function>

Transition Delay
================


Utilities for controlling the delay of CSS transitions.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| delay-0 | transition-delay: 0s;  |
| delay-75 | transition-delay: 75ms;  |
| delay-100 | transition-delay: 100ms;  |
| delay-150 | transition-delay: 150ms;  |
| delay-200 | transition-delay: 200ms;  |
| delay-300 | transition-delay: 300ms;  |
| delay-500 | transition-delay: 500ms;  |
| delay-700 | transition-delay: 700ms;  |
| delay-1000 | transition-delay: 1000ms;  |






Basic usage
-----------

 ### Delaying transitions

 Use the `delay-{amount}` utilities to control an element’s transition-delay.

 
```
<button class="transition delay-150 duration-300 ease-in-out ...">Button A</button>
<button class="transition delay-300 duration-300 ease-in-out ...">Button B</button>
<button class="transition delay-700 duration-300 ease-in-out ...">Button C</button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:delay-300` to only apply the `delay-300` utility on hover.



```
<div class="transition duration-300 delay-150 hover:delay-300">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:delay-300` to apply the `delay-300` utility at only medium screen sizes and above.



```
<div class="transition duration-300 delay-150 md:delay-300">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides eight general purpose transition-delay utilities. You can customize these values by editing `theme.transitionDelay` or `theme.extend.transitionDelay` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      transitionDelay: {
        '2000': '2000ms',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `transition-delay` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="delay-[2000ms]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/transition-delay>

Animation
=========


Utilities for animating elements with CSS animations.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| animate-none | animation: none; |
| animate-spin | animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
| animate-ping | animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } |
| animate-pulse | animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } |
| animate-bounce | animation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } |






Basic usage
-----------

 ### Spin

 Add the `animate-spin` utility to add a linear spin animation to elements like loading indicators.

 
```
<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing...
</button>
```
 ### Ping

 Add the `animate-ping` utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges.

 
```
<span class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
</span>
```
 ### Pulse

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

 
```
<div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-slate-200 h-10 w-10"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 bg-slate-200 rounded"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="h-2 bg-slate-200 rounded col-span-2"></div>
          <div class="h-2 bg-slate-200 rounded col-span-1"></div>
        </div>
        <div class="h-2 bg-slate-200 rounded"></div>
      </div>
    </div>
  </div>
</div><div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-slate-700 h-10 w-10"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 bg-slate-700 rounded"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="h-2 bg-slate-700 rounded col-span-2"></div>
          <div class="h-2 bg-slate-700 rounded col-span-1"></div>
        </div>
        <div class="h-2 bg-slate-700 rounded"></div>
      </div>
    </div>
  </div>
</div>
```
 ### Bounce

 Add the `animate-bounce` utility to make an element bounce up and down — useful for things like “scroll down” indicators.

 
```
<svg class="animate-bounce w-6 h-6 ...">
  <!-- ... -->
</svg>
```
 ### Prefers-reduced-motion

 For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the `motion-safe` and `motion-reduce` variants:

 
```
<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="motion-safe:animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:animate-spin` to only apply the `animate-spin` utility on hover.



```
<div class="hover:animate-spin">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:animate-spin` to apply the `animate-spin` utility at only medium screen sizes and above.



```
<div class="md:animate-spin">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 Animations by their very nature tend to be highly project-specific. **The animations we include by default are best thought of as helpful examples**, and you’re encouraged to customize your animations to better suit your needs.

 By default, Tailwind provides utilities for four different example animations, as well as the `animate-none` utility. You can customize these values by editing `theme.animation` or `theme.extend.animation` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      }
    }
  }
}

```

 To add new animation `@keyframes`, use the `keyframes` section of your theme configuration:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      }
    }
  }
}

```

 You can then reference these keyframes by name in the `animation` section of your theme configuration:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `animation` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="animate-[wiggle_1s_ease-in-out_infinite]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/animation>

Scale
=====


Utilities for scaling elements with transform.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| scale-0 | transform: scale(0);  |
| scale-x-0 | transform: scaleX(0);  |
| scale-y-0 | transform: scaleY(0);  |
| scale-50 | transform: scale(.5);  |
| scale-x-50 | transform: scaleX(.5);  |
| scale-y-50 | transform: scaleY(.5);  |
| scale-75 | transform: scale(.75);  |
| scale-x-75 | transform: scaleX(.75);  |
| scale-y-75 | transform: scaleY(.75);  |
| scale-90 | transform: scale(.9);  |
| scale-x-90 | transform: scaleX(.9);  |
| scale-y-90 | transform: scaleY(.9);  |
| scale-95 | transform: scale(.95);  |
| scale-x-95 | transform: scaleX(.95);  |
| scale-y-95 | transform: scaleY(.95);  |
| scale-100 | transform: scale(1);  |
| scale-x-100 | transform: scaleX(1);  |
| scale-y-100 | transform: scaleY(1);  |
| scale-105 | transform: scale(1.05);  |
| scale-x-105 | transform: scaleX(1.05);  |
| scale-y-105 | transform: scaleY(1.05);  |
| scale-110 | transform: scale(1.1);  |
| scale-x-110 | transform: scaleX(1.1);  |
| scale-y-110 | transform: scaleY(1.1);  |
| scale-125 | transform: scale(1.25);  |
| scale-x-125 | transform: scaleX(1.25);  |
| scale-y-125 | transform: scaleY(1.25);  |
| scale-150 | transform: scale(1.5);  |
| scale-x-150 | transform: scaleX(1.5);  |
| scale-y-150 | transform: scaleY(1.5);  |






Basic usage
-----------

 ### Scaling an element

 Use the `scale-{percentage}`, `scale-x-{percentage}`, and `scale-y-{percentage}` utilities to scale an element.

 
```
<img class="scale-75 ...">
<img class="scale-100 ...">
<img class="scale-125 ...">
```
 ### Using negative values

 To use a negative scale value, prefix the class name with a dash to convert it to a negative value.

 
```
<img class="-scale-50">
```
 ### Removing transforms

 To remove all of the transforms on an element at once, use the `transform-none` utility:



```
<div class="scale-75 translate-x-4 skew-y-3 md:transform-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove transforms conditionally, such as on hover or at a particular breakpoint.

 ### Hardware acceleration

 If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the `transform-gpu` utility:



```
<div class="scale-150 transform-gpu">
  <!-- ... -->
</div>

```

Use `transform-cpu` to force things back to the CPU if you need to undo this conditionally.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:scale-125` to only apply the `scale-125` utility on hover.



```
<div class="hover:scale-125">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:scale-125` to apply the `scale-125` utility at only medium screen sizes and above.



```
<div class="md:scale-125">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `scale` utilities. You can customize these values by editing `theme.scale` or `theme.extend.scale` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      scale: {
        '175': '1.75',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `scale` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="scale-[1.7]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/scale>

Rotate
======


Utilities for rotating elements with transform.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| rotate-0 | transform: rotate(0deg);  |
| rotate-1 | transform: rotate(1deg);  |
| rotate-2 | transform: rotate(2deg);  |
| rotate-3 | transform: rotate(3deg);  |
| rotate-6 | transform: rotate(6deg);  |
| rotate-12 | transform: rotate(12deg);  |
| rotate-45 | transform: rotate(45deg);  |
| rotate-90 | transform: rotate(90deg);  |
| rotate-180 | transform: rotate(180deg);  |






Basic usage
-----------

 ### Rotating an element

 Use the `rotate-{angle}` utilities to rotate an element.

 
```
<img class="rotate-0 ...">
<img class="rotate-45 ...">
<img class="rotate-90 ...">
<img class="rotate-180 ...">
```
 ### Using negative values

 To use a negative rotate value, prefix the class name with a dash to convert it to a negative value.

 
```
<img class="-rotate-45 ...">
```
 ### Removing transforms

 To remove all of the transforms on an element at once, use the `transform-none` utility:



```
<div class="scale-75 translate-x-4 skew-y-3 md:transform-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove transforms conditionally, such as on hover or at a particular breakpoint.

 ### Hardware acceleration

 If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the `transform-gpu` utility:



```
<div class="rotate-45 transform-gpu">
  <!-- ... -->
</div>

```

Use `transform-cpu` to force things back to the CPU if you need to undo this conditionally.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:rotate-45` to only apply the `rotate-45` utility on hover.



```
<div class="hover:rotate-45">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:rotate-45` to apply the `rotate-45` utility at only medium screen sizes and above.



```
<div class="md:rotate-45">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `rotate` utilities. You can customize these values by editing `theme.rotate` or `theme.extend.rotate` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      rotate: {
        '17': '17deg',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `rotate` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="rotate-[17deg]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/rotate>

Translate
=========


Utilities for translating elements with transform.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| translate-x-0 | transform: translateX(0px);  |
| translate-y-0 | transform: translateY(0px);  |
| translate-x-px | transform: translateX(1px);  |
| translate-y-px | transform: translateY(1px);  |
| translate-x-0.5 | transform: translateX(0.125rem);  |
| translate-y-0.5 | transform: translateY(0.125rem);  |
| translate-x-1 | transform: translateX(0.25rem);  |
| translate-y-1 | transform: translateY(0.25rem);  |
| translate-x-1.5 | transform: translateX(0.375rem);  |
| translate-y-1.5 | transform: translateY(0.375rem);  |
| translate-x-2 | transform: translateX(0.5rem);  |
| translate-y-2 | transform: translateY(0.5rem);  |
| translate-x-2.5 | transform: translateX(0.625rem);  |
| translate-y-2.5 | transform: translateY(0.625rem);  |
| translate-x-3 | transform: translateX(0.75rem);  |
| translate-y-3 | transform: translateY(0.75rem);  |
| translate-x-3.5 | transform: translateX(0.875rem);  |
| translate-y-3.5 | transform: translateY(0.875rem);  |
| translate-x-4 | transform: translateX(1rem);  |
| translate-y-4 | transform: translateY(1rem);  |
| translate-x-5 | transform: translateX(1.25rem);  |
| translate-y-5 | transform: translateY(1.25rem);  |
| translate-x-6 | transform: translateX(1.5rem);  |
| translate-y-6 | transform: translateY(1.5rem);  |
| translate-x-7 | transform: translateX(1.75rem);  |
| translate-y-7 | transform: translateY(1.75rem);  |
| translate-x-8 | transform: translateX(2rem);  |
| translate-y-8 | transform: translateY(2rem);  |
| translate-x-9 | transform: translateX(2.25rem);  |
| translate-y-9 | transform: translateY(2.25rem);  |
| translate-x-10 | transform: translateX(2.5rem);  |
| translate-y-10 | transform: translateY(2.5rem);  |
| translate-x-11 | transform: translateX(2.75rem);  |
| translate-y-11 | transform: translateY(2.75rem);  |
| translate-x-12 | transform: translateX(3rem);  |
| translate-y-12 | transform: translateY(3rem);  |
| translate-x-14 | transform: translateX(3.5rem);  |
| translate-y-14 | transform: translateY(3.5rem);  |
| translate-x-16 | transform: translateX(4rem);  |
| translate-y-16 | transform: translateY(4rem);  |
| translate-x-20 | transform: translateX(5rem);  |
| translate-y-20 | transform: translateY(5rem);  |
| translate-x-24 | transform: translateX(6rem);  |
| translate-y-24 | transform: translateY(6rem);  |
| translate-x-28 | transform: translateX(7rem);  |
| translate-y-28 | transform: translateY(7rem);  |
| translate-x-32 | transform: translateX(8rem);  |
| translate-y-32 | transform: translateY(8rem);  |
| translate-x-36 | transform: translateX(9rem);  |
| translate-y-36 | transform: translateY(9rem);  |
| translate-x-40 | transform: translateX(10rem);  |
| translate-y-40 | transform: translateY(10rem);  |
| translate-x-44 | transform: translateX(11rem);  |
| translate-y-44 | transform: translateY(11rem);  |
| translate-x-48 | transform: translateX(12rem);  |
| translate-y-48 | transform: translateY(12rem);  |
| translate-x-52 | transform: translateX(13rem);  |
| translate-y-52 | transform: translateY(13rem);  |
| translate-x-56 | transform: translateX(14rem);  |
| translate-y-56 | transform: translateY(14rem);  |
| translate-x-60 | transform: translateX(15rem);  |
| translate-y-60 | transform: translateY(15rem);  |
| translate-x-64 | transform: translateX(16rem);  |
| translate-y-64 | transform: translateY(16rem);  |
| translate-x-72 | transform: translateX(18rem);  |
| translate-y-72 | transform: translateY(18rem);  |
| translate-x-80 | transform: translateX(20rem);  |
| translate-y-80 | transform: translateY(20rem);  |
| translate-x-96 | transform: translateX(24rem);  |
| translate-y-96 | transform: translateY(24rem);  |
| translate-x-1/2 | transform: translateX(50%);  |
| translate-x-1/3 | transform: translateX(33.333333%);  |
| translate-x-2/3 | transform: translateX(66.666667%);  |
| translate-x-1/4 | transform: translateX(25%);  |
| translate-x-2/4 | transform: translateX(50%);  |
| translate-x-3/4 | transform: translateX(75%);  |
| translate-x-full | transform: translateX(100%);  |
| translate-y-1/2 | transform: translateY(50%);  |
| translate-y-1/3 | transform: translateY(33.333333%);  |
| translate-y-2/3 | transform: translateY(66.666667%);  |
| translate-y-1/4 | transform: translateY(25%);  |
| translate-y-2/4 | transform: translateY(50%);  |
| translate-y-3/4 | transform: translateY(75%);  |
| translate-y-full | transform: translateY(100%);  |






Basic usage
-----------

 ### Translating an element

 Use the `translate-x-{amount}` and `translate-y-{amount}` utilities to translate an element.

 
```
<img class="translate-y-6 ...">
<img class="-translate-y-6 ...">
<img class="translate-x-6 ...">
```
 ### Using negative values

 To use a negative translate value, prefix the class name with a dash to convert it to a negative value.

 
```
<img class="-translate-y-6 ...">
```
 ### Removing transforms

 To remove all of the transforms on an element at once, use the `transform-none` utility:



```
<div class="scale-75 translate-x-4 skew-y-3 md:transform-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove transforms conditionally, such as on hover or at a particular breakpoint.

 ### Hardware acceleration

 If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the `transform-gpu` utility:



```
<div class="translate-y-6 transform-gpu">
  <!-- ... -->
</div>

```

Use `transform-cpu` to force things back to the CPU if you need to undo this conditionally.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:translate-y-12` to only apply the `translate-y-12` utility on hover.



```
<div class="hover:translate-y-12">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:translate-y-12` to apply the `translate-y-12` utility at only medium screen sizes and above.



```
<div class="md:translate-y-12">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides fixed value `translate` utilities that match the [default spacing scale](customizing-spacing), as well as 50% and 100% variations for translating relative to the element’s size. You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '4.25': '17rem',
      }
    }
  }
}

```

 Alternatively, you can customize just the translate scale by editing `theme.translate` or `theme.extend.translate` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      translate: {
        '4.25': '17rem',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `translate` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="translate-y-[17rem]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/translate>

Skew
====


Utilities for skewing elements with transform.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| skew-x-0 | transform: skewX(0deg);  |
| skew-y-0 | transform: skewY(0deg);  |
| skew-x-1 | transform: skewX(1deg);  |
| skew-y-1 | transform: skewY(1deg);  |
| skew-x-2 | transform: skewX(2deg);  |
| skew-y-2 | transform: skewY(2deg);  |
| skew-x-3 | transform: skewX(3deg);  |
| skew-y-3 | transform: skewY(3deg);  |
| skew-x-6 | transform: skewX(6deg);  |
| skew-y-6 | transform: skewY(6deg);  |
| skew-x-12 | transform: skewX(12deg);  |
| skew-y-12 | transform: skewY(12deg);  |






Basic usage
-----------

 ### Skewing an element

 Use the `skew-x-{amount}` and `skew-y-{amount}` utilities to skew an element.

 
```
<img class="skew-y-0 ...">
<img class="skew-y-3 ...">
<img class="skew-y-6 ...">
<img class="skew-y-12 ...">
```
 ### Using negative values

 To use a negative skew value, prefix the class name with a dash to convert it to a negative value.

 
```
<img class="-skew-y-6 ...">
```
 ### Removing transforms

 To remove all of the transforms on an element at once, use the `transform-none` utility:



```
<div class="scale-75 translate-x-4 skew-y-3 md:transform-none">
  <!-- ... -->
</div>

```

This can be useful when you want to remove transforms conditionally, such as on hover or at a particular breakpoint.

 ### Hardware acceleration

 If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the `transform-gpu` utility:



```
<div class="skew-y-6 transform-gpu">
  <!-- ... -->
</div>

```

Use `transform-cpu` to force things back to the CPU if you need to undo this conditionally.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:skew-y-12` to only apply the `skew-y-12` utility on hover.



```
<div class="hover:skew-y-12">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:skew-y-12` to apply the `skew-y-12` utility at only medium screen sizes and above.



```
<div class="md:skew-y-12">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes a handful of general purpose `skew` utilities. You can customize these values by editing `theme.skew` or `theme.extend.skew` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      skew: {
        '17': '17deg',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `skew` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="skew-y-[17deg]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/skew>

Transform Origin
================


Utilities for specifying the origin for an element's transformations.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| origin-center | transform-origin: center;  |
| origin-top | transform-origin: top;  |
| origin-top-right | transform-origin: top right;  |
| origin-right | transform-origin: right;  |
| origin-bottom-right | transform-origin: bottom right;  |
| origin-bottom | transform-origin: bottom;  |
| origin-bottom-left | transform-origin: bottom left;  |
| origin-left | transform-origin: left;  |
| origin-top-left | transform-origin: top left;  |






Basic usage
-----------

 ### Changing the transform origin

 Specify an element’s transform origin using the `origin-{keyword}` utilities.

 
```
<img class="origin-center rotate-45 ...">
<img class="origin-top-left rotate-12 ...">
<img class="origin-bottom -rotate-12 ...">
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:origin-top` to only apply the `origin-top` utility on hover.



```
<div class="origin-center hover:origin-top">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:origin-top` to apply the `origin-top` utility at only medium screen sizes and above.



```
<div class="origin-center md:origin-top">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides `transform-origin` utilities for all of the built-in browser keyword options. You can customize these values by editing `theme.transformOrigin` or `theme.extend.transformOrigin` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      transformOrigin: {
        'top-left-1/3-3/4': '33% 75%',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `transform-origin` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="origin-[33%_75%]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/transform-origin>

Accent Color
============


Utilities for controlling the accented color of a form control.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| accent-inherit | accent-color: inherit;  |
| accent-current | accent-color: currentColor;  |
| accent-transparent | accent-color: transparent;  |
| accent-black | accent-color: #000;  |
| accent-white | accent-color: #fff;  |
| accent-slate-50 | accent-color: #f8fafc;  |
| accent-slate-100 | accent-color: #f1f5f9;  |
| accent-slate-200 | accent-color: #e2e8f0;  |
| accent-slate-300 | accent-color: #cbd5e1;  |
| accent-slate-400 | accent-color: #94a3b8;  |
| accent-slate-500 | accent-color: #64748b;  |
| accent-slate-600 | accent-color: #475569;  |
| accent-slate-700 | accent-color: #334155;  |
| accent-slate-800 | accent-color: #1e293b;  |
| accent-slate-900 | accent-color: #0f172a;  |
| accent-slate-950 | accent-color: #020617;  |
| accent-gray-50 | accent-color: #f9fafb;  |
| accent-gray-100 | accent-color: #f3f4f6;  |
| accent-gray-200 | accent-color: #e5e7eb;  |
| accent-gray-300 | accent-color: #d1d5db;  |
| accent-gray-400 | accent-color: #9ca3af;  |
| accent-gray-500 | accent-color: #6b7280;  |
| accent-gray-600 | accent-color: #4b5563;  |
| accent-gray-700 | accent-color: #374151;  |
| accent-gray-800 | accent-color: #1f2937;  |
| accent-gray-900 | accent-color: #111827;  |
| accent-gray-950 | accent-color: #030712;  |
| accent-zinc-50 | accent-color: #fafafa;  |
| accent-zinc-100 | accent-color: #f4f4f5;  |
| accent-zinc-200 | accent-color: #e4e4e7;  |
| accent-zinc-300 | accent-color: #d4d4d8;  |
| accent-zinc-400 | accent-color: #a1a1aa;  |
| accent-zinc-500 | accent-color: #71717a;  |
| accent-zinc-600 | accent-color: #52525b;  |
| accent-zinc-700 | accent-color: #3f3f46;  |
| accent-zinc-800 | accent-color: #27272a;  |
| accent-zinc-900 | accent-color: #18181b;  |
| accent-zinc-950 | accent-color: #09090b;  |
| accent-neutral-50 | accent-color: #fafafa;  |
| accent-neutral-100 | accent-color: #f5f5f5;  |
| accent-neutral-200 | accent-color: #e5e5e5;  |
| accent-neutral-300 | accent-color: #d4d4d4;  |
| accent-neutral-400 | accent-color: #a3a3a3;  |
| accent-neutral-500 | accent-color: #737373;  |
| accent-neutral-600 | accent-color: #525252;  |
| accent-neutral-700 | accent-color: #404040;  |
| accent-neutral-800 | accent-color: #262626;  |
| accent-neutral-900 | accent-color: #171717;  |
| accent-neutral-950 | accent-color: #0a0a0a;  |
| accent-stone-50 | accent-color: #fafaf9;  |
| accent-stone-100 | accent-color: #f5f5f4;  |
| accent-stone-200 | accent-color: #e7e5e4;  |
| accent-stone-300 | accent-color: #d6d3d1;  |
| accent-stone-400 | accent-color: #a8a29e;  |
| accent-stone-500 | accent-color: #78716c;  |
| accent-stone-600 | accent-color: #57534e;  |
| accent-stone-700 | accent-color: #44403c;  |
| accent-stone-800 | accent-color: #292524;  |
| accent-stone-900 | accent-color: #1c1917;  |
| accent-stone-950 | accent-color: #0c0a09;  |
| accent-red-50 | accent-color: #fef2f2;  |
| accent-red-100 | accent-color: #fee2e2;  |
| accent-red-200 | accent-color: #fecaca;  |
| accent-red-300 | accent-color: #fca5a5;  |
| accent-red-400 | accent-color: #f87171;  |
| accent-red-500 | accent-color: #ef4444;  |
| accent-red-600 | accent-color: #dc2626;  |
| accent-red-700 | accent-color: #b91c1c;  |
| accent-red-800 | accent-color: #991b1b;  |
| accent-red-900 | accent-color: #7f1d1d;  |
| accent-red-950 | accent-color: #450a0a;  |
| accent-orange-50 | accent-color: #fff7ed;  |
| accent-orange-100 | accent-color: #ffedd5;  |
| accent-orange-200 | accent-color: #fed7aa;  |
| accent-orange-300 | accent-color: #fdba74;  |
| accent-orange-400 | accent-color: #fb923c;  |
| accent-orange-500 | accent-color: #f97316;  |
| accent-orange-600 | accent-color: #ea580c;  |
| accent-orange-700 | accent-color: #c2410c;  |
| accent-orange-800 | accent-color: #9a3412;  |
| accent-orange-900 | accent-color: #7c2d12;  |
| accent-orange-950 | accent-color: #431407;  |
| accent-amber-50 | accent-color: #fffbeb;  |
| accent-amber-100 | accent-color: #fef3c7;  |
| accent-amber-200 | accent-color: #fde68a;  |
| accent-amber-300 | accent-color: #fcd34d;  |
| accent-amber-400 | accent-color: #fbbf24;  |
| accent-amber-500 | accent-color: #f59e0b;  |
| accent-amber-600 | accent-color: #d97706;  |
| accent-amber-700 | accent-color: #b45309;  |
| accent-amber-800 | accent-color: #92400e;  |
| accent-amber-900 | accent-color: #78350f;  |
| accent-amber-950 | accent-color: #451a03;  |
| accent-yellow-50 | accent-color: #fefce8;  |
| accent-yellow-100 | accent-color: #fef9c3;  |
| accent-yellow-200 | accent-color: #fef08a;  |
| accent-yellow-300 | accent-color: #fde047;  |
| accent-yellow-400 | accent-color: #facc15;  |
| accent-yellow-500 | accent-color: #eab308;  |
| accent-yellow-600 | accent-color: #ca8a04;  |
| accent-yellow-700 | accent-color: #a16207;  |
| accent-yellow-800 | accent-color: #854d0e;  |
| accent-yellow-900 | accent-color: #713f12;  |
| accent-yellow-950 | accent-color: #422006;  |
| accent-lime-50 | accent-color: #f7fee7;  |
| accent-lime-100 | accent-color: #ecfccb;  |
| accent-lime-200 | accent-color: #d9f99d;  |
| accent-lime-300 | accent-color: #bef264;  |
| accent-lime-400 | accent-color: #a3e635;  |
| accent-lime-500 | accent-color: #84cc16;  |
| accent-lime-600 | accent-color: #65a30d;  |
| accent-lime-700 | accent-color: #4d7c0f;  |
| accent-lime-800 | accent-color: #3f6212;  |
| accent-lime-900 | accent-color: #365314;  |
| accent-lime-950 | accent-color: #1a2e05;  |
| accent-green-50 | accent-color: #f0fdf4;  |
| accent-green-100 | accent-color: #dcfce7;  |
| accent-green-200 | accent-color: #bbf7d0;  |
| accent-green-300 | accent-color: #86efac;  |
| accent-green-400 | accent-color: #4ade80;  |
| accent-green-500 | accent-color: #22c55e;  |
| accent-green-600 | accent-color: #16a34a;  |
| accent-green-700 | accent-color: #15803d;  |
| accent-green-800 | accent-color: #166534;  |
| accent-green-900 | accent-color: #14532d;  |
| accent-green-950 | accent-color: #052e16;  |
| accent-emerald-50 | accent-color: #ecfdf5;  |
| accent-emerald-100 | accent-color: #d1fae5;  |
| accent-emerald-200 | accent-color: #a7f3d0;  |
| accent-emerald-300 | accent-color: #6ee7b7;  |
| accent-emerald-400 | accent-color: #34d399;  |
| accent-emerald-500 | accent-color: #10b981;  |
| accent-emerald-600 | accent-color: #059669;  |
| accent-emerald-700 | accent-color: #047857;  |
| accent-emerald-800 | accent-color: #065f46;  |
| accent-emerald-900 | accent-color: #064e3b;  |
| accent-emerald-950 | accent-color: #022c22;  |
| accent-teal-50 | accent-color: #f0fdfa;  |
| accent-teal-100 | accent-color: #ccfbf1;  |
| accent-teal-200 | accent-color: #99f6e4;  |
| accent-teal-300 | accent-color: #5eead4;  |
| accent-teal-400 | accent-color: #2dd4bf;  |
| accent-teal-500 | accent-color: #14b8a6;  |
| accent-teal-600 | accent-color: #0d9488;  |
| accent-teal-700 | accent-color: #0f766e;  |
| accent-teal-800 | accent-color: #115e59;  |
| accent-teal-900 | accent-color: #134e4a;  |
| accent-teal-950 | accent-color: #042f2e;  |
| accent-cyan-50 | accent-color: #ecfeff;  |
| accent-cyan-100 | accent-color: #cffafe;  |
| accent-cyan-200 | accent-color: #a5f3fc;  |
| accent-cyan-300 | accent-color: #67e8f9;  |
| accent-cyan-400 | accent-color: #22d3ee;  |
| accent-cyan-500 | accent-color: #06b6d4;  |
| accent-cyan-600 | accent-color: #0891b2;  |
| accent-cyan-700 | accent-color: #0e7490;  |
| accent-cyan-800 | accent-color: #155e75;  |
| accent-cyan-900 | accent-color: #164e63;  |
| accent-cyan-950 | accent-color: #083344;  |
| accent-sky-50 | accent-color: #f0f9ff;  |
| accent-sky-100 | accent-color: #e0f2fe;  |
| accent-sky-200 | accent-color: #bae6fd;  |
| accent-sky-300 | accent-color: #7dd3fc;  |
| accent-sky-400 | accent-color: #38bdf8;  |
| accent-sky-500 | accent-color: #0ea5e9;  |
| accent-sky-600 | accent-color: #0284c7;  |
| accent-sky-700 | accent-color: #0369a1;  |
| accent-sky-800 | accent-color: #075985;  |
| accent-sky-900 | accent-color: #0c4a6e;  |
| accent-sky-950 | accent-color: #082f49;  |
| accent-blue-50 | accent-color: #eff6ff;  |
| accent-blue-100 | accent-color: #dbeafe;  |
| accent-blue-200 | accent-color: #bfdbfe;  |
| accent-blue-300 | accent-color: #93c5fd;  |
| accent-blue-400 | accent-color: #60a5fa;  |
| accent-blue-500 | accent-color: #3b82f6;  |
| accent-blue-600 | accent-color: #2563eb;  |
| accent-blue-700 | accent-color: #1d4ed8;  |
| accent-blue-800 | accent-color: #1e40af;  |
| accent-blue-900 | accent-color: #1e3a8a;  |
| accent-blue-950 | accent-color: #172554;  |
| accent-indigo-50 | accent-color: #eef2ff;  |
| accent-indigo-100 | accent-color: #e0e7ff;  |
| accent-indigo-200 | accent-color: #c7d2fe;  |
| accent-indigo-300 | accent-color: #a5b4fc;  |
| accent-indigo-400 | accent-color: #818cf8;  |
| accent-indigo-500 | accent-color: #6366f1;  |
| accent-indigo-600 | accent-color: #4f46e5;  |
| accent-indigo-700 | accent-color: #4338ca;  |
| accent-indigo-800 | accent-color: #3730a3;  |
| accent-indigo-900 | accent-color: #312e81;  |
| accent-indigo-950 | accent-color: #1e1b4b;  |
| accent-violet-50 | accent-color: #f5f3ff;  |
| accent-violet-100 | accent-color: #ede9fe;  |
| accent-violet-200 | accent-color: #ddd6fe;  |
| accent-violet-300 | accent-color: #c4b5fd;  |
| accent-violet-400 | accent-color: #a78bfa;  |
| accent-violet-500 | accent-color: #8b5cf6;  |
| accent-violet-600 | accent-color: #7c3aed;  |
| accent-violet-700 | accent-color: #6d28d9;  |
| accent-violet-800 | accent-color: #5b21b6;  |
| accent-violet-900 | accent-color: #4c1d95;  |
| accent-violet-950 | accent-color: #2e1065;  |
| accent-purple-50 | accent-color: #faf5ff;  |
| accent-purple-100 | accent-color: #f3e8ff;  |
| accent-purple-200 | accent-color: #e9d5ff;  |
| accent-purple-300 | accent-color: #d8b4fe;  |
| accent-purple-400 | accent-color: #c084fc;  |
| accent-purple-500 | accent-color: #a855f7;  |
| accent-purple-600 | accent-color: #9333ea;  |
| accent-purple-700 | accent-color: #7e22ce;  |
| accent-purple-800 | accent-color: #6b21a8;  |
| accent-purple-900 | accent-color: #581c87;  |
| accent-purple-950 | accent-color: #3b0764;  |
| accent-fuchsia-50 | accent-color: #fdf4ff;  |
| accent-fuchsia-100 | accent-color: #fae8ff;  |
| accent-fuchsia-200 | accent-color: #f5d0fe;  |
| accent-fuchsia-300 | accent-color: #f0abfc;  |
| accent-fuchsia-400 | accent-color: #e879f9;  |
| accent-fuchsia-500 | accent-color: #d946ef;  |
| accent-fuchsia-600 | accent-color: #c026d3;  |
| accent-fuchsia-700 | accent-color: #a21caf;  |
| accent-fuchsia-800 | accent-color: #86198f;  |
| accent-fuchsia-900 | accent-color: #701a75;  |
| accent-fuchsia-950 | accent-color: #4a044e;  |
| accent-pink-50 | accent-color: #fdf2f8;  |
| accent-pink-100 | accent-color: #fce7f3;  |
| accent-pink-200 | accent-color: #fbcfe8;  |
| accent-pink-300 | accent-color: #f9a8d4;  |
| accent-pink-400 | accent-color: #f472b6;  |
| accent-pink-500 | accent-color: #ec4899;  |
| accent-pink-600 | accent-color: #db2777;  |
| accent-pink-700 | accent-color: #be185d;  |
| accent-pink-800 | accent-color: #9d174d;  |
| accent-pink-900 | accent-color: #831843;  |
| accent-pink-950 | accent-color: #500724;  |
| accent-rose-50 | accent-color: #fff1f2;  |
| accent-rose-100 | accent-color: #ffe4e6;  |
| accent-rose-200 | accent-color: #fecdd3;  |
| accent-rose-300 | accent-color: #fda4af;  |
| accent-rose-400 | accent-color: #fb7185;  |
| accent-rose-500 | accent-color: #f43f5e;  |
| accent-rose-600 | accent-color: #e11d48;  |
| accent-rose-700 | accent-color: #be123c;  |
| accent-rose-800 | accent-color: #9f1239;  |
| accent-rose-900 | accent-color: #881337;  |
| accent-rose-950 | accent-color: #4c0519;  |
| accent-auto | accent-color: auto;  |






Basic usage
-----------

 ### Setting the accent color

 Use the `accent-{color}` utilities to change the accent color of an element. This is helpful for styling elements like checkboxes and radio groups by overriding the browser’s default color.

 
```
<label>
  <input type="checkbox" checked> Browser default
</label>
<label>
  <input type="checkbox" class="accent-pink-500" checked> Customized
</label>
```
 ### Changing the opacity

 While it’s possible to control the opacity of the accent color using the color opacity modifier, the `rgba()` alpha value is only supported in Firefox at this time *(last tested November 2021)*.

 
```
<input type="checkbox" class="accent-emerald-500/25" checked> Emerald
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:accent-pink-500` to only apply the `accent-pink-500` utility on hover.



```
<input type="checkbox" class="accent-pink-300 focus:accent-pink-500" checked>
```

Note, while it’s possible to set an accent color using the `hover` and `active` modifiers, the resulting color will be slightly different than what you set, as browsers automatically adjust the brightness of the accent color for these two states.


For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:accent-pink-500` to apply the `accent-pink-500` utility at only medium screen sizes and above.



```
<input type="checkbox" class="accent-pink-300 md:accent-pink-500" checked>
```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as accent colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your accent colors by editing `theme.accentColor` or `theme.extend.accentColor` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `accent-color` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<input type="checkbox" class="accent-[#50d71e]" checked>
```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/accent-color>

Appearance
==========


Utilities for suppressing native form control styling.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| appearance-none | appearance: none;  |






Basic usage
-----------

 ### Removing default element appearance

 Use `appearance-none` to reset any browser specific styling on an element. This utility is often used when creating [custom form components](examples/forms).

 
```
<select>
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

<select class="appearance-none">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>
```







 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/appearance>

Cursor
======


Utilities for controlling the cursor style when hovering over an element.


Quick reference
---------------





| Class | Properties | 
Preview  |
| --- | --- | --- |
| cursor-auto | cursor: auto;  |  |
| cursor-default | cursor: default;  |  |
| cursor-pointer | cursor: pointer;  |  |
| cursor-wait | cursor: wait;  |  |
| cursor-text | cursor: text;  |  |
| cursor-move | cursor: move;  |  |
| cursor-help | cursor: help;  |  |
| cursor-not-allowed | cursor: not-allowed;  |  |
| cursor-none | cursor: none;  |  |
| cursor-context-menu | cursor: context-menu;  |  |
| cursor-progress | cursor: progress;  |  |
| cursor-cell | cursor: cell;  |  |
| cursor-crosshair | cursor: crosshair;  |  |
| cursor-vertical-text | cursor: vertical-text;  |  |
| cursor-alias | cursor: alias;  |  |
| cursor-copy | cursor: copy;  |  |
| cursor-no-drop | cursor: no-drop;  |  |
| cursor-grab | cursor: grab;  |  |
| cursor-grabbing | cursor: grabbing;  |  |
| cursor-all-scroll | cursor: all-scroll;  |  |
| cursor-col-resize | cursor: col-resize;  |  |
| cursor-row-resize | cursor: row-resize;  |  |
| cursor-n-resize | cursor: n-resize;  |  |
| cursor-e-resize | cursor: e-resize;  |  |
| cursor-s-resize | cursor: s-resize;  |  |
| cursor-w-resize | cursor: w-resize;  |  |
| cursor-ne-resize | cursor: ne-resize;  |  |
| cursor-nw-resize | cursor: nw-resize;  |  |
| cursor-se-resize | cursor: se-resize;  |  |
| cursor-sw-resize | cursor: sw-resize;  |  |
| cursor-ew-resize | cursor: ew-resize;  |  |
| cursor-ns-resize | cursor: ns-resize;  |  |
| cursor-nesw-resize | cursor: nesw-resize;  |  |
| cursor-nwse-resize | cursor: nwse-resize;  |  |
| cursor-zoom-in | cursor: zoom-in;  |  |
| cursor-zoom-out | cursor: zoom-out;  |  |






Basic usage
-----------

 ### Setting the cursor style

 Use the `cursor-{style}` to control which cursor is displayed when hovering over an element.

 
```
<button type="button" class="cursor-pointer ...">
  Submit
</button>
<button type="button" class="cursor-progress ...">
  Saving...
</button>
<button type="button" disabled class="cursor-not-allowed ...">
  Confirm
</button>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `focus:cursor-auto` to only apply the `cursor-auto` utility on focus.



```
<div class="cursor-not-allowed focus:cursor-auto">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:cursor-auto` to apply the `cursor-auto` utility at only medium screen sizes and above.



```
<div class="cursor-not-allowed md:cursor-auto">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes `cursor` utilities for many built in options. You can customize these values by editing `theme.cursor` or `theme.extend.cursor` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `cursor` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="cursor-[url(hand.cur),_pointer]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/cursor>

Caret Color
===========


Utilities for controlling the color of the text input cursor.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| caret-inherit | caret-color: inherit;  |
| caret-current | caret-color: currentColor;  |
| caret-transparent | caret-color: transparent;  |
| caret-black | caret-color: #000;  |
| caret-white | caret-color: #fff;  |
| caret-slate-50 | caret-color: #f8fafc;  |
| caret-slate-100 | caret-color: #f1f5f9;  |
| caret-slate-200 | caret-color: #e2e8f0;  |
| caret-slate-300 | caret-color: #cbd5e1;  |
| caret-slate-400 | caret-color: #94a3b8;  |
| caret-slate-500 | caret-color: #64748b;  |
| caret-slate-600 | caret-color: #475569;  |
| caret-slate-700 | caret-color: #334155;  |
| caret-slate-800 | caret-color: #1e293b;  |
| caret-slate-900 | caret-color: #0f172a;  |
| caret-slate-950 | caret-color: #020617;  |
| caret-gray-50 | caret-color: #f9fafb;  |
| caret-gray-100 | caret-color: #f3f4f6;  |
| caret-gray-200 | caret-color: #e5e7eb;  |
| caret-gray-300 | caret-color: #d1d5db;  |
| caret-gray-400 | caret-color: #9ca3af;  |
| caret-gray-500 | caret-color: #6b7280;  |
| caret-gray-600 | caret-color: #4b5563;  |
| caret-gray-700 | caret-color: #374151;  |
| caret-gray-800 | caret-color: #1f2937;  |
| caret-gray-900 | caret-color: #111827;  |
| caret-gray-950 | caret-color: #030712;  |
| caret-zinc-50 | caret-color: #fafafa;  |
| caret-zinc-100 | caret-color: #f4f4f5;  |
| caret-zinc-200 | caret-color: #e4e4e7;  |
| caret-zinc-300 | caret-color: #d4d4d8;  |
| caret-zinc-400 | caret-color: #a1a1aa;  |
| caret-zinc-500 | caret-color: #71717a;  |
| caret-zinc-600 | caret-color: #52525b;  |
| caret-zinc-700 | caret-color: #3f3f46;  |
| caret-zinc-800 | caret-color: #27272a;  |
| caret-zinc-900 | caret-color: #18181b;  |
| caret-zinc-950 | caret-color: #09090b;  |
| caret-neutral-50 | caret-color: #fafafa;  |
| caret-neutral-100 | caret-color: #f5f5f5;  |
| caret-neutral-200 | caret-color: #e5e5e5;  |
| caret-neutral-300 | caret-color: #d4d4d4;  |
| caret-neutral-400 | caret-color: #a3a3a3;  |
| caret-neutral-500 | caret-color: #737373;  |
| caret-neutral-600 | caret-color: #525252;  |
| caret-neutral-700 | caret-color: #404040;  |
| caret-neutral-800 | caret-color: #262626;  |
| caret-neutral-900 | caret-color: #171717;  |
| caret-neutral-950 | caret-color: #0a0a0a;  |
| caret-stone-50 | caret-color: #fafaf9;  |
| caret-stone-100 | caret-color: #f5f5f4;  |
| caret-stone-200 | caret-color: #e7e5e4;  |
| caret-stone-300 | caret-color: #d6d3d1;  |
| caret-stone-400 | caret-color: #a8a29e;  |
| caret-stone-500 | caret-color: #78716c;  |
| caret-stone-600 | caret-color: #57534e;  |
| caret-stone-700 | caret-color: #44403c;  |
| caret-stone-800 | caret-color: #292524;  |
| caret-stone-900 | caret-color: #1c1917;  |
| caret-stone-950 | caret-color: #0c0a09;  |
| caret-red-50 | caret-color: #fef2f2;  |
| caret-red-100 | caret-color: #fee2e2;  |
| caret-red-200 | caret-color: #fecaca;  |
| caret-red-300 | caret-color: #fca5a5;  |
| caret-red-400 | caret-color: #f87171;  |
| caret-red-500 | caret-color: #ef4444;  |
| caret-red-600 | caret-color: #dc2626;  |
| caret-red-700 | caret-color: #b91c1c;  |
| caret-red-800 | caret-color: #991b1b;  |
| caret-red-900 | caret-color: #7f1d1d;  |
| caret-red-950 | caret-color: #450a0a;  |
| caret-orange-50 | caret-color: #fff7ed;  |
| caret-orange-100 | caret-color: #ffedd5;  |
| caret-orange-200 | caret-color: #fed7aa;  |
| caret-orange-300 | caret-color: #fdba74;  |
| caret-orange-400 | caret-color: #fb923c;  |
| caret-orange-500 | caret-color: #f97316;  |
| caret-orange-600 | caret-color: #ea580c;  |
| caret-orange-700 | caret-color: #c2410c;  |
| caret-orange-800 | caret-color: #9a3412;  |
| caret-orange-900 | caret-color: #7c2d12;  |
| caret-orange-950 | caret-color: #431407;  |
| caret-amber-50 | caret-color: #fffbeb;  |
| caret-amber-100 | caret-color: #fef3c7;  |
| caret-amber-200 | caret-color: #fde68a;  |
| caret-amber-300 | caret-color: #fcd34d;  |
| caret-amber-400 | caret-color: #fbbf24;  |
| caret-amber-500 | caret-color: #f59e0b;  |
| caret-amber-600 | caret-color: #d97706;  |
| caret-amber-700 | caret-color: #b45309;  |
| caret-amber-800 | caret-color: #92400e;  |
| caret-amber-900 | caret-color: #78350f;  |
| caret-amber-950 | caret-color: #451a03;  |
| caret-yellow-50 | caret-color: #fefce8;  |
| caret-yellow-100 | caret-color: #fef9c3;  |
| caret-yellow-200 | caret-color: #fef08a;  |
| caret-yellow-300 | caret-color: #fde047;  |
| caret-yellow-400 | caret-color: #facc15;  |
| caret-yellow-500 | caret-color: #eab308;  |
| caret-yellow-600 | caret-color: #ca8a04;  |
| caret-yellow-700 | caret-color: #a16207;  |
| caret-yellow-800 | caret-color: #854d0e;  |
| caret-yellow-900 | caret-color: #713f12;  |
| caret-yellow-950 | caret-color: #422006;  |
| caret-lime-50 | caret-color: #f7fee7;  |
| caret-lime-100 | caret-color: #ecfccb;  |
| caret-lime-200 | caret-color: #d9f99d;  |
| caret-lime-300 | caret-color: #bef264;  |
| caret-lime-400 | caret-color: #a3e635;  |
| caret-lime-500 | caret-color: #84cc16;  |
| caret-lime-600 | caret-color: #65a30d;  |
| caret-lime-700 | caret-color: #4d7c0f;  |
| caret-lime-800 | caret-color: #3f6212;  |
| caret-lime-900 | caret-color: #365314;  |
| caret-lime-950 | caret-color: #1a2e05;  |
| caret-green-50 | caret-color: #f0fdf4;  |
| caret-green-100 | caret-color: #dcfce7;  |
| caret-green-200 | caret-color: #bbf7d0;  |
| caret-green-300 | caret-color: #86efac;  |
| caret-green-400 | caret-color: #4ade80;  |
| caret-green-500 | caret-color: #22c55e;  |
| caret-green-600 | caret-color: #16a34a;  |
| caret-green-700 | caret-color: #15803d;  |
| caret-green-800 | caret-color: #166534;  |
| caret-green-900 | caret-color: #14532d;  |
| caret-green-950 | caret-color: #052e16;  |
| caret-emerald-50 | caret-color: #ecfdf5;  |
| caret-emerald-100 | caret-color: #d1fae5;  |
| caret-emerald-200 | caret-color: #a7f3d0;  |
| caret-emerald-300 | caret-color: #6ee7b7;  |
| caret-emerald-400 | caret-color: #34d399;  |
| caret-emerald-500 | caret-color: #10b981;  |
| caret-emerald-600 | caret-color: #059669;  |
| caret-emerald-700 | caret-color: #047857;  |
| caret-emerald-800 | caret-color: #065f46;  |
| caret-emerald-900 | caret-color: #064e3b;  |
| caret-emerald-950 | caret-color: #022c22;  |
| caret-teal-50 | caret-color: #f0fdfa;  |
| caret-teal-100 | caret-color: #ccfbf1;  |
| caret-teal-200 | caret-color: #99f6e4;  |
| caret-teal-300 | caret-color: #5eead4;  |
| caret-teal-400 | caret-color: #2dd4bf;  |
| caret-teal-500 | caret-color: #14b8a6;  |
| caret-teal-600 | caret-color: #0d9488;  |
| caret-teal-700 | caret-color: #0f766e;  |
| caret-teal-800 | caret-color: #115e59;  |
| caret-teal-900 | caret-color: #134e4a;  |
| caret-teal-950 | caret-color: #042f2e;  |
| caret-cyan-50 | caret-color: #ecfeff;  |
| caret-cyan-100 | caret-color: #cffafe;  |
| caret-cyan-200 | caret-color: #a5f3fc;  |
| caret-cyan-300 | caret-color: #67e8f9;  |
| caret-cyan-400 | caret-color: #22d3ee;  |
| caret-cyan-500 | caret-color: #06b6d4;  |
| caret-cyan-600 | caret-color: #0891b2;  |
| caret-cyan-700 | caret-color: #0e7490;  |
| caret-cyan-800 | caret-color: #155e75;  |
| caret-cyan-900 | caret-color: #164e63;  |
| caret-cyan-950 | caret-color: #083344;  |
| caret-sky-50 | caret-color: #f0f9ff;  |
| caret-sky-100 | caret-color: #e0f2fe;  |
| caret-sky-200 | caret-color: #bae6fd;  |
| caret-sky-300 | caret-color: #7dd3fc;  |
| caret-sky-400 | caret-color: #38bdf8;  |
| caret-sky-500 | caret-color: #0ea5e9;  |
| caret-sky-600 | caret-color: #0284c7;  |
| caret-sky-700 | caret-color: #0369a1;  |
| caret-sky-800 | caret-color: #075985;  |
| caret-sky-900 | caret-color: #0c4a6e;  |
| caret-sky-950 | caret-color: #082f49;  |
| caret-blue-50 | caret-color: #eff6ff;  |
| caret-blue-100 | caret-color: #dbeafe;  |
| caret-blue-200 | caret-color: #bfdbfe;  |
| caret-blue-300 | caret-color: #93c5fd;  |
| caret-blue-400 | caret-color: #60a5fa;  |
| caret-blue-500 | caret-color: #3b82f6;  |
| caret-blue-600 | caret-color: #2563eb;  |
| caret-blue-700 | caret-color: #1d4ed8;  |
| caret-blue-800 | caret-color: #1e40af;  |
| caret-blue-900 | caret-color: #1e3a8a;  |
| caret-blue-950 | caret-color: #172554;  |
| caret-indigo-50 | caret-color: #eef2ff;  |
| caret-indigo-100 | caret-color: #e0e7ff;  |
| caret-indigo-200 | caret-color: #c7d2fe;  |
| caret-indigo-300 | caret-color: #a5b4fc;  |
| caret-indigo-400 | caret-color: #818cf8;  |
| caret-indigo-500 | caret-color: #6366f1;  |
| caret-indigo-600 | caret-color: #4f46e5;  |
| caret-indigo-700 | caret-color: #4338ca;  |
| caret-indigo-800 | caret-color: #3730a3;  |
| caret-indigo-900 | caret-color: #312e81;  |
| caret-indigo-950 | caret-color: #1e1b4b;  |
| caret-violet-50 | caret-color: #f5f3ff;  |
| caret-violet-100 | caret-color: #ede9fe;  |
| caret-violet-200 | caret-color: #ddd6fe;  |
| caret-violet-300 | caret-color: #c4b5fd;  |
| caret-violet-400 | caret-color: #a78bfa;  |
| caret-violet-500 | caret-color: #8b5cf6;  |
| caret-violet-600 | caret-color: #7c3aed;  |
| caret-violet-700 | caret-color: #6d28d9;  |
| caret-violet-800 | caret-color: #5b21b6;  |
| caret-violet-900 | caret-color: #4c1d95;  |
| caret-violet-950 | caret-color: #2e1065;  |
| caret-purple-50 | caret-color: #faf5ff;  |
| caret-purple-100 | caret-color: #f3e8ff;  |
| caret-purple-200 | caret-color: #e9d5ff;  |
| caret-purple-300 | caret-color: #d8b4fe;  |
| caret-purple-400 | caret-color: #c084fc;  |
| caret-purple-500 | caret-color: #a855f7;  |
| caret-purple-600 | caret-color: #9333ea;  |
| caret-purple-700 | caret-color: #7e22ce;  |
| caret-purple-800 | caret-color: #6b21a8;  |
| caret-purple-900 | caret-color: #581c87;  |
| caret-purple-950 | caret-color: #3b0764;  |
| caret-fuchsia-50 | caret-color: #fdf4ff;  |
| caret-fuchsia-100 | caret-color: #fae8ff;  |
| caret-fuchsia-200 | caret-color: #f5d0fe;  |
| caret-fuchsia-300 | caret-color: #f0abfc;  |
| caret-fuchsia-400 | caret-color: #e879f9;  |
| caret-fuchsia-500 | caret-color: #d946ef;  |
| caret-fuchsia-600 | caret-color: #c026d3;  |
| caret-fuchsia-700 | caret-color: #a21caf;  |
| caret-fuchsia-800 | caret-color: #86198f;  |
| caret-fuchsia-900 | caret-color: #701a75;  |
| caret-fuchsia-950 | caret-color: #4a044e;  |
| caret-pink-50 | caret-color: #fdf2f8;  |
| caret-pink-100 | caret-color: #fce7f3;  |
| caret-pink-200 | caret-color: #fbcfe8;  |
| caret-pink-300 | caret-color: #f9a8d4;  |
| caret-pink-400 | caret-color: #f472b6;  |
| caret-pink-500 | caret-color: #ec4899;  |
| caret-pink-600 | caret-color: #db2777;  |
| caret-pink-700 | caret-color: #be185d;  |
| caret-pink-800 | caret-color: #9d174d;  |
| caret-pink-900 | caret-color: #831843;  |
| caret-pink-950 | caret-color: #500724;  |
| caret-rose-50 | caret-color: #fff1f2;  |
| caret-rose-100 | caret-color: #ffe4e6;  |
| caret-rose-200 | caret-color: #fecdd3;  |
| caret-rose-300 | caret-color: #fda4af;  |
| caret-rose-400 | caret-color: #fb7185;  |
| caret-rose-500 | caret-color: #f43f5e;  |
| caret-rose-600 | caret-color: #e11d48;  |
| caret-rose-700 | caret-color: #be123c;  |
| caret-rose-800 | caret-color: #9f1239;  |
| caret-rose-900 | caret-color: #881337;  |
| caret-rose-950 | caret-color: #4c0519;  |






Basic usage
-----------

 ### Setting the caret color

 Use the `caret-{color}` utilities to change the color of the text input cursor.

 
```
<textarea class="caret-pink-500 ..."></textarea>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `focus:caret-indigo-500` to only apply the `caret-indigo-500` utility on focus.



```
<textarea class="caret-blue-500 focus:caret-indigo-500"></textarea>
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:caret-indigo-500` to apply the `caret-indigo-500` utility at only medium screen sizes and above.



```
<textarea class="caret-blue-500 md:caret-indigo-500"></textarea>
```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as caret colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your caret colors by editing `theme.caretColor` or `theme.extend.caretColor` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `caret-color` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<textarea class="caret-[#50d71e]"></textarea>
```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/caret-color>

Pointer Events
==============


Utilities for controlling whether an element responds to pointer events.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| pointer-events-none | pointer-events: none;  |
| pointer-events-auto | pointer-events: auto;  |






Basic usage
-----------

 ### Controlling pointer event behavior

 Use `pointer-events-auto` to revert to the default browser behavior for pointer events (like `:hover` and `click`).

 Use `pointer-events-none` to make an element ignore pointer events. The pointer events will still trigger on child elements and pass-through to elements that are “beneath” the target.

 
```
<div class="relative ...">
  <div class="absolute pointer-events-auto ...">
    <svg class="absolute text-slate-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
    </svg>
  </div>
  <input type="text" placeholder="Search" class="...">
</div>

<div class="relative ...">
  <div class="absolute pointer-events-none ...">
    <svg class="absolute text-slate-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
    </svg>
  </div>
  <input type="text" placeholder="Search" class="...">
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `focus:pointer-events-auto` to only apply the `pointer-events-auto` utility on focus.



```
<div class="pointer-events-none focus:pointer-events-auto">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:pointer-events-auto` to apply the `pointer-events-auto` utility at only medium screen sizes and above.



```
<div class="pointer-events-none md:pointer-events-auto">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/pointer-events>

Resize
======


Utilities for controlling how an element can be resized.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| resize-none | resize: none;  |
| resize-y | resize: vertical;  |
| resize-x | resize: horizontal;  |
| resize | resize: both;  |






Basic usage
-----------

 ### Resizing in all directions

 Use `resize` to make an element horizontally and vertically resizable.

 
```
<textarea class="resize rounded-md"></textarea>
```
 ### Resizing vertically

 Use `resize-y` to make an element vertically resizable.

 
```
<textarea class="resize-y rounded-md"></textarea>
```
 ### Resizing horizontally

 Use `resize-x` to make an element horizontally resizable.

 
```
<textarea class="resize-x rounded-md"></textarea>
```
 ### Preventing resizing

 Use `resize-none` to prevent an element from being resizable.

 
```
<textarea class="resize-none rounded-md"></textarea>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:resize` to only apply the `resize` utility on hover.



```
<div class="resize-none hover:resize">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:resize` to apply the `resize` utility at only medium screen sizes and above.



```
<div class="resize-none md:resize">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/resize>

Scroll Behavior
===============


Utilities for controlling the scroll behavior of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| scroll-auto | scroll-behavior: auto;  |
| scroll-smooth | scroll-behavior: smooth;  |






Basic usage
-----------

 ### Adding smooth scrolling

 Use the `scroll-smooth` utilities to enable smooth scrolling within an element.

 
```
<html class="scroll-smooth">
  <!-- ... -->
</html>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:scroll-auto` to only apply the `scroll-auto` utility on hover.



```
<html class="scroll-smooth hover:scroll-auto">
  <!-- ... -->
</html>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:scroll-auto` to apply the `scroll-auto` utility at only medium screen sizes and above.



```
<html class="scroll-smooth md:scroll-auto">
  <!-- ... -->
</html>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/scroll-behavior>

Scroll Margin
=============


Utilities for controlling the scroll offset around items in a snap container.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| scroll-m-0 | scroll-margin: 0px;  |
| scroll-mx-0 | scroll-margin-left: 0px; scroll-margin-right: 0px;  |
| scroll-my-0 | scroll-margin-top: 0px; scroll-margin-bottom: 0px;  |
| scroll-ms-0 | scroll-margin-inline-start: 0px;  |
| scroll-me-0 | scroll-margin-inline-end: 0px;  |
| scroll-mt-0 | scroll-margin-top: 0px;  |
| scroll-mr-0 | scroll-margin-right: 0px;  |
| scroll-mb-0 | scroll-margin-bottom: 0px;  |
| scroll-ml-0 | scroll-margin-left: 0px;  |
| scroll-m-px | scroll-margin: 1px;  |
| scroll-mx-px | scroll-margin-left: 1px; scroll-margin-right: 1px;  |
| scroll-my-px | scroll-margin-top: 1px; scroll-margin-bottom: 1px;  |
| scroll-ms-px | scroll-margin-inline-start: 1px;  |
| scroll-me-px | scroll-margin-inline-end: 1px;  |
| scroll-mt-px | scroll-margin-top: 1px;  |
| scroll-mr-px | scroll-margin-right: 1px;  |
| scroll-mb-px | scroll-margin-bottom: 1px;  |
| scroll-ml-px | scroll-margin-left: 1px;  |
| scroll-m-0.5 | scroll-margin: 0.125rem; /\* 2px \*/ |
| scroll-mx-0.5 | scroll-margin-left: 0.125rem; /\* 2px \*/ scroll-margin-right: 0.125rem; /\* 2px \*/ |
| scroll-my-0.5 | scroll-margin-top: 0.125rem; /\* 2px \*/ scroll-margin-bottom: 0.125rem; /\* 2px \*/ |
| scroll-ms-0.5 | scroll-margin-inline-start: 0.125rem; /\* 2px \*/ |
| scroll-me-0.5 | scroll-margin-inline-end: 0.125rem; /\* 2px \*/ |
| scroll-mt-0.5 | scroll-margin-top: 0.125rem; /\* 2px \*/ |
| scroll-mr-0.5 | scroll-margin-right: 0.125rem; /\* 2px \*/ |
| scroll-mb-0.5 | scroll-margin-bottom: 0.125rem; /\* 2px \*/ |
| scroll-ml-0.5 | scroll-margin-left: 0.125rem; /\* 2px \*/ |
| scroll-m-1 | scroll-margin: 0.25rem; /\* 4px \*/ |
| scroll-mx-1 | scroll-margin-left: 0.25rem; /\* 4px \*/ scroll-margin-right: 0.25rem; /\* 4px \*/ |
| scroll-my-1 | scroll-margin-top: 0.25rem; /\* 4px \*/ scroll-margin-bottom: 0.25rem; /\* 4px \*/ |
| scroll-ms-1 | scroll-margin-inline-start: 0.25rem; /\* 4px \*/ |
| scroll-me-1 | scroll-margin-inline-end: 0.25rem; /\* 4px \*/ |
| scroll-mt-1 | scroll-margin-top: 0.25rem; /\* 4px \*/ |
| scroll-mr-1 | scroll-margin-right: 0.25rem; /\* 4px \*/ |
| scroll-mb-1 | scroll-margin-bottom: 0.25rem; /\* 4px \*/ |
| scroll-ml-1 | scroll-margin-left: 0.25rem; /\* 4px \*/ |
| scroll-m-1.5 | scroll-margin: 0.375rem; /\* 6px \*/ |
| scroll-mx-1.5 | scroll-margin-left: 0.375rem; /\* 6px \*/ scroll-margin-right: 0.375rem; /\* 6px \*/ |
| scroll-my-1.5 | scroll-margin-top: 0.375rem; /\* 6px \*/ scroll-margin-bottom: 0.375rem; /\* 6px \*/ |
| scroll-ms-1.5 | scroll-margin-inline-start: 0.375rem; /\* 6px \*/ |
| scroll-me-1.5 | scroll-margin-inline-end: 0.375rem; /\* 6px \*/ |
| scroll-mt-1.5 | scroll-margin-top: 0.375rem; /\* 6px \*/ |
| scroll-mr-1.5 | scroll-margin-right: 0.375rem; /\* 6px \*/ |
| scroll-mb-1.5 | scroll-margin-bottom: 0.375rem; /\* 6px \*/ |
| scroll-ml-1.5 | scroll-margin-left: 0.375rem; /\* 6px \*/ |
| scroll-m-2 | scroll-margin: 0.5rem; /\* 8px \*/ |
| scroll-mx-2 | scroll-margin-left: 0.5rem; /\* 8px \*/ scroll-margin-right: 0.5rem; /\* 8px \*/ |
| scroll-my-2 | scroll-margin-top: 0.5rem; /\* 8px \*/ scroll-margin-bottom: 0.5rem; /\* 8px \*/ |
| scroll-ms-2 | scroll-margin-inline-start: 0.5rem; /\* 8px \*/ |
| scroll-me-2 | scroll-margin-inline-end: 0.5rem; /\* 8px \*/ |
| scroll-mt-2 | scroll-margin-top: 0.5rem; /\* 8px \*/ |
| scroll-mr-2 | scroll-margin-right: 0.5rem; /\* 8px \*/ |
| scroll-mb-2 | scroll-margin-bottom: 0.5rem; /\* 8px \*/ |
| scroll-ml-2 | scroll-margin-left: 0.5rem; /\* 8px \*/ |
| scroll-m-2.5 | scroll-margin: 0.625rem; /\* 10px \*/ |
| scroll-mx-2.5 | scroll-margin-left: 0.625rem; /\* 10px \*/ scroll-margin-right: 0.625rem; /\* 10px \*/ |
| scroll-my-2.5 | scroll-margin-top: 0.625rem; /\* 10px \*/ scroll-margin-bottom: 0.625rem; /\* 10px \*/ |
| scroll-ms-2.5 | scroll-margin-inline-start: 0.625rem; /\* 10px \*/ |
| scroll-me-2.5 | scroll-margin-inline-end: 0.625rem; /\* 10px \*/ |
| scroll-mt-2.5 | scroll-margin-top: 0.625rem; /\* 10px \*/ |
| scroll-mr-2.5 | scroll-margin-right: 0.625rem; /\* 10px \*/ |
| scroll-mb-2.5 | scroll-margin-bottom: 0.625rem; /\* 10px \*/ |
| scroll-ml-2.5 | scroll-margin-left: 0.625rem; /\* 10px \*/ |
| scroll-m-3 | scroll-margin: 0.75rem; /\* 12px \*/ |
| scroll-mx-3 | scroll-margin-left: 0.75rem; /\* 12px \*/ scroll-margin-right: 0.75rem; /\* 12px \*/ |
| scroll-my-3 | scroll-margin-top: 0.75rem; /\* 12px \*/ scroll-margin-bottom: 0.75rem; /\* 12px \*/ |
| scroll-ms-3 | scroll-margin-inline-start: 0.75rem; /\* 12px \*/ |
| scroll-me-3 | scroll-margin-inline-end: 0.75rem; /\* 12px \*/ |
| scroll-mt-3 | scroll-margin-top: 0.75rem; /\* 12px \*/ |
| scroll-mr-3 | scroll-margin-right: 0.75rem; /\* 12px \*/ |
| scroll-mb-3 | scroll-margin-bottom: 0.75rem; /\* 12px \*/ |
| scroll-ml-3 | scroll-margin-left: 0.75rem; /\* 12px \*/ |
| scroll-m-3.5 | scroll-margin: 0.875rem; /\* 14px \*/ |
| scroll-mx-3.5 | scroll-margin-left: 0.875rem; /\* 14px \*/ scroll-margin-right: 0.875rem; /\* 14px \*/ |
| scroll-my-3.5 | scroll-margin-top: 0.875rem; /\* 14px \*/ scroll-margin-bottom: 0.875rem; /\* 14px \*/ |
| scroll-ms-3.5 | scroll-margin-inline-start: 0.875rem; /\* 14px \*/ |
| scroll-me-3.5 | scroll-margin-inline-end: 0.875rem; /\* 14px \*/ |
| scroll-mt-3.5 | scroll-margin-top: 0.875rem; /\* 14px \*/ |
| scroll-mr-3.5 | scroll-margin-right: 0.875rem; /\* 14px \*/ |
| scroll-mb-3.5 | scroll-margin-bottom: 0.875rem; /\* 14px \*/ |
| scroll-ml-3.5 | scroll-margin-left: 0.875rem; /\* 14px \*/ |
| scroll-m-4 | scroll-margin: 1rem; /\* 16px \*/ |
| scroll-mx-4 | scroll-margin-left: 1rem; /\* 16px \*/ scroll-margin-right: 1rem; /\* 16px \*/ |
| scroll-my-4 | scroll-margin-top: 1rem; /\* 16px \*/ scroll-margin-bottom: 1rem; /\* 16px \*/ |
| scroll-ms-4 | scroll-margin-inline-start: 1rem; /\* 16px \*/ |
| scroll-me-4 | scroll-margin-inline-end: 1rem; /\* 16px \*/ |
| scroll-mt-4 | scroll-margin-top: 1rem; /\* 16px \*/ |
| scroll-mr-4 | scroll-margin-right: 1rem; /\* 16px \*/ |
| scroll-mb-4 | scroll-margin-bottom: 1rem; /\* 16px \*/ |
| scroll-ml-4 | scroll-margin-left: 1rem; /\* 16px \*/ |
| scroll-m-5 | scroll-margin: 1.25rem; /\* 20px \*/ |
| scroll-mx-5 | scroll-margin-left: 1.25rem; /\* 20px \*/ scroll-margin-right: 1.25rem; /\* 20px \*/ |
| scroll-my-5 | scroll-margin-top: 1.25rem; /\* 20px \*/ scroll-margin-bottom: 1.25rem; /\* 20px \*/ |
| scroll-ms-5 | scroll-margin-inline-start: 1.25rem; /\* 20px \*/ |
| scroll-me-5 | scroll-margin-inline-end: 1.25rem; /\* 20px \*/ |
| scroll-mt-5 | scroll-margin-top: 1.25rem; /\* 20px \*/ |
| scroll-mr-5 | scroll-margin-right: 1.25rem; /\* 20px \*/ |
| scroll-mb-5 | scroll-margin-bottom: 1.25rem; /\* 20px \*/ |
| scroll-ml-5 | scroll-margin-left: 1.25rem; /\* 20px \*/ |
| scroll-m-6 | scroll-margin: 1.5rem; /\* 24px \*/ |
| scroll-mx-6 | scroll-margin-left: 1.5rem; /\* 24px \*/ scroll-margin-right: 1.5rem; /\* 24px \*/ |
| scroll-my-6 | scroll-margin-top: 1.5rem; /\* 24px \*/ scroll-margin-bottom: 1.5rem; /\* 24px \*/ |
| scroll-ms-6 | scroll-margin-inline-start: 1.5rem; /\* 24px \*/ |
| scroll-me-6 | scroll-margin-inline-end: 1.5rem; /\* 24px \*/ |
| scroll-mt-6 | scroll-margin-top: 1.5rem; /\* 24px \*/ |
| scroll-mr-6 | scroll-margin-right: 1.5rem; /\* 24px \*/ |
| scroll-mb-6 | scroll-margin-bottom: 1.5rem; /\* 24px \*/ |
| scroll-ml-6 | scroll-margin-left: 1.5rem; /\* 24px \*/ |
| scroll-m-7 | scroll-margin: 1.75rem; /\* 28px \*/ |
| scroll-mx-7 | scroll-margin-left: 1.75rem; /\* 28px \*/ scroll-margin-right: 1.75rem; /\* 28px \*/ |
| scroll-my-7 | scroll-margin-top: 1.75rem; /\* 28px \*/ scroll-margin-bottom: 1.75rem; /\* 28px \*/ |
| scroll-ms-7 | scroll-margin-inline-start: 1.75rem; /\* 28px \*/ |
| scroll-me-7 | scroll-margin-inline-end: 1.75rem; /\* 28px \*/ |
| scroll-mt-7 | scroll-margin-top: 1.75rem; /\* 28px \*/ |
| scroll-mr-7 | scroll-margin-right: 1.75rem; /\* 28px \*/ |
| scroll-mb-7 | scroll-margin-bottom: 1.75rem; /\* 28px \*/ |
| scroll-ml-7 | scroll-margin-left: 1.75rem; /\* 28px \*/ |
| scroll-m-8 | scroll-margin: 2rem; /\* 32px \*/ |
| scroll-mx-8 | scroll-margin-left: 2rem; /\* 32px \*/ scroll-margin-right: 2rem; /\* 32px \*/ |
| scroll-my-8 | scroll-margin-top: 2rem; /\* 32px \*/ scroll-margin-bottom: 2rem; /\* 32px \*/ |
| scroll-ms-8 | scroll-margin-inline-start: 2rem; /\* 32px \*/ |
| scroll-me-8 | scroll-margin-inline-end: 2rem; /\* 32px \*/ |
| scroll-mt-8 | scroll-margin-top: 2rem; /\* 32px \*/ |
| scroll-mr-8 | scroll-margin-right: 2rem; /\* 32px \*/ |
| scroll-mb-8 | scroll-margin-bottom: 2rem; /\* 32px \*/ |
| scroll-ml-8 | scroll-margin-left: 2rem; /\* 32px \*/ |
| scroll-m-9 | scroll-margin: 2.25rem; /\* 36px \*/ |
| scroll-mx-9 | scroll-margin-left: 2.25rem; /\* 36px \*/ scroll-margin-right: 2.25rem; /\* 36px \*/ |
| scroll-my-9 | scroll-margin-top: 2.25rem; /\* 36px \*/ scroll-margin-bottom: 2.25rem; /\* 36px \*/ |
| scroll-ms-9 | scroll-margin-inline-start: 2.25rem; /\* 36px \*/ |
| scroll-me-9 | scroll-margin-inline-end: 2.25rem; /\* 36px \*/ |
| scroll-mt-9 | scroll-margin-top: 2.25rem; /\* 36px \*/ |
| scroll-mr-9 | scroll-margin-right: 2.25rem; /\* 36px \*/ |
| scroll-mb-9 | scroll-margin-bottom: 2.25rem; /\* 36px \*/ |
| scroll-ml-9 | scroll-margin-left: 2.25rem; /\* 36px \*/ |
| scroll-m-10 | scroll-margin: 2.5rem; /\* 40px \*/ |
| scroll-mx-10 | scroll-margin-left: 2.5rem; /\* 40px \*/ scroll-margin-right: 2.5rem; /\* 40px \*/ |
| scroll-my-10 | scroll-margin-top: 2.5rem; /\* 40px \*/ scroll-margin-bottom: 2.5rem; /\* 40px \*/ |
| scroll-ms-10 | scroll-margin-inline-start: 2.5rem; /\* 40px \*/ |
| scroll-me-10 | scroll-margin-inline-end: 2.5rem; /\* 40px \*/ |
| scroll-mt-10 | scroll-margin-top: 2.5rem; /\* 40px \*/ |
| scroll-mr-10 | scroll-margin-right: 2.5rem; /\* 40px \*/ |
| scroll-mb-10 | scroll-margin-bottom: 2.5rem; /\* 40px \*/ |
| scroll-ml-10 | scroll-margin-left: 2.5rem; /\* 40px \*/ |
| scroll-m-11 | scroll-margin: 2.75rem; /\* 44px \*/ |
| scroll-mx-11 | scroll-margin-left: 2.75rem; /\* 44px \*/ scroll-margin-right: 2.75rem; /\* 44px \*/ |
| scroll-my-11 | scroll-margin-top: 2.75rem; /\* 44px \*/ scroll-margin-bottom: 2.75rem; /\* 44px \*/ |
| scroll-ms-11 | scroll-margin-inline-start: 2.75rem; /\* 44px \*/ |
| scroll-me-11 | scroll-margin-inline-end: 2.75rem; /\* 44px \*/ |
| scroll-mt-11 | scroll-margin-top: 2.75rem; /\* 44px \*/ |
| scroll-mr-11 | scroll-margin-right: 2.75rem; /\* 44px \*/ |
| scroll-mb-11 | scroll-margin-bottom: 2.75rem; /\* 44px \*/ |
| scroll-ml-11 | scroll-margin-left: 2.75rem; /\* 44px \*/ |
| scroll-m-12 | scroll-margin: 3rem; /\* 48px \*/ |
| scroll-mx-12 | scroll-margin-left: 3rem; /\* 48px \*/ scroll-margin-right: 3rem; /\* 48px \*/ |
| scroll-my-12 | scroll-margin-top: 3rem; /\* 48px \*/ scroll-margin-bottom: 3rem; /\* 48px \*/ |
| scroll-ms-12 | scroll-margin-inline-start: 3rem; /\* 48px \*/ |
| scroll-me-12 | scroll-margin-inline-end: 3rem; /\* 48px \*/ |
| scroll-mt-12 | scroll-margin-top: 3rem; /\* 48px \*/ |
| scroll-mr-12 | scroll-margin-right: 3rem; /\* 48px \*/ |
| scroll-mb-12 | scroll-margin-bottom: 3rem; /\* 48px \*/ |
| scroll-ml-12 | scroll-margin-left: 3rem; /\* 48px \*/ |
| scroll-m-14 | scroll-margin: 3.5rem; /\* 56px \*/ |
| scroll-mx-14 | scroll-margin-left: 3.5rem; /\* 56px \*/ scroll-margin-right: 3.5rem; /\* 56px \*/ |
| scroll-my-14 | scroll-margin-top: 3.5rem; /\* 56px \*/ scroll-margin-bottom: 3.5rem; /\* 56px \*/ |
| scroll-ms-14 | scroll-margin-inline-start: 3.5rem; /\* 56px \*/ |
| scroll-me-14 | scroll-margin-inline-end: 3.5rem; /\* 56px \*/ |
| scroll-mt-14 | scroll-margin-top: 3.5rem; /\* 56px \*/ |
| scroll-mr-14 | scroll-margin-right: 3.5rem; /\* 56px \*/ |
| scroll-mb-14 | scroll-margin-bottom: 3.5rem; /\* 56px \*/ |
| scroll-ml-14 | scroll-margin-left: 3.5rem; /\* 56px \*/ |
| scroll-m-16 | scroll-margin: 4rem; /\* 64px \*/ |
| scroll-mx-16 | scroll-margin-left: 4rem; /\* 64px \*/ scroll-margin-right: 4rem; /\* 64px \*/ |
| scroll-my-16 | scroll-margin-top: 4rem; /\* 64px \*/ scroll-margin-bottom: 4rem; /\* 64px \*/ |
| scroll-ms-16 | scroll-margin-inline-start: 4rem; /\* 64px \*/ |
| scroll-me-16 | scroll-margin-inline-end: 4rem; /\* 64px \*/ |
| scroll-mt-16 | scroll-margin-top: 4rem; /\* 64px \*/ |
| scroll-mr-16 | scroll-margin-right: 4rem; /\* 64px \*/ |
| scroll-mb-16 | scroll-margin-bottom: 4rem; /\* 64px \*/ |
| scroll-ml-16 | scroll-margin-left: 4rem; /\* 64px \*/ |
| scroll-m-20 | scroll-margin: 5rem; /\* 80px \*/ |
| scroll-mx-20 | scroll-margin-left: 5rem; /\* 80px \*/ scroll-margin-right: 5rem; /\* 80px \*/ |
| scroll-my-20 | scroll-margin-top: 5rem; /\* 80px \*/ scroll-margin-bottom: 5rem; /\* 80px \*/ |
| scroll-ms-20 | scroll-margin-inline-start: 5rem; /\* 80px \*/ |
| scroll-me-20 | scroll-margin-inline-end: 5rem; /\* 80px \*/ |
| scroll-mt-20 | scroll-margin-top: 5rem; /\* 80px \*/ |
| scroll-mr-20 | scroll-margin-right: 5rem; /\* 80px \*/ |
| scroll-mb-20 | scroll-margin-bottom: 5rem; /\* 80px \*/ |
| scroll-ml-20 | scroll-margin-left: 5rem; /\* 80px \*/ |
| scroll-m-24 | scroll-margin: 6rem; /\* 96px \*/ |
| scroll-mx-24 | scroll-margin-left: 6rem; /\* 96px \*/ scroll-margin-right: 6rem; /\* 96px \*/ |
| scroll-my-24 | scroll-margin-top: 6rem; /\* 96px \*/ scroll-margin-bottom: 6rem; /\* 96px \*/ |
| scroll-ms-24 | scroll-margin-inline-start: 6rem; /\* 96px \*/ |
| scroll-me-24 | scroll-margin-inline-end: 6rem; /\* 96px \*/ |
| scroll-mt-24 | scroll-margin-top: 6rem; /\* 96px \*/ |
| scroll-mr-24 | scroll-margin-right: 6rem; /\* 96px \*/ |
| scroll-mb-24 | scroll-margin-bottom: 6rem; /\* 96px \*/ |
| scroll-ml-24 | scroll-margin-left: 6rem; /\* 96px \*/ |
| scroll-m-28 | scroll-margin: 7rem; /\* 112px \*/ |
| scroll-mx-28 | scroll-margin-left: 7rem; /\* 112px \*/ scroll-margin-right: 7rem; /\* 112px \*/ |
| scroll-my-28 | scroll-margin-top: 7rem; /\* 112px \*/ scroll-margin-bottom: 7rem; /\* 112px \*/ |
| scroll-ms-28 | scroll-margin-inline-start: 7rem; /\* 112px \*/ |
| scroll-me-28 | scroll-margin-inline-end: 7rem; /\* 112px \*/ |
| scroll-mt-28 | scroll-margin-top: 7rem; /\* 112px \*/ |
| scroll-mr-28 | scroll-margin-right: 7rem; /\* 112px \*/ |
| scroll-mb-28 | scroll-margin-bottom: 7rem; /\* 112px \*/ |
| scroll-ml-28 | scroll-margin-left: 7rem; /\* 112px \*/ |
| scroll-m-32 | scroll-margin: 8rem; /\* 128px \*/ |
| scroll-mx-32 | scroll-margin-left: 8rem; /\* 128px \*/ scroll-margin-right: 8rem; /\* 128px \*/ |
| scroll-my-32 | scroll-margin-top: 8rem; /\* 128px \*/ scroll-margin-bottom: 8rem; /\* 128px \*/ |
| scroll-ms-32 | scroll-margin-inline-start: 8rem; /\* 128px \*/ |
| scroll-me-32 | scroll-margin-inline-end: 8rem; /\* 128px \*/ |
| scroll-mt-32 | scroll-margin-top: 8rem; /\* 128px \*/ |
| scroll-mr-32 | scroll-margin-right: 8rem; /\* 128px \*/ |
| scroll-mb-32 | scroll-margin-bottom: 8rem; /\* 128px \*/ |
| scroll-ml-32 | scroll-margin-left: 8rem; /\* 128px \*/ |
| scroll-m-36 | scroll-margin: 9rem; /\* 144px \*/ |
| scroll-mx-36 | scroll-margin-left: 9rem; /\* 144px \*/ scroll-margin-right: 9rem; /\* 144px \*/ |
| scroll-my-36 | scroll-margin-top: 9rem; /\* 144px \*/ scroll-margin-bottom: 9rem; /\* 144px \*/ |
| scroll-ms-36 | scroll-margin-inline-start: 9rem; /\* 144px \*/ |
| scroll-me-36 | scroll-margin-inline-end: 9rem; /\* 144px \*/ |
| scroll-mt-36 | scroll-margin-top: 9rem; /\* 144px \*/ |
| scroll-mr-36 | scroll-margin-right: 9rem; /\* 144px \*/ |
| scroll-mb-36 | scroll-margin-bottom: 9rem; /\* 144px \*/ |
| scroll-ml-36 | scroll-margin-left: 9rem; /\* 144px \*/ |
| scroll-m-40 | scroll-margin: 10rem; /\* 160px \*/ |
| scroll-mx-40 | scroll-margin-left: 10rem; /\* 160px \*/ scroll-margin-right: 10rem; /\* 160px \*/ |
| scroll-my-40 | scroll-margin-top: 10rem; /\* 160px \*/ scroll-margin-bottom: 10rem; /\* 160px \*/ |
| scroll-ms-40 | scroll-margin-inline-start: 10rem; /\* 160px \*/ |
| scroll-me-40 | scroll-margin-inline-end: 10rem; /\* 160px \*/ |
| scroll-mt-40 | scroll-margin-top: 10rem; /\* 160px \*/ |
| scroll-mr-40 | scroll-margin-right: 10rem; /\* 160px \*/ |
| scroll-mb-40 | scroll-margin-bottom: 10rem; /\* 160px \*/ |
| scroll-ml-40 | scroll-margin-left: 10rem; /\* 160px \*/ |
| scroll-m-44 | scroll-margin: 11rem; /\* 176px \*/ |
| scroll-mx-44 | scroll-margin-left: 11rem; /\* 176px \*/ scroll-margin-right: 11rem; /\* 176px \*/ |
| scroll-my-44 | scroll-margin-top: 11rem; /\* 176px \*/ scroll-margin-bottom: 11rem; /\* 176px \*/ |
| scroll-ms-44 | scroll-margin-inline-start: 11rem; /\* 176px \*/ |
| scroll-me-44 | scroll-margin-inline-end: 11rem; /\* 176px \*/ |
| scroll-mt-44 | scroll-margin-top: 11rem; /\* 176px \*/ |
| scroll-mr-44 | scroll-margin-right: 11rem; /\* 176px \*/ |
| scroll-mb-44 | scroll-margin-bottom: 11rem; /\* 176px \*/ |
| scroll-ml-44 | scroll-margin-left: 11rem; /\* 176px \*/ |
| scroll-m-48 | scroll-margin: 12rem; /\* 192px \*/ |
| scroll-mx-48 | scroll-margin-left: 12rem; /\* 192px \*/ scroll-margin-right: 12rem; /\* 192px \*/ |
| scroll-my-48 | scroll-margin-top: 12rem; /\* 192px \*/ scroll-margin-bottom: 12rem; /\* 192px \*/ |
| scroll-ms-48 | scroll-margin-inline-start: 12rem; /\* 192px \*/ |
| scroll-me-48 | scroll-margin-inline-end: 12rem; /\* 192px \*/ |
| scroll-mt-48 | scroll-margin-top: 12rem; /\* 192px \*/ |
| scroll-mr-48 | scroll-margin-right: 12rem; /\* 192px \*/ |
| scroll-mb-48 | scroll-margin-bottom: 12rem; /\* 192px \*/ |
| scroll-ml-48 | scroll-margin-left: 12rem; /\* 192px \*/ |
| scroll-m-52 | scroll-margin: 13rem; /\* 208px \*/ |
| scroll-mx-52 | scroll-margin-left: 13rem; /\* 208px \*/ scroll-margin-right: 13rem; /\* 208px \*/ |
| scroll-my-52 | scroll-margin-top: 13rem; /\* 208px \*/ scroll-margin-bottom: 13rem; /\* 208px \*/ |
| scroll-ms-52 | scroll-margin-inline-start: 13rem; /\* 208px \*/ |
| scroll-me-52 | scroll-margin-inline-end: 13rem; /\* 208px \*/ |
| scroll-mt-52 | scroll-margin-top: 13rem; /\* 208px \*/ |
| scroll-mr-52 | scroll-margin-right: 13rem; /\* 208px \*/ |
| scroll-mb-52 | scroll-margin-bottom: 13rem; /\* 208px \*/ |
| scroll-ml-52 | scroll-margin-left: 13rem; /\* 208px \*/ |
| scroll-m-56 | scroll-margin: 14rem; /\* 224px \*/ |
| scroll-mx-56 | scroll-margin-left: 14rem; /\* 224px \*/ scroll-margin-right: 14rem; /\* 224px \*/ |
| scroll-my-56 | scroll-margin-top: 14rem; /\* 224px \*/ scroll-margin-bottom: 14rem; /\* 224px \*/ |
| scroll-ms-56 | scroll-margin-inline-start: 14rem; /\* 224px \*/ |
| scroll-me-56 | scroll-margin-inline-end: 14rem; /\* 224px \*/ |
| scroll-mt-56 | scroll-margin-top: 14rem; /\* 224px \*/ |
| scroll-mr-56 | scroll-margin-right: 14rem; /\* 224px \*/ |
| scroll-mb-56 | scroll-margin-bottom: 14rem; /\* 224px \*/ |
| scroll-ml-56 | scroll-margin-left: 14rem; /\* 224px \*/ |
| scroll-m-60 | scroll-margin: 15rem; /\* 240px \*/ |
| scroll-mx-60 | scroll-margin-left: 15rem; /\* 240px \*/ scroll-margin-right: 15rem; /\* 240px \*/ |
| scroll-my-60 | scroll-margin-top: 15rem; /\* 240px \*/ scroll-margin-bottom: 15rem; /\* 240px \*/ |
| scroll-ms-60 | scroll-margin-inline-start: 15rem; /\* 240px \*/ |
| scroll-me-60 | scroll-margin-inline-end: 15rem; /\* 240px \*/ |
| scroll-mt-60 | scroll-margin-top: 15rem; /\* 240px \*/ |
| scroll-mr-60 | scroll-margin-right: 15rem; /\* 240px \*/ |
| scroll-mb-60 | scroll-margin-bottom: 15rem; /\* 240px \*/ |
| scroll-ml-60 | scroll-margin-left: 15rem; /\* 240px \*/ |
| scroll-m-64 | scroll-margin: 16rem; /\* 256px \*/ |
| scroll-mx-64 | scroll-margin-left: 16rem; /\* 256px \*/ scroll-margin-right: 16rem; /\* 256px \*/ |
| scroll-my-64 | scroll-margin-top: 16rem; /\* 256px \*/ scroll-margin-bottom: 16rem; /\* 256px \*/ |
| scroll-ms-64 | scroll-margin-inline-start: 16rem; /\* 256px \*/ |
| scroll-me-64 | scroll-margin-inline-end: 16rem; /\* 256px \*/ |
| scroll-mt-64 | scroll-margin-top: 16rem; /\* 256px \*/ |
| scroll-mr-64 | scroll-margin-right: 16rem; /\* 256px \*/ |
| scroll-mb-64 | scroll-margin-bottom: 16rem; /\* 256px \*/ |
| scroll-ml-64 | scroll-margin-left: 16rem; /\* 256px \*/ |
| scroll-m-72 | scroll-margin: 18rem; /\* 288px \*/ |
| scroll-mx-72 | scroll-margin-left: 18rem; /\* 288px \*/ scroll-margin-right: 18rem; /\* 288px \*/ |
| scroll-my-72 | scroll-margin-top: 18rem; /\* 288px \*/ scroll-margin-bottom: 18rem; /\* 288px \*/ |
| scroll-ms-72 | scroll-margin-inline-start: 18rem; /\* 288px \*/ |
| scroll-me-72 | scroll-margin-inline-end: 18rem; /\* 288px \*/ |
| scroll-mt-72 | scroll-margin-top: 18rem; /\* 288px \*/ |
| scroll-mr-72 | scroll-margin-right: 18rem; /\* 288px \*/ |
| scroll-mb-72 | scroll-margin-bottom: 18rem; /\* 288px \*/ |
| scroll-ml-72 | scroll-margin-left: 18rem; /\* 288px \*/ |
| scroll-m-80 | scroll-margin: 20rem; /\* 320px \*/ |
| scroll-mx-80 | scroll-margin-left: 20rem; /\* 320px \*/ scroll-margin-right: 20rem; /\* 320px \*/ |
| scroll-my-80 | scroll-margin-top: 20rem; /\* 320px \*/ scroll-margin-bottom: 20rem; /\* 320px \*/ |
| scroll-ms-80 | scroll-margin-inline-start: 20rem; /\* 320px \*/ |
| scroll-me-80 | scroll-margin-inline-end: 20rem; /\* 320px \*/ |
| scroll-mt-80 | scroll-margin-top: 20rem; /\* 320px \*/ |
| scroll-mr-80 | scroll-margin-right: 20rem; /\* 320px \*/ |
| scroll-mb-80 | scroll-margin-bottom: 20rem; /\* 320px \*/ |
| scroll-ml-80 | scroll-margin-left: 20rem; /\* 320px \*/ |
| scroll-m-96 | scroll-margin: 24rem; /\* 384px \*/ |
| scroll-mx-96 | scroll-margin-left: 24rem; /\* 384px \*/ scroll-margin-right: 24rem; /\* 384px \*/ |
| scroll-my-96 | scroll-margin-top: 24rem; /\* 384px \*/ scroll-margin-bottom: 24rem; /\* 384px \*/ |
| scroll-ms-96 | scroll-margin-inline-start: 24rem; /\* 384px \*/ |
| scroll-me-96 | scroll-margin-inline-end: 24rem; /\* 384px \*/ |
| scroll-mt-96 | scroll-margin-top: 24rem; /\* 384px \*/ |
| scroll-mr-96 | scroll-margin-right: 24rem; /\* 384px \*/ |
| scroll-mb-96 | scroll-margin-bottom: 24rem; /\* 384px \*/ |
| scroll-ml-96 | scroll-margin-left: 24rem; /\* 384px \*/ |






Basic usage
-----------

 ### Setting the scroll margin

 Use the `scroll-m{side}-{size}` utilities to set the scroll offset around items within a snap container.

 
```
<div class="snap-x ...">
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="scroll-ml-6 snap-start ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>
```
 ### Using negative values

 To use a negative scroll margin value, prefix the class name with a dash to convert it to a negative value.

 
```
<div class="-scroll-ml-6 snap-start ...">
  <!-- ... -->
</div>
```
 ### Using logical properties

 Use the `scroll-ms-*` and `scroll-me-*` utilities to set the `scroll-margin-inline-start` and `scroll-margin-inline-end` [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right side based on the text direction.

 
```
<div dir="ltr">
  <div class="snap-x ...">
    <div class="scroll-ms-6 snap-start ...">
      <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
    </div>
    <!-- ... -->
  </div>
</div>

<div dir="rtl">
  <div class="snap-x ...">
    <div class="scroll-ms-6 snap-start ...">
      <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
    </div>
    <!-- ... -->
  </div>
</div>
```
 For more control, you can also use the [LTR and RTL modifiers](hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:scroll-m-0` to only apply the `scroll-m-0` utility on hover.



```
<div class="scroll-m-8 hover:scroll-m-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:scroll-m-0` to apply the `scroll-m-0` utility at only medium screen sizes and above.



```
<div class="scroll-m-8 md:scroll-m-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind’s scroll margin scale uses the [default spacing scale](customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '96': '24rem',
      }
    }
  }
}

```

 Alternatively, you can customize just the scroll margin scale by editing `theme.scrollMargin` or `theme.extend.scrollMargin` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      scrollMargin: {
        '96': '24rem',
      },
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `scroll-margin` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="scroll-m-[24rem]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/scroll-margin>

Scroll Padding
==============


Utilities for controlling an element's scroll offset within a snap container.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| scroll-p-0 | scroll-padding: 0px;  |
| scroll-px-0 | scroll-padding-left: 0px; scroll-padding-right: 0px;  |
| scroll-py-0 | scroll-padding-top: 0px; scroll-padding-bottom: 0px;  |
| scroll-ps-0 | scroll-padding-inline-start: 0px;  |
| scroll-pe-0 | scroll-padding-inline-end: 0px;  |
| scroll-pt-0 | scroll-padding-top: 0px;  |
| scroll-pr-0 | scroll-padding-right: 0px;  |
| scroll-pb-0 | scroll-padding-bottom: 0px;  |
| scroll-pl-0 | scroll-padding-left: 0px;  |
| scroll-p-px | scroll-padding: 1px;  |
| scroll-px-px | scroll-padding-left: 1px; scroll-padding-right: 1px;  |
| scroll-py-px | scroll-padding-top: 1px; scroll-padding-bottom: 1px;  |
| scroll-ps-px | scroll-padding-inline-start: 1px;  |
| scroll-pe-px | scroll-padding-inline-end: 1px;  |
| scroll-pt-px | scroll-padding-top: 1px;  |
| scroll-pr-px | scroll-padding-right: 1px;  |
| scroll-pb-px | scroll-padding-bottom: 1px;  |
| scroll-pl-px | scroll-padding-left: 1px;  |
| scroll-p-0.5 | scroll-padding: 0.125rem; /\* 2px \*/ |
| scroll-px-0.5 | scroll-padding-left: 0.125rem; /\* 2px \*/ scroll-padding-right: 0.125rem; /\* 2px \*/ |
| scroll-py-0.5 | scroll-padding-top: 0.125rem; /\* 2px \*/ scroll-padding-bottom: 0.125rem; /\* 2px \*/ |
| scroll-ps-0.5 | scroll-padding-inline-start: 0.125rem; /\* 2px \*/ |
| scroll-pe-0.5 | scroll-padding-inline-end: 0.125rem; /\* 2px \*/ |
| scroll-pt-0.5 | scroll-padding-top: 0.125rem; /\* 2px \*/ |
| scroll-pr-0.5 | scroll-padding-right: 0.125rem; /\* 2px \*/ |
| scroll-pb-0.5 | scroll-padding-bottom: 0.125rem; /\* 2px \*/ |
| scroll-pl-0.5 | scroll-padding-left: 0.125rem; /\* 2px \*/ |
| scroll-p-1 | scroll-padding: 0.25rem; /\* 4px \*/ |
| scroll-px-1 | scroll-padding-left: 0.25rem; /\* 4px \*/ scroll-padding-right: 0.25rem; /\* 4px \*/ |
| scroll-py-1 | scroll-padding-top: 0.25rem; /\* 4px \*/ scroll-padding-bottom: 0.25rem; /\* 4px \*/ |
| scroll-ps-1 | scroll-padding-inline-start: 0.25rem; /\* 4px \*/ |
| scroll-pe-1 | scroll-padding-inline-end: 0.25rem; /\* 4px \*/ |
| scroll-pt-1 | scroll-padding-top: 0.25rem; /\* 4px \*/ |
| scroll-pr-1 | scroll-padding-right: 0.25rem; /\* 4px \*/ |
| scroll-pb-1 | scroll-padding-bottom: 0.25rem; /\* 4px \*/ |
| scroll-pl-1 | scroll-padding-left: 0.25rem; /\* 4px \*/ |
| scroll-p-1.5 | scroll-padding: 0.375rem; /\* 6px \*/ |
| scroll-px-1.5 | scroll-padding-left: 0.375rem; /\* 6px \*/ scroll-padding-right: 0.375rem; /\* 6px \*/ |
| scroll-py-1.5 | scroll-padding-top: 0.375rem; /\* 6px \*/ scroll-padding-bottom: 0.375rem; /\* 6px \*/ |
| scroll-ps-1.5 | scroll-padding-inline-start: 0.375rem; /\* 6px \*/ |
| scroll-pe-1.5 | scroll-padding-inline-end: 0.375rem; /\* 6px \*/ |
| scroll-pt-1.5 | scroll-padding-top: 0.375rem; /\* 6px \*/ |
| scroll-pr-1.5 | scroll-padding-right: 0.375rem; /\* 6px \*/ |
| scroll-pb-1.5 | scroll-padding-bottom: 0.375rem; /\* 6px \*/ |
| scroll-pl-1.5 | scroll-padding-left: 0.375rem; /\* 6px \*/ |
| scroll-p-2 | scroll-padding: 0.5rem; /\* 8px \*/ |
| scroll-px-2 | scroll-padding-left: 0.5rem; /\* 8px \*/ scroll-padding-right: 0.5rem; /\* 8px \*/ |
| scroll-py-2 | scroll-padding-top: 0.5rem; /\* 8px \*/ scroll-padding-bottom: 0.5rem; /\* 8px \*/ |
| scroll-ps-2 | scroll-padding-inline-start: 0.5rem; /\* 8px \*/ |
| scroll-pe-2 | scroll-padding-inline-end: 0.5rem; /\* 8px \*/ |
| scroll-pt-2 | scroll-padding-top: 0.5rem; /\* 8px \*/ |
| scroll-pr-2 | scroll-padding-right: 0.5rem; /\* 8px \*/ |
| scroll-pb-2 | scroll-padding-bottom: 0.5rem; /\* 8px \*/ |
| scroll-pl-2 | scroll-padding-left: 0.5rem; /\* 8px \*/ |
| scroll-p-2.5 | scroll-padding: 0.625rem; /\* 10px \*/ |
| scroll-px-2.5 | scroll-padding-left: 0.625rem; /\* 10px \*/ scroll-padding-right: 0.625rem; /\* 10px \*/ |
| scroll-py-2.5 | scroll-padding-top: 0.625rem; /\* 10px \*/ scroll-padding-bottom: 0.625rem; /\* 10px \*/ |
| scroll-ps-2.5 | scroll-padding-inline-start: 0.625rem; /\* 10px \*/ |
| scroll-pe-2.5 | scroll-padding-inline-end: 0.625rem; /\* 10px \*/ |
| scroll-pt-2.5 | scroll-padding-top: 0.625rem; /\* 10px \*/ |
| scroll-pr-2.5 | scroll-padding-right: 0.625rem; /\* 10px \*/ |
| scroll-pb-2.5 | scroll-padding-bottom: 0.625rem; /\* 10px \*/ |
| scroll-pl-2.5 | scroll-padding-left: 0.625rem; /\* 10px \*/ |
| scroll-p-3 | scroll-padding: 0.75rem; /\* 12px \*/ |
| scroll-px-3 | scroll-padding-left: 0.75rem; /\* 12px \*/ scroll-padding-right: 0.75rem; /\* 12px \*/ |
| scroll-py-3 | scroll-padding-top: 0.75rem; /\* 12px \*/ scroll-padding-bottom: 0.75rem; /\* 12px \*/ |
| scroll-ps-3 | scroll-padding-inline-start: 0.75rem; /\* 12px \*/ |
| scroll-pe-3 | scroll-padding-inline-end: 0.75rem; /\* 12px \*/ |
| scroll-pt-3 | scroll-padding-top: 0.75rem; /\* 12px \*/ |
| scroll-pr-3 | scroll-padding-right: 0.75rem; /\* 12px \*/ |
| scroll-pb-3 | scroll-padding-bottom: 0.75rem; /\* 12px \*/ |
| scroll-pl-3 | scroll-padding-left: 0.75rem; /\* 12px \*/ |
| scroll-p-3.5 | scroll-padding: 0.875rem; /\* 14px \*/ |
| scroll-px-3.5 | scroll-padding-left: 0.875rem; /\* 14px \*/ scroll-padding-right: 0.875rem; /\* 14px \*/ |
| scroll-py-3.5 | scroll-padding-top: 0.875rem; /\* 14px \*/ scroll-padding-bottom: 0.875rem; /\* 14px \*/ |
| scroll-ps-3.5 | scroll-padding-inline-start: 0.875rem; /\* 14px \*/ |
| scroll-pe-3.5 | scroll-padding-inline-end: 0.875rem; /\* 14px \*/ |
| scroll-pt-3.5 | scroll-padding-top: 0.875rem; /\* 14px \*/ |
| scroll-pr-3.5 | scroll-padding-right: 0.875rem; /\* 14px \*/ |
| scroll-pb-3.5 | scroll-padding-bottom: 0.875rem; /\* 14px \*/ |
| scroll-pl-3.5 | scroll-padding-left: 0.875rem; /\* 14px \*/ |
| scroll-p-4 | scroll-padding: 1rem; /\* 16px \*/ |
| scroll-px-4 | scroll-padding-left: 1rem; /\* 16px \*/ scroll-padding-right: 1rem; /\* 16px \*/ |
| scroll-py-4 | scroll-padding-top: 1rem; /\* 16px \*/ scroll-padding-bottom: 1rem; /\* 16px \*/ |
| scroll-ps-4 | scroll-padding-inline-start: 1rem; /\* 16px \*/ |
| scroll-pe-4 | scroll-padding-inline-end: 1rem; /\* 16px \*/ |
| scroll-pt-4 | scroll-padding-top: 1rem; /\* 16px \*/ |
| scroll-pr-4 | scroll-padding-right: 1rem; /\* 16px \*/ |
| scroll-pb-4 | scroll-padding-bottom: 1rem; /\* 16px \*/ |
| scroll-pl-4 | scroll-padding-left: 1rem; /\* 16px \*/ |
| scroll-p-5 | scroll-padding: 1.25rem; /\* 20px \*/ |
| scroll-px-5 | scroll-padding-left: 1.25rem; /\* 20px \*/ scroll-padding-right: 1.25rem; /\* 20px \*/ |
| scroll-py-5 | scroll-padding-top: 1.25rem; /\* 20px \*/ scroll-padding-bottom: 1.25rem; /\* 20px \*/ |
| scroll-ps-5 | scroll-padding-inline-start: 1.25rem; /\* 20px \*/ |
| scroll-pe-5 | scroll-padding-inline-end: 1.25rem; /\* 20px \*/ |
| scroll-pt-5 | scroll-padding-top: 1.25rem; /\* 20px \*/ |
| scroll-pr-5 | scroll-padding-right: 1.25rem; /\* 20px \*/ |
| scroll-pb-5 | scroll-padding-bottom: 1.25rem; /\* 20px \*/ |
| scroll-pl-5 | scroll-padding-left: 1.25rem; /\* 20px \*/ |
| scroll-p-6 | scroll-padding: 1.5rem; /\* 24px \*/ |
| scroll-px-6 | scroll-padding-left: 1.5rem; /\* 24px \*/ scroll-padding-right: 1.5rem; /\* 24px \*/ |
| scroll-py-6 | scroll-padding-top: 1.5rem; /\* 24px \*/ scroll-padding-bottom: 1.5rem; /\* 24px \*/ |
| scroll-ps-6 | scroll-padding-inline-start: 1.5rem; /\* 24px \*/ |
| scroll-pe-6 | scroll-padding-inline-end: 1.5rem; /\* 24px \*/ |
| scroll-pt-6 | scroll-padding-top: 1.5rem; /\* 24px \*/ |
| scroll-pr-6 | scroll-padding-right: 1.5rem; /\* 24px \*/ |
| scroll-pb-6 | scroll-padding-bottom: 1.5rem; /\* 24px \*/ |
| scroll-pl-6 | scroll-padding-left: 1.5rem; /\* 24px \*/ |
| scroll-p-7 | scroll-padding: 1.75rem; /\* 28px \*/ |
| scroll-px-7 | scroll-padding-left: 1.75rem; /\* 28px \*/ scroll-padding-right: 1.75rem; /\* 28px \*/ |
| scroll-py-7 | scroll-padding-top: 1.75rem; /\* 28px \*/ scroll-padding-bottom: 1.75rem; /\* 28px \*/ |
| scroll-ps-7 | scroll-padding-inline-start: 1.75rem; /\* 28px \*/ |
| scroll-pe-7 | scroll-padding-inline-end: 1.75rem; /\* 28px \*/ |
| scroll-pt-7 | scroll-padding-top: 1.75rem; /\* 28px \*/ |
| scroll-pr-7 | scroll-padding-right: 1.75rem; /\* 28px \*/ |
| scroll-pb-7 | scroll-padding-bottom: 1.75rem; /\* 28px \*/ |
| scroll-pl-7 | scroll-padding-left: 1.75rem; /\* 28px \*/ |
| scroll-p-8 | scroll-padding: 2rem; /\* 32px \*/ |
| scroll-px-8 | scroll-padding-left: 2rem; /\* 32px \*/ scroll-padding-right: 2rem; /\* 32px \*/ |
| scroll-py-8 | scroll-padding-top: 2rem; /\* 32px \*/ scroll-padding-bottom: 2rem; /\* 32px \*/ |
| scroll-ps-8 | scroll-padding-inline-start: 2rem; /\* 32px \*/ |
| scroll-pe-8 | scroll-padding-inline-end: 2rem; /\* 32px \*/ |
| scroll-pt-8 | scroll-padding-top: 2rem; /\* 32px \*/ |
| scroll-pr-8 | scroll-padding-right: 2rem; /\* 32px \*/ |
| scroll-pb-8 | scroll-padding-bottom: 2rem; /\* 32px \*/ |
| scroll-pl-8 | scroll-padding-left: 2rem; /\* 32px \*/ |
| scroll-p-9 | scroll-padding: 2.25rem; /\* 36px \*/ |
| scroll-px-9 | scroll-padding-left: 2.25rem; /\* 36px \*/ scroll-padding-right: 2.25rem; /\* 36px \*/ |
| scroll-py-9 | scroll-padding-top: 2.25rem; /\* 36px \*/ scroll-padding-bottom: 2.25rem; /\* 36px \*/ |
| scroll-ps-9 | scroll-padding-inline-start: 2.25rem; /\* 36px \*/ |
| scroll-pe-9 | scroll-padding-inline-end: 2.25rem; /\* 36px \*/ |
| scroll-pt-9 | scroll-padding-top: 2.25rem; /\* 36px \*/ |
| scroll-pr-9 | scroll-padding-right: 2.25rem; /\* 36px \*/ |
| scroll-pb-9 | scroll-padding-bottom: 2.25rem; /\* 36px \*/ |
| scroll-pl-9 | scroll-padding-left: 2.25rem; /\* 36px \*/ |
| scroll-p-10 | scroll-padding: 2.5rem; /\* 40px \*/ |
| scroll-px-10 | scroll-padding-left: 2.5rem; /\* 40px \*/ scroll-padding-right: 2.5rem; /\* 40px \*/ |
| scroll-py-10 | scroll-padding-top: 2.5rem; /\* 40px \*/ scroll-padding-bottom: 2.5rem; /\* 40px \*/ |
| scroll-ps-10 | scroll-padding-inline-start: 2.5rem; /\* 40px \*/ |
| scroll-pe-10 | scroll-padding-inline-end: 2.5rem; /\* 40px \*/ |
| scroll-pt-10 | scroll-padding-top: 2.5rem; /\* 40px \*/ |
| scroll-pr-10 | scroll-padding-right: 2.5rem; /\* 40px \*/ |
| scroll-pb-10 | scroll-padding-bottom: 2.5rem; /\* 40px \*/ |
| scroll-pl-10 | scroll-padding-left: 2.5rem; /\* 40px \*/ |
| scroll-p-11 | scroll-padding: 2.75rem; /\* 44px \*/ |
| scroll-px-11 | scroll-padding-left: 2.75rem; /\* 44px \*/ scroll-padding-right: 2.75rem; /\* 44px \*/ |
| scroll-py-11 | scroll-padding-top: 2.75rem; /\* 44px \*/ scroll-padding-bottom: 2.75rem; /\* 44px \*/ |
| scroll-ps-11 | scroll-padding-inline-start: 2.75rem; /\* 44px \*/ |
| scroll-pe-11 | scroll-padding-inline-end: 2.75rem; /\* 44px \*/ |
| scroll-pt-11 | scroll-padding-top: 2.75rem; /\* 44px \*/ |
| scroll-pr-11 | scroll-padding-right: 2.75rem; /\* 44px \*/ |
| scroll-pb-11 | scroll-padding-bottom: 2.75rem; /\* 44px \*/ |
| scroll-pl-11 | scroll-padding-left: 2.75rem; /\* 44px \*/ |
| scroll-p-12 | scroll-padding: 3rem; /\* 48px \*/ |
| scroll-px-12 | scroll-padding-left: 3rem; /\* 48px \*/ scroll-padding-right: 3rem; /\* 48px \*/ |
| scroll-py-12 | scroll-padding-top: 3rem; /\* 48px \*/ scroll-padding-bottom: 3rem; /\* 48px \*/ |
| scroll-ps-12 | scroll-padding-inline-start: 3rem; /\* 48px \*/ |
| scroll-pe-12 | scroll-padding-inline-end: 3rem; /\* 48px \*/ |
| scroll-pt-12 | scroll-padding-top: 3rem; /\* 48px \*/ |
| scroll-pr-12 | scroll-padding-right: 3rem; /\* 48px \*/ |
| scroll-pb-12 | scroll-padding-bottom: 3rem; /\* 48px \*/ |
| scroll-pl-12 | scroll-padding-left: 3rem; /\* 48px \*/ |
| scroll-p-14 | scroll-padding: 3.5rem; /\* 56px \*/ |
| scroll-px-14 | scroll-padding-left: 3.5rem; /\* 56px \*/ scroll-padding-right: 3.5rem; /\* 56px \*/ |
| scroll-py-14 | scroll-padding-top: 3.5rem; /\* 56px \*/ scroll-padding-bottom: 3.5rem; /\* 56px \*/ |
| scroll-ps-14 | scroll-padding-inline-start: 3.5rem; /\* 56px \*/ |
| scroll-pe-14 | scroll-padding-inline-end: 3.5rem; /\* 56px \*/ |
| scroll-pt-14 | scroll-padding-top: 3.5rem; /\* 56px \*/ |
| scroll-pr-14 | scroll-padding-right: 3.5rem; /\* 56px \*/ |
| scroll-pb-14 | scroll-padding-bottom: 3.5rem; /\* 56px \*/ |
| scroll-pl-14 | scroll-padding-left: 3.5rem; /\* 56px \*/ |
| scroll-p-16 | scroll-padding: 4rem; /\* 64px \*/ |
| scroll-px-16 | scroll-padding-left: 4rem; /\* 64px \*/ scroll-padding-right: 4rem; /\* 64px \*/ |
| scroll-py-16 | scroll-padding-top: 4rem; /\* 64px \*/ scroll-padding-bottom: 4rem; /\* 64px \*/ |
| scroll-ps-16 | scroll-padding-inline-start: 4rem; /\* 64px \*/ |
| scroll-pe-16 | scroll-padding-inline-end: 4rem; /\* 64px \*/ |
| scroll-pt-16 | scroll-padding-top: 4rem; /\* 64px \*/ |
| scroll-pr-16 | scroll-padding-right: 4rem; /\* 64px \*/ |
| scroll-pb-16 | scroll-padding-bottom: 4rem; /\* 64px \*/ |
| scroll-pl-16 | scroll-padding-left: 4rem; /\* 64px \*/ |
| scroll-p-20 | scroll-padding: 5rem; /\* 80px \*/ |
| scroll-px-20 | scroll-padding-left: 5rem; /\* 80px \*/ scroll-padding-right: 5rem; /\* 80px \*/ |
| scroll-py-20 | scroll-padding-top: 5rem; /\* 80px \*/ scroll-padding-bottom: 5rem; /\* 80px \*/ |
| scroll-ps-20 | scroll-padding-inline-start: 5rem; /\* 80px \*/ |
| scroll-pe-20 | scroll-padding-inline-end: 5rem; /\* 80px \*/ |
| scroll-pt-20 | scroll-padding-top: 5rem; /\* 80px \*/ |
| scroll-pr-20 | scroll-padding-right: 5rem; /\* 80px \*/ |
| scroll-pb-20 | scroll-padding-bottom: 5rem; /\* 80px \*/ |
| scroll-pl-20 | scroll-padding-left: 5rem; /\* 80px \*/ |
| scroll-p-24 | scroll-padding: 6rem; /\* 96px \*/ |
| scroll-px-24 | scroll-padding-left: 6rem; /\* 96px \*/ scroll-padding-right: 6rem; /\* 96px \*/ |
| scroll-py-24 | scroll-padding-top: 6rem; /\* 96px \*/ scroll-padding-bottom: 6rem; /\* 96px \*/ |
| scroll-ps-24 | scroll-padding-inline-start: 6rem; /\* 96px \*/ |
| scroll-pe-24 | scroll-padding-inline-end: 6rem; /\* 96px \*/ |
| scroll-pt-24 | scroll-padding-top: 6rem; /\* 96px \*/ |
| scroll-pr-24 | scroll-padding-right: 6rem; /\* 96px \*/ |
| scroll-pb-24 | scroll-padding-bottom: 6rem; /\* 96px \*/ |
| scroll-pl-24 | scroll-padding-left: 6rem; /\* 96px \*/ |
| scroll-p-28 | scroll-padding: 7rem; /\* 112px \*/ |
| scroll-px-28 | scroll-padding-left: 7rem; /\* 112px \*/ scroll-padding-right: 7rem; /\* 112px \*/ |
| scroll-py-28 | scroll-padding-top: 7rem; /\* 112px \*/ scroll-padding-bottom: 7rem; /\* 112px \*/ |
| scroll-ps-28 | scroll-padding-inline-start: 7rem; /\* 112px \*/ |
| scroll-pe-28 | scroll-padding-inline-end: 7rem; /\* 112px \*/ |
| scroll-pt-28 | scroll-padding-top: 7rem; /\* 112px \*/ |
| scroll-pr-28 | scroll-padding-right: 7rem; /\* 112px \*/ |
| scroll-pb-28 | scroll-padding-bottom: 7rem; /\* 112px \*/ |
| scroll-pl-28 | scroll-padding-left: 7rem; /\* 112px \*/ |
| scroll-p-32 | scroll-padding: 8rem; /\* 128px \*/ |
| scroll-px-32 | scroll-padding-left: 8rem; /\* 128px \*/ scroll-padding-right: 8rem; /\* 128px \*/ |
| scroll-py-32 | scroll-padding-top: 8rem; /\* 128px \*/ scroll-padding-bottom: 8rem; /\* 128px \*/ |
| scroll-ps-32 | scroll-padding-inline-start: 8rem; /\* 128px \*/ |
| scroll-pe-32 | scroll-padding-inline-end: 8rem; /\* 128px \*/ |
| scroll-pt-32 | scroll-padding-top: 8rem; /\* 128px \*/ |
| scroll-pr-32 | scroll-padding-right: 8rem; /\* 128px \*/ |
| scroll-pb-32 | scroll-padding-bottom: 8rem; /\* 128px \*/ |
| scroll-pl-32 | scroll-padding-left: 8rem; /\* 128px \*/ |
| scroll-p-36 | scroll-padding: 9rem; /\* 144px \*/ |
| scroll-px-36 | scroll-padding-left: 9rem; /\* 144px \*/ scroll-padding-right: 9rem; /\* 144px \*/ |
| scroll-py-36 | scroll-padding-top: 9rem; /\* 144px \*/ scroll-padding-bottom: 9rem; /\* 144px \*/ |
| scroll-ps-36 | scroll-padding-inline-start: 9rem; /\* 144px \*/ |
| scroll-pe-36 | scroll-padding-inline-end: 9rem; /\* 144px \*/ |
| scroll-pt-36 | scroll-padding-top: 9rem; /\* 144px \*/ |
| scroll-pr-36 | scroll-padding-right: 9rem; /\* 144px \*/ |
| scroll-pb-36 | scroll-padding-bottom: 9rem; /\* 144px \*/ |
| scroll-pl-36 | scroll-padding-left: 9rem; /\* 144px \*/ |
| scroll-p-40 | scroll-padding: 10rem; /\* 160px \*/ |
| scroll-px-40 | scroll-padding-left: 10rem; /\* 160px \*/ scroll-padding-right: 10rem; /\* 160px \*/ |
| scroll-py-40 | scroll-padding-top: 10rem; /\* 160px \*/ scroll-padding-bottom: 10rem; /\* 160px \*/ |
| scroll-ps-40 | scroll-padding-inline-start: 10rem; /\* 160px \*/ |
| scroll-pe-40 | scroll-padding-inline-end: 10rem; /\* 160px \*/ |
| scroll-pt-40 | scroll-padding-top: 10rem; /\* 160px \*/ |
| scroll-pr-40 | scroll-padding-right: 10rem; /\* 160px \*/ |
| scroll-pb-40 | scroll-padding-bottom: 10rem; /\* 160px \*/ |
| scroll-pl-40 | scroll-padding-left: 10rem; /\* 160px \*/ |
| scroll-p-44 | scroll-padding: 11rem; /\* 176px \*/ |
| scroll-px-44 | scroll-padding-left: 11rem; /\* 176px \*/ scroll-padding-right: 11rem; /\* 176px \*/ |
| scroll-py-44 | scroll-padding-top: 11rem; /\* 176px \*/ scroll-padding-bottom: 11rem; /\* 176px \*/ |
| scroll-ps-44 | scroll-padding-inline-start: 11rem; /\* 176px \*/ |
| scroll-pe-44 | scroll-padding-inline-end: 11rem; /\* 176px \*/ |
| scroll-pt-44 | scroll-padding-top: 11rem; /\* 176px \*/ |
| scroll-pr-44 | scroll-padding-right: 11rem; /\* 176px \*/ |
| scroll-pb-44 | scroll-padding-bottom: 11rem; /\* 176px \*/ |
| scroll-pl-44 | scroll-padding-left: 11rem; /\* 176px \*/ |
| scroll-p-48 | scroll-padding: 12rem; /\* 192px \*/ |
| scroll-px-48 | scroll-padding-left: 12rem; /\* 192px \*/ scroll-padding-right: 12rem; /\* 192px \*/ |
| scroll-py-48 | scroll-padding-top: 12rem; /\* 192px \*/ scroll-padding-bottom: 12rem; /\* 192px \*/ |
| scroll-ps-48 | scroll-padding-inline-start: 12rem; /\* 192px \*/ |
| scroll-pe-48 | scroll-padding-inline-end: 12rem; /\* 192px \*/ |
| scroll-pt-48 | scroll-padding-top: 12rem; /\* 192px \*/ |
| scroll-pr-48 | scroll-padding-right: 12rem; /\* 192px \*/ |
| scroll-pb-48 | scroll-padding-bottom: 12rem; /\* 192px \*/ |
| scroll-pl-48 | scroll-padding-left: 12rem; /\* 192px \*/ |
| scroll-p-52 | scroll-padding: 13rem; /\* 208px \*/ |
| scroll-px-52 | scroll-padding-left: 13rem; /\* 208px \*/ scroll-padding-right: 13rem; /\* 208px \*/ |
| scroll-py-52 | scroll-padding-top: 13rem; /\* 208px \*/ scroll-padding-bottom: 13rem; /\* 208px \*/ |
| scroll-ps-52 | scroll-padding-inline-start: 13rem; /\* 208px \*/ |
| scroll-pe-52 | scroll-padding-inline-end: 13rem; /\* 208px \*/ |
| scroll-pt-52 | scroll-padding-top: 13rem; /\* 208px \*/ |
| scroll-pr-52 | scroll-padding-right: 13rem; /\* 208px \*/ |
| scroll-pb-52 | scroll-padding-bottom: 13rem; /\* 208px \*/ |
| scroll-pl-52 | scroll-padding-left: 13rem; /\* 208px \*/ |
| scroll-p-56 | scroll-padding: 14rem; /\* 224px \*/ |
| scroll-px-56 | scroll-padding-left: 14rem; /\* 224px \*/ scroll-padding-right: 14rem; /\* 224px \*/ |
| scroll-py-56 | scroll-padding-top: 14rem; /\* 224px \*/ scroll-padding-bottom: 14rem; /\* 224px \*/ |
| scroll-ps-56 | scroll-padding-inline-start: 14rem; /\* 224px \*/ |
| scroll-pe-56 | scroll-padding-inline-end: 14rem; /\* 224px \*/ |
| scroll-pt-56 | scroll-padding-top: 14rem; /\* 224px \*/ |
| scroll-pr-56 | scroll-padding-right: 14rem; /\* 224px \*/ |
| scroll-pb-56 | scroll-padding-bottom: 14rem; /\* 224px \*/ |
| scroll-pl-56 | scroll-padding-left: 14rem; /\* 224px \*/ |
| scroll-p-60 | scroll-padding: 15rem; /\* 240px \*/ |
| scroll-px-60 | scroll-padding-left: 15rem; /\* 240px \*/ scroll-padding-right: 15rem; /\* 240px \*/ |
| scroll-py-60 | scroll-padding-top: 15rem; /\* 240px \*/ scroll-padding-bottom: 15rem; /\* 240px \*/ |
| scroll-ps-60 | scroll-padding-inline-start: 15rem; /\* 240px \*/ |
| scroll-pe-60 | scroll-padding-inline-end: 15rem; /\* 240px \*/ |
| scroll-pt-60 | scroll-padding-top: 15rem; /\* 240px \*/ |
| scroll-pr-60 | scroll-padding-right: 15rem; /\* 240px \*/ |
| scroll-pb-60 | scroll-padding-bottom: 15rem; /\* 240px \*/ |
| scroll-pl-60 | scroll-padding-left: 15rem; /\* 240px \*/ |
| scroll-p-64 | scroll-padding: 16rem; /\* 256px \*/ |
| scroll-px-64 | scroll-padding-left: 16rem; /\* 256px \*/ scroll-padding-right: 16rem; /\* 256px \*/ |
| scroll-py-64 | scroll-padding-top: 16rem; /\* 256px \*/ scroll-padding-bottom: 16rem; /\* 256px \*/ |
| scroll-ps-64 | scroll-padding-inline-start: 16rem; /\* 256px \*/ |
| scroll-pe-64 | scroll-padding-inline-end: 16rem; /\* 256px \*/ |
| scroll-pt-64 | scroll-padding-top: 16rem; /\* 256px \*/ |
| scroll-pr-64 | scroll-padding-right: 16rem; /\* 256px \*/ |
| scroll-pb-64 | scroll-padding-bottom: 16rem; /\* 256px \*/ |
| scroll-pl-64 | scroll-padding-left: 16rem; /\* 256px \*/ |
| scroll-p-72 | scroll-padding: 18rem; /\* 288px \*/ |
| scroll-px-72 | scroll-padding-left: 18rem; /\* 288px \*/ scroll-padding-right: 18rem; /\* 288px \*/ |
| scroll-py-72 | scroll-padding-top: 18rem; /\* 288px \*/ scroll-padding-bottom: 18rem; /\* 288px \*/ |
| scroll-ps-72 | scroll-padding-inline-start: 18rem; /\* 288px \*/ |
| scroll-pe-72 | scroll-padding-inline-end: 18rem; /\* 288px \*/ |
| scroll-pt-72 | scroll-padding-top: 18rem; /\* 288px \*/ |
| scroll-pr-72 | scroll-padding-right: 18rem; /\* 288px \*/ |
| scroll-pb-72 | scroll-padding-bottom: 18rem; /\* 288px \*/ |
| scroll-pl-72 | scroll-padding-left: 18rem; /\* 288px \*/ |
| scroll-p-80 | scroll-padding: 20rem; /\* 320px \*/ |
| scroll-px-80 | scroll-padding-left: 20rem; /\* 320px \*/ scroll-padding-right: 20rem; /\* 320px \*/ |
| scroll-py-80 | scroll-padding-top: 20rem; /\* 320px \*/ scroll-padding-bottom: 20rem; /\* 320px \*/ |
| scroll-ps-80 | scroll-padding-inline-start: 20rem; /\* 320px \*/ |
| scroll-pe-80 | scroll-padding-inline-end: 20rem; /\* 320px \*/ |
| scroll-pt-80 | scroll-padding-top: 20rem; /\* 320px \*/ |
| scroll-pr-80 | scroll-padding-right: 20rem; /\* 320px \*/ |
| scroll-pb-80 | scroll-padding-bottom: 20rem; /\* 320px \*/ |
| scroll-pl-80 | scroll-padding-left: 20rem; /\* 320px \*/ |
| scroll-p-96 | scroll-padding: 24rem; /\* 384px \*/ |
| scroll-px-96 | scroll-padding-left: 24rem; /\* 384px \*/ scroll-padding-right: 24rem; /\* 384px \*/ |
| scroll-py-96 | scroll-padding-top: 24rem; /\* 384px \*/ scroll-padding-bottom: 24rem; /\* 384px \*/ |
| scroll-ps-96 | scroll-padding-inline-start: 24rem; /\* 384px \*/ |
| scroll-pe-96 | scroll-padding-inline-end: 24rem; /\* 384px \*/ |
| scroll-pt-96 | scroll-padding-top: 24rem; /\* 384px \*/ |
| scroll-pr-96 | scroll-padding-right: 24rem; /\* 384px \*/ |
| scroll-pb-96 | scroll-padding-bottom: 24rem; /\* 384px \*/ |
| scroll-pl-96 | scroll-padding-left: 24rem; /\* 384px \*/ |






Basic usage
-----------

 ### Setting the scroll padding

 Use the `scroll-p{side}-{size}` utilities to set the scroll offset of an element within a snap container.

 
```
<div class="scroll-pl-6 snap-x ...">
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>
```
 ### Using logical properties

 Use the `scroll-ps-*` and `scroll-pe-*` utilities to set the `scroll-padding-inline-start` and `scroll-padding-inline-end` [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right side based on the text direction.

 
```
<div dir="ltr">
  <div class="scroll-ps-6 snap-x ...">
    <!-- ... -->
  </div>
</div>

<div dir="rtl">
  <div class="scroll-ps-6 snap-x ...">
    <!-- ... -->
  </div>
</div>
```
 For more control, you can also use the [LTR and RTL modifiers](hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:scroll-p-0` to only apply the `scroll-p-0` utility on hover.



```
<div class="scroll-p-8 hover:scroll-p-0">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:scroll-p-0` to apply the `scroll-p-0` utility at only medium screen sizes and above.



```
<div class="scroll-p-8 md:scroll-p-0">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind’s scroll padding scale uses the [default spacing scale](customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      spacing: {
        '96': '24rem',
      }
    }
  }
}

```

 Alternatively, you can customize just the scroll padding scale by editing `theme.scrollPadding` or `theme.extend.scrollPadding` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      scrollPadding: {
        '96': '24rem',
      },
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `scroll-padding` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="scroll-p-[24rem]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/scroll-padding>

Scroll Snap Align
=================


Utilities for controlling the scroll snap alignment of an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| snap-start | scroll-snap-align: start;  |
| snap-end | scroll-snap-align: end;  |
| snap-center | scroll-snap-align: center;  |
| snap-align-none | scroll-snap-align: none;  |






Basic usage
-----------

 ### Snapping to the center

 Use the `snap-center` utility to snap an element to its center when being scrolled inside a snap container.

 
```
<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>
```
 ### Snapping to the start

 Use the `snap-start` utility to snap an element to its start when being scrolled inside a snap container.

 
```
<div class="snap-x ...">
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-start ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>
```
 ### Snapping to the end

 Use the `snap-end` utility to snap an element to its end when being scrolled inside a snap container.

 
```
<div class="snap-x ...">
  <div class="snap-end ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-end ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-end ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-end ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-end ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-end ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:snap-start` to only apply the `snap-start` utility on hover.



```
<div class="snap-center hover:snap-start">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:snap-start` to apply the `snap-start` utility at only medium screen sizes and above.



```
<div class="snap-center md:snap-start">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/scroll-snap-align>

Scroll Snap Stop
================


Utilities for controlling whether you can skip past possible snap positions.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| snap-normal | scroll-snap-stop: normal;  |
| snap-always | scroll-snap-stop: always;  |






Basic usage
-----------

 ### Forcing snap position stops

 Use the `snap-always` utility together with the `snap-mandatory` utility to force a snap container to always stop on an element before the user can continue scrolling to the next item.

 
```
<div class="snap-x snap-mandatory ...">
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-always snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>
```
 ### Skipping snap position stops

 Use the `snap-normal` utility to allow a snap container to skip past possible scroll snap positions.

 
```
<div class="snap-x ...">
  <div class="snap-normal snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-normal snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-normal snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-normal snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-normal snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-normal snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:snap-normal` to only apply the `snap-normal` utility on hover.



```
<div class="snap-always hover:snap-normal">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:snap-normal` to apply the `snap-normal` utility at only medium screen sizes and above.



```
<div class="snap-always md:snap-normal">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/scroll-snap-stop>

Scroll Snap Type
================


Utilities for controlling how strictly snap points are enforced in a snap container.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| snap-none | scroll-snap-type: none;  |
| snap-x | scroll-snap-type: x var(--tw-scroll-snap-strictness);  |
| snap-y | scroll-snap-type: y var(--tw-scroll-snap-strictness);  |
| snap-both | scroll-snap-type: both var(--tw-scroll-snap-strictness);  |
| snap-mandatory | --tw-scroll-snap-strictness: mandatory;  |
| snap-proximity | --tw-scroll-snap-strictness: proximity;  |






Basic usage
-----------

 ### Horizontal scroll snapping

 Use the `snap-x` utility to enable horizontal scroll snapping within an element.

 For scroll snapping to work, you need to also set the [scroll snap alignment](scroll-snap-align) on the children within the element.

 
```
<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>
```
 ### Mandatory scroll snapping

 Use the `snap-mandatory` utility to force a snap container to always come to rest on a snap point.

 
```
<div class="snap-mandatory snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>
```
 ### Proximity scroll snapping

 Use the `snap-proximity` utility to make a snap container come to rest on snap points that are close in proximity. This is the browser default.

 
```
<div class="snap-proximity snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:snap-x` to only apply the `snap-x` utility on hover.



```
<div class="hover:snap-x">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:snap-x` to apply the `snap-x` utility at only medium screen sizes and above.



```
<div class="md:snap-x">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/scroll-snap-type>

Touch Action
============


Utilities for controlling how an element can be scrolled and zoomed on touchscreens.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| touch-auto | touch-action: auto;  |
| touch-none | touch-action: none;  |
| touch-pan-x | touch-action: pan-x;  |
| touch-pan-left | touch-action: pan-left;  |
| touch-pan-right | touch-action: pan-right;  |
| touch-pan-y | touch-action: pan-y;  |
| touch-pan-up | touch-action: pan-up;  |
| touch-pan-down | touch-action: pan-down;  |
| touch-pinch-zoom | touch-action: pinch-zoom;  |
| touch-manipulation | touch-action: manipulation;  |






Basic usage
-----------

 ### Setting the touch action

 Use the `touch-{action}` utilities to control how an element can be scrolled (panned) and zoomed (pinched) on touchscreens.

 
```
<div class="w-full h-48 overflow-auto touch-auto ...">
  <img class="w-[150%] max-w-none h-auto" src="..." />
</div>
<div class="w-full h-48 overflow-auto touch-none ...">
  <img class="w-[150%] max-w-none h-auto" src="..." />
</div>
<div class="w-full h-48 overflow-auto touch-pan-x ...">
  <img class="w-[150%] max-w-none h-auto" src="..." />
</div>
<div class="w-full h-48 overflow-auto touch-pan-y ...">
  <img class="w-[150%] max-w-none h-auto" src="..." />
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `focus:touch-pan-x` to only apply the `touch-pan-x` utility on focus.



```
<div class="focus:touch-pan-x">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:touch-pan-x` to apply the `touch-pan-x` utility at only medium screen sizes and above.



```
<div class="md:touch-pan-x">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/touch-action>

User Select
===========


Utilities for controlling whether the user can select text in an element.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| select-none | user-select: none;  |
| select-text | user-select: text;  |
| select-all | user-select: all;  |
| select-auto | user-select: auto;  |






Basic usage
-----------

 ### Disabling text selection

 Use `select-none` to prevent selecting text in an element and its children.

 
```
<div class="select-none ...">
  The quick brown fox jumps over the lazy dog.
</div>
```
 ### Allowing text selection

 Use `select-text` to allow selecting text in an element and its children.

 
```
<div class="select-text ...">
  The quick brown fox jumps over the lazy dog.
</div>
```
 ### Selecting all text in one click

 Use `select-all` to automatically select all the text in an element when a user clicks.

 
```
<div class="select-all ...">
  The quick brown fox jumps over the lazy dog.
</div>
```
 ### Using auto select behaviour

 Use `select-auto` to use the default browser behavior for selecting text. Useful for undoing other classes like `select-none` at different breakpoints.

 
```
<div class="select-auto ...">
  The quick brown fox jumps over the lazy dog.
</div>
```
 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:select-all` to only apply the `select-all` utility on hover.



```
<div class="hover:select-all">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:select-all` to apply the `select-all` utility at only medium screen sizes and above.



```
<div class="md:select-all">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/user-select>

Will Change
===========


Utilities for optimizing upcoming animations of elements that are expected to change.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| will-change-auto | will-change: auto;  |
| will-change-scroll | will-change: scroll-position;  |
| will-change-contents | will-change: contents;  |
| will-change-transform | will-change: transform;  |






Basic usage
-----------

 ### Optimizing with will change

 Use `will-change-scroll`, `will-change-contents` and `will-change-transform` to optimize an element that’s expected to change in the near future by instructing the browser to prepare the necessary animation before it actually begins.

 
```
<div class="overflow-auto will-change-scroll">
  <!-- ... -->
</div>
```
 It’s recommended that you apply these utilities just before an element changes, and then remove it shortly after it finishes using `will-change-auto`.

 The will-change property is intended to be used as a last resort when dealing with **known performance problems**. Avoid using these utilities too much, or simply in anticipation of performance issues, as it could actually cause the page to be less performant.

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:will-change-scroll` to only apply the `will-change-scroll` utility on hover.



```
<div class="will-change-auto hover:will-change-scroll">
  <!-- ... -->
</div>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:will-change-scroll` to apply the `will-change-scroll` utility at only medium screen sizes and above.



```
<div class="will-change-auto md:will-change-scroll">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind provides four `will-change` utilities. You can customize these values by editing `theme.willChange` or `theme.extend.willChange` in your `tailwind.config.js` file.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      willChange: {
        'left-top': 'left, top',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `will-change` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<div class="will-change-[top,left]">
  <!-- ... -->
</div>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/will-change>

Fill
====


Utilities for styling the fill of SVG elements.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| fill-none | fill: none;  |
| fill-inherit | fill: inherit;  |
| fill-current | fill: currentColor;  |
| fill-transparent | fill: transparent;  |
| fill-black | fill: #000;  |
| fill-white | fill: #fff;  |
| fill-slate-50 | fill: #f8fafc;  |
| fill-slate-100 | fill: #f1f5f9;  |
| fill-slate-200 | fill: #e2e8f0;  |
| fill-slate-300 | fill: #cbd5e1;  |
| fill-slate-400 | fill: #94a3b8;  |
| fill-slate-500 | fill: #64748b;  |
| fill-slate-600 | fill: #475569;  |
| fill-slate-700 | fill: #334155;  |
| fill-slate-800 | fill: #1e293b;  |
| fill-slate-900 | fill: #0f172a;  |
| fill-slate-950 | fill: #020617;  |
| fill-gray-50 | fill: #f9fafb;  |
| fill-gray-100 | fill: #f3f4f6;  |
| fill-gray-200 | fill: #e5e7eb;  |
| fill-gray-300 | fill: #d1d5db;  |
| fill-gray-400 | fill: #9ca3af;  |
| fill-gray-500 | fill: #6b7280;  |
| fill-gray-600 | fill: #4b5563;  |
| fill-gray-700 | fill: #374151;  |
| fill-gray-800 | fill: #1f2937;  |
| fill-gray-900 | fill: #111827;  |
| fill-gray-950 | fill: #030712;  |
| fill-zinc-50 | fill: #fafafa;  |
| fill-zinc-100 | fill: #f4f4f5;  |
| fill-zinc-200 | fill: #e4e4e7;  |
| fill-zinc-300 | fill: #d4d4d8;  |
| fill-zinc-400 | fill: #a1a1aa;  |
| fill-zinc-500 | fill: #71717a;  |
| fill-zinc-600 | fill: #52525b;  |
| fill-zinc-700 | fill: #3f3f46;  |
| fill-zinc-800 | fill: #27272a;  |
| fill-zinc-900 | fill: #18181b;  |
| fill-zinc-950 | fill: #09090b;  |
| fill-neutral-50 | fill: #fafafa;  |
| fill-neutral-100 | fill: #f5f5f5;  |
| fill-neutral-200 | fill: #e5e5e5;  |
| fill-neutral-300 | fill: #d4d4d4;  |
| fill-neutral-400 | fill: #a3a3a3;  |
| fill-neutral-500 | fill: #737373;  |
| fill-neutral-600 | fill: #525252;  |
| fill-neutral-700 | fill: #404040;  |
| fill-neutral-800 | fill: #262626;  |
| fill-neutral-900 | fill: #171717;  |
| fill-neutral-950 | fill: #0a0a0a;  |
| fill-stone-50 | fill: #fafaf9;  |
| fill-stone-100 | fill: #f5f5f4;  |
| fill-stone-200 | fill: #e7e5e4;  |
| fill-stone-300 | fill: #d6d3d1;  |
| fill-stone-400 | fill: #a8a29e;  |
| fill-stone-500 | fill: #78716c;  |
| fill-stone-600 | fill: #57534e;  |
| fill-stone-700 | fill: #44403c;  |
| fill-stone-800 | fill: #292524;  |
| fill-stone-900 | fill: #1c1917;  |
| fill-stone-950 | fill: #0c0a09;  |
| fill-red-50 | fill: #fef2f2;  |
| fill-red-100 | fill: #fee2e2;  |
| fill-red-200 | fill: #fecaca;  |
| fill-red-300 | fill: #fca5a5;  |
| fill-red-400 | fill: #f87171;  |
| fill-red-500 | fill: #ef4444;  |
| fill-red-600 | fill: #dc2626;  |
| fill-red-700 | fill: #b91c1c;  |
| fill-red-800 | fill: #991b1b;  |
| fill-red-900 | fill: #7f1d1d;  |
| fill-red-950 | fill: #450a0a;  |
| fill-orange-50 | fill: #fff7ed;  |
| fill-orange-100 | fill: #ffedd5;  |
| fill-orange-200 | fill: #fed7aa;  |
| fill-orange-300 | fill: #fdba74;  |
| fill-orange-400 | fill: #fb923c;  |
| fill-orange-500 | fill: #f97316;  |
| fill-orange-600 | fill: #ea580c;  |
| fill-orange-700 | fill: #c2410c;  |
| fill-orange-800 | fill: #9a3412;  |
| fill-orange-900 | fill: #7c2d12;  |
| fill-orange-950 | fill: #431407;  |
| fill-amber-50 | fill: #fffbeb;  |
| fill-amber-100 | fill: #fef3c7;  |
| fill-amber-200 | fill: #fde68a;  |
| fill-amber-300 | fill: #fcd34d;  |
| fill-amber-400 | fill: #fbbf24;  |
| fill-amber-500 | fill: #f59e0b;  |
| fill-amber-600 | fill: #d97706;  |
| fill-amber-700 | fill: #b45309;  |
| fill-amber-800 | fill: #92400e;  |
| fill-amber-900 | fill: #78350f;  |
| fill-amber-950 | fill: #451a03;  |
| fill-yellow-50 | fill: #fefce8;  |
| fill-yellow-100 | fill: #fef9c3;  |
| fill-yellow-200 | fill: #fef08a;  |
| fill-yellow-300 | fill: #fde047;  |
| fill-yellow-400 | fill: #facc15;  |
| fill-yellow-500 | fill: #eab308;  |
| fill-yellow-600 | fill: #ca8a04;  |
| fill-yellow-700 | fill: #a16207;  |
| fill-yellow-800 | fill: #854d0e;  |
| fill-yellow-900 | fill: #713f12;  |
| fill-yellow-950 | fill: #422006;  |
| fill-lime-50 | fill: #f7fee7;  |
| fill-lime-100 | fill: #ecfccb;  |
| fill-lime-200 | fill: #d9f99d;  |
| fill-lime-300 | fill: #bef264;  |
| fill-lime-400 | fill: #a3e635;  |
| fill-lime-500 | fill: #84cc16;  |
| fill-lime-600 | fill: #65a30d;  |
| fill-lime-700 | fill: #4d7c0f;  |
| fill-lime-800 | fill: #3f6212;  |
| fill-lime-900 | fill: #365314;  |
| fill-lime-950 | fill: #1a2e05;  |
| fill-green-50 | fill: #f0fdf4;  |
| fill-green-100 | fill: #dcfce7;  |
| fill-green-200 | fill: #bbf7d0;  |
| fill-green-300 | fill: #86efac;  |
| fill-green-400 | fill: #4ade80;  |
| fill-green-500 | fill: #22c55e;  |
| fill-green-600 | fill: #16a34a;  |
| fill-green-700 | fill: #15803d;  |
| fill-green-800 | fill: #166534;  |
| fill-green-900 | fill: #14532d;  |
| fill-green-950 | fill: #052e16;  |
| fill-emerald-50 | fill: #ecfdf5;  |
| fill-emerald-100 | fill: #d1fae5;  |
| fill-emerald-200 | fill: #a7f3d0;  |
| fill-emerald-300 | fill: #6ee7b7;  |
| fill-emerald-400 | fill: #34d399;  |
| fill-emerald-500 | fill: #10b981;  |
| fill-emerald-600 | fill: #059669;  |
| fill-emerald-700 | fill: #047857;  |
| fill-emerald-800 | fill: #065f46;  |
| fill-emerald-900 | fill: #064e3b;  |
| fill-emerald-950 | fill: #022c22;  |
| fill-teal-50 | fill: #f0fdfa;  |
| fill-teal-100 | fill: #ccfbf1;  |
| fill-teal-200 | fill: #99f6e4;  |
| fill-teal-300 | fill: #5eead4;  |
| fill-teal-400 | fill: #2dd4bf;  |
| fill-teal-500 | fill: #14b8a6;  |
| fill-teal-600 | fill: #0d9488;  |
| fill-teal-700 | fill: #0f766e;  |
| fill-teal-800 | fill: #115e59;  |
| fill-teal-900 | fill: #134e4a;  |
| fill-teal-950 | fill: #042f2e;  |
| fill-cyan-50 | fill: #ecfeff;  |
| fill-cyan-100 | fill: #cffafe;  |
| fill-cyan-200 | fill: #a5f3fc;  |
| fill-cyan-300 | fill: #67e8f9;  |
| fill-cyan-400 | fill: #22d3ee;  |
| fill-cyan-500 | fill: #06b6d4;  |
| fill-cyan-600 | fill: #0891b2;  |
| fill-cyan-700 | fill: #0e7490;  |
| fill-cyan-800 | fill: #155e75;  |
| fill-cyan-900 | fill: #164e63;  |
| fill-cyan-950 | fill: #083344;  |
| fill-sky-50 | fill: #f0f9ff;  |
| fill-sky-100 | fill: #e0f2fe;  |
| fill-sky-200 | fill: #bae6fd;  |
| fill-sky-300 | fill: #7dd3fc;  |
| fill-sky-400 | fill: #38bdf8;  |
| fill-sky-500 | fill: #0ea5e9;  |
| fill-sky-600 | fill: #0284c7;  |
| fill-sky-700 | fill: #0369a1;  |
| fill-sky-800 | fill: #075985;  |
| fill-sky-900 | fill: #0c4a6e;  |
| fill-sky-950 | fill: #082f49;  |
| fill-blue-50 | fill: #eff6ff;  |
| fill-blue-100 | fill: #dbeafe;  |
| fill-blue-200 | fill: #bfdbfe;  |
| fill-blue-300 | fill: #93c5fd;  |
| fill-blue-400 | fill: #60a5fa;  |
| fill-blue-500 | fill: #3b82f6;  |
| fill-blue-600 | fill: #2563eb;  |
| fill-blue-700 | fill: #1d4ed8;  |
| fill-blue-800 | fill: #1e40af;  |
| fill-blue-900 | fill: #1e3a8a;  |
| fill-blue-950 | fill: #172554;  |
| fill-indigo-50 | fill: #eef2ff;  |
| fill-indigo-100 | fill: #e0e7ff;  |
| fill-indigo-200 | fill: #c7d2fe;  |
| fill-indigo-300 | fill: #a5b4fc;  |
| fill-indigo-400 | fill: #818cf8;  |
| fill-indigo-500 | fill: #6366f1;  |
| fill-indigo-600 | fill: #4f46e5;  |
| fill-indigo-700 | fill: #4338ca;  |
| fill-indigo-800 | fill: #3730a3;  |
| fill-indigo-900 | fill: #312e81;  |
| fill-indigo-950 | fill: #1e1b4b;  |
| fill-violet-50 | fill: #f5f3ff;  |
| fill-violet-100 | fill: #ede9fe;  |
| fill-violet-200 | fill: #ddd6fe;  |
| fill-violet-300 | fill: #c4b5fd;  |
| fill-violet-400 | fill: #a78bfa;  |
| fill-violet-500 | fill: #8b5cf6;  |
| fill-violet-600 | fill: #7c3aed;  |
| fill-violet-700 | fill: #6d28d9;  |
| fill-violet-800 | fill: #5b21b6;  |
| fill-violet-900 | fill: #4c1d95;  |
| fill-violet-950 | fill: #2e1065;  |
| fill-purple-50 | fill: #faf5ff;  |
| fill-purple-100 | fill: #f3e8ff;  |
| fill-purple-200 | fill: #e9d5ff;  |
| fill-purple-300 | fill: #d8b4fe;  |
| fill-purple-400 | fill: #c084fc;  |
| fill-purple-500 | fill: #a855f7;  |
| fill-purple-600 | fill: #9333ea;  |
| fill-purple-700 | fill: #7e22ce;  |
| fill-purple-800 | fill: #6b21a8;  |
| fill-purple-900 | fill: #581c87;  |
| fill-purple-950 | fill: #3b0764;  |
| fill-fuchsia-50 | fill: #fdf4ff;  |
| fill-fuchsia-100 | fill: #fae8ff;  |
| fill-fuchsia-200 | fill: #f5d0fe;  |
| fill-fuchsia-300 | fill: #f0abfc;  |
| fill-fuchsia-400 | fill: #e879f9;  |
| fill-fuchsia-500 | fill: #d946ef;  |
| fill-fuchsia-600 | fill: #c026d3;  |
| fill-fuchsia-700 | fill: #a21caf;  |
| fill-fuchsia-800 | fill: #86198f;  |
| fill-fuchsia-900 | fill: #701a75;  |
| fill-fuchsia-950 | fill: #4a044e;  |
| fill-pink-50 | fill: #fdf2f8;  |
| fill-pink-100 | fill: #fce7f3;  |
| fill-pink-200 | fill: #fbcfe8;  |
| fill-pink-300 | fill: #f9a8d4;  |
| fill-pink-400 | fill: #f472b6;  |
| fill-pink-500 | fill: #ec4899;  |
| fill-pink-600 | fill: #db2777;  |
| fill-pink-700 | fill: #be185d;  |
| fill-pink-800 | fill: #9d174d;  |
| fill-pink-900 | fill: #831843;  |
| fill-pink-950 | fill: #500724;  |
| fill-rose-50 | fill: #fff1f2;  |
| fill-rose-100 | fill: #ffe4e6;  |
| fill-rose-200 | fill: #fecdd3;  |
| fill-rose-300 | fill: #fda4af;  |
| fill-rose-400 | fill: #fb7185;  |
| fill-rose-500 | fill: #f43f5e;  |
| fill-rose-600 | fill: #e11d48;  |
| fill-rose-700 | fill: #be123c;  |
| fill-rose-800 | fill: #9f1239;  |
| fill-rose-900 | fill: #881337;  |
| fill-rose-950 | fill: #4c0519;  |






Basic usage
-----------

 ### Setting the fill color

 Use the `fill-{color}` utilities to change the fill color of an SVG.

 
```
<svg class="fill-blue-500 ...">
  <!-- ... -->
</svg>
```
 This can be useful for styling icon sets like [Heroicons](https://heroicons.com).

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:fill-cyan-700` to only apply the `fill-cyan-700` utility on hover.



```
<svg class="fill-cyan-500 hover:fill-cyan-700">
  <!-- ... -->
</svg>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:fill-cyan-700` to apply the `fill-cyan-700` utility at only medium screen sizes and above.



```
<svg class="fill-cyan-500 md:fill-cyan-700">
  <!-- ... -->
</svg>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as fill colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your fill colors by editing `theme.fill` or `theme.extend.fill` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `fill` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<svg class="fill-[#243c5a]">
  <!-- ... -->
</svg>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/fill>

Stroke
======


Utilities for styling the stroke of SVG elements.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| stroke-none | stroke: none;  |
| stroke-inherit | stroke: inherit;  |
| stroke-current | stroke: currentColor;  |
| stroke-transparent | stroke: transparent;  |
| stroke-black | stroke: #000;  |
| stroke-white | stroke: #fff;  |
| stroke-slate-50 | stroke: #f8fafc;  |
| stroke-slate-100 | stroke: #f1f5f9;  |
| stroke-slate-200 | stroke: #e2e8f0;  |
| stroke-slate-300 | stroke: #cbd5e1;  |
| stroke-slate-400 | stroke: #94a3b8;  |
| stroke-slate-500 | stroke: #64748b;  |
| stroke-slate-600 | stroke: #475569;  |
| stroke-slate-700 | stroke: #334155;  |
| stroke-slate-800 | stroke: #1e293b;  |
| stroke-slate-900 | stroke: #0f172a;  |
| stroke-slate-950 | stroke: #020617;  |
| stroke-gray-50 | stroke: #f9fafb;  |
| stroke-gray-100 | stroke: #f3f4f6;  |
| stroke-gray-200 | stroke: #e5e7eb;  |
| stroke-gray-300 | stroke: #d1d5db;  |
| stroke-gray-400 | stroke: #9ca3af;  |
| stroke-gray-500 | stroke: #6b7280;  |
| stroke-gray-600 | stroke: #4b5563;  |
| stroke-gray-700 | stroke: #374151;  |
| stroke-gray-800 | stroke: #1f2937;  |
| stroke-gray-900 | stroke: #111827;  |
| stroke-gray-950 | stroke: #030712;  |
| stroke-zinc-50 | stroke: #fafafa;  |
| stroke-zinc-100 | stroke: #f4f4f5;  |
| stroke-zinc-200 | stroke: #e4e4e7;  |
| stroke-zinc-300 | stroke: #d4d4d8;  |
| stroke-zinc-400 | stroke: #a1a1aa;  |
| stroke-zinc-500 | stroke: #71717a;  |
| stroke-zinc-600 | stroke: #52525b;  |
| stroke-zinc-700 | stroke: #3f3f46;  |
| stroke-zinc-800 | stroke: #27272a;  |
| stroke-zinc-900 | stroke: #18181b;  |
| stroke-zinc-950 | stroke: #09090b;  |
| stroke-neutral-50 | stroke: #fafafa;  |
| stroke-neutral-100 | stroke: #f5f5f5;  |
| stroke-neutral-200 | stroke: #e5e5e5;  |
| stroke-neutral-300 | stroke: #d4d4d4;  |
| stroke-neutral-400 | stroke: #a3a3a3;  |
| stroke-neutral-500 | stroke: #737373;  |
| stroke-neutral-600 | stroke: #525252;  |
| stroke-neutral-700 | stroke: #404040;  |
| stroke-neutral-800 | stroke: #262626;  |
| stroke-neutral-900 | stroke: #171717;  |
| stroke-neutral-950 | stroke: #0a0a0a;  |
| stroke-stone-50 | stroke: #fafaf9;  |
| stroke-stone-100 | stroke: #f5f5f4;  |
| stroke-stone-200 | stroke: #e7e5e4;  |
| stroke-stone-300 | stroke: #d6d3d1;  |
| stroke-stone-400 | stroke: #a8a29e;  |
| stroke-stone-500 | stroke: #78716c;  |
| stroke-stone-600 | stroke: #57534e;  |
| stroke-stone-700 | stroke: #44403c;  |
| stroke-stone-800 | stroke: #292524;  |
| stroke-stone-900 | stroke: #1c1917;  |
| stroke-stone-950 | stroke: #0c0a09;  |
| stroke-red-50 | stroke: #fef2f2;  |
| stroke-red-100 | stroke: #fee2e2;  |
| stroke-red-200 | stroke: #fecaca;  |
| stroke-red-300 | stroke: #fca5a5;  |
| stroke-red-400 | stroke: #f87171;  |
| stroke-red-500 | stroke: #ef4444;  |
| stroke-red-600 | stroke: #dc2626;  |
| stroke-red-700 | stroke: #b91c1c;  |
| stroke-red-800 | stroke: #991b1b;  |
| stroke-red-900 | stroke: #7f1d1d;  |
| stroke-red-950 | stroke: #450a0a;  |
| stroke-orange-50 | stroke: #fff7ed;  |
| stroke-orange-100 | stroke: #ffedd5;  |
| stroke-orange-200 | stroke: #fed7aa;  |
| stroke-orange-300 | stroke: #fdba74;  |
| stroke-orange-400 | stroke: #fb923c;  |
| stroke-orange-500 | stroke: #f97316;  |
| stroke-orange-600 | stroke: #ea580c;  |
| stroke-orange-700 | stroke: #c2410c;  |
| stroke-orange-800 | stroke: #9a3412;  |
| stroke-orange-900 | stroke: #7c2d12;  |
| stroke-orange-950 | stroke: #431407;  |
| stroke-amber-50 | stroke: #fffbeb;  |
| stroke-amber-100 | stroke: #fef3c7;  |
| stroke-amber-200 | stroke: #fde68a;  |
| stroke-amber-300 | stroke: #fcd34d;  |
| stroke-amber-400 | stroke: #fbbf24;  |
| stroke-amber-500 | stroke: #f59e0b;  |
| stroke-amber-600 | stroke: #d97706;  |
| stroke-amber-700 | stroke: #b45309;  |
| stroke-amber-800 | stroke: #92400e;  |
| stroke-amber-900 | stroke: #78350f;  |
| stroke-amber-950 | stroke: #451a03;  |
| stroke-yellow-50 | stroke: #fefce8;  |
| stroke-yellow-100 | stroke: #fef9c3;  |
| stroke-yellow-200 | stroke: #fef08a;  |
| stroke-yellow-300 | stroke: #fde047;  |
| stroke-yellow-400 | stroke: #facc15;  |
| stroke-yellow-500 | stroke: #eab308;  |
| stroke-yellow-600 | stroke: #ca8a04;  |
| stroke-yellow-700 | stroke: #a16207;  |
| stroke-yellow-800 | stroke: #854d0e;  |
| stroke-yellow-900 | stroke: #713f12;  |
| stroke-yellow-950 | stroke: #422006;  |
| stroke-lime-50 | stroke: #f7fee7;  |
| stroke-lime-100 | stroke: #ecfccb;  |
| stroke-lime-200 | stroke: #d9f99d;  |
| stroke-lime-300 | stroke: #bef264;  |
| stroke-lime-400 | stroke: #a3e635;  |
| stroke-lime-500 | stroke: #84cc16;  |
| stroke-lime-600 | stroke: #65a30d;  |
| stroke-lime-700 | stroke: #4d7c0f;  |
| stroke-lime-800 | stroke: #3f6212;  |
| stroke-lime-900 | stroke: #365314;  |
| stroke-lime-950 | stroke: #1a2e05;  |
| stroke-green-50 | stroke: #f0fdf4;  |
| stroke-green-100 | stroke: #dcfce7;  |
| stroke-green-200 | stroke: #bbf7d0;  |
| stroke-green-300 | stroke: #86efac;  |
| stroke-green-400 | stroke: #4ade80;  |
| stroke-green-500 | stroke: #22c55e;  |
| stroke-green-600 | stroke: #16a34a;  |
| stroke-green-700 | stroke: #15803d;  |
| stroke-green-800 | stroke: #166534;  |
| stroke-green-900 | stroke: #14532d;  |
| stroke-green-950 | stroke: #052e16;  |
| stroke-emerald-50 | stroke: #ecfdf5;  |
| stroke-emerald-100 | stroke: #d1fae5;  |
| stroke-emerald-200 | stroke: #a7f3d0;  |
| stroke-emerald-300 | stroke: #6ee7b7;  |
| stroke-emerald-400 | stroke: #34d399;  |
| stroke-emerald-500 | stroke: #10b981;  |
| stroke-emerald-600 | stroke: #059669;  |
| stroke-emerald-700 | stroke: #047857;  |
| stroke-emerald-800 | stroke: #065f46;  |
| stroke-emerald-900 | stroke: #064e3b;  |
| stroke-emerald-950 | stroke: #022c22;  |
| stroke-teal-50 | stroke: #f0fdfa;  |
| stroke-teal-100 | stroke: #ccfbf1;  |
| stroke-teal-200 | stroke: #99f6e4;  |
| stroke-teal-300 | stroke: #5eead4;  |
| stroke-teal-400 | stroke: #2dd4bf;  |
| stroke-teal-500 | stroke: #14b8a6;  |
| stroke-teal-600 | stroke: #0d9488;  |
| stroke-teal-700 | stroke: #0f766e;  |
| stroke-teal-800 | stroke: #115e59;  |
| stroke-teal-900 | stroke: #134e4a;  |
| stroke-teal-950 | stroke: #042f2e;  |
| stroke-cyan-50 | stroke: #ecfeff;  |
| stroke-cyan-100 | stroke: #cffafe;  |
| stroke-cyan-200 | stroke: #a5f3fc;  |
| stroke-cyan-300 | stroke: #67e8f9;  |
| stroke-cyan-400 | stroke: #22d3ee;  |
| stroke-cyan-500 | stroke: #06b6d4;  |
| stroke-cyan-600 | stroke: #0891b2;  |
| stroke-cyan-700 | stroke: #0e7490;  |
| stroke-cyan-800 | stroke: #155e75;  |
| stroke-cyan-900 | stroke: #164e63;  |
| stroke-cyan-950 | stroke: #083344;  |
| stroke-sky-50 | stroke: #f0f9ff;  |
| stroke-sky-100 | stroke: #e0f2fe;  |
| stroke-sky-200 | stroke: #bae6fd;  |
| stroke-sky-300 | stroke: #7dd3fc;  |
| stroke-sky-400 | stroke: #38bdf8;  |
| stroke-sky-500 | stroke: #0ea5e9;  |
| stroke-sky-600 | stroke: #0284c7;  |
| stroke-sky-700 | stroke: #0369a1;  |
| stroke-sky-800 | stroke: #075985;  |
| stroke-sky-900 | stroke: #0c4a6e;  |
| stroke-sky-950 | stroke: #082f49;  |
| stroke-blue-50 | stroke: #eff6ff;  |
| stroke-blue-100 | stroke: #dbeafe;  |
| stroke-blue-200 | stroke: #bfdbfe;  |
| stroke-blue-300 | stroke: #93c5fd;  |
| stroke-blue-400 | stroke: #60a5fa;  |
| stroke-blue-500 | stroke: #3b82f6;  |
| stroke-blue-600 | stroke: #2563eb;  |
| stroke-blue-700 | stroke: #1d4ed8;  |
| stroke-blue-800 | stroke: #1e40af;  |
| stroke-blue-900 | stroke: #1e3a8a;  |
| stroke-blue-950 | stroke: #172554;  |
| stroke-indigo-50 | stroke: #eef2ff;  |
| stroke-indigo-100 | stroke: #e0e7ff;  |
| stroke-indigo-200 | stroke: #c7d2fe;  |
| stroke-indigo-300 | stroke: #a5b4fc;  |
| stroke-indigo-400 | stroke: #818cf8;  |
| stroke-indigo-500 | stroke: #6366f1;  |
| stroke-indigo-600 | stroke: #4f46e5;  |
| stroke-indigo-700 | stroke: #4338ca;  |
| stroke-indigo-800 | stroke: #3730a3;  |
| stroke-indigo-900 | stroke: #312e81;  |
| stroke-indigo-950 | stroke: #1e1b4b;  |
| stroke-violet-50 | stroke: #f5f3ff;  |
| stroke-violet-100 | stroke: #ede9fe;  |
| stroke-violet-200 | stroke: #ddd6fe;  |
| stroke-violet-300 | stroke: #c4b5fd;  |
| stroke-violet-400 | stroke: #a78bfa;  |
| stroke-violet-500 | stroke: #8b5cf6;  |
| stroke-violet-600 | stroke: #7c3aed;  |
| stroke-violet-700 | stroke: #6d28d9;  |
| stroke-violet-800 | stroke: #5b21b6;  |
| stroke-violet-900 | stroke: #4c1d95;  |
| stroke-violet-950 | stroke: #2e1065;  |
| stroke-purple-50 | stroke: #faf5ff;  |
| stroke-purple-100 | stroke: #f3e8ff;  |
| stroke-purple-200 | stroke: #e9d5ff;  |
| stroke-purple-300 | stroke: #d8b4fe;  |
| stroke-purple-400 | stroke: #c084fc;  |
| stroke-purple-500 | stroke: #a855f7;  |
| stroke-purple-600 | stroke: #9333ea;  |
| stroke-purple-700 | stroke: #7e22ce;  |
| stroke-purple-800 | stroke: #6b21a8;  |
| stroke-purple-900 | stroke: #581c87;  |
| stroke-purple-950 | stroke: #3b0764;  |
| stroke-fuchsia-50 | stroke: #fdf4ff;  |
| stroke-fuchsia-100 | stroke: #fae8ff;  |
| stroke-fuchsia-200 | stroke: #f5d0fe;  |
| stroke-fuchsia-300 | stroke: #f0abfc;  |
| stroke-fuchsia-400 | stroke: #e879f9;  |
| stroke-fuchsia-500 | stroke: #d946ef;  |
| stroke-fuchsia-600 | stroke: #c026d3;  |
| stroke-fuchsia-700 | stroke: #a21caf;  |
| stroke-fuchsia-800 | stroke: #86198f;  |
| stroke-fuchsia-900 | stroke: #701a75;  |
| stroke-fuchsia-950 | stroke: #4a044e;  |
| stroke-pink-50 | stroke: #fdf2f8;  |
| stroke-pink-100 | stroke: #fce7f3;  |
| stroke-pink-200 | stroke: #fbcfe8;  |
| stroke-pink-300 | stroke: #f9a8d4;  |
| stroke-pink-400 | stroke: #f472b6;  |
| stroke-pink-500 | stroke: #ec4899;  |
| stroke-pink-600 | stroke: #db2777;  |
| stroke-pink-700 | stroke: #be185d;  |
| stroke-pink-800 | stroke: #9d174d;  |
| stroke-pink-900 | stroke: #831843;  |
| stroke-pink-950 | stroke: #500724;  |
| stroke-rose-50 | stroke: #fff1f2;  |
| stroke-rose-100 | stroke: #ffe4e6;  |
| stroke-rose-200 | stroke: #fecdd3;  |
| stroke-rose-300 | stroke: #fda4af;  |
| stroke-rose-400 | stroke: #fb7185;  |
| stroke-rose-500 | stroke: #f43f5e;  |
| stroke-rose-600 | stroke: #e11d48;  |
| stroke-rose-700 | stroke: #be123c;  |
| stroke-rose-800 | stroke: #9f1239;  |
| stroke-rose-900 | stroke: #881337;  |
| stroke-rose-950 | stroke: #4c0519;  |






Basic usage
-----------

 ### Setting the stroke color

 Use the `stroke-{color}` utilities to change the stroke color of an SVG.

 
```
<svg class="stroke-cyan-500 ...">
  <!-- ... -->
</svg>
```
 This can be useful for styling icon sets like [Heroicons](https://heroicons.com).

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:stroke-cyan-700` to only apply the `stroke-cyan-700` utility on hover.



```
<svg class="stroke-cyan-500 hover:stroke-cyan-700">
  <!-- ... -->
</svg>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:stroke-cyan-700` to apply the `stroke-cyan-700` utility at only medium screen sizes and above.



```
<svg class="stroke-cyan-500 md:stroke-cyan-700">
  <!-- ... -->
</svg>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind makes the entire [default color palette](customizing-colors#default-color-palette) available as stroke colors. You can [customize your color palette](/docs/customizing-colors#customizing) by editing `theme.colors` or `theme.extend.colors` in your `tailwind.config.js` file.




tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}


```


Alternatively, you can customize just your stroke colors by editing `theme.stroke` or `theme.extend.stroke` in your `tailwind.config.js` file.


Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `stroke` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<svg class="stroke-[#243c5a]">
  <!-- ... -->
</svg>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/stroke>

Stroke Width
============


Utilities for styling the stroke width of SVG elements.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| stroke-0 | stroke-width: 0;  |
| stroke-1 | stroke-width: 1;  |
| stroke-2 | stroke-width: 2;  |






Basic usage
-----------

 ### Setting the stroke width

 Use the `stroke-{width}` utilities to set the stroke width of an SVG.

 
```
<svg class="stroke-1 ..."></svg>
<svg class="stroke-2 ..."></svg>
```
 This can be useful for styling icon sets like [Heroicons](https://heroicons.com).

 Applying conditionally
----------------------

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:stroke-2` to only apply the `stroke-2` utility on hover.



```
<svg class="stroke-1 hover:stroke-2">
  <!-- ... -->
</svg>

```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:stroke-2` to apply the `stroke-2` utility at only medium screen sizes and above.



```
<svg class="stroke-1 md:stroke-2">
  <!-- ... -->
</svg>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).

 Using custom values
-------------------

 ### Customizing your theme

 By default, Tailwind includes `stroke-width` utilities for creating basic grids with up to 6 equal width rows. You can customize these values by editing `theme.strokeWidth` or `theme.extend.strokeWidth` in your `tailwind.config.js` file.

 You have direct access to the `stroke-width` CSS property here so you can make your custom rows values as generic or as complicated and site-specific as you like.

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      strokeWidth: {
        '2': '2px',
      }
    }
  }
}

```

 Learn more about customizing the default theme in the [theme customization](theme#customizing-the-default-theme) documentation.

 ### Arbitrary values

 If you need to use a one-off `stroke-width` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.



```
<svg class="stroke-[2px]">
  <!-- ... -->
</svg>

```

Learn more about arbitrary value support in the [arbitrary values](adding-custom-styles#using-arbitrary-values) documentation.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/stroke-width>

Screen Readers
==============


Utilities for improving accessibility with screen readers.


Quick reference
---------------





| Class | Properties |
| --- | --- |
| sr-only | position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;  |
| not-sr-only | position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal;  |






Basic usage
-----------

 ### Screen-reader-only elements

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

 
```
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>
```
 ### Undoing screen-reader-only elements

 Use `not-sr-only` to undo `sr-only`, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example:

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

 ### Hover, focus, and other states

 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `focus:not-sr-only` to only apply the `not-sr-only` utility on focus.



```
<a href="#content" class="sr-only focus:not-sr-only">
  Skip to content
</a>
```

For a complete list of all available state modifiers, check out the [Hover, Focus, & Other States](hover-focus-and-other-states) documentation.

 ### Breakpoints and media queries

 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:not-sr-only` to apply the `not-sr-only` utility at only medium screen sizes and above.



```
<div class="sr-only md:not-sr-only">
  <!-- ... -->
</div>

```

To learn more, check out the documentation on [Responsive Design](responsive-design), [Dark Mode](dark-mode) and [other media query modifiers](hover-focus-and-other-states#media-queries).








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/screen-readers>

@tailwindcss/typography
=======================


[View on GitHub](https://github.com/tailwindlabs/tailwindcss-typography)

Beautiful typographic defaults for HTML you don't control.


The official Tailwind CSS Typography plugin provides a set of `prose` classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS.

 [![Tailwind CSS IntelliSense extension for Visual Studio Code](https://tailwindcss.com/_next/static/media/typography-demo.e7148517.jpg)](https://play.tailwindcss.com/uj1vGACRJA?layout=preview) 
```
<article class="prose lg:prose-xl">
  {{ markdown }}
</article>
```
 To see what it looks like in action, check out our [live demo](https://play.tailwindcss.com/uj1vGACRJA?layout=preview) on Tailwind Play.

 Installation
------------

 Install the plugin from npm:

 
```
npm install -D @tailwindcss/typography
```
 Then add the plugin to your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}
```

 Basic usage
-----------

 Now you can use the `prose` classes to add sensible typography styles to any vanilla HTML:

 
```
<article class="prose lg:prose-xl">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children, with the food earning such an iconic status in our culture that kids will often dress
    up as warm, cheesy loaf for Halloween.
  </p>
  <p>
    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
    springing up around the country.
  </p>
  <!-- ... -->
</article>
```
 ### Choosing a gray scale

 This plugin includes a modifier class for each of the five gray scales Tailwind includes by default so you can easily style your content to match the grays you’re using in your project.

 
```
<article class="prose prose-slate">
  {{ markdown }}
</article>
```
 Here are the classes that are generated using a totally default Tailwind CSS v2.0 build:

 

| Class | Gray scale |
| --- | --- |
| `prose-gray` *(default)* | Gray |
| `prose-slate` | Slate |
| `prose-zinc` | Zinc |
| `prose-neutral` | Neutral |
| `prose-stone` | Stone |

 Modifier classes are designed to be used with the [multi-class modifier pattern](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/#component-modifiers) and must be used in conjunction with the base `prose` class.

 
Always include the `prose` class when adding a gray scale modifier


 
```
<article class="prose prose-stone">
  {{ markdown }}
</article>
```
 To learn about creating your own color themes, read the [adding custom color themes](typography-plugin#adding-custom-color-themes) documentation.

 ### Applying a type scale

 Size modifiers allow you to adjust the overall size of your typography for different contexts.

 
```
<article class="prose prose-xl">
  {{ markdown }}
</article>
```
 Five different typography sizes are included out of the box:

 

| Class | Body font size |
| --- | --- |
| `prose-sm` | 0.875rem *(14px)* |
| `prose-base` *(default)* | 1rem *(16px)* |
| `prose-lg` | 1.125rem *(18px)* |
| `prose-xl` | 1.25rem *(20px)* |
| `prose-2xl` | 1.5rem *(24px)* |

 These can be used in combination with Tailwind’s [breakpoint modifiers](responsive-design) to change the overall font size of a piece of content at different viewport sizes:

 
```
<article class="prose md:prose-lg lg:prose-xl">
  {{ markdown }}
</article>
```
 Everything about the provided size modifiers has been hand-tuned by professional designers to look as beautiful as possible, including the relationships between font sizes, heading spacing, code block padding, and more.

 Size modifiers are designed to be used with the [multi-class modifier pattern](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/#component-modifiers) and must be used in conjunction with the base `prose` class.

 
Always include the `prose` class when adding a size modifier


 
```
<article class="prose prose-lg">
  {{ markdown }}
</article>
```
 To learn about customizing the included type scales, read the documentation on [customizing the CSS](typography-plugin#customizing-the-css).

 ### Adapting to dark mode

 Each default color theme includes a hand-designed dark mode version that you can trigger by adding the `prose-invert` class:

 
```
<article class="prose dark:prose-invert">
  {{ markdown }}
</article>
```
 To learn about creating your own color themes, read the [adding custom color themes](typography-plugin#adding-custom-color-themes) documentation.

 ### Element modifiers

 Use element modifiers to customize the style of individual elements in your content directly in your HTML:

 
```
<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600">
  {{ markdown }}
</article>
```
 This makes it easy to do things like style links to match your brand, add a border radius to images, and tons more.

 Here’s a complete list of available element modifiers:

 

| Modifier | Target |
| --- | --- |
| `prose-headings:{utility}` | `h1`, `h2`, `h3`, `h4`, `th` |
| `prose-lead:{utility}` | `[class~="lead"]` |
| `prose-h1:{utility}` | `h1` |
| `prose-h2:{utility}` | `h2` |
| `prose-h3:{utility}` | `h3` |
| `prose-h4:{utility}` | `h4` |
| `prose-p:{utility}` | `p` |
| `prose-a:{utility}` | `a` |
| `prose-blockquote:{utility}` | `blockquote` |
| `prose-figure:{utility}` | `figure` |
| `prose-figcaption:{utility}` | `figcaption` |
| `prose-strong:{utility}` | `strong` |
| `prose-em:{utility}` | `em` |
| `prose-code:{utility}` | `code` |
| `prose-pre:{utility}` | `pre` |
| `prose-ol:{utility}` | `ol` |
| `prose-ul:{utility}` | `ul` |
| `prose-li:{utility}` | `li` |
| `prose-table:{utility}` | `table` |
| `prose-thead:{utility}` | `thead` |
| `prose-tr:{utility}` | `tr` |
| `prose-th:{utility}` | `th` |
| `prose-td:{utility}` | `td` |
| `prose-img:{utility}` | `img` |
| `prose-video:{utility}` | `video` |
| `prose-hr:{utility}` | `hr` |

 When stacking these modifiers with other modifiers like `hover`, you most likely want the other modifier to come first:

 
```
<article class="prose prose-a:text-blue-600 hover:prose-a:text-blue-500">
  {{ markdown }}
</article>
```
 Read the Tailwind CSS documentation on [ordering stacked modifiers](hover-focus-and-other-states#ordering-stacked-modifiers) to learn more.

 ### Overriding max-width

 Each size modifier comes with a baked in `max-width` designed to keep the content as readable as possible. This isn’t always what you want though, and sometimes you’ll want the content to just fill the width of its container.

 In those cases, all you need to do is add `max-w-none` to your content to override the embedded max-width:

 
```
<div class="grid grid-cols-4">
  <div class="col-span-1">
    <!-- ... -->
  </div>
  <div class="col-span-3">
    <article class="prose max-w-none">
      {{ markdown }}
    </article>
  </div>
</div>
```
 Advanced topics
---------------

 ### Undoing typography styles

 If you have a block of markup embedded in some content that shouldn’t inherit the `prose` styles, use the `not-prose` class to sandbox it:

 
```
<article class="prose">
  <h1>My Heading</h1>
  <p>...</p>

  <div class="not-prose">
    <!-- Some example or demo that needs to be prose-free -->
  </div>

  <p>...</p>
  <!-- ... -->
</article>
```
 Note that you can’t nest new `prose` instances within a `not-prose` block at this time.

 ### Adding custom color themes

 You can create your own color theme by adding a new key in the `typography` section of your `tailwind.config.js` file and providing your colors under the `css` key:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        pink: {
          css: {
            '--tw-prose-body': theme('colors.pink[800]'),
            '--tw-prose-headings': theme('colors.pink[900]'),
            '--tw-prose-lead': theme('colors.pink[700]'),
            '--tw-prose-links': theme('colors.pink[900]'),
            '--tw-prose-bold': theme('colors.pink[900]'),
            '--tw-prose-counters': theme('colors.pink[600]'),
            '--tw-prose-bullets': theme('colors.pink[400]'),
            '--tw-prose-hr': theme('colors.pink[300]'),
            '--tw-prose-quotes': theme('colors.pink[900]'),
            '--tw-prose-quote-borders': theme('colors.pink[300]'),
            '--tw-prose-captions': theme('colors.pink[700]'),
            '--tw-prose-code': theme('colors.pink[900]'),
            '--tw-prose-pre-code': theme('colors.pink[100]'),
            '--tw-prose-pre-bg': theme('colors.pink[900]'),
            '--tw-prose-th-borders': theme('colors.pink[300]'),
            '--tw-prose-td-borders': theme('colors.pink[200]'),
            '--tw-prose-invert-body': theme('colors.pink[200]'),
            '--tw-prose-invert-headings': theme('colors.white'),
            '--tw-prose-invert-lead': theme('colors.pink[300]'),
            '--tw-prose-invert-links': theme('colors.white'),
            '--tw-prose-invert-bold': theme('colors.white'),
            '--tw-prose-invert-counters': theme('colors.pink[400]'),
            '--tw-prose-invert-bullets': theme('colors.pink[600]'),
            '--tw-prose-invert-hr': theme('colors.pink[700]'),
            '--tw-prose-invert-quotes': theme('colors.pink[100]'),
            '--tw-prose-invert-quote-borders': theme('colors.pink[700]'),
            '--tw-prose-invert-captions': theme('colors.pink[400]'),
            '--tw-prose-invert-code': theme('colors.white'),
            '--tw-prose-invert-pre-code': theme('colors.pink[300]'),
            '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
            '--tw-prose-invert-th-borders': theme('colors.pink[600]'),
            '--tw-prose-invert-td-borders': theme('colors.pink[700]'),
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}
```

 See our internal [style definitions](https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js) for some more examples.

 ### Changing the default class name

 If you need to use a class name other than `prose` for any reason, you can do so using the `className` option when registering the plugin:

 

tailwind.config.js



```
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography')({
      className: 'wysiwyg',
    }),
  ]
  ...
}
```

 Now every instance of `prose` in the default class names will be replaced by your custom class name:

 
```
<article class="wysiwyg wysiwyg-slate lg:wysiwyg-xl">
  <h1>My Heading</h1>
  <p>...</p>

  <div class="not-wysiwyg">
    <!-- Some example or demo that needs to be prose-free -->
  </div>

  <p>...</p>
  <!-- ... -->
</article>
```
 ### Customizing the CSS

 If you want to customize the raw CSS generated by this plugin, add your overrides under the `typography` key in the `theme` section of your `tailwind.config.js` file:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            a: {
              color: '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}
```

 Like with all theme customizations in Tailwind, you can also define the `typography` key as a function if you need access to the `theme` helper:

 

tailwind.config.js



```
module.exports = {
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.800'),

            // ...
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}
```

 Customizations should be applied to a specific modifier like `DEFAULT` or `xl`, and must be added under the `css` property. Customizations are authored in the same [CSS-in-JS syntax](plugins#css-in-js-syntax) used to write Tailwind plugins.

 See [the default styles](https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js) for this plugin for more in-depth examples of configuring each modifier.








 © 2022 Tailwind Labs Inc.  

<https://tailwindcss.com/docs/typography-plugin>

tailwindcss