1. 问题描述

Nuxt应用引入tailwindcss后，所有的h1到h6的样式消失了。效果如下：

问题效果页

2. 问题原因

原因是tailwindcss对这些样式做了预处理，见如下：
https://tailwindcss.com/docs/preflight

网上也有人问过这个问题：
https://stackoverflow.com/questions/70892781/how-do-h1-text-became-smaller-when-i-used-tailwind-css

官方描述如下：All heading elements are completely unstyled by default, and have the same font-size and font-weight as normal text. 样式变成了：

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

3. 如何解决

知道了问题产生的原因，那就好解决了。主要有两种方法：

3.1 去掉预处理

在 tailwind.config.ts 做如下配置

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

3.2 引入tailwindcss-typography

另一种方法是引入 tailwindcss-typography 这个包

pnpm install @tailwindcss/typography 

具体使用见：
https://github.com/tailwindlabs/tailwindcss-typography

需要在tailwind.config.ts做如下配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

同时在所在的页面div 里添加 prose 这个 class

4. 问题解决

问题解决，第二种方法稍微复杂一些。解决后，页面正常如下：

解决后页面