在DevTools中测试TailwindCSS遇异常：取消display:flex影响全局

这不是操作失误，是Tailwind工具类的特性导致的：

• Tailwind的flex是全局共享的工具类，对应的CSS规则是.flex { display: flex; }，所有加了flex类的元素都会复用这个样式。你在DevTools里取消这个规则的display:flex，本质是修改了全局的.flex类样式，所以所有用了该类的元素都会失去flex布局。
• 背景色类（比如bg-red-500）如果只有当前选中的div在用，取消时自然只影响它——毕竟其他元素没引用这个类。
• 常规CSS你写的是单个元素的专属选择器（比如.my-div { display: flex; }），修改的是单个元素的样式，所以不会波及其他元素。

调试时可以这么做：

• 要是只想临时关掉当前元素的flex布局，别碰全局.flex类的规则，直接在DevTools的「元素样式」面板里给当前元素加个临时样式display: block !important（或者你需要的其他display值），覆盖全局工具类。
• 也可以直接在元素的class列表里删掉flex类，这样只会影响当前元素，不会改全局样式。

内容的提问来源于stack exchange，提问作者walee