前言
Tailwind CSS 是一个实用的 CSS 框架，提供了大量预定义的类，帮助开发者快速构建美观的网页界面。以下将详细介绍如何在项目中安装和使用 Tailwind CSS。
一、安装 Tailwind CSS
1、使用 npm 安装 Tailwind CSS 及其依赖
在项目根目录下，运行以下命令来安装 Tailwind CSS、PostCSS 和 Autoprefixer（一个用于添加浏览器前缀的 PostCSS 插件）。
npm install -D tailwindcss postcss autoprefixer2、初始化 Tailwind CSS 配置文件
使用 npx 运行 Tailwind CSS 的 init 命令来创建配置文件 tailwind.config.js。
npx tailwindcss init配置文件示例（根据需要调整）：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{js,jsx,ts,tsx,vue,html}',
],
theme: {
extend: {},
},
plugins: [],
}[bsmessage type="common" color="standard" title="提示"]请注意，content 数组中的路径应指向项目中包含类名的所有文件，这样 Tailwind CSS 才能只包含实际使用的类，以减小最终 CSS 文件的大小。[/bsmessage]
二、构建和使用 Tailwind CSS
1、创建样式文件
在项目根目录下或特定目录（如 src）中创建一个 CSS 文件（如 input.css），并添加 Tailwind CSS 的指令。
@tailwind base;
@tailwind components;
@tailwind utilities;2、构建样式文件
在项目根目录下通过命令行工具构建样式文件。
npx tailwindcss -i ./src/input.css -o ./src/tailwind.css --watch3、在HTML文件中引入样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./tailwind.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
</html>三、不依赖 PostCSS 使用 Tailwind CSS
npx tailwindcss-cli@latest build -o tailwind.css四、配置遇到错误
我自己在开始学习 Tailwind CSS 并尝试安装和配置 (npx tailwindcss init) 的时候，遇到了一个错误：
npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\29831\AppData\Local\npm-cache\_logs\2025-04-02T01_26_54_047Z-debug-0.log默认按上面步骤会安装最新 Tailwind CSS 4，故导致 tailwindcss 和 postcss 版本冲突，使用命令安装的tailwindcss@4.0.0和postcss@8.5.1存在冲突，只需要回退tailwindcss版本即可。
在使用命令安装 Tailwind CSS 3 时，指定官方有效版本即可：
npm install -D tailwindcss@3.4.17 postcss autoprefixer
评论