tailwindcss 官网（二）生产优化（purge）、浏览器支持、智能感知

tailwindcss 官网（二）生产优化（purge）、浏览器支持、智能感知

官网：安装 - Tailwind CSS 中文文档

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

  • 这基本上可以匹配任何由空格、引号或角括号分隔的字符串
  • g修饰符表示全局匹配（global），加上它以后，正则对象将匹配全部符合条件的结果，主要用于搜索和替换。
  • * 星号表示某个模式出现0次或多次，等同于{0,}。
  • \s 匹配空格（包括换行符、制表符、空格符等），相等于[ \t\r\n\v\f]。
  • 如果方括号内的第一个字符是脱字符[^]，则表示除了字符类之中的字符，其他字符都可以匹配。比如，[^xyz]表示除了x、y、z之外都可以匹配。

• 浏览器支持

  • 从 v2.0 开始，Tailwind CSS 专为 Chrome，Firefox，Edge 和 Safari 的最新稳定版本设计并在其上经过了测试。 Tailwind CSS v2.0 不支持任何版本的 IE，包括 IE 11。

1. 生产优化

从您的生产构建中移除未使用的 CSS，以获得最佳性能。

概览

使用默认配置，TailwindCSS 的开发版本是3739.4kB未压缩，293.9kB用Gzip进行压缩，73.2kB用Brotli进行压缩。

Uncompressed	Minified	Gzip	Brotli
3739.4kB	3020.7kB	293.9kB	73.2kB

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

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

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

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

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

编写可清除的 HTML

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

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I26vwlRZ-1631438686033)(https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80)]

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

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

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

手动启用

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

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

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

保留HTML元素

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

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

清理特定层

默认情况下，Tailwind 将清除 base，components 和 utilities 层中的所有样式。如果您想改变这一点，使用 layers 选项手动指定您想清除的层。

// 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% 的文件大小的好处。

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'],
    }
  },
  // ...
}

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

---

其他办法

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

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

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

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

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

限制您的调色板

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

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

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

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

Colors	Original	Minified	Gzip	Brotli
84 (default)	3739.4kB	3020.7kB	293.9kB	73.2kB
50	2836.8kB	2261.8kB	234.9kB	57.8kB
25	2161.0kB	1692.6kB	191.9kB	48.1kB

删除未使用的断点

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

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

Breakpoints	Original	Minified	Gzip	Brotli
5 (default)	3739.4kB	3020.7kB	293.9kB	73.2kB
3	2458.2kB	1992.3kB	196.0kB	62.0kB
2	1827.8kB	1488.2kB	147.3kB	57.5kB
1	1197.7kB	984.3kB	98.3kB	52.0kB

如果您只需要 3 种屏幕尺寸和 35 种颜色，那么您可以在不更改任何其他内容的情况下将其压缩为 45.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: []
  }
}

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

2. 浏览器支持

了解 Tailwind 支持哪些浏览器以及如何管理浏览器引擎前缀。

从 v2.0 开始，Tailwind CSS 专为 Chrome，Firefox，Edge 和 Safari 的最新稳定版本设计并在其上经过了测试。 Tailwind CSS v2.0 不支持任何版本的 IE，包括 IE 11。

如果您需要支持 IE11，我们建议您使用 Tailwind CSS v1.9，它仍然是一个优秀的、非常有生产力的框架。

某些功能，如 focus-visible， Tailwind 默认包括在内，但不是被所有现代浏览器所原生支持。我们已经将这些功能推荐的 polyfills 信息直接包括在功能本身的文档中。

浏览器引擎前缀

如果您正在使用 tailwindcss CLI 工具，浏览器引擎前缀将自动添加。

如果没有，我们建议您使用 Autoprefixer。

要使用它，请通过 npm：

# Using npm
npm install autoprefixer

# Using Yarn
yarn add autoprefixer

然后将其添加到您的 PostCSS 配置插件列表的末尾：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

3. 智能感知

为 Visual Studio Code 用户准备的 TailwindCSS 智能感知工具。

Tailwind CSS IntelliSense 通过为 Visual Studio Code 用户提供自动完成、语法高亮和语法检查等高级功能，提升了 Tailwind 开发体验。

• 自动补全：智能提示类名，以及 CSS 函数和指令。
• 语法检查：突出显示 CSS 和 HTML 中的错误和潜在 bugs。
• 悬停预览：通过悬停在其上，可以看到一个 Tailwind 类名的完整的 CSS。
• 语法高亮显示：提供语法定义，以便正确突出显示 Tailwind 特征。

在 GitHub 上查看该项目以获得更多了解，或者现在就将它安装到 Visual Studio Code 开始使用。