在 DevTools 中测试 tailwindcss

Question

我在 DevTools 中测试 tailwindcss 时遇到问题，当我尝试取消选中或取消选择 display: flex 时，它将取消选中所有位置的所有显示 flexes，如您所见，当我取消选中时，我选择了一个具有 display flex 和背景颜色的 div显示 flex 它将取消选中所有显示 flexes 如果有任何但是如果我取消选中该背景颜色它只会影响该 div 因为我在其他地方没有背景颜色。我用普通的 css 没有这个问题，我做错了什么吗？

一个解决方法是如果我从这里删除它：

Answer 1

禁用

display: flex;

类内部的

.flex

将禁用所有使用

flex display

类的元素的

.flex

。

我的建议是使用 JavaScript 从元素中删除

flex

类。

或者，您可以使用 DevTools 删除它，通过修改 HTML 来调试问题。

示例代码：

const element = document.querySelector('#element-id');
element.classList.remove('flex');

Answer 2

您可以使用 .cls 并随意切换类。

https://developer.chrome.com/docs/devtools/css/#classes