从头开始设置 Tailwind CSS 项目

php中文网 2024-10-15 11:26:22

从头开始设置 tailwind css 项目

tailwind css 因其实用性优先的样式设计方法而成为开发人员的热门选择。它提供了一种高度可定制且高效的方法来设计 web 应用程序，而无需编写自定义 css。在本指南中，我们将引导您从头开始设置 tailwind css 项目。

tailwind css 简介

tailwind css 是一个实用程序优先的 css 框架，它提供低级实用程序类来直接在标记中构建自定义设计。与 bootstrap 或 foundation 等传统 css 框架不同，tailwind 不附带预先设计的组件。相反，它提供了一组实用程序类，让您无需离开 html 即可设计组件。

为什么使用 tailwind css？

实用优先方法：允许您直接在 html 中应用样式，减少对自定义 css 的需求。
定制：tailwind 是高度可定制的，允许您覆盖默认设置并创建您独特的设计系统。
响应式设计：tailwind 提供内置响应式设计实用程序，可以轻松创建移动优先设计。
一致性：确保整个应用程序的样式一致。

先决条件

在开始之前，请确保您已安装以下软件：

node.js（v12 或更高版本）
npm（节点包管理器）

可以从官网下载安装node.js和npm。

立即学习“前端免费学习笔记（深入）”；

设置新项目

首先，为您的项目创建一个新目录并导航到其中：

mkdir tailwind-project
cd tailwind-project

接下来，初始化一个新的npm项目：

npm init -y

此命令创建一个 package.json 文件，它将跟踪您的项目依赖项和脚本。

安装 tailwind css

要安装 tailwind css，您需要将其作为依赖项添加到您的项目中。运行以下命令：

npm install tailwindcss

安装 tailwind css 后，您需要创建一个配置文件。该文件将允许您自定义 tailwind css 的默认设置。要生成此文件，请运行：

npx tailwindcss init

此命令会在项目根目录中创建一个 tailwind.config.js 文件。您可以在该文件中自定义 tailwind 设置。

配置 tailwind css

打开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 文件中查找类。

创建您的第一个 tailwind css 文件

接下来，创建一个新的 css 文件，您将在其中导入 tailwind 的基础、组件和实用程序样式。创建一个 src 目录并在其中创建一个名为 styles.css 的文件：

mkdir src
touch src/styles.css

打开 styles.css 文件并添加以下导入：

@tailwind base;
@tailwind components;
@tailwind utilities;

这些指令告诉 tailwind 在您的 css 文件中包含其基础、组件和实用程序样式。

构建和观察 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 目录。

创建您的第一个 html 文件

现在，在src目录下创建一个index.html文件：

touch src/index.html

打开index.html文件并添加以下样板html：



  <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"><h1 class="text-4xl font-bold text-center mt-10">hello, tailwind css!</h1>

这个简单的 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 =&gt; content.match(/[w-/:]+(?



<p>此配置使用 purgecss 和 cssnano 设置 postcss，以删除未使用的样式并缩小 css。</p>

<p>最后，更新 package.json 中的构建脚本：<br></p>

<pre class="brush:php;toolbar:false">"scripts": {
  "build": "node_env=production tailwindcss -i ./src/styles.css -o ./dist/styles.css"
}

运行构建脚本来生成优化的 css：