Tailwind CSS V3

https://v3.tailwindcss.com/docs
Admin
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It...
Tokens:240,089
Snippets:3,184
Trust Score:9.9
Update:20 hours ago
Show doc for...
Tokens:
Raw
### Start the build process

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

Run your build process with npm run start.

```bash
npm run start
```

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

### Justify Content Start Example

Source: https://v3.tailwindcss.com/docs/justify-content

Use `justify-start` to justify items against the start of the container's main axis.

```html
<div class="flex justify-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

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

### Place grid items at start with place-items-start

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

Use `place-items-start` to align grid items to the start of their grid areas on both axes. This example shows a 3-column grid with items placed at the start.

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

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

### Start the Parcel build process

Source: https://v3.tailwindcss.com/docs/guides/parcel

Run the Parcel bundler on your src/index.html file to start the development server.

```bash
npx parcel src/index.html
```

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

### Use logical properties with start and end utilities

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

Use start-* and end-* to set inset-inline-start and inset-inline-end, which map to left or right based on text direction. The example shows both LTR and RTL contexts.

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

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

### Start the Angular development server

Source: https://v3.tailwindcss.com/docs/guides/angular

Run ng serve to start the build process and development server.

```bash
ng serve
```

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

### Start grid items with place-content-start

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

Use place-content-start to pack items against the start of the block axis.

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

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

### Install Tailwind CSS and initialize configuration

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

Install Tailwind CSS as a dev dependency and generate the default tailwind.config.js file.

```bash
npm install -D tailwindcss@3
npx tailwindcss init
```

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

### Start the Astro development server

Source: https://v3.tailwindcss.com/docs/guides/astro

Run your build process with npm run dev to start the development server.

```shell
npm run dev
```

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

### Install Tailwind CSS and initialize config files

Source: https://v3.tailwindcss.com/docs/guides/meteor

Install Tailwind CSS v3 and its peer dependencies via npm, then generate tailwind.config.js and postcss.config.js using the init command.

```bash
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
```

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

### Start the build process with ./bin/dev

Source: https://v3.tailwindcss.com/docs/guides/ruby-on-rails

Run your build process with ./bin/dev to compile Tailwind CSS and start the Rails server.

```shell
./bin/dev
```

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

### Install Tailwind CSS and initialize configuration

Source: https://v3.tailwindcss.com/docs/guides/angular

Install Tailwind CSS and its dependencies via npm, then generate the default tailwind.config.js file.

```bash
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init
```

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

### Start Phoenix server

Source: https://v3.tailwindcss.com/docs/guides/phoenix

Run your build process with `mix phx.server`.

```shell
mix phx.server
```

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

### Install Tailwind CSS and initialize configuration

Source: https://v3.tailwindcss.com/docs/guides/remix

Install Tailwind CSS and its peer dependencies via npm, then run the init command to generate tailwind.config.ts and postcss.config.js files.

```bash
npm install -D tailwindcss@3 postcss autoprefixernpx tailwindcss init --ts -p
```

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

### Grid Example

Source: https://v3.tailwindcss.com/docs/display

Use the `grid` utility to create a grid container. This example shows a grid with 3 columns and 3 rows with a gap.

```html
<div class="grid gap-4 grid-cols-3 grid-rows-3">
  <!-- ... -->
</div>
```

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

### Install postcss-import via npm

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

Install the postcss-import plugin as a development dependency using npm.

```shell
npm install -D postcss-import
```

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

### Install postcss-nesting

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

Install the postcss-nesting plugin as a development dependency to use standard CSS nesting with Tailwind.

```shell
npm install -D postcss-nesting
```

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

### Snap to start with snap-start

Source: https://v3.tailwindcss.com/docs/scroll-snap-align

Use the snap-start utility to snap an element to its start when scrolled inside a snap container. The parent container must have a snap type utility like snap-x.

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

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

### Justify Items Start

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

Use `justify-items-start` to justify grid items against the start of their inline axis.

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

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

### Block, Inline, and Inline-Block Example

Source: https://v3.tailwindcss.com/docs/display

Use the `inline`, `inline-block`, and `block` utilities to control the flow of text and elements. This example shows how each utility affects text wrapping and element layout.

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

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

### Flex Example

Source: https://v3.tailwindcss.com/docs/display

Use the `flex` utility to create a block-level flex container. This example shows a flex container with an image and text aligned vertically.

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

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

### Install Tailwind CSS and dependencies with npm

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

Install Tailwind CSS, PostCSS, Autoprefixer, and the Gatsby PostCSS plugin as dev dependencies. Then run the Tailwind init command to generate configuration files.

```bash
npm install -D tailwindcss@3 postcss autoprefixer gatsby-plugin-postcss
npx tailwindcss init -p
```

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

### Align Content Start

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

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

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

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

### Start Gatsby development server

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

Run the Gatsby development server to preview your site locally with Tailwind CSS enabled.

```bash
gatsby develop
```

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

### Install Autoprefixer via npm

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

Command to install Autoprefixer as a development dependency. Use this when not using Tailwind CLI to automatically add vendor prefixes.

```shell
npm install -D autoprefixer
```

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

### Install Tailwind CSS and dependencies

Source: https://v3.tailwindcss.com/docs/guides/adonisjs

Install Tailwind CSS v3 and its peer dependencies (postcss, autoprefixer) as dev dependencies, then generate the default configuration files.

```bash
npm install -D tailwindcss@3 postcss autoprefixernpx tailwindcss init -p
```

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

### Install Tailwind CSS with astro add

Source: https://v3.tailwindcss.com/docs/guides/astro

Run the astro add command to install both tailwindcss and @astrojs/tailwind as well as generate a tailwind.config.cjs file.

```shell
npx astro add tailwind
```

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

### Flow Root Example

Source: https://v3.tailwindcss.com/docs/display

Use the `flow-root` utility to create a block-level element with its own block formatting context. This example shows two flow-root containers with margins that do not collapse.

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

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

### Inline Flex Example

Source: https://v3.tailwindcss.com/docs/display

Use the `inline-flex` utility to create an inline flex container that flows with text. This example shows an inline-flex container with an image and text within a paragraph.

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

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

### Install Webpack Encore bundle

Source: https://v3.tailwindcss.com/docs/guides/symfony

Install the Symfony Webpack Encore bundle using Composer. This bundle provides integration with Webpack for asset management.

```bash
composer require symfony/webpack-encore-bundle
```

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

### Set gradient starting color with from-* utility

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

Use the from-* utilities to set the starting color of a gradient. This example sets the starting color to indigo-500.

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

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

### Basic line clamp example

Source: https://v3.tailwindcss.com/docs/line-clamp

Use the line-clamp-{n} utility to truncate text to a specified number of lines. This example clamps the paragraph to 3 lines.

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

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

### Create a new SvelteKit project

Source: https://v3.tailwindcss.com/docs/guides/sveltekit

Run this command to scaffold a new SvelteKit project using the official starter. It creates a project directory and navigates into it.

```bash
npx sv create my-projectcd my-project
```

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

### HTML example showing dark mode class toggling

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

Demonstrates how dark: classes apply when the dark class is present on an ancestor element. The first example shows dark mode not enabled, the second shows dark mode enabled.

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

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

### place-self-start

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

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

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

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

### justify-self-start example

Source: https://v3.tailwindcss.com/docs/justify-self

Use `justify-self-start` to align a grid item to the start of its inline axis. The grid container uses `justify-items-stretch` in this example.

```html
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-start ...">02</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```

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

### Create a new Qwik project

Source: https://v3.tailwindcss.com/docs/guides/qwik

Use this command to scaffold a new Qwik project. It creates a project directory and navigates into it.

```bash
npm create qwik@latest my-project
cd my-project
```

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

### Align an item to the start with self-start

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

Use `self-start` to align an item to the start of the container's cross axis, despite the container's `align-items` value. The example shows a flex container with `items-stretch` and a middle item using `self-start`.

```html
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-start ...">02</div>
  <div>03</div>
</div>
```

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

### Apply place-items-center on hover

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

Use the `hover:` variant modifier to apply `place-items-center` only when hovering over the element. This example shows a grid that starts with `place-items-start` and changes to center on hover.

```html
<div class="grid place-items-start hover:place-items-center">
  <!-- ... -->
</div>
```

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

### Try using a first-party plugin

Source: https://v3.tailwindcss.com/docs/installation/play-cdn

Enable first-party plugins, like forms and typography, using the `plugins` query parameter.

```html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
</head>
<body>
  <div class="prose">
    <!-- ... -->
  </div>
</body>
</html>
```

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

### Apply place-content-center on hover

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

Use the hover: variant modifier to apply place-content-center only when the element is hovered. This example shows a grid container that starts with place-content-start and centers content on hover.

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

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

### Use Tailwind utility classes in a Remix route

Source: https://v3.tailwindcss.com/docs/guides/remix

Start using Tailwind's utility classes to style your content. This example shows a simple heading with Tailwind classes.

```tsx
export default function Index() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}
```

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

### Use Tailwind utility classes in app.vue

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

Start using Tailwind's utility classes to style your content. This example shows a simple heading with text-3xl, font-bold, and underline classes.

```html
<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>
```

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

### Use Tailwind utility classes in an Astro component

Source: https://v3.tailwindcss.com/docs/guides/astro

Start using Tailwind's utility classes to style your content. This example shows a heading with text-3xl, font-bold, and underline classes.

```astro
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
```

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

### Apply place-items-center at medium breakpoint

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

Use the `md:` variant modifier to apply `place-items-center` at medium screen sizes and above. This example shows a grid that starts with `place-items-start` and changes to center on medium screens.

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

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

### Apply place-self-end on hover with hover:place-self-end

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

Use the `hover:place-self-end` variant to apply the `place-self-end` utility only when the element is hovered. This example shows a div that starts with `place-self-start` and changes to `place-self-end` on hover.

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

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

### Responsive Flex Row Example

Source: https://v3.tailwindcss.com/docs/flex-direction

Use md:flex-row to apply the flex-row utility at only medium screen sizes and above.

```html
<div class="flex flex-col md:flex-row">
  <!-- ... -->
</div>
```

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

### Apply justify-between on hover with hover:justify-between

Source: https://v3.tailwindcss.com/docs/justify-content

Use the hover: variant modifier to apply justify-between only when the element is hovered. This example shows a flex container that starts with justify-start and changes to justify-between on hover.

```html
<div class="flex justify-start hover:justify-between">
  <!-- ... -->
</div>
```

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

### Use Tailwind utility classes in index.html.erb

Source: https://v3.tailwindcss.com/docs/guides/ruby-on-rails

Start using Tailwind's utility classes to style your content. This example shows a heading with text size, font weight, and underline utilities.

```html
<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>
```

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

### Use compiled CSS in HTML

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

Link the compiled CSS file in the <head> and start using Tailwind's utility classes. This example shows a simple heading styled with text-3xl, font-bold, and underline.

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

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

### Create a new Vite project with React template

Source: https://v3.tailwindcss.com/docs/guides/vite

Use this command to scaffold a new Vite project with the React template. It creates a project directory named 'my-project' and sets up the React starter files.

```bash
npm create vite@latest my-project -- --template react
cd my-project
```

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

### Apply place-content-center at medium breakpoint

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

Use the md: variant modifier to apply place-content-center at medium screen sizes and above. This example shows a grid container that starts with place-content-start and centers content on medium screens and larger.

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

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

### Apply place-self-end at medium breakpoint with md:place-self-end

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

Use the `md:place-self-end` variant to apply the `place-self-end` utility at medium screen sizes and above. This example shows a div that starts with `place-self-start` and changes to `place-self-end` on medium screens and larger.

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

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

### Start the build process with npm run watch

Source: https://v3.tailwindcss.com/docs/guides/symfony

Run the watch command to automatically rebuild assets when files change during development.

```bash
npm run watch
```

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

### Apply justify-between at medium breakpoint with md:justify-between

Source: https://v3.tailwindcss.com/docs/justify-content

Use the md: variant modifier to apply justify-between at medium screen sizes and above. This example shows a flex container that starts with justify-start and changes to justify-between on medium screens and larger.

```html
<div class="flex justify-start md:justify-between">
  <!-- ... -->
</div>
```

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

### Example of prefixed utility classes

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

Shows how utility classes are generated with the configured prefix. The prefix appears before the utility name.

```css
.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* etc. */
```

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

### Use grid-rows-subgrid to adopt parent row tracks

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

The grid-rows-subgrid utility allows a grid item to adopt the row tracks defined by its parent. This example shows a subgrid spanning 3 rows with a child positioned at row start 2.

```html
<div class="grid grid-rows-4 grid-flow-col gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="grid grid-rows-subgrid gap-4 row-span-3">
      <div class="row-start-2">06</div>
  </div>
  <div>07</div>
  <!-- ... -->
  <div>10</div>
</div>
```

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

### Create a new Nuxt project using nuxi init

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

Use the Nuxt Command Line Interface to create a new Nuxt project. Run this command in your terminal to initialize a project named 'my-project' and navigate into it.

```bash
npx nuxi init my-project
cd my-project
```

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

### Install tailwindcss-rails gem and run installer

Source: https://v3.tailwindcss.com/docs/guides/ruby-on-rails

Add the tailwindcss-rails gem to your Gemfile and run the install command to generate a tailwind.config.js file in the ./config directory.

```shell
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install
```

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

### Create a new Gatsby project using Gatsby CLI

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

Use the Gatsby CLI to create a new project. This command initializes a new Gatsby site in a directory named 'my-project' and navigates into it.

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

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

### Create a new Rails project

Source: https://v3.tailwindcss.com/docs/guides/ruby-on-rails

Use the Rails command line to create a new project and navigate into its directory. This is the first step if you don't have an existing Rails project.

```shell
rails new my-project
cd my-project
```

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

### Set percentage widths with w-* utilities

Source: https://v3.tailwindcss.com/docs/width

Use utilities like w-full, w-1/2, and w-2/5 to set an element to a percentage based width.

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

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

### Create a new React project with Create React App

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

Run this command to create a new React project using Create React App v5.0+. It creates a project named 'my-project' and navigates into it.

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

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

### Start Tailwind CLI build process

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

Run the CLI tool to scan your template files for classes and build your CSS. The --watch flag enables automatic rebuilds on file changes.

```shell
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
```

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

### Create a new Laravel project with Composer

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

Run this command to create a new Laravel project and navigate into its directory. Requires Composer installed.

```bash
composer create-project laravel/laravel my-projectcd my-project
```

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

### Starting and ending grid lines with row-start and row-end

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

Use row-start-* and row-end-* to make an element start or end at the nth grid line. Combine with row-span-* to span a specific number of rows. CSS grid lines start at 1, not 0.

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

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

### Create a new Astro project

Source: https://v3.tailwindcss.com/docs/guides/astro

Run this command to create a new Astro project if you don't have one set up already. It uses create astro, the most common approach.

```shell
npm create astro@latest my-projectcd my-project
```

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

### Basic transition with hover effects

Source: https://v3.tailwindcss.com/docs/transition-property

Use transition utilities to specify which properties should transition when they change. This example shows a button with multiple hover effects including translate, scale, and background color change.

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

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

### Starting and ending lines with col-start-* and col-end-*

Source: https://v3.tailwindcss.com/docs/grid-column

Use col-start-* and col-end-* utilities to make an element start or end at the nth grid line. These can be combined with col-span-* to span a specific number of columns. Note that CSS grid lines start at 1, not 0.

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

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

### Create a new AdonisJS project

Source: https://v3.tailwindcss.com/docs/guides/adonisjs

Use this command to create a new AdonisJS project with the web kit. It initializes a project named 'my-project'.

```bash
npm init adonisjs@latest my-project -- --kit=webcd my-project
```

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

### Align items to start of container cross axis

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

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

```html
<div class="flex items-start ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>
```

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

### justify-self-end example

Source: https://v3.tailwindcss.com/docs/justify-self

Use `justify-self-end` to align a grid item to the end of its inline axis. The grid container uses `justify-items-stretch` in this example.

```html
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end ...">02</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```

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

### Create a new Phoenix project

Source: https://v3.tailwindcss.com/docs/guides/phoenix

Run this command to generate a new Phoenix project named 'myproject' and navigate into its directory.

```shell
mix phx.new myproject
cd myproject
```

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

### justify-self-center example

Source: https://v3.tailwindcss.com/docs/justify-self

Use `justify-self-center` to align a grid item along the center of its inline axis. The grid container uses `justify-items-stretch` in this example.

```html
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center ...">02</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```

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

### Create a new Symfony project

Source: https://v3.tailwindcss.com/docs/guides/symfony

Use the Symfony Installer to create a new Symfony project with webapp dependencies. This command creates a project named 'my-project' and changes into its directory.

```bash
symfony new --webapp my-projectcd my-project
```

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

### Responsive marketing page component with stacked and side-by-side layouts

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

This example shows a card component that uses a stacked layout on small screens and a side-by-side layout on medium screens and larger. It uses md:flex, md:shrink-0, and md:h-full md:w-48 to achieve the responsive behavior.

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

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

### Set fixed widths with w-* utilities

Source: https://v3.tailwindcss.com/docs/width

Use utilities like w-px, w-1, and w-64 to set an element to a fixed width.

```html
<div class="w-96 ...">w-96</div>
<div class="w-80 ...">w-80</div>
<div class="w-64 ...">w-64</div>
<div class="w-48 ...">w-48</div>
<div class="w-40 ...">w-40</div>
<div class="w-32 ...">w-32</div>
<div class="w-24 ...">w-24</div>
```

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

### justify-self-stretch example

Source: https://v3.tailwindcss.com/docs/justify-self

Use `justify-self-stretch` to stretch a grid item to fill the grid area on its inline axis. The grid container uses `justify-items-start` in this example.

```html
<div class="grid justify-items-start ...">
  <!-- ... -->
  <div class="justify-self-stretch ...">02</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```

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

### Apply snap-start at medium breakpoint with md:snap-start

Source: https://v3.tailwindcss.com/docs/scroll-snap-align

Use the md:snap-start variant to apply the snap-start utility at medium screen sizes and above. This enables responsive scroll snap alignment.

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

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

### justify-self-auto example

Source: https://v3.tailwindcss.com/docs/justify-self

Use `justify-self-auto` to align an item based on the value of the grid's `justify-items` property. The grid container uses `justify-items-stretch` in this example.

```html
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-auto ...">02</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```

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

### Setting the flex basis with basis-* utilities

Source: https://v3.tailwindcss.com/docs/flex-basis

Use basis-* utilities to set the initial size of flex items. The example shows a flex container with three items using basis-1/4, basis-1/4, and basis-1/2.

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

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

### Include HTML entry point in content configuration

Source: https://v3.tailwindcss.com/docs/content-configuration

Some frameworks place the main HTML entry point in a different location, such as `public/index.html`. Ensure it is included in the `content` array if you add Tailwind classes there.

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

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

### Create a new Remix project

Source: https://v3.tailwindcss.com/docs/guides/remix

Use Create Remix to scaffold a new Remix project. Run this command in your terminal to generate the project structure.

```bash
npx create-remix@latest my-projectcd my-project
```

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

### Use arbitrary brightness value with brightness-[1.75]

Source: https://v3.tailwindcss.com/docs/brightness

Use square brackets to generate a one-off brightness utility with any arbitrary value. The example applies brightness-[1.75].

```html
<div class="brightness-[1.75]">
  <!-- ... -->
</div>
```

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

### Install Tailwind CSS standalone CLI

Source: https://v3.tailwindcss.com/docs/guides/phoenix

Run this command to download the standalone Tailwind CLI and generate a `tailwind.config.js` file in the `./assets` directory.

```shell
mix tailwind.install
```

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

### Create a new Rspack project using Rspack CLI

Source: https://v3.tailwindcss.com/docs/guides/rspack

Run this command to scaffold a new Rspack project if you don't have one already. It uses the Rspack CLI to set up the project structure.

```bash
npm create rspack@latest
```

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

### Exposing options

Source: https://v3.tailwindcss.com/docs/plugins

The user would invoke your plugin passing along their options when registering it in their `plugins` configuration:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('./plugins/markdown.js')({
      className: 'wysiwyg'
    })
  ],
}
```

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

### Be specific with content patterns

Source: https://v3.tailwindcss.com/docs/content-configuration

List root-level files like `index.html` separately to keep other patterns specific and avoid scanning unnecessary files.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './index.html',
  ],
  // ...
}
```

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

### Create a new Angular project using Angular CLI

Source: https://v3.tailwindcss.com/docs/guides/angular

Use the Angular CLI to create a new Angular project and navigate into the project directory.

```bash
ng new my-project
cd my-project
```
Tokens:
Raw