从头开始设置 Tailwind CSS 项目

从头开始设置 Tailwind CSS 项目

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

目录

1. Tailwind CSS 简介
2. 先决条件
3. 建立一个新项目
4. 安装 Tailwind CSS
5. 配置 Tailwind CSS
6. 创建您的第一个 Tailwind CSS 文件
7. 构建和观察 CSS
8. 优化生产
9. 结论

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 id="Hello-Tailwind-CSS">Hello, Tailwind CSS!</h1>

这个简单的 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-/:]+(?



<p>This configuration sets up PostCSS with PurgeCSS and CSSNano to remove unused styles and minify your CSS.</p>

<p>Finally, update your build script in package.json:<br>
</p>

<pre class="brush:php;toolbar:false">"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.

Conclusion

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中文网其他相关文章！