Tailwind CSS样式优先级控制

前情

Tailwind CSS 是一个原子类 CSS 框架，它将基础的 CSS 全部拆分为原子级别，能达到最小化项目CSS。它的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。Tailwind CSS 快速、灵活、可靠，没有运行时负担。自从接触了Tailwind CSS后，目前已经是我项目的标配了。我最近接手的uni-app项目就被我引入了Tailwind CSS，大大提高了书写样式的开发体验和效率。

问题：

原子化CSS都把样式都打平在同级了，样式优化级只跟出现的先后顺序有关，如果是纯使用Tailwind CSS开发的项目是问题不大的，但是很多时候都是在原有项目上增加Tailwind CSS，我目前手上项目就是我接手后才引入Tailwind CSS的，开发中总是会遇到因为样式优先级不够导致样式冲突不生效的问题，特别是修改原有项目样式的时候被优先级问题困扰。

解决方案1：

通过修改Tailwind.config.js配置让所有原子化CSS都增加!important后辍来全局提高Tailwind CSS生成的样式的优先级

const path = require("path");

const resolve = (p) => {
  return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
	// 增加此配置让所有Tailwind CSS样式增加!important后辍达到提高样式优先级
	important: true,
  content: [
	  "./index.html",
	  "./pages/**/*.{html,js,ts,jsx,tsx,vue}",
	  "./components/**/*.{html,js,ts,jsx,tsx,vue}"
  ].map(resolve),
  // ...
  corePlugins: {
    // 跨多端可以 h5 开启，小程序关闭
    preflight: false,
  }
};

问题：此方案全局提高所有原子化样式优先级有点太过头，真正项目并不是所有样式都会有样式冲突的，所以不需要所有的样式都增加!important，导致过多的无用后辍。

解决方案2：

通过修改Tailwind.config.js配置，增加样式层级来提高提高Tailwind CSS生成的样式的优先级

const path = require("path");

const resolve = (p) => {
  return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
	// 增加此配置让生成的原子化CSS都会在此样式层级下，以增加原子化CSS的层级来提高样式优先级
	important: 'my-app',
  content: [
	  "./index.html",
	  "./pages/**/*.{html,js,ts,jsx,tsx,vue}",
	  "./components/**/*.{html,js,ts,jsx,tsx,vue}"
  ].map(resolve),
  // ...
  corePlugins: {
    // 跨多端可以 h5 开启，小程序关闭
    preflight: false,
  }
};

问题：此方案虽然能提高样式优先级，但是提高的权重有限，可能并不适合所有场景。

解决方案3（推荐）：

单独为特定原子化CSS增加!important后辍来提高样式优先级，也是我一直在使用的方案，我最近接手的一个项目发现前一开发在全局对图片标签宽高做了重置了，我不得不在设置图片宽高的时候增加!前辍以让它生成的原子化CSS添加!important后辍

<image
	src="../static/wen.webp"
	mode="aspectFill"
	class="!zhs-w-[44rpx] !zhs-h-[44rpx]"
/>

最终生成的原子化CSS如下：

.izhs-w-_44rpx_ {
    width: 22px !important;
}
.izhs-h-_44rpx_ {
    height: 22px !important;
}

总结

方案1和方案3的原理是!important可以让样式权重提高到最高来达到解决样式冲突的问题，而方案2的方式是通过样式层级来提高样式优先级。

方案3是我个人觉得最优化的解决方案，即能解决样式优先级问题，也能保证修改的范围最小化。

此文章虽然是以我手上的uni-app项目作为演示示例，一些写法跟平时的web项目有一些区别，但web项目也是一样支持的。

如果你有更好的提高Tailwind CSS样式优先级的方案，欢迎留言，一起讨论学习进步吧。

友情提示

uni-app项目一般使用的IDE是官方自带的HBuilder x，为了更好的开发体验安装如下插件，即可实现样式名提示了，插件地址：Tailwind CSS语言服务 - DCloud 插件市场。

安装插件开发者工具会有莫名的报错，可以忽略，从最近一二周的使用体验上来说是没有什么问题的。