解决使用 Tailwind CSS 时生成的 CSS 文件过大的问题-JavaScript中文网-JavaScript教程资源分享门户

如果你使用 Tailwind CSS 来构建网站或应用程序，你可能会发现生成的 CSS 文件过大，可能会导致很慢的加载时间和消耗不必要的资源。这是因为 Tailwind CSS 旨在提供尽可能多的 CSS 类，以便缩短开发时间。但是，这也意味着你需要手动解决这个问题或者使用我们将在本文中介绍的解决方案。

什么是 PurgeCSS

PurgeCSS 是一种工具，它可以扫描你的 HTML，CSS 和 JavaScript 文件，仅提取使用的样式。该工具旨在最大限度地减小 CSS 文件大小，并提供更快的加载时间和更好的性能。这样可以优化你的网站和应用程序，同时最大程度地减少了由于您引入了但并未使用的样式而导致的文件过大问题。

安装和配置 PurgeCSS

使用 PurgeCSS 很简单。首先通过 npm 安装：

npm install -g purgecss

然后在项目的根目录下创建一个 purgecss.config.js 文件，该文件包括了你想要提取样式的文件的路径。

module.exports = {
    content: ['./**/*.html', './**/*.js', './**/*.vue'],
    css: ['./src/css/*.css'],
    output: './src/css/tailwind.purged.css'
}

然后在终端中运行以下命令，即可看到 PurgeCSS 开始工作：

purgecss --config ./purgecss.config.js

这个命令会在你的指定文件中提取使用的样式，然后把它们输出到一个新的 CSS 文件中。

引用优化过的 CSS 文件

在使用 PurgeCSS 后，你需要替换原始的 Tailwind CSS 文件。你可以在你的 HTML 文件中引用新的优化过的 CSS 文件：

<link rel="stylesheet" href="./src/css/tailwind.purged.css">

这样就可以确保你的网站或应用程序加载的 CSS 文件大小最小化。

总结

Tailwind CSS 目前被广泛使用，因为它提供了很多有用的类来加速前端开发。但是，这也可能导致生成的 CSS 文件过大，对性能产生负担。针对这个问题， PurgeCSS 是解决方案。它可以自动扫描你的代码并仅提取所需的样式，从而减小最终的 CSS 文件大小。通过使用 PurgeCSS，你可以确保你的网站或应用程序的性能最优，并保证它们的加载速度最快。

示例代码

purgecss.config.js

module.exports = {
    content: ['./**/*.html', './**/*.js', './**/*.vue'],
    css: ['./src/css/*.css'],
    output: './src/css/tailwind.purged.css'
}

HTML 文件

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Purged Tailwind CSS</title>
    <link rel="stylesheet" href="./src/css/tailwind.purged.css">
</head>
<body>
    <h1 class="text-3xl">Hello world</h1>
    <p class="text-base font-bold text-gray-700">This is my purged Tailwind CSS website!</p>
</body>
</html>

CSS 文件

// javascriptcn.com 代码示例
@tailwind base;

@tailwind components;

@tailwind utilities;

.bg-red {
    background-color: red;
    color: white;
}

.bg-blue {
    background-color: blue;
    color: white;
}

优化后的 CSS 文件

// javascriptcn.com 代码示例
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0
}

.text-3xl {
    font-size: 3rem;
    line-height: 1;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5;
}

.font-bold {
    font-weight: 700;
}

.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgba(55, 65, 81, var(--tw-text-opacity))
}

.bg-red {
    background-color: red;
    color: white;
}

.bg-blue {
    background-color: blue;
    color: white;
}

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e32977d4982a6ebf3fa87