tailwind css 因其实用性优先的样式设计方法而成为开发人员的热门选择。它提供了一种高度可定制且高效的方法来设计 web 应用程序，而无需编写自定义 css。在本指南中，我们将引导您从头开始设置 tailwind css 项目。
tailwind css 是一个实用程序优先的 css 框架，它提供低级实用程序类来直接在标记中构建自定义设计。与 bootstrap 或 foundation 等传统 css 框架不同，tailwind 不附带预先设计的组件。相反，它提供了一组实用程序类，让您无需离开 html 即可设计组件。
在开始之前，请确保您已安装以下软件：
可以从官网下载安装node.js和npm。
立即学习“前端免费学习笔记（深入）”；
首先，为您的项目创建一个新目录并导航到其中：
mkdir tailwind-project cd tailwind-project
接下来，初始化一个新的npm项目：
npm init -y
此命令创建一个 package.json 文件，它将跟踪您的项目依赖项和脚本。
要安装 tailwind css，您需要将其作为依赖项添加到您的项目中。运行以下命令：
npm install tailwindcss
安装 tailwind css 后，您需要创建一个配置文件。该文件将允许您自定义 tailwind css 的默认设置。要生成此文件，请运行：
npx tailwindcss init
此命令会在项目根目录中创建一个 tailwind.config.js 文件。您可以在该文件中自定义 tailwind 设置。
打开tailwind.config.js 文件。您应该看到这样的基本配置：
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
内容数组用于指定所有模板文件的路径。这允许 tailwind 在生产中对未使用的样式进行 tree-shake。添加 html 和 javascript 文件的路径：
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {},
},
plugins: [],
}
此配置告诉 tailwind 在 src 目录内的任何 .html 或 .js 文件中查找类。
接下来，创建一个新的 css 文件，您将在其中导入 tailwind 的基础、组件和实用程序样式。创建一个 src 目录并在其中创建一个名为 styles.css 的文件：
mkdir src touch src/styles.css
打开 styles.css 文件并添加以下导入：
@tailwind base; @tailwind components; @tailwind utilities;
这些指令告诉 tailwind 在您的 css 文件中包含其基础、组件和实用程序样式。
要编译 css，您需要使用 tailwind cli。将构建脚本添加到您的 package.json 文件中：
"scripts": {
"build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
"watch": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}
构建脚本编译您的 src/styles.css 文件并将结果输出到 dist/styles.css。监视脚本执行相同的操作，但继续监视更改并自动重新编译。
要首次编译 css，请运行：
npm run build
此命令会使用编译后的 styles.css 文件创建一个 dist 目录。
现在，在src目录下创建一个index.html文件：
touch src/index.html
打开index.html文件并添加以下样板html：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>tailwind css project</title> <link href="../dist/styles.css" rel="stylesheet"> </head> <body> <h1 class="text-4xl font-bold text-center mt-10">hello, tailwind css!</h1> </body> </html>
这个简单的 html 文件包含编译后的 tailwind css 文件并添加样式标题。
要查看您的更改，请在网络浏览器中打开 index.html 文件。
当您准备好部署项目时，您将需要优化 css 以进行生产。 tailwind 提供了一个内置工具，用于清除未使用的样式并缩小 css。
要启用此功能，请更新 tailwind.config.js 文件以包含清除选项：
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {},
},
plugins: [],
}
接下来，安装@full human/postcss-purgecss 和 cssnano：
npm install @fullhuman/postcss-purgecss cssnano
在项目根目录创建 postcss.config.js 文件并添加以下配置：
const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');
module.exports = {
plugins: [
purgecss({
content: ['./src/**/*.{html,js}'],
defaultextractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
}),
cssnano({
preset: 'default',
}),
],
}
此配置使用 purgecss 和 cssnano 设置 postcss，以删除未使用的样式并缩小 css。
最后，更新 package.json 中的构建脚本：
"scripts": {
"build": "node_env=production tailwindcss -i ./src/styles.css -o ./dist/styles.css"
}
运行构建脚本来生成优化的 css：
npm run build
您的 dist/styles.css 文件现已针对生产进行了优化。
从头开始设置 tailwind css 项目非常简单，并且提供了用于构建自定义设计的强大工具包。通过遵循本指南，您已了解如何安装 tailwind css、配置它并针对生产进行优化。 tailwind 的实用程序优先方法简化了样式设计过程，使您能够专注于构建应用程序。
快乐编码！
以上就是从头开始设置 Tailwind CSS 项目的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
577
收藏
