安装
开始使用 Tailwind CSS
Installation 安装
- 通过 npm 安装
tailwindcss和@tailwindcss/vite。
npm install tailwindcss @tailwindcss/vite
- 配置 Vite 插件
将 @tailwindcss/vite 插件添加到您的 Vite 配置中。
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})
- 导入 Tailwind CSS
向您的 CSS 文件添加一个 @import 以导入 Tailwind CSS。
@import "../../../../../node_modules/.pnpm/tailwindcss@4.1.11/node_modules/tailwindcss/dist/lib.d.mts";
- 开始构建过程
使用 npm run dev 或 package.json 文件中配置的任何命令运行构建过程。
npm run dev
- 开始在 HTML 中使用 Tailwind
确保已编译的 CSS 包含在 <head> 中 （您的框架可能会为您处理此问题） ，然后开始使用 Tailwind 的实用程序类来设置您的内容样式。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/src/styles.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
将 Tailwind CSS 安装为 PostCSS 插件是将其与 Next.js 和 Angular 等框架集成的最无缝方式。
- 安装 Tailwind CSS
通过 npm 安装 tailwindcss 、 @tailwindcss/postcss 和 postcss 。
npm install tailwindcss @tailwindcss/postcss postcss
- 将 Tailwind 添加到你的 PostCSS 配置中
将 @tailwindcss/postcss 添加到您的 postcss.config.mjs 文件，或项目中配置 PostCSS 的任何位置。
export default {
plugins: {
"@tailwindcss/postcss": {},
}
}
- CSS 导入 Tailwind CSS
向您的 CSS 文件添加一个 @import 以导入 Tailwind CSS。
@import "tailwindcss";
- 开始构建过程
使用 npm run dev 或 package.json 文件中配置的任何命令运行构建过程。
npm run dev
- 开始在 HTML 中使用 Tailwind
确保已编译的 CSS 包含在 <head> 中 （您的框架可能会为您处理此问题） ，然后开始使用 Tailwind 的实用程序类来设置您的内容样式。
<!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>
从零开始使用 Tailwind CSS 最简单、最快捷的方法是使用 Tailwind CLI 工具。如果您不想安装 Node.js，也可以使用 独立的可执行文件 来运行 CLI。
- 安装 Tailwind CSS
通过 npm 安装 tailwindcss 和 @tailwindcss/cli 。
npm install tailwindcss @tailwindcss/cli
- 在 CSS 中导入 Tailwind
将 @import "tailwindcss"; 导入到您的主 CSS 文件中。
@import "tailwindcss";
- 启动 Tailwind CLI 构建过程
运行 CLI 工具扫描源文件中的类并构建 CSS。
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
- 开始在 HTML 中使用 Tailwind
将编译后的 CSS 文件添加到 <head> 并开始使用 Tailwind 的实用程序类来设置内容样式。
<!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>
特定于框架的指南涵盖了我们在许多流行环境中安装 Tailwind CSS 的推荐方法。
使用 Nuxt 安装 Tailwind CSS
- 创建项目
如果您尚未设置 Nuxt 项目，请先创建一个新的 Nuxt 项目。最常用的方法是使用 Nuxt 命令行界面 。
npx nuxi init my-project
cd my-project
- 安装 Tailwind CSS
通过 npm 安装 @tailwindcss/vite 及其对等依赖项。
npm install tailwindcss @tailwindcss/vite
- 配置 Vite 插件
将 @tailwindcss/vite 插件作为 Vite 插件添加到您的 Nuxt 配置中。
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
compatibilityDate: "2024-11-01.backface-visibility.md",
devtools: { enabled: true },
vite: {
plugins: [
tailwindcss(),
],
},
});
- 导入 Tailwind CSS
创建一个 ./assets/css/main.css 文件并添加一个导入 Tailwind CSS 的 @import 。
@import "tailwindcss";
- 全局添加 CSS 文件
将新创建的 ./assets/css/main.css 添加到 nuxt.config.ts 文件中的 css 数组中。
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
compatibilityDate: "2024-11-01.backface-visibility.md",
devtools: { enabled: true },
css: ['~/assets/css/main.css'],
vite: {
plugins: [
tailwindcss(),
],
},
});
- 开始构建过程
使用 npm run dev 运行构建过程。
npm run dev
- 开始在你的项目中使用 Tailwind
开始使用 Tailwind 的实用程序类来设置您的内容样式。
<template>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>
使用 Play CDN 即可在浏览器中直接试用 Tailwind，无需任何构建步骤。Play CDN 仅供开发使用，不适用于生产环境。
- 将 Play CDN 脚本添加到您的 HTML
将 Play CDN 脚本标签添加到 HTML 文件的 <head> ，然后开始使用 Tailwind 的实用程序类来设置内容样式。
<!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>
- 尝试添加一些自定义 CSS
使用 type="text/tailwindcss" 添加支持所有 Tailwind CSS 功能的自定义 CSS。
<!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>