使用普通CSS也会很麻烦，但有一个变通方法。如果它是必填字段，可以将required属性添加到select元素中，并使用:invalid pseudo class将其样式化为占位符。其思路是，如果第一个选项用作占位符，则默认为selected和disabled。该表单域无效，因此您可以将其样式设置为such。
在下面的代码片段中，我只添加了一个required属性，并直接对:invalid类设置了样式，这并不是真正的Tailwind-y，但它是有效的：

@import url("https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css");

:invalid {
  color: rgba(156, 163, 175, 1);
}

<select
  type="text"
  id="carType"
  class="my-2 px-4 py-3 border rounded-lg text-black-primary focus:outline-none text-sm"
  name="carType"
  required
  v-model="carType"
>
  <option value="" disabled selected>Select your option</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

定制顺风2种变体

以下仅与顺风2有关，顺风3已添加无效：公用事业

虽然Tailwind有hover:，focus:，disabled:等实用程序，但不幸的是它没有invalid:。如果你想使用invalid:text-gray-400变体，你需要创建一个插件。幸运的是，文档中有一个很好的例子，可以作为我们的基础：

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  variants: {
    textColor: ({ after }) => after(['invalid']),
  },
  plugins: [
    plugin(function ({ addVariant, e }) {
      addVariant('invalid', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`invalid${separator}${className}`)}:invalid`;
        });
      });
    }),
  ],
};

现在您可以在select元素中使用invalid:text-gray-400类，并去掉自定义CSS样式：

<select
  type="text"
  id="carType"
  class="my-2 px-4 py-3 border rounded-lg text-black-primary invalid:text-gray-400 focus:outline-none text-sm"
  name="carType"
  required
  v-model="carType"
>
  <option value="" disabled selected>Select your option</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Vue条件类

在使用Vue时，第三个选项是使用条件类，只需根据carType的值在text-gray-400和text-black-primary这两个类之间切换即可。