Tailwind CSS

https://v2.tailwindcss.com/docs
Admin
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It...
Tokens:214,189
Snippets:2,605
Trust Score:9.9
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies

Source: https://v2.tailwindcss.com/docs/guides/vue-3-vite

Install project dependencies and Tailwind CSS packages.

```bash
npm install
```

```bash
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

--------------------------------

### Usage Examples

Source: https://v2.tailwindcss.com/docs/font-weight

Examples demonstrating how to apply font weight utilities to HTML elements.

```APIDOC
## Usage

Control the font weight of an element using the `font-{weight}` utilities.

```html
<p class="font-thin ...">The quick brown fox jumps over the lazy dog.</p>
<p class="font-extralight ...">The quick brown fox jumps over the lazy dog.</p>
<p class="font-light ...">The quick brown fox jumps over the lazy dog.</p>
<p class="font-normal ...">The quick brown fox jumps over the lazy dog.</p>
<p class="font-medium ...">The quick brown fox jumps over the lazy dog.</p>
<p class="font-semibold ...">The quick brown fox jumps over the lazy dog.</p>
<p class="font-bold ...">The quick brown fox jumps over the lazy dog.</p>
<p class="font-extrabold ...">The quick brown fox jumps over the lazy dog.</p>
<p class="font-black ...">The quick brown fox jumps over the lazy dog.</p>
```
```

--------------------------------

### Place Self Start Utility

Source: https://v2.tailwindcss.com/docs/place-self

Use `place-self-start` to align an item to the start on both axes. This example shows its application in a grid layout.

```html
<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-start ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

--------------------------------

### Container Usage Examples

Source: https://v2.tailwindcss.com/docs/container

Examples demonstrating how to use the `container` class with utilities for centering and adding horizontal padding.

```APIDOC
## Container Usage Examples

### Centering a Container

To center a container, use the `mx-auto` utility:

```html
<div class="container mx-auto">
  <!-- ... -->
</div>
```

### Adding Horizontal Padding

To add horizontal padding, use the `px-{size}` utilities:

```html
<div class="container mx-auto px-4">
  <!-- ... -->
</div>
```
```

--------------------------------

### Install postcss-nesting

Source: https://v2.tailwindcss.com/docs/using-with-preprocessors

Install the postcss-nesting plugin to use the CSS Nesting specification syntax.

```bash
npm install postcss-nesting
```

--------------------------------

### Install Autoprefixer

Source: https://v2.tailwindcss.com/docs/using-with-preprocessors

Install the Autoprefixer package via npm.

```bash
npm install autoprefixer
```

--------------------------------

### Place Self Utilities - Usage Examples

Source: https://v2.tailwindcss.com/docs/place-self

Examples demonstrating how to use the different place-self utility classes.

```APIDOC
## Place Self Utilities - Usage Examples

### Description
Examples demonstrating how to use the different place-self utility classes.

### Auto Alignment
Use `place-self-auto` to align an item based on the value of the container’s `place-items` property.

```html
<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-auto ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

### Start Alignment
Use `place-self-start` to align an item to the start on both axes.

```html
<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-start ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

### Center Alignment
Use `place-self-center` to align an item at the center on both axes.

```html
<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-center ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

### End Alignment
Use `place-self-end` to align an item to the end on both axes.

```html
<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-end ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

### Stretch Alignment
Use `place-self-stretch` to stretch an item on both axes.

```html
<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-stretch ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```
```

--------------------------------

### Install Autoprefixer

Source: https://v2.tailwindcss.com/docs/browser-support

Commands to install Autoprefixer using npm or Yarn.

```shell
# Using npm
npm install autoprefixer

# Using Yarn
yarn add autoprefixer
```

--------------------------------

### Install postcss-import

Source: https://v2.tailwindcss.com/docs/using-with-preprocessors

Install the `postcss-import` plugin using npm. This plugin is essential for handling build-time imports.

```bash
npm install postcss-import
```

--------------------------------

### Create New Laravel Project

Source: https://v2.tailwindcss.com/docs/guides/laravel

Use the Laravel Installer to create a new project. Navigate into the project directory.

```bash
laravel new my-project
cd my-project
```

--------------------------------

### Example HTML structure

Source: https://v2.tailwindcss.com/docs/optimizing-for-production

A sample component demonstrating standard Tailwind utility class usage.

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

--------------------------------

### Place Items Start

Source: https://v2.tailwindcss.com/docs/place-items

Use `place-items-start` to align grid items to the start of their grid areas on both axes. This utility requires a grid container.

```html
<div class="grid grid-cols-3 gap-2 place-items-start h-48 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

--------------------------------

### Create a Next.js project with Tailwind

Source: https://v2.tailwindcss.com/docs/guides/nextjs

Initializes a new project using the official Tailwind CSS example template.

```bash
npx create-next-app -e with-tailwindcss my-project
cd my-project
```

--------------------------------

### Example tailwind.config.js File

Source: https://v2.tailwindcss.com/docs/configuration

A comprehensive example of a tailwind.config.js file demonstrating customizations for colors, fonts, spacing, and border-radius. It also shows how to extend variants.

```javascript
// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  }
}
```

--------------------------------

### Align Self Start Example

Source: https://v2.tailwindcss.com/docs/align-self

Use `self-start` to align an item to the start of the container's cross axis, overriding the container's `align-items` value. This example shows its application in a flex layout.

```html
<div class="flex items-stretch ...">
  <div>1</div>
  <div class="self-start ...">2</div>
  <div>3</div>
</div>
```

--------------------------------

### Build a responsive marketing component

Source: https://v2.tailwindcss.com/docs/responsive-design

A complex component example using flexbox utilities to switch between stacked and side-by-side layouts.

```html
<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:flex-shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">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>
</div>
```

--------------------------------

### Install CRACO

Source: https://v2.tailwindcss.com/docs/guides/create-react-app

Install CRACO to enable PostCSS configuration overrides in Create React App.

```bash
npm install @craco/craco
```

--------------------------------

### Plugins Registration Example

Source: https://v2.tailwindcss.com/docs/configuration

Example snippet for the `plugins` section in `tailwind.config.js`, showing how to register community plugins like `@tailwindcss/forms`, `@tailwindcss/aspect-ratio`, `@tailwindcss/typography`, and `tailwindcss-children`.

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

--------------------------------

### Absolute Positioning Examples

Source: https://v2.tailwindcss.com/docs/position

Shows examples of absolute positioning within different parent contexts (static and relative). Demonstrates how absolute children are positioned relative to the nearest non-static ancestor.

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

--------------------------------

### Responsive Align Self Example

Source: https://v2.tailwindcss.com/docs/align-self

Control alignment at specific breakpoints by adding a `{screen}:` prefix. This example applies `self-end` only on medium screens and above.

```html
<div class="items-stretch ...">
  <div class="self-auto md:self-end ...">
    <!-- ... -->
  </div>
</div>
```

--------------------------------

### Install Tailwind dependencies

Source: https://v2.tailwindcss.com/docs/guides/nextjs

Installs Tailwind CSS and required peer-dependencies based on the Next.js version.

```bash
# If you're on Next.js v10 or newer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# If you're on Next.js v9 or older
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```

--------------------------------

### HTML Dark Mode Utility Example

Source: https://v2.tailwindcss.com/docs/dark-mode

Demonstrates a standard utility combination that behaves differently depending on the dark mode strategy.

```html
<div class="text-black text-opacity-50 dark:text-white">
  <!-- ... -->
</div>
```

```html
<div class="text-black text-opacity-50 dark:text-white dark:text-opacity-50">
  <!-- ... -->
</div>
```

--------------------------------

### Install Tailwind CSS and dependencies via npm

Source: https://v2.tailwindcss.com/docs/guides/gatsby

Install Tailwind CSS, PostCSS, and Autoprefixer as development dependencies.

```bash
npm install -D gatsby-plugin-postcss tailwindcss@latest postcss@latest autoprefixer@latest
```

--------------------------------

### Install Laravel Front-end Dependencies

Source: https://v2.tailwindcss.com/docs/guides/laravel

Install the necessary front-end dependencies for your Laravel project using npm.

```bash
npm install
```

--------------------------------

### Install Tailwind CSS Typography Plugin

Source: https://v2.tailwindcss.com/docs/typography-plugin

Install the plugin using npm. This command adds the plugin as a development dependency to your project.

```bash
npm install -D @tailwindcss/typography
```

--------------------------------

### Align Content Start

Source: https://v2.tailwindcss.com/docs/align-content

Use `content-start` to pack rows in a container against the start of the cross axis. Requires flexbox or grid layout.

```html
<div class="h-48 flex flex-wrap content-start ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
```

--------------------------------

### Target mobile screens correctly

Source: https://v2.tailwindcss.com/docs/responsive-design

Examples showing the difference between using prefixed utilities versus unprefixed utilities for mobile-first design.

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

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

--------------------------------

### Align Grid Content to Start with Tailwind CSS

Source: https://v2.tailwindcss.com/docs/place-content

Use `place-content-start` to align grid items to the start of the block axis. Requires a grid layout.

```html
<div class="grid grid-cols-3 gap-2 place-content-start h-48 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

--------------------------------

### Apply Justify Items Utilities

Source: https://v2.tailwindcss.com/docs/justify-items

Examples of applying alignment utilities to grid containers.

```html
<div class="grid justify-items-start ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

```html
<div class="grid justify-items-end ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

```html
<div class="grid justify-items-center ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

```html
<div class="grid justify-items-stretch ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

--------------------------------

### Configure Responsive and Hover Variants

Source: https://v2.tailwindcss.com/docs/configuring-variants

Example configuration for enabling responsive and hover variants for backgroundColor, and responsive and focus variants for borderColor.

```javascript
module.exports = {
  variants: {
    backgroundColor: ['responsive', 'hover'],
    borderColor: ['responsive', 'focus'],
  },
}
```

--------------------------------

### Theme Customization Example

Source: https://v2.tailwindcss.com/docs/configuration

Example snippet for the `theme` section in `tailwind.config.js`, showing how to customize colors, font families, spacing, and border-radius. This allows for defining a project-specific visual design.

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}
```

--------------------------------

### Grid Template Rows - Usage Example

Source: https://v2.tailwindcss.com/docs/grid-template-rows

Demonstrates how to use the `grid-rows-{n}` utilities to create grids with a specified number of equally sized rows.

```APIDOC
## Usage

Use the `grid-rows-{n}` utilities to create grids with _n_ equally sized rows.

```html
<div class="h-64 grid grid-rows-3 grid-flow-col gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>
```
```

--------------------------------

### Apply Contrast Filters

Source: https://v2.tailwindcss.com/docs/contrast

Use the `contrast-{amount?}` utilities alongside the `filter` utility to control an element’s contrast. No setup required.

```html
<div class="filter contrast-125 ...">
  <!-- ... -->
</div>
```

--------------------------------

### Skew Utilities - Usage Example

Source: https://v2.tailwindcss.com/docs/skew

Demonstrates how to apply skew utilities to elements by combining the 'transform' utility with skew-x or skew-y classes.

```APIDOC
## Usage
Skew an element by first enabling transforms with the `transform` utility, then specifying the skew angle using the `skew-x-{amount}` and `skew-y-{amount}` utilities.
```html
<img class="transform skew-y-0 ...">
<img class="transform skew-y-3 ...">
<img class="transform skew-y-6 ...">
<img class="transform skew-y-12 ...">
```
```

--------------------------------

### Backdrop Sepia Utility Documentation

Source: https://v2.tailwindcss.com/docs/backdrop-sepia

Overview of the backdrop-sepia utility classes, including default values, usage examples, and configuration options.

```APIDOC
## Backdrop Sepia Utilities

### Description
Utilities for applying backdrop sepia filters to an element. These require the `backdrop-filter` utility to be present on the element.

### Default Class Reference
| Class | Properties |
| --- | --- |
| backdrop-sepia-0 | --tw-backdrop-sepia: sepia(0); |
| backdrop-sepia | --tw-backdrop-sepia: sepia(1); |

### Usage Example
```html
<div class="backdrop-filter backdrop-sepia ...">
  <!-- ... -->
</div>
```

### Responsive Design
Apply utilities at specific breakpoints using the `{screen}:` prefix (e.g., `md:backdrop-sepia-0`).

### Customization
Customize generated utilities in `tailwind.config.js`:
```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backdropSepia: {
        25: '.25',
        75: '.75',
      }
    }
  }
}
```

### Configuration
- **Variants**: Control generated variants in `variants.extend.backdropSepia`.
- **Disabling**: Disable via `corePlugins: { backdropSepia: false }`.
```

--------------------------------

### Grid Auto Rows - Usage Example

Source: https://v2.tailwindcss.com/docs/grid-auto-rows

Demonstrates how to use the `auto-rows-{size}` utilities to control the size of implicitly-created grid rows.

```APIDOC
## Usage

Use the `auto-rows-{size}` utilities to control the size implicitly-created grid rows.

### Example

```html
<div class="grid grid-flow-row auto-rows-max">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```
```

--------------------------------

### Initialize Vite Project

Source: https://v2.tailwindcss.com/docs/guides/vue-3-vite

Create a new project directory and navigate into it.

```bash
npm init vite my-project
cd my-project
```

--------------------------------

### Hue Rotate Utilities - Customizing

Source: https://v2.tailwindcss.com/docs/hue-rotate

Guides on how to customize the hue-rotate utilities by extending the `hueRotate` key in the `tailwind.config.js` file.

```APIDOC
## Customizing

You can customize which `hue-rotate` utilities are generated using the `hueRotate` key in the `theme` section of your `tailwind.config.js` file.

```javascript
  // tailwind.config.js
  module.exports = {
    theme: {
+     extend: {
+       hueRotate: {
+         '-270': '-270deg',
+         270: '270deg',
+       }
+     }
    }
  }
```

Learn more about customizing the default theme in the [theme customization documentation](https://tailwindcss.com/docs/theme#customizing-the-default-theme).

```

--------------------------------

### Initialize Create React App project

Source: https://v2.tailwindcss.com/docs/guides/create-react-app

Create a new project directory using the standard Create React App CLI.

```bash
npx create-react-app my-project
cd my-project
```

--------------------------------

### Minimal tailwind.config.js Example

Source: https://v2.tailwindcss.com/docs/configuration

A minimal `tailwind.config.js` file generated by `npx tailwindcss init`. It provides a basic structure for configuration.

```javascript
// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

--------------------------------

### Build with custom configuration

Source: https://v2.tailwindcss.com/docs/installation

Specify a custom configuration file path using the -c option.

```bash
npx tailwindcss -i ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css
```

--------------------------------

### Apply Opacity Utilities

Source: https://v2.tailwindcss.com/docs/opacity

Use `opacity-{amount}` utilities to control the opacity of an element. Examples show different opacity levels from 0% to 100%.

```html
<div class="bg-light-blue-600 opacity-100 ..."></div>
<div class="bg-light-blue-600 opacity-75 ..."></div>
<div class="bg-light-blue-600 opacity-50 ..."></div>
<div class="bg-light-blue-600 opacity-25 ..."></div>
<div class="bg-light-blue-600 opacity-0 ..."></div>
```

--------------------------------

### Positioning Elements with Edge Utilities

Source: https://v2.tailwindcss.com/docs/top-right-bottom-left

Examples demonstrating how to anchor absolutely positioned elements to parent edges or corners using inset and directional utilities.

```html
<!-- Span top edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 top-0 h-16 ...">1</div>
</div>

<!-- Span right edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 right-0 w-16 ...">2</div>
</div>

<!-- Span bottom edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 bottom-0 h-16 ...">3</div>
</div>

<!-- Span left edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 left-0 w-16 ...">4</div>
</div>

<!-- Fill entire parent -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-0 ...">5</div>
</div>

<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute left-0 top-0 h-16 w-16 ...">6</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 ...">7</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 ...">8</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 ...">9</div>
</div>
```

--------------------------------

### Generated CSS with Variant Ordering

Source: https://v2.tailwindcss.com/docs/configuring-variants

Example of CSS generated based on the variant order configuration, showing how hover and focus states are applied.

```css
/* Generated CSS */

.bg-black { background-color: #000 }
.bg-white { background-color: #fff }
/* ... */

.hover\:bg-black:hover { background-color: #000 }
.hover\:bg-white:hover { background-color: #fff }
/* ... */

.focus\:bg-black:focus { background-color: #000 }
.focus\:bg-white:focus { background-color: #fff }
/* ... */

.border-black { border-color: #000 }
.border-white { border-color: #fff }
/* ... */

.focus\:border-black:focus { border-color: #000 }
.focus\:border-white:focus { border-color: #fff }
/* ... */

.hover\:border-black:hover { border-color: #000 }
.hover\:border-white:hover { background-color: #fff }
/* ... */
```

--------------------------------

### Apply responsive width utilities

Source: https://v2.tailwindcss.com/docs/responsive-design

Demonstrates applying different width utilities based on screen size breakpoints.

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

--------------------------------

### Install Tailwind CSS dependencies

Source: https://v2.tailwindcss.com/docs/guides/create-react-app

Install the Tailwind CSS v2.0 PostCSS 7 compatibility build and required peer dependencies.

```bash
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```

--------------------------------

### Include Tailwind via CDN

Source: https://v2.tailwindcss.com/docs/installation

Use the CDN link for quick demos, noting that many advanced features are unavailable compared to a full build process.

```html
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
```

--------------------------------

### Install Tailwind CSS Dependencies

Source: https://v2.tailwindcss.com/docs/guides/nuxtjs

Install Tailwind CSS and its peer dependencies using npm. Ensure Node.js version 12.13.0 or higher is used.

```bash
npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest
```

--------------------------------

### Create a new Gatsby project

Source: https://v2.tailwindcss.com/docs/guides/gatsby

Use Gatsby CLI to create a new project and navigate into its directory.

```bash
gatsby new my-project
cd my-project
```

--------------------------------

### Initialize Tailwind configuration

Source: https://v2.tailwindcss.com/docs/guides/create-react-app

Generate the default tailwind.config.js file.

```bash
npx tailwindcss-cli@latest init
```

--------------------------------

### Variants Customization Example

Source: https://v2.tailwindcss.com/docs/configuration

Example snippet for the `variants` section in `tailwind.config.js`, demonstrating how to extend variants for `borderColor` and `opacity`. This controls which variants are generated for core utility plugins.

```javascript
// tailwind.config.js
module.exports = {
  variants: {
    fill: [],
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
}
```

--------------------------------

### Place Self Utilities - Responsive Design

Source: https://v2.tailwindcss.com/docs/place-self

How to apply place-self utilities at different screen sizes using responsive prefixes.

```APIDOC
## Place Self Utilities - Responsive Design

### Description
How to apply place-self utilities at different screen sizes using responsive prefixes.

### Usage
To place an item at a specific breakpoint, add a `{screen}:` prefix to any existing `place-self` utility. For example, use `md:place-self-end` to apply the `place-self-end` utility at only medium screen sizes and above.

```html
<div class="place-self-start md:place-self-end">
  <!-- ... -->
</div>
```

For more information about Tailwind’s responsive design features, check out the [Responsive Design documentation](https://tailwindcss.com/docs/responsive-design).
```

--------------------------------

### Align Self Auto Example

Source: https://v2.tailwindcss.com/docs/align-self

Use `self-auto` to align an item based on the container's `align-items` property. This example demonstrates its usage within a flex container.

```html
<div class="flex items-stretch ...">
  <div>1</div>
  <div class="self-auto ...">2</div>
  <div>3</div>
</div>
```

--------------------------------

### Install Tailwind CSS v2.0 and PostCSS 8

Source: https://v2.tailwindcss.com/docs/upgrading-to-v2

Update Tailwind CSS to the latest version and install PostCSS and autoprefixer as peer dependencies. This is required for Tailwind CSS v2.0.

```bash
npm install tailwindcss@latest postcss@latest autoprefixer@latest
```

--------------------------------

### Responsive Place Content

Source: https://v2.tailwindcss.com/docs/place-content

How to apply place-content utilities at specific breakpoints.

```APIDOC
## Responsive

To place content at a specific breakpoint, add a `{screen}:` prefix to any existing `place-content` utility. For example, use `md:place-content-center` to apply the `place-content-center` utility at only medium screen sizes and above.

```html
<div class="place-content-start md:place-content-center">
  <!-- ... -->
</div>
```

For more information about Tailwind’s responsive design features, check out the [Responsive Design documentation](https://tailwindcss.com/docs/responsive-design).

```

--------------------------------

### Install Tailwind CSS and Peer Dependencies

Source: https://v2.tailwindcss.com/docs/guides/laravel

Install Tailwind CSS, PostCSS, and Autoprefixer as development dependencies using npm. Ensure Node.js version 12.13.0 or higher is used.

```bash
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

--------------------------------

### Align Self Stretch Example

Source: https://v2.tailwindcss.com/docs/align-self

Use `self-stretch` to make an item fill the container's cross axis, overriding the container's `align-items` value. This example is for a flex container.

```html
<div class="flex items-stretch ...">
  <div>1</div>
  <div class="self-stretch ...">2</div>
  <div>3</div>
</div>
```

--------------------------------

### Hue Rotate Utilities - Responsive

Source: https://v2.tailwindcss.com/docs/hue-rotate

Explains how to apply hue rotation utilities at different screen sizes using responsive prefixes.

```APIDOC
## Responsive

To control an element’s hue rotation at a specific breakpoint, add a `{screen}:` prefix to any existing hue-rotate utility. For example, use `md:hue-rotate-60` to apply the `hue-rotate-60` utility at only medium screen sizes and above.

```html
<div class="filter hue-rotate-15 md:hue-rotate-60 ...">
  <!-- ... -->
</div>
```

For more information about Tailwind’s responsive design features, check out the [Responsive Design documentation](https://tailwindcss.com/docs/responsive-design).

```

--------------------------------

### Align Self End Example

Source: https://v2.tailwindcss.com/docs/align-self

Use `self-end` to align an item to the end of the container's cross axis, irrespective of the container's `align-items` property. This example is within a flex layout.

```html
<div class="flex items-stretch ...">
  <div>1</div>
  <div class="self-end ...">2</div>
  <div>3</div>
</div>
```

--------------------------------

### Initialize Tailwind with PostCSS

Source: https://v2.tailwindcss.com/docs/installation

Automatically generate a postcss.config.js file when initializing Tailwind.

```bash
npx tailwindcss init --postcss
```

--------------------------------

### Align Self Center Example

Source: https://v2.tailwindcss.com/docs/align-self

Use `self-center` to align an item along the center of the container's cross axis, regardless of the container's `align-items` setting. This example is for a flex container.

```html
<div class="flex items-stretch ...">
  <div>1</div>
  <div class="self-center ...">2</div>
  <div>3</div>
</div>
```

--------------------------------

### Create Nuxt.js Project

Source: https://v2.tailwindcss.com/docs/guides/nuxtjs

Use Create Nuxt App to scaffold a new Nuxt.js project. Navigate into the project directory.

```bash
npx create-nuxt-app my-project
cd my-project
```

--------------------------------

### Generated Border Radius CSS Classes

Source: https://v2.tailwindcss.com/docs/theme

Example of CSS classes generated from the `borderRadius` configuration in `tailwind.config.js`.

```css
.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: .125rem }
.rounded      { border-radius: .25rem }
.rounded-lg   { border-radius: .5rem }
.rounded-full { border-radius: 9999px }
```

--------------------------------

### Responsive Component with Hover and Focus Styles

Source: https://v2.tailwindcss.com/docs/utility-first

This example demonstrates a fully responsive component built with Tailwind utility classes, including a button with hover and focus styles. It showcases how utility classes can manage complex styling directly in the HTML.

```html
<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md 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:flex-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-gray-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>
```

--------------------------------

### Combine Focus and Responsive Utilities

Source: https://v2.tailwindcss.com/docs/text-color

Combine responsive prefixes like `md:` with `focus:` to apply text colors conditionally based on screen size and focus state. This example sets `text-gray-900` on medium screens and `text-red-600` when focused on medium screens.

```html
<input class="... md:text-gray-900 md:focus:text-red-600 ...">
```

--------------------------------

### Invalid Preprocessor Usage

Source: https://v2.tailwindcss.com/docs/using-with-preprocessors

Example of an unsupported operation where Sass is processed before Tailwind's theme() function.

```scss
.alert {
  background-color: darken(theme('colors.red.500'), 10%);
}
```

--------------------------------

### Apply Vertical Alignment Utilities

Source: https://v2.tailwindcss.com/docs/vertical-align

Examples of applying specific vertical alignment classes to inline-block elements.

```html
<span class="inline-block align-baseline ...">...</span>
```

```html
<span class="inline-block align-top ...">...</span>
```

```html
<span class="inline-block align-middle ...">...</span>
```

```html
<span class="inline-block align-bottom ...">...</span>
```

```html
<span class="inline-block align-text-top ...">...</span>
```

```html
<span class="inline-block align-text-bottom ...">...</span>
```

--------------------------------

### Apply responsive flex utilities

Source: https://v2.tailwindcss.com/docs/flex

Use screen prefixes like md: to apply flex utilities at specific breakpoints.

```html
<div class="flex ...">
  <!-- ... -->
  <div class="flex-none md:flex-1 ...">
    Responsive flex item
  </div>
  <!-- ... -->
</div>
```

--------------------------------

### Object Fill Example

Source: https://v2.tailwindcss.com/docs/object-fit

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

```html
<div class="bg-light-blue-300 ...">
  <img class="object-fill h-48 w-full ...">
</div>
```

--------------------------------

### Configure Tailwind Core Plugins

Source: https://v2.tailwindcss.com/docs/configuration

Examples of enabling, disabling, or safelisting core plugins in the tailwind.config.js file.

```javascript
// tailwind.config.js
module.exports = {
  // ...
}
```

```javascript
// tailwind.config.js
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}
```

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

```javascript
// tailwind.config.js
module.exports = {
  corePlugins: []
}
```

--------------------------------

### Responsive Place Items

Source: https://v2.tailwindcss.com/docs/place-items

How to apply place-items utilities at specific breakpoints.

```APIDOC
## Responsive Place Items

### Description
To place items at a specific breakpoint, add a `{screen}:` prefix to any existing `place-items` utility. For example, use `md:place-items-center` to apply the `place-items-center` utility at only medium screen sizes and above.

### Example
```html
<div class="place-items-start md:place-items-center">
  <!-- ... -->
</div>
```

For more information about Tailwind’s responsive design features, check out the [Responsive Design documentation](https://tailwindcss.com/docs/responsive-design).
```

--------------------------------

### Set starting gradient color

Source: https://v2.tailwindcss.com/docs/gradient-color-stops

Use the from-{color} utility to define the beginning color of a gradient.

```html
<div class="bg-gradient-to-r from-red-500 ..."></div>
```

--------------------------------

### Customizing gridRowStart theme

Source: https://v2.tailwindcss.com/docs/grid-row

Extend the gridRowStart section in tailwind.config.js to add custom row start utilities.

```javascript
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridRowStart: {
+         '8': '8',
+         '9': '9',
+         '10': '10',
+         '11': '11',
+         '12': '12',
+         '13': '13',
        }
      }
    }
  }
```

--------------------------------

### Responsive Container Variant

Source: https://v2.tailwindcss.com/docs/container

Apply container behavior starting from a specific breakpoint using responsive prefixes.

```html
<!-- Full-width fluid until the `md` breakpoint, then lock to container -->
<div class="md:container md:mx-auto">
  <!-- ... -->
</div>
```

--------------------------------

### Responsive Backdrop Contrast

Source: https://v2.tailwindcss.com/docs/backdrop-contrast

Control backdrop contrast at different screen sizes by prefixing utilities with responsive prefixes like `md:`. This example applies a different contrast level at medium screens and above.

```html
<div class="backdrop-filter backdrop-contrast-110 md:backdrop-contrast-150 ...">
  <!-- ... -->
</div>
```

--------------------------------

### Responsive Background Image Utility

Source: https://v2.tailwindcss.com/docs/background-image

Apply background image utilities at specific breakpoints by using a `{screen}:` prefix. This example applies `bg-gradient-to-l` by default and `md:bg-gradient-to-r` on medium screens and up.

```html
<div class="bg-gradient-to-l md:bg-gradient-to-r ..."></div>
```

--------------------------------

### Align items to start of cross axis

Source: https://v2.tailwindcss.com/docs/align-items

Use items-start to align items to the beginning of the cross axis.

```html
<div class="flex items-start ...">
  <div class="h-12">1</div>
  <div class="h-24">2</div>
  <div class="h-16">3</div>
</div>
```

--------------------------------

### Grid Template Rows - Responsive

Source: https://v2.tailwindcss.com/docs/grid-template-rows

Explains how to apply grid-template-rows utilities at different screen sizes using responsive prefixes.

```APIDOC
## Responsive

To control the rows of a grid at a specific breakpoint, add a `{screen}:` prefix to any existing grid-template-rows utility. For example, use `md:grid-rows-6` to apply the `grid-rows-6` utility at only medium screen sizes and above.

```html
<div class="grid grid-rows-2 md:grid-rows-6 ...">
  <!-- ... -->
</div>
```

For more information about Tailwind’s responsive design features, check out the [Responsive Design documentation](https://tailwindcss.com/docs/responsive-design).

```

--------------------------------

### Object Cover Example

Source: https://v2.tailwindcss.com/docs/object-fit

Use the `object-cover` class to make an element's content cover its entire container.

```html
<div class="bg-indigo-300 ...">
  <img class="object-cover h-48 w-full ...">
</div>
```

--------------------------------

### Object Contain Example

Source: https://v2.tailwindcss.com/docs/object-fit

Use the `object-contain` class to ensure an element's content stays within its container.

```html
<div class="bg-rose-300 ...">
  <img class="object-contain h-48 w-full ...">
</div>
```

--------------------------------

### Configure print media queries

Source: https://v2.tailwindcss.com/docs/breakpoints

Add a print screen to the theme extend configuration to enable print-specific utility classes.

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
        // => @media print { ... }
      }
    }
  }
}
```

--------------------------------

### Configure variants in tailwind.config.js

Source: https://v2.tailwindcss.com/docs/configuring-variants

Example of defining variants for core plugins within the variants section of the configuration file.

```javascript
// tailwind.config.js
module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active'],
      // ...
      borderColor: ['focus-visible', 'first'],
      // ...
      textColor: ['visited'],
    }
  },
}
```

--------------------------------

### Responsive Place Content with Tailwind CSS

Source: https://v2.tailwindcss.com/docs/place-content

Apply `place-content` utilities at specific breakpoints using responsive prefixes. Example shows centering content on medium screens and above.

```html
<div class="place-content-start md:place-content-center">
  <!-- ... -->
</div>
```

--------------------------------

### Responsive Place Self Utility

Source: https://v2.tailwindcss.com/docs/place-self

Apply `place-self` utilities at specific breakpoints by using the `{screen}:` prefix. This example applies `place-self-end` at medium screen sizes and above.

```html
<div class="place-self-start md:place-self-end">
  <!-- ... -->
</div>
```

--------------------------------

### Generated utility CSS output

Source: https://v2.tailwindcss.com/docs/breakpoints

Example of how custom screen names translate into generated CSS utility classes.

```css
.text-center { text-align: center }

@media (min-width: 640px) {
  .tablet\:text-center { text-align: center }
}

@media (min-width: 1024px) {
  .laptop\:text-center { text-align: center }
}

@media (min-width: 1280px) {
  .desktop\:text-center { text-align: center }
}
```

--------------------------------

### Build for production

Source: https://v2.tailwindcss.com/docs/installation

Set NODE_ENV to production to enable tree-shaking and optional minification for optimized CSS output.

```bash
NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css
```

```bash
NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --minify
```

--------------------------------

### Responsive Variants

Source: https://v2.tailwindcss.com/docs/container

Demonstrates how to use responsive variants of the `container` class to control its behavior at different breakpoints.

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

```html
<!-- Full-width fluid until the `md` breakpoint, then lock to container -->
<div class="md:container md:mx-auto">
  <!-- ... -->
</div>
```
```

--------------------------------

### Apply responsive order utilities

Source: https://v2.tailwindcss.com/docs/order

Use screen prefixes to apply order utilities only at specific breakpoints.

```html
<div class="flex">
  <div>1</div>
  <div class="order-first md:order-last">2</div>
  <div>3</div>
</div>
```

--------------------------------

### Place Self Stretch Utility

Source: https://v2.tailwindcss.com/docs/place-self

Use `place-self-stretch` to stretch an item on both axes. This example shows its application within a grid.

```html
<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-stretch ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

--------------------------------

### Build a component with traditional CSS

Source: https://v2.tailwindcss.com/docs/utility-first

Demonstrates styling a chat notification component using custom CSS classes and a style block.

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

--------------------------------

### Place Self End Utility

Source: https://v2.tailwindcss.com/docs/place-self

Use `place-self-end` to align an item to the end on both axes. This example demonstrates its implementation in a grid.

```html
<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-end ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

--------------------------------

### Place Self Center Utility

Source: https://v2.tailwindcss.com/docs/place-self

Use `place-self-center` to align an item at the center on both axes. This example illustrates its use in a grid.

```html
<div class="grid grid-cols-3 gap-2 ...">
  <div>1</div>
  <div class="place-self-center ...">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```
Tokens:
Raw