Tailwind CSS

https://tailwind.nodejs.cn/docs
Admin
Tailwind CSS is a utility-first CSS framework that scans HTML and template files to generate...
Tokens:242,228
Snippets:1,923
Trust Score:5
Update:11 months ago
Show doc for...
Tokens:
Raw
### Start Tailwind CLI build process

Source: https://tailwind.nodejs.cn/docs/installation/tailwind-cli

Initiates the Tailwind CLI build process, which scans source files for class names and compiles them into the output CSS file. The `--watch` flag enables live reloading on file changes.

```bash
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
```

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

### Install Tailwind CSS and CLI with npm

Source: https://tailwind.nodejs.cn/docs/installation/tailwind-cli

Installs the necessary Tailwind CSS and CLI packages using npm. This is the first step to integrating Tailwind CSS into your project.

```bash
npm install tailwindcss @tailwindcss/cli
```

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

### Start Phoenix development server

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/phoenix

Launch the Phoenix server which will compile assets and enable live reloading. Watches for changes in CSS and other asset files.

```bash
mix phx.server
```

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

### Start Meteor Build Process

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/meteor

Starts the Meteor build process using npm. This command compiles your project and applies the configured PostCSS transformations, including Tailwind CSS.

```bash
npm run start
```

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

### Tailwind CSS place-content Start Alignment Example

Source: https://tailwind.nodejs.cn/docs/place-content

Illustrates the use of `place-content-start` to pack items against the start of the block axis in a Tailwind CSS grid. This is useful for aligning content to the beginning of the container.

```html
<div class="grid h-48 grid-cols-2 place-content-start gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>
```

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

### Serve Angular Project with Tailwind CSS

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/angular

Starts the Angular development server using `ng serve`. This command compiles the project and makes it accessible in the browser, allowing you to see the effects of Tailwind CSS.

```bash
ng serve
```

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

### Use Tailwind CSS utility classes in HTML

Source: https://tailwind.nodejs.cn/docs/installation/using-postcss

Create HTML markup with Tailwind CSS utility classes. This example demonstrates linking the compiled CSS file in the document head and applying Tailwind utility classes (text-3xl, font-bold, underline) to style HTML elements.

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

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

### Start Rails Development Server with Tailwind Build

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/ruby-on-rails

Run the Rails development server with the Tailwind CSS build process. The ./bin/dev command starts both the Rails server and the Tailwind CSS watch mode for real-time style compilation.

```bash
./bin/dev
```

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

### Start Gatsby Development Server

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/gatsby

Launches the Gatsby development server, allowing you to see your project changes in real-time. This command is part of the Gatsby CLI tooling.

```shell
gatsby develop
```

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

### Tailwind CSS align-items: start example

Source: https://tailwind.nodejs.cn/docs/align-items

Illustrates the use of the `items-start` utility to align flex items to the beginning of the container's cross axis. This example showcases items aligned at the top, irrespective of their individual heights.

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

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

### Start Laravel Mix Build Process (npm)

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/laravel/mix

Starts the build process for Laravel Mix using npm. This command watches for file changes and recompiles assets, including the processed Tailwind CSS.

```bash
npm run watch
```

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

### Integrate compiled CSS into HTML

Source: https://tailwind.nodejs.cn/docs/installation/tailwind-cli

Links the compiled Tailwind CSS file (`output.css`) into the `<head>` section of your HTML document. This makes Tailwind's utility classes available for styling your content.

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

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

### HTML: Use Tailwind CSS Play CDN

Source: https://tailwind.nodejs.cn/docs/installation/play-cdn

Integrate Tailwind CSS into your HTML project using the Play CDN. This method requires no build setup and is suitable for development. Simply add the provided script tag to your HTML's `<head>` section.

```html
<!doctype html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>  </head>  <body>    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>  </body></html>
```

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

### Create React Router Project with Vite

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/react-router

Initializes a new React Router project using the `create-react-router` tool via npx. This is the first step before installing other dependencies.

```bash
npx create-react-router@latest my-project
cd my-project
```

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

### Install Tailwind CSS CLI

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/phoenix

Download and install the standalone Tailwind CSS command-line interface. Must be executed after configuring the Tailwind plugin.

```bash
mix tailwind.install
```

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

### Create Gatsby Project

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/gatsby

Initializes a new Gatsby project using the Gatsby CLI. This command requires the Gatsby CLI to be installed globally.

```shell
gatsby new my-project
cd my-project
```

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

### Create Nuxt Project with npm

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/nuxt

Initializes a new Nuxt.js project using npm. This is the first step to set up your Nuxt environment before installing Tailwind CSS.

```bash
npm create nuxt my-project
cd my-project
```

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

### Create Meteor Project using npx

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/meteor

Creates a new Meteor project using the `npx` command. This is the initial step to set up your Meteor application before installing Tailwind CSS.

```bash
npx meteor create my-project
cd my-project
```

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

### Create Next.js Project with TypeScript and ESLint

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/nextjs

This command initializes a new Next.js project with TypeScript and ESLint support, essential for modern web development. It sets up the basic project structure required for the subsequent installation steps.

```bash
npx create-next-app@latest my-project --typescript --eslint --app
cd my-project
```

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

### Tailwind CSS Hardware Acceleration Example

Source: https://tailwind.nodejs.cn/docs/transform

This example demonstrates how to force hardware acceleration for CSS transitions using the 'transform-gpu' utility in Tailwind CSS. It's useful when GPU rendering improves performance.

```html
<div class="scale-150 transform-gpu">  <!-- ... --></div>
```

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

### Tailwind CSS Responsive white-space Example

Source: https://tailwind.nodejs.cn/docs/white-space

Demonstrates applying Tailwind CSS `white-space` utilities responsively. By prefixing utilities with breakpoints like `md:`, the styles are applied only at that screen size and above. This example switches from `pre` to `normal` at the medium breakpoint.

```html
<p class="whitespace-pre md:whitespace-normal ...">  Lorem ipsum dolor sit amet...</p>
```

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

### HTML Example: Basic Scroll Margin Setup

Source: https://tailwind.nodejs.cn/docs/scroll-margin

Demonstrates how to apply Tailwind CSS scroll-margin utilities to an image grid within a snap container. The `snap-x` class enables horizontal snapping, while `snap-start` and `scroll-ml-6` position items and apply a left scroll margin, creating a visually appealing scroll effect.

```html
<div class="snap-x ...">
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-01.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-02.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-03.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-04.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-05.jpg"/>
  </div>
</div>
```

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

### Tailwind CSS: Basic Grid Auto-Flow Example

Source: https://tailwind.nodejs.cn/docs/grid-auto-flow

Demonstrates using `grid-flow-col` and `grid-flow-row-dense` to manage the auto-placement algorithm in a grid layout. This example shows how elements can span multiple columns or rows.

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

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

### Tailwind CSS: Basic mix-blend-mode Example

Source: https://tailwind.nodejs.cn/docs/mix-blend-mode

Demonstrates the use of `mix-blend-multiply` and other blend-mode utilities to control how overlapping elements blend with their backgrounds. This example uses flexbox for layout and negative margin for overlapping.

```html
<div class="flex justify-center -space-x-14">
  <div class="bg-blue-500 mix-blend-multiply ..."></div>
  <div class="bg-pink-500 mix-blend-multiply ..."></div>
</div>
```

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

### Arbitrary Container Query Size Example (HTML)

Source: https://tailwind.nodejs.cn/docs/responsive-design

Provides an example of using arbitrary values for container query sizes with variants like `@min-[475px]` and `@max-[960px]`. This is useful for one-off container query sizes that you don't want to add to your theme configuration.

```html
<div class="@container">  <div class="flex flex-col @min-[475px]:flex-row">    <!-- ... -->  </div></div>
```

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

### Create Qwik Project with npm

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/qwik

Initialize a new Qwik project using the Create Qwik command-line tool. This command scaffolds a basic Qwik application structure in a directory named 'my-project'.

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

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

### Tailwind CSS Transition Delay Basic Example

Source: https://tailwind.nodejs.cn/docs/transition-delay

This example demonstrates how to use Tailwind CSS's `delay-<number>` utility to set transition delays in milliseconds. It shows how hovering over buttons with different delay classes triggers varying transition effects.

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

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

### Tailwind CSS Contrast Filter Utility Examples

Source: https://tailwind.nodejs.cn/docs/filter-contrast

Demonstrates various ways to apply the contrast filter utility in Tailwind CSS. This includes basic contrast adjustments, using custom percentage values, and applying filters via CSS variables. The code examples showcase the HTML structure needed to apply these utility classes.

```html
<img class="contrast-50 ..." src="/img/mountains.jpg" />
<img class="contrast-100 ..." src="/img/mountains.jpg" />
<img class="contrast-125 ..." src="/img/mountains.jpg" />
<img class="contrast-200 ..." src="/img/mountains.jpg" />
```

```html
<img class="contrast-[.25] ..." src="/img/mountains.jpg" />
```

```html
<img class="contrast-(--my-contrast) ..." src="/img/mountains.jpg" />
```

```html
<img class="contrast-125 md:contrast-150 ..." src="/img/mountains.jpg" />
```

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

### Tailwind CSS max-height Responsive Design Example

Source: https://tailwind.nodejs.cn/docs/max-height

Shows how to use responsive breakpoint variants like md: prefix to apply max-height utilities conditionally at different screen sizes. In this example, max-h-full applies at small screens and max-h-screen applies at medium screens and above.

```html
<div class="h-48 max-h-full md:max-h-screen ...">
  <!-- ... -->
</div>
```

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

### Create new Phoenix project

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/phoenix

Initialize a new Phoenix project using the mix command. This creates the project structure and necessary files for a Phoenix application.

```bash
mix phx.new myproject
cd myproject
```

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

### justify-items-start 网格项开始对齐 HTML

Source: https://tailwind.nodejs.cn/docs/justify-items

使用 justify-items-start 工具类使网格项目相对于其内联轴的起点对齐。这是基础的网格项目对齐方式，适用于需要将内容靠向起始位置的布局场景。

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

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

### Use Tailwind with Prefix in HTML

Source: https://tailwind.nodejs.cn/docs/upgrade-guide

Shows an example of using Tailwind CSS classes with a 'tw' prefix in an HTML element. This applies Tailwind's utility classes prefixed with 'tw'.

```html
<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">
  <!-- ... -->
</div>
```

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

### Create Vite Project

Source: https://tailwind.nodejs.cn/docs/index

Command to create a new Vite project using npm. This is the initial step before installing Tailwind CSS.

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

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

### Space Utilities Example (HTML)

Source: https://tailwind.nodejs.cn/docs/upgrade-guide

This HTML snippet demonstrates the use of Tailwind CSS `space-y-4` and `gap-4` utilities for creating vertical spacing in a form layout. It shows how to apply spacing between form elements.

```html
<div class="space-y-4 p-4">
  <div class="flex flex-col gap-4 p-4">
    <label for="name">Name</label>
    <input type="text" name="name" />
  </div>
</div>
```

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

### Configure PostCSS with Tailwind CSS plugin

Source: https://tailwind.nodejs.cn/docs/installation/using-postcss

Add Tailwind CSS to your PostCSS configuration file. This configuration file (postcss.config.mjs) enables the @tailwindcss/postcss plugin which processes your CSS files and generates Tailwind utility classes.

```javascript
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}
```

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

### Create Angular Project with Tailwind CSS

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/angular

This snippet demonstrates how to create a new Angular project using the Angular CLI and navigate into the project directory. This is the initial step for setting up Tailwind CSS in an Angular project.

```bash
ng new my-project --style css
cd my-project
```

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

### Apply Responsive Border Radius (HTML)

Source: https://tailwind.nodejs.cn/docs/border-radius

Use breakpoint variants like `md:` before border radius utilities to apply them only at specific screen sizes and above. For example, `md:rounded-lg` applies `rounded-lg` starting from the medium breakpoint.

```html
<div class="rounded md:rounded-lg ...">  <!-- ... --></div>
```

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

### Unset Gradient Example (HTML)

Source: https://tailwind.nodejs.cn/docs/upgrade-guide

This HTML demonstrates how to explicitly 'unset' a three-stop gradient back to a two-stop gradient in a specific state using `via-none`. This is necessary in v4 when overriding gradient stops in different states.

```html
<div class="bg-linear-to-r from-red-500 via-orange-400 to-yellow-400 dark:via-none dark:from-blue-500 dark:to-teal-400">
  <!-- ... -->
</div>
```

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

### Tailwind CSS place-content Responsive Design Example

Source: https://tailwind.nodejs.cn/docs/place-content

Shows how to implement responsive design with Tailwind CSS `place-content` utilities by using breakpoint prefixes like `md:`. This allows for dynamic alignment changes based on screen size.

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

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

### Use Tailwind CSS Utility Classes in Qwik Component

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/qwik

Apply Tailwind CSS utility classes in a Qwik component using the class attribute. This example demonstrates using Tailwind utilities (text-3xl, font-bold, underline) to style a heading element.

```typescript
import { component$ } from '@builder.io/qwik'

export default component$(() => {
  return (
    <h1 class="text-3xl font-bold underline">
      Hello World!
    </h1>
  )
})
```

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

### Adjust Stacked Variant Order in Tailwind

Source: https://tailwind.nodejs.cn/docs/upgrade-guide

Provides an example of how to reverse the order of stacked variants in Tailwind CSS v4 to match the new left-to-right application, similar to CSS syntax. This is particularly relevant for direct child (`*`) and typography variants.

```html
<ul class="py-4 *:first:pt-0 *:last:pb-0">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
```

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

### Create New Rails Project

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/ruby-on-rails

Initialize a new Ruby on Rails project using the Rails command line tool. This creates the project directory structure and base configuration needed for a Rails application.

```bash
rails new my-project
cd my-project
```

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

### place-self-start - Grid 项目起点对齐

Source: https://tailwind.nodejs.cn/docs/place-self

使用 place-self-start 类将网格项目对齐到两个轴（水平和垂直）的起点。该类覆盖容器级别的 place-items 设置，强制项目在起点位置。

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

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

### Use Tailwind CSS Utility Classes in React Component

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/meteor

Demonstrates how to apply Tailwind CSS utility classes to style HTML elements within a React component. This example shows a basic `h1` tag with large, bold, and underlined text.

```jsx
export const App = () => (
  <h1 className="text-3xl font-bold underline">
    Hello world!
  </h1>
)
```

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

### Apply Tailwind CSS Utility Classes in Rails View

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/ruby-on-rails

Use Tailwind CSS utility classes in a Rails ERB template to style HTML elements. This example demonstrates applying text sizing, font weight, and text decoration utilities to an h1 heading.

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

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

### Apply Tailwind CSS Classes in a React Component

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/nextjs

Demonstrates how to apply Tailwind CSS utility classes directly within a React component's `className` prop. This example applies a large font size, bold weight, and an underline style to a heading element.

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

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

### Setting Grid Column Start and End Lines in Tailwind CSS

Source: https://tailwind.nodejs.cn/docs/grid-column

Shows how to use col-start and col-end utilities to position elements at specific grid lines. This 6-column grid example demonstrates combining col-span with col-start and col-end for precise column positioning.

```html
<div class="grid grid-cols-6 gap-4">
  <div class="col-span-4 col-start-2 ...">01</div>
  <div class="col-start-1 col-end-3 ...">02</div>
  <div class="col-span-2 col-end-7 ...">03</div>
  <div class="col-start-1 col-end-7 ...">04</div>
</div>
```

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

### Gradient Variants Example (HTML)

Source: https://tailwind.nodejs.cn/docs/upgrade-guide

This HTML shows how to apply gradient variants in Tailwind CSS. In v4, gradient values are preserved, meaning dark mode overrides like `dark:from-blue-500` correctly apply only to the `from` color, unlike v3 which reset the entire gradient.

```html
<div class="bg-gradient-to-r from-red-500 to-yellow-400 dark:from-blue-500">
  <!-- ... -->
</div>
```

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

### Use Tailwind CSS Utility Classes in Vue Template

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/nuxt

Demonstrates how to apply Tailwind CSS utility classes to style HTML elements within a Vue.js template (`.vue` file). This example shows a basic `h1` tag styled with text size, font weight, and an underline.

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

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

### 启动 Astro 开发服务器

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/astro

运行 `npm run dev` 命令来启动 Astro 的开发服务器。您将在本地看到项目的实时预览。

```bash
npm run dev
```

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

### Tailwind CSS: align-content Utility Classes

Source: https://tailwind.nodejs.cn/docs/align-content

These classes control the alignment of lines within multi-line flexbox and grid containers. They accept values such as `normal`, `center`, `start`, `end`, `space-between`, `space-around`, `space-evenly`, `baseline`, and `stretch`. Examples demonstrate how to apply these utilities to HTML elements.

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

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

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

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

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

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

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

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

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

### Get Computed Style CSS Variable Values in JavaScript

Source: https://tailwind.nodejs.cn/docs/upgrade-guide

Shows how to retrieve resolved CSS variable values from the document root using getComputedStyle method. This approach accesses theme variables like shadows directly from computed styles without needing the removed resolveConfig utility.

```JavaScript
let styles = getComputedStyle(document.documentElement);
let shadow = styles.getPropertyValue("--shadow-xl");
```

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

### justify-self-start 对齐至行内轴起点

Source: https://tailwind.nodejs.cn/docs/justify-self

使用 justify-self-start 工具类将网格项与其行内轴的起始点对齐。适用于需要左对齐（LTR）或右对齐（RTL）的网格布局场景。

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

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

### HTML: Use Tailwind CSS Play CDN with Custom CSS

Source: https://tailwind.nodejs.cn/docs/installation/play-cdn

Enhance your Tailwind CSS integration by adding custom styles using the Play CDN. This involves including the CDN script and a `<style>` block with `type="text/tailwindcss"` to define custom themes and utilities.

```html
<!doctype html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>    <style type="text/tailwindcss">
      @theme {
        --color-clifford: #da373d;
      }
    </style>  </head>  <body>    <h1 class="text-3xl font-bold underline text-clifford">
      Hello world!
    </h1>  </body></html>
```

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

### Install Tailwind CSS Dependencies

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/gatsby

Installs necessary npm packages for Tailwind CSS integration in Gatsby, including `@tailwindcss/postcss`, `tailwindcss`, `postcss`, and `gatsby-plugin-postcss`. Ensure you have npm or yarn installed.

```shell
npm install @tailwindcss/postcss tailwindcss postcss gatsby-plugin-postcss
```

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

### Define assets.deploy alias in mix.exs

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/phoenix

Configure the deployment alias to build and minify CSS and JavaScript assets, and digest them for cache busting. Runs Tailwind CLI with minification flag.

```elixir
defp aliases do
  [
    # …
    "assets.deploy": [
      "tailwind myproject --minify",
      "esbuild myproject --minify",
      "phx.digest"
    ]
  ]
end
```

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

### Updating Shadow, Radius, and Blur Scales in HTML

Source: https://tailwind.nodejs.cn/docs/upgrade-guide

This example demonstrates how to update HTML elements to reflect the renamed scales for shadow, radius, and blur in Tailwind CSS v4. It shows the transition from v3 utilities like `shadow-sm` to their v4 counterparts, such as `shadow-xs` and `shadow-sm`, ensuring consistency with the new scale.

```html
<input class="shadow-sm" />
<input class="shadow-xs" />
<input class="shadow" />
<input class="shadow-sm" />
```

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

### Basic Container Query Example (HTML)

Source: https://tailwind.nodejs.cn/docs/responsive-design

Demonstrates how to mark an element as a container using the `@container` class and apply styles to child elements based on the container's size using variants like `@md`. These variants are mobile-first and apply from the specified size upwards.

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

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

### Tailwind CSS Class Sorting with Prettier (HTML)

Source: https://tailwind.nodejs.cn/docs/editor-setup

Demonstrates how Prettier, with the official Tailwind CSS plugin, automatically sorts utility classes in HTML. This ensures a consistent and recommended class order for improved readability and maintainability. The 'Before' example shows unordered classes, while 'After' illustrates the sorted output.

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

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

### Tailwind CSS Responsive Positioning Example

Source: https://tailwind.nodejs.cn/docs/position

Shows how to apply Tailwind CSS positioning utilities responsively using breakpoint prefixes like 'md:'. This allows utilities to be applied only at specific screen sizes and above.

```html
<div class="relative md:absolute ...">
  <!-- ... -->
</div>
```

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

### Using custom themed transition-timing-function utility

Source: https://tailwind.nodejs.cn/docs/transition-timing-function

HTML example applying the custom ease-in-expo utility class that was defined in the theme configuration with a cubic-bezier timing function.

```html
<button class="ease-in-expo">  <!-- ... --></button>
```

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

### Tailwind CSS: Using flex-grow Utilities

Source: https://tailwind.nodejs.cn/docs/flex-grow

This snippet demonstrates various uses of Tailwind CSS's flex-grow utilities. It includes examples for allowing items to grow, growing items based on a factor, preventing items from growing, using custom values, and applying grow utilities with responsive design prefixes.

```html
<div class="flex ...">
  <div class="size-14 flex-none ...">01</div>
  <div class="size-14 grow ...">02</div>
  <div class="size-14 flex-none ...">03</div>
</div>

<div class="flex ...">
  <div class="size-14 grow-3 ...">01</div>
  <div class="size-14 grow-7 ...">02</div>
  <div class="size-14 grow-3 ...">03</div>
</div>

<div class="flex ...">
  <div class="size-14 grow ...">01</div>
  <div class="size-14 grow-0 ...">02</div>
  <div class="size-14 grow ...">03</div>
</div>

<div class="grow-[25vw] ...">
  <!-- ... -->
</div>

<div class="grow-(--my-grow) ...">
  <!-- ... -->
</div>

<div class="grow md:grow-0 ...">
  <!-- ... -->
</div>
```

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

### Tailwind CSS place-items-start 示例

Source: https://tailwind.nodejs.cn/docs/place-items

使用 Tailwind CSS 的 `place-items-start` 类将网格项目放置在其网格区域的开始位置。此示例展示了如何在 grid 布局中使用该类来对齐项目。

```html
<div class="grid grid-cols-3 place-items-start gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>
```

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

### Adjusting Default Ring Width in HTML

Source: https://tailwind.nodejs.cn/docs/upgrade-guide

This example shows how to update HTML elements to reflect the change in the default ring width in Tailwind CSS v4. The `ring` utility now defaults to `1px` instead of `3px` for better consistency with border and outline utilities. The snippet demonstrates replacing `ring` with `ring-3` to maintain the previous `3px` ring width.

```html
<input class="ring ring-blue-500" />
<input class="ring-3 ring-blue-500" />
```

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

### Install Tailwind CSS and PostCSS Dependencies

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/meteor

Installs the necessary npm packages for Tailwind CSS integration, including `@tailwindcss/postcss`, `postcss`, and `postcss-load-config`. These are essential for PostCSS processing.

```bash
npm install tailwindcss @tailwindcss/postcss postcss postcss-load-config
```

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

### Container Query Range Example (HTML)

Source: https://tailwind.nodejs.cn/docs/responsive-design

Shows how to combine regular and max-width container query variants to target a specific size range for styling. This allows for more granular control over responsive behavior based on container dimensions.

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

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

### Install Tailwind CSS Gems in Rails

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/ruby-on-rails

Add the tailwindcss-ruby and tailwindcss-rails gems to the project Gemfile and run the Tailwind CSS installation command. This sets up Tailwind CSS configuration and integrations specific to Rails.

```bash
./bin/bundle add tailwindcss-ruby
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install
```

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

### Install Tailwind CSS Packages (npm)

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/laravel/mix

Installs the necessary Tailwind CSS packages and their peer dependencies using npm. This is the first step in integrating Tailwind CSS into a Laravel project.

```bash
npm install tailwindcss @tailwindcss/postcss postcss
```

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

### 创建 Astro 项目

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/astro

使用 `npm create astro@latest` 命令创建一个新的 Astro 项目。这是开始集成 Tailwind CSS 的第一步。

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

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

### Install Tailwind CSS and PostCSS for Angular

Source: https://tailwind.nodejs.cn/docs/installation/framework-guides/angular

Installs the required Tailwind CSS and PostCSS packages, along with their peer dependencies, using npm. The `--force` flag is used to override potential dependency conflicts.

```bash
npm install tailwindcss @tailwindcss/postcss postcss --force
```

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

### Responsive Styling with Breakpoint Variants (HTML)

Source: https://tailwind.nodejs.cn/docs/styling-with-utility-classes

Shows how to use Tailwind's breakpoint prefixes (e.g., `sm:`) to apply styles only at specific screen sizes. This is key for creating responsive layouts.

```html
<div class="grid grid-cols-2 sm:grid-cols-3">
  <!-- ... -->
</div>
```

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

### Responsive transition-timing-function with breakpoint variant

Source: https://tailwind.nodejs.cn/docs/transition-timing-function

HTML example demonstrating responsive design with transition-timing-function utilities using md: breakpoint variant. Applies ease-out by default and switches to ease-in at medium screen size and above.

```html
<button class="ease-out md:ease-in ...">  <!-- ... --></button>
```

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

### Basic HTML with Tailwind CSS Classes

Source: https://tailwind.nodejs.cn/docs/index

Example HTML structure demonstrating the use of Tailwind CSS utility classes for styling an element. Ensure the compiled CSS is linked in the HTML's head.

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

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

### Responsive max-width with breakpoint variants

Source: https://tailwind.nodejs.cn/docs/max-width

Shows how to apply max-width utilities responsively using breakpoint prefixes like md:, allowing different maximum widths at different screen sizes. This example applies max-w-sm on small screens and max-w-lg on medium screens and above.

```html
<div class="max-w-sm md:max-w-lg ...">  <!-- ... --></div>
```
Tokens:
Raw