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。
To enable this, update your tailwind.config.js file to include the purge option:
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {},
},
plugins: [],
}
Next, install @fullhuman/postcss-purgecss and cssnano:
npm install @fullhuman/postcss-purgecss cssnano
Create a postcss.config.js file in your project root and add the following configuration:
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',
}),
],
}
This configuration sets up PostCSS with PurgeCSS and CSSNano to remove unused styles and minify your CSS.
Finally, update your build script in package.json:
"scripts": {
"build": "NODE_ENV=production tailwindcss -i ./src/styles.css -o ./dist/styles.css"
}
Run the build script to generate your optimized CSS:
npm run build
Your dist/styles.css file is now optimized for production.
Setting up a Tailwind CSS project from scratch is straightforward and provides a powerful toolkit for building custom designs. By following this guide, you've learned how to install Tailwind CSS, configure it, and optimize it for production. Tailwind's utility-first approach streamlines the styling process, allowing you to focus on building your application.
Happy coding!
以上是从头开始设置 Tailwind CSS 项目的详细内容。更多信息请关注PHP中文网其他相关文章！
