最近在使用 TailwindCSS过程中，遇到了一些问题。在使用富文本编辑器的时候，Tailwind 会覆盖内联样式，另外，H类标题样式全无等情况。经查证，这主要是因为 Tailwind提供了一套基础样式 —— Preflight。
Preflight 是一套针对 Tailwind 项目的基础样式，主要是为了消除跨浏览器的不一致性，当我们在 CSS 中包含 @tailwind base时，Tailwind 会自动注入一些样式。
下面是 Preflight的一些影响范围，以及如何禁用及扩展的情况，大家可以参考下。
Preflight 基础样式
移除默认的外边距
适用范围：删除包括标题、块引用、段落等元素的所有默认外边距。
标题无样式
适用范围：从 h1到 h6，所有标题元素都是完全未设置样式，其字体大小与字体粗细与普通文本无差别。
官网给出了两种原因：
- 可以帮助我们避免不小心地偏离了字形比例。默认情况下，浏览器会为在 Tailwind 默认字形比例（type scale）中不存在的标题分配大小，并且不能保证这个大小会存在于您自己的字形比例（type scale）中。
- 在用户界面（ UI ） 开发中，不应该经常在视觉上强调标题。 默认情况下，将标题设置为无样式意味着我们对标题使用的任何样式都会是有意识和谨慎地进行的。
如果我们想继续使用标题默认样式的话，有两种方式，我们在后面说明。
列表无样式
在 Tailwind里，有序列表和无序列表默认情况下是无样式的，没有符号标记和数字，同时也没有外边距和内边距。
同时，也提供了 list-style-type和 list-style-position功能类，来为列表设置样式。list-style-type包括list-inside和 list-outside，list-style-position包括list-none、list-disc和list-decimal。
图片是块级元素
图片、svg、video、canvas 默认设置是 display:block，主要是为了避免浏览器默认设置中经常遇到的意外对齐问题display:inline，如果我们想让其中某个元素使用 inline的话，只需要使用 inline功能类即可。
边框样式已被全局地重置
为了使用 border类就可以更简单的添加边框，Tailwind 使用了以下规则覆盖所有元素的默认边框样式。
按钮默认有轮廓
主要是为了保证按钮开箱即用的样式，所以按钮都具有默认的轮廓。但是我们可以通过使用 focus:ring 或类似的功能类应用到按钮中来覆盖它。
如何解决内联样式与Preflight 的冲突
禁用 preflight
首先，如果我们不需要使用 Preflight提供的基础样式，那么我们可以使用“一刀切”的形式，禁用 Preflight如下：
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
}
}
我们需要在项目中的 tailwind.config.js中 corePlugins部分设置preflight设置为false.
重写基础样式
通过 @layer base 指令中添加自定义的css，例如，我们想重新定义标题类的样式：
@tailwind base;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
h3 {
@apply text-lg;
}
h4 {
@apply text-base;
}
h5 {
@apply text-sm;
}
h6 {
@apply text-xs;
}
}
@tailwind components;
@tailwind utilities;
通过使用 @layer指令，Tailwind 将自动将这些样式移到 @tailwind base的同一位置，以避免出现一些意外问题。
