如何使用Tailwind定位除复选框外的输入框及反向选择？

1. 排除复选框，给其他输入框应用样式 #

你之前的写法错误在于not()伪类的语法和位置不对，正确的做法是把:not([type='checkbox'])直接附加在input选择器后面，作为子选择器的一部分。

修改父容器的类即可实现“除复选框外的输入框应用block样式”：

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class="[&_input:not([type='checkbox'])]:block">
  <input type='text' value='hi'> <!-- 会应用block样式 -->
  <input type='checkbox'> <!-- 不会应用block样式 -->
</div>

这里的[&_input:not([type='checkbox'])]:block表示：父元素下所有**不是type="checkbox"**的input子元素，应用block样式。

2. 仅给复选框输入框应用样式 #

如果需要反向选择，只给复选框加样式，直接使用属性选择器定位type='checkbox'的input即可：

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class="[&_input[type='checkbox']]:inline-block">
  <input type='text' value='hi'> <!-- 不会应用inline-block样式 -->
  <input type='checkbox'> <!-- 会应用inline-block样式 -->
</div>

这里的[&_input[type='checkbox']]:inline-block表示：父元素下所有type为checkbox的input子元素，应用inline-block样式。

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