生产优化

概览

使用默认配置，TailwindCSS 的开发版本是3645.2kB未压缩，294.2kB用Gzip进行压缩，72.8kB用Brotli进行压缩。

这听起来可能很庞大，那是因为设计就很庞大。

为了使开发经验尽可能的富有成效，Tailwind 为您生成了成千上万的功能类，其中大部分您可能不会真正使用。

把 Tailwind 想象成一个巨大的乐高盒子—您把它倾倒在地板上，建造您想建造的东西，然后当您完成后，您把所有您不用的碎片放回盒子里。

例如，Tailwind 为您的间距尺度中的每一个尺寸，为您可能想要应用边距的元素的每一个侧面，在您的项目中使用的每一个断点生成边距实用程序。这导致了数以百计的不同组合，这些组合都是重要的，但不可能都是需要的。

当构建生产时，您应该总是使用 Tailwind 的 purge 选项来 tree-shake 优化未使用的样式，并优化您的最终构建大小当使用 Tailwind 删除未使用的样式时，很难最终得到超过 10kb 的压缩 CSS。

编写可清除的 HTML

在开始使用 Purge 功能之前，重要的是要了解它是如何工作的，并建立正确的心理模型，以确保您在为生产构建时永远不会意外地删除重要的样式。

PurgeCSS(我们在引擎下使用的库)在寻找 HTML 中的类的方式上故意非常幼稚。它并不试图解析您的 HTML 并查找类的属性，也不动态执行您的 JavaScript —它只是在整个文件中查找符合这个正则表达式的任何字符串。

  /[^<>"'`\s]*[^<>"'`\s:]/g

这基本上可以匹配任何由空格、引号或角括号分隔的字符串，包括 HTML 标签、属性、类，甚至是您标记中的实际书面内容。

这意味着，重要的是避免在您的模板中使用字符串连接动态创建类字符串，否则 PurgeCSS 将不知道保存这些类。

<div class="{{  error  ?  'text-red-600'  :  'text-green-600'  }}"></div>

只要一个类名出现在您的模板中，PurgeCSS 就不会删除它。

删除未使用的CSS

基本用途

要开始使用，请使用 purge 选项为您所有的模板文件提供一个路径数组。

// tailwind.config.js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

例如，如果您的项目中有一个 JS 文件，在您的 HTML 中动态切换一些类，您应该确保在这个列表中包括该文件。

现在，每当您在编译 CSS 时将 NODE_ENV 设置为 production，Tailwind 将自动从您的 CSS 中清除未使用的样式。

When using important with the selector strategy, be sure that the template file that includes your root selector is included in your purge configuration, otherwise all of your CSS will be removed when building for production.

Now whenever you compile your CSS with NODE_ENV set to production, Tailwind will automatically purge unused styles from your CSS.

手动启用

如果您想手动控制是否应该删除未使用的样式（而不是隐性地依赖环境变量），您可以使用一个对象语法，并提供 enabled 选项，使用 content 选项指定您的模板。

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.html'],
  },
  // ...
}

我们建议只在生产中移除未使用的样式，因为在开发中移除它们意味着您需要在任何时候改变您的模板时重新编译，并且在启用 PurgeCSS 的情况下编译速度要慢得多。

Safelisting specific classes

If you need to safelist specific classes to make sure they are never accidentally removed from your CSS (perhaps because they are used in content that comes from a database or similar), you can use our top-level safelist option:

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],
    safelist: [
      'bg-blue-500',
      'text-center',
      'hover:opacity-100',
      // ...
      'lg:text-right',
    ]
  },
  // ...
}

Transforming content

Sometimes you are authoring content in a format that compiles to HTML, and it would be better to compile that content to HTML before looking for potential classes. A great example of this is working with markdown files.

You can use the transform option to tell Tailwind to transform any file matching a specific extension before it looks for classes to guarantee the most accurate results:

// tailwind.config.js
let remark = require('remark')

module.exports = {
  purge: {
    content: ['./src/**/*.{html,md}'],
    transform: {
      md: (content) => {
        return remark().process(content)
      }
    }
  },
  // ...
}

Customizing extraction logic

If you need to override the logic Tailwind uses to detect classes in the content of a specific file type, you can use the extract option to provide a function that will be used to detect potential classes in matching files:

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.{html,md}'],
    extract: {
      md: (content) => {
        return content.match(/[^<>"'`\s]*/)
      }
    }
  },
  // ...
}

This is an advanced feature and most users won’t need it. The default extraction logic in Tailwind works extremely well for almost all projects.

Preserving HTML elements

默认情况下，Tailwind 将保留所有基本的 HTML 元素样式在您的 CSS 中，如 html，body，p，h1 等标签的样式。这是为了减少意外的过度清洗，例如在您使用 markdown 源文件的情况下（其中没有实际的 h1 标签），或者使用一个框架将文档外壳（包含 html 和 body 标签）隐藏在供应商目录的某个地方（像 Next.js 那样）。

如果您想禁止这种行为，您可以将 preserveHtmlElements 设置为 false。

// tailwind.config.js
module.exports = {
  purge: {
    preserveHtmlElements: false,
    content: ['./src/**/*.html'],
  },
  // ...
}

我们一般不建议这样做，认为风险大于收益，但我们不是警察，您想怎么做就怎么做。

清理特定层

By default, Tailwind will purge all styles in the base, components, and utilities layers. If you’d like to change this, use the layers option to manually specify the layers you’d like to purge:

// tailwind.config.js
module.exports = {
  purge: {
    layers: ['components', 'utilities'],
    content: ['./src/**/*.html'],
  },
  // ...
}

移除所有未使用到的 styles

默认情况下，Tailwind 将只删除它自己生成的未使用的类，或者被明确地包裹在 @layer 指令中。它不会从第三方 CSS 中移除未使用的样式，比如您拉到您的项目中的 datepicker 库。

/* These styles will all be purged */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* These styles will be purged */
@layer components {
  .btn { /* ... */ }
}

/* These styles will not be purged */
.flatpickr-innerContainer { /* ... */ }
.flatpickr-weekdayContainer { /* ... */ }
.flatpickr-weekday { /* ... */ }

这是为了避免意外地删除那些您可能需要的但在模板中没有直接引用的样式，比如那些只在 node_modules 文件夹深处引用的类，它们是其他依赖关系的一部分。

如果您真的想删除所有未使用的样式，设置 mode: 'all' 和 preserveHtmlElements: false，并且要非常小心地提供可能引用任何类或HTML元素的所有文件的路径。

// tailwind.config.js
module.exports = {
  purge: {
    mode: 'all',
    preserveHtmlElements: false,
    content: [
      './src/**/*.js',
      './node_modules/flatpickr/**/*.js',
    ],
  },
  // ...
}

我们不推荐这样做，一般来说，您会发现坚持使用更保守的默认方法可以获得 99% 的文件大小的好处。

Removing unused keyframes

PurgeCSS does not remove unused @keyframes rules by default, so you may notice some animation related styles left over in your stylesheet even if you aren’t using them. You can remove these using PurgeCSS’s keyframes option under options:

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],
    options: {
      keyframes: true,
    },
  },
  // ...
}

PurgeCSS options

If you need to pass any other options directly to PurgeCSS, you can do so using options:

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],

    // These options are passed through directly to PurgeCSS
    options: {
      safelist: ['bg-red-500', 'px-4'],
      blocklist: [/^debug-/],
      keyframes: true,
      fontFace: true,
    },
  },
  // ...
}

可用的选项列表可以在 PurgeCSS 文档中找到。

其他办法

如果您因为某种原因不能使用 PurgeCSS，您也可以通过从您的配置文件中删除未使用的值来减少Tailwind的足迹。

默认的主题提供了一套非常慷慨的颜色，断点，大小，边距等，以确保当您把Tailwind拉下来做原型，创建一个 CodePen 演示，或者只是尝试一下工作流程，体验是尽可能的愉快和流畅。

我们不希望您不得不去写新的 CSS，因为我们没有提供足够的 padding helpers，或者因为您想为您的演示使用橙色方案，而我们只给您蓝色。

不过这也是有代价的：默认的构建要比在一个有专门配置文件的项目上要重得多。

以下是一些策略，您可以用它来保持您生成的 CSS 小而性能好。

限制您的调色板

默认的主题包含了高达 84 种颜色，用于背景、边框、文本和占位符，所有这些颜色都有 hover: 和 focus: 变体，以及六种默认屏幕尺寸的响应变体。

默认情况下，有成千上万的类生成以适应这些颜色，它占了最终构建大小的近一半。

很少有项目真正需要这么多颜色，删除不需要的颜色会对整体文件大小产生巨大影响。

以下是使用较小的调色板对最终大小的影响。

删除未使用的断点

由于几乎每个 Tailwind 功能类都是为每一个屏幕尺寸复制的，所以使用较少的屏幕尺寸也会对整体文件大小产生巨大的影响。

以下是定义较少屏幕如何影响输出：

如果您只需要 3 种屏幕尺寸和 35 种颜色，那么您可以在不更改任何其他内容的情况下将其压缩为 46.8kB 。

禁用未使用到的核心插件和变体

如果您不希望在您的项目中需要某个功能插件，您可以通过在配置文件的 corePlugins 部分将其设置为 false 来完全禁用它。

// tailwind.config.js
module.exports = {
  // ...
  corePlugins: {
    float: false
  }
}

如果您只需要少量的功能类，您可以向 corePlugins 传递一个数组，其中包含您想保留的功能插件。

// tailwind.config.js
module.exports = {
  // ...
  corePlugins: [
    'margin',
    'padding'
  ]
}

以上将禁用除 margin 和 padding 以外的所有功能类。

如果需要一个功能类，但不需要响应式版本，将其变体设置为空数组，以减少 83% 的类生成。

module.exports = {
  // ...
  variants: {
    appearance: []
  }
}

与限制您的调色板或使用较少的断点相比，这些大多是小的优化，但它们仍然可以进一步减小构建体积。