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

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

Hello world!

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

``` -------------------------------- ### 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 `` section of your HTML document. This makes Tailwind's utility classes available for styling your content. ```html

Hello world!

``` -------------------------------- ### 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 `` section. ```html

Hello world!

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

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

Lorem ipsum dolor sit amet...

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

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

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

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

``` -------------------------------- ### 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-` utility to set transition delays in milliseconds. It shows how hovering over buttons with different delay classes triggers varying transition effects. ```html ``` -------------------------------- ### 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

``` ```html

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

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

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

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

Name

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

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

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

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

Hello World!

) }) ``` -------------------------------- ### 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

One
Two
Three

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

``` -------------------------------- ### 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 = () => (

Hello world!

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

Hello world!

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

Hello world!

) } ``` -------------------------------- ### 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

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

``` -------------------------------- ### 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 ``` -------------------------------- ### 启动 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

``` ```html

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

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

Hello world!

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

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

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

``` -------------------------------- ### Tailwind CSS place-items-start 示例 Source: https://tailwind.nodejs.cn/docs/place-items 使用 Tailwind CSS 的 `place-items-start` 类将网格项目放置在其网格区域的开始位置。此示例展示了如何在 grid 布局中使用该类来对齐项目。 ```html

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

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

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

Hello world!

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

```