Tailwind CSS4 安装(NPM)
在开始之前，确保你已经安装了 Node.js 和 npm，你可以通过以下命令检查它们是否已经安装：

node -v
npm -v
如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com
这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]
更多信息可以查阅：http://npm.taobao.org/。

安装 Tailwind CSS
与 Tailwind CSS 3 相比较，Tailwind CSS 4 自动检测 HTML 和 JavaScript 等文件，省去了手动配置内容源的麻烦。

npm 安装
从零开始使用 Tailwind CSS 的最简单和最快方法是通过 Tailwind CLI 工具。

通过 npm 安装 在本地项目中安装并配置 Tailwind CSS：

npm install tailwindcss @tailwindcss/cli
1、在 CSS 中导入 Tailwind: 在 CSS 文件中添加 @import "tailwindcss";。

比如在 src/input.css 文件开头导入：

src/input.css 文件
@import "tailwindcss";
2、启动 Tailwind CLI 构建流程：运行 CLI 工具以扫描源文件中的类并构建 CSS。

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
3、在 HTML 中开始使用 Tailwind：将编译后的 CSS 文件添加到 中，并开始使用 Tailwind 的实用类来设置内容的样式。

src/index.html 文件





href="./output.css" rel="stylesheet">

Hello world!

作为 Vite 插件安装
Vite 是一个现代化的前端构建工具，旨在通过利用现代浏览器的原生 ES 模块支持，提供快速的开发体验。
Vite 详细内容可以参见：Vite 教程。

将 Tailwind CSS 作为 Vite 插件安装是将其与 Laravel、SvelteKit、React Router、Nuxt 和 SolidJS 等框架集成的最无缝的方式。

1、安装 Tailwind CSS

通过 npm 安装 tailwindcss 和 @tailwindcss/vite：

npm install tailwindcss @tailwindcss/vite
2、配置 Vite 插件

在 Vite 配置文件 vite.config.ts 中添加 @tailwindcss/vite 插件：

vite.config.ts 文件
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
plugins: [
tailwindcss(),
],
})
3、导入 Tailwind CSS

在的 CSS 文件中添加 @import 以导入 Tailwind CSS：

@import "tailwindcss";
4、启动构建流程

运行构建流程，使用 npm run dev 或你在 package.json 文件中配置的其他命令：

npm run dev
5、在 HTML 中开始使用 Tailwind

确保编译后的 CSS 已包含在 中（框架可能会自动处理），然后开始使用 Tailwind 的实用类来设置内容的样式。

实例





href="/src/styles.css" rel="stylesheet">

Hello world!

作为 PostCSS 插件安装
将 Tailwind CSS 作为 PostCSS 插件安装可以将其与 Next.js 和 Angular 等框架无缝结合。

1、安装 Tailwind CSS

通过 npm 安装 tailwindcss、@tailwindcss/postcss 和 postcss。