TailwindCss 使用 important 提高权重

在使用 TailwindCss 开发时会在已经封装好的UI组件中进行使用，但是由于权重问题可能会导致添加的 TailwindCss 样式无法生效，这个时候就要对 tailwindcss.config.js 文件进行 important 配置，将我们的样式权重提高。

进入 tailwindcss.config.js 文件

• 添加 important: true

module.exports = {
  important: true,
}

就会自动生效在标签中，无须二次引入。

<div class="mx-2"></div>

但是这种方式有一个弊端，他会将全部样式都添加 important 提高权重，使得想通过 style 进行添加样式时就会出现样式无法显示问题，具体还是我们 style 方式添加的样式权重问题。

所以谨慎使用 important 配置，并优先使用 style 方式来解决样式权重问题