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=