Tailwind CSS on GitHub

优化生产环境

从生产版本中删除未使用的CSS以获得最佳性能。

Overview

使用默认配置,Tailwind CSS的开发版本未压缩时候3739.4kB, 使用Gzip压缩到293.9KB, 使用Brotli可以压缩到73.2kB。

UncompressedMinifiedGzipBrotli
3739.4kB3020.7kB293.9kB73.2kB

这听起来可能是巨大的,但从设计上看,开发建筑是巨大的.

为了使开发体验产能更足,Tailwind为你生成了数千个工具类,其中大多数你可能用不上。

把Tailwind想象成一个巨大的乐高盒子——你把所有的乐高倒在地上,然后搭你想搭的东西,搭完后你再把没用过的东西放回盒子里。

例如,Tailwind为你生成margin工具类包含配置的spacing中的每个大小,以及可能会使用margin的每个边,并且项目中配置的每个screen断点都生成margin工具类。这就产生了数百种不同的组合,它们都很重要,但并不是所有的组合都用得上。

生产编译时,你应该确保使用Tailwind的purge项来删除未使用的样式,并优化你的最终生成文件大小。当使用Tailwind删除不使用的样式时,很难得到超过10kb的CSS压缩文件。

编写可“净化”的HTML

在开始使用purge功能之前,了解它的工作原理并构建正确的心智模型是很重要的,以确保在为生产构建时不会意外地删除重要的样式。

PurgeCSS在你的HTML里面查找类名时候有意做的很简单。它不会尝试解析你的HTML并寻找class属性或动态执行你的JavaScript -它只是在整个文件中寻找匹配这个正则表达式的任何字符串:

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

这基本上匹配任何由空格、引号或尖括号分隔的字符串,包括HTML标记、属性、类,甚至标记中实际编写的内容。

Woman paying for a purchase
Marketing
Finding customers for your new business

Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="/img/shopping.jpg" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">
      Marketing
    </div>
    <a href="/get-started" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">
      Finding customers for your new business
    </a>
    <p class="mt-2 text-gray-600">
      Getting a new business off the ground is a lot of hard work.
      Here are five ideas you can use to find your first customers.
    </p>
  </div>
</div>

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

不要使用字符串连接的方式来创建类名

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

而是动态选择一个完整的类名

<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: [],
}

这个列表应该包括项目中按名称引用任何样式的任何文件。例如,如果你的项目中有一个动态切换HTML中的一些类的JS文件,那么你应该确保将该文件包含在这个列表中。

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

启动手动模式

如果你想手动控制是否应该删除未使用的样式(而不是隐式地依赖于环境变量),你可以使用对象语法并提供enabled选项,使用content选项指定你的模板:

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

我们建议只在生产中删除未使用的样式,因为在开发中删除它们意味着在更改模板时需要重新编译,启用PurgeCSS后编译会慢得多。

保留HTML元素

默认情况下,Tailwind会在你的CSS中保留所有基本的HTML元素样式,比如HTMLbodyph1等标签的样式。这是为了减少意外的过度清理的情况,如使用markdown源文件(例如,没有实际的h1标记存在),或使用框架(如Next.js)隐藏文档外壳(包含htmlbody标记)。

如果你想禁用这个行为,你可以将preserveHtmlElements设置为false:

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

我们一般不建议这样做,认为风险大于好处,但我们不是警察,想干什么就干什么。

清除特定层

默认情况下,Tailwind会清除basecomponentsutilities层中的所有未使用样式。如果你想改变这一点,使用layers选项手动指定你想清除的图层:

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

删除所有未使用的类

默认情况下,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',
    ],
  },
  // ...
}

我们不建议这样做,通常你会发现,通过使用更保守的默认方法,你也已经很大程度降低了文件大小了。

删除未使用keyframes

PurgeCSS默认情况下不会删除未使用的@keyframes规则,所以你可能会注意到一些与动画相关的样式遗留在你的样式表中,即使你没有使用它们。你可以使用PurgeCSSoptions下的keyframes选项来移除这些帧:

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

PurgeCSS配置

如果你需要将其他PurgeCSS配置,你可以使用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的占用空间。

默认主题提供了一套非常丰富的颜色、断点、大小、边距等,以确保你在创建原型、创建CodePen演示或尝试工作流程时,有愉快和流畅的体验。

我们不希望你因为我们没有提供足够的内边填充助手而不得不去编写新的CSS,或者因为你想在演示中使用橙色方案而我们只给了你蓝色。

不过,这也有一个折衷:默认构建要比带有专门构建的配置文件的项目要大得多。

这里有一些策略可以让你生成的CSS保持小巧和高性能。

限制你的调色板

默认主题包括丰富的颜色(84种颜色),用于背景、边框、文本和占位符,所有这些都有hover:focus:的变体,以及六种默认屏幕大小的响应变体。

默认情况下,会生成数千个类来适应这些颜色,它几乎占了最终构建大小的一半。

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

以下是使用较小的调色板如何影响最终大小:

ColorsOriginalMinifiedGzipBrotli
84 (default)3739.4kB3020.7kB293.9kB73.2kB
502836.8kB2261.8kB234.9kB57.8kB
252161.0kB1692.6kB191.9kB48.1kB

移除未使用断点

由于几乎每个Tailwind工具都是针对每种屏幕大小复制的,所以使用更少的屏幕断点也会对整体文件大小产生巨大影响。

以下是定义更少的屏幕如何影响输出:

BreakpointsOriginalMinifiedGzipBrotli
5 (default)3739.4kB3020.7kB293.9kB73.2kB
32458.2kB1992.3kB196.0kB62.0kB
21827.8kB1488.2kB147.3kB57.5kB
11197.7kB984.3kB98.3kB52.0kB

如果你只需要3个屏幕尺寸和35种颜色,那么文件就可以压缩到45.8kB了。

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

如果你根本不希望在你的项目中使用某个工具类组,你可以在配置文件的core repugins部分将其设置为false来完全禁用它:

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

如果你只需要几个工具类组,你可以将一个数组传递给core repugins,其中包含你想要保留的工具类组。

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

上面的选项将禁用除margin和padding外所有的工具类组。

如果你需要一个工具类,但不需要响应版本,将它的变体设置为一个空数组,以生成少83%的类:

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

相对于限制你的调色板或使用更少的断点相比,这些都是小的提升,但它们仍然可以累积起来。