全局预设样式

TailwindCSS

什么是全局预设样式

当你在项目中引入tailwind的时候，即使什么都不写，你也会发现浏览器渲染有些东西跟标准的HTML+CSS是不一样的。比如像下面这个HTML文档，用到了tailwindcss官方提供的play CDN。

<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style>

    </style>
</head>

<body>
    <input type="text" name="" id="">

    <div style="height:200px;width:200px;margin:20px;border:20px solid #000;padding:20px"></div>

</body>

</html>

上面这个文档在<head>里引入了tailwind，但在<body>里完全没有用到任何tailwind的东西，只是普通的HTML+CSS，但打开这个页面，我们能看到的怪现象包括但不限于 ：

  1. <input>有尺寸，但完全没有样式，隐形了
  2. <div>的盒模型把padding和border放在盒子里面了。<div>元素本体的尺寸只有120*120，加上padding和border才是200*200（padding是20像素，border也是20像素），也就是说<div>本身的width和height是包括padding和border的

preflight_1.gif

如果我们把tailwind去掉，浏览器默认的渲染结果如下：

pure_html_css.gif

  1. <input>有一些基本样式，在浏览器上是可见的
  2. <div>的盒模型把padding和border放在盒外边了。<div>本体的尺寸就是200*200。

这样的改动在tailwind中有很多，是一旦你引入了tailwind就会生效的改动，官方文档中把这些改动叫preflight。实际上的改动内容非常多，这里不一一列举，开发者也不需要事无巨细的去掌握，只需要知道有以下几个重要改动即可：

  1. 所有默认的外边距都被移除了，除非用户用CSS或tailwind指定外边距（margin），否则所有元素都没有外边距
  2. 所有默认的border样式都被移除了，这就是为什么<input>隐形的原因：浏览器默认是会给<input>加个border的
  3. 从<h1>到<h6>，所有的标题元素的默认样式都被移除了：写出来跟普通的<p>差不多
  4. 所有的列表相关元素的默认样式也被移除了，包括<ul>, <ol>, <menu>
  5. 图片、视频、画板等相关的元素，包括<img>, <svg>, <video>, <canvas>, <audio>等元素，现在都是块级元素，也就是变成了display:block
  6. <img>和<video>两个元素有了两个默认样式：max-width:100%; height:auto。这样设定的好处是：
    • 图片和视频不会伸出父元素的框线
    • 通过height:auto使浏览器能自动的把图片和视频保持在它们原生的长宽比例上