如何在Tailwind中全局设置label和input的文本颜色？

下面是几种不用重复写类的实用方案：

1. 封装复用组件（框架场景推荐） #

如果用React、Vue这类框架，直接把输入框封装成可复用组件，后续调用组件即可：

React示例： #

import React from 'react';

const FormInput = ({ label, ...props }) => {
  return (
    <label className="input text-neutral-content">
      {label}
      <input type="text" className="grow text-base-content" {...props} />
    </label>
  );
};

export default FormInput;

使用时直接调用：

<FormInput label="Name" />
<FormInput label="Email" type="email" />

2. 用@apply创建自定义工具类 #

在Tailwind的自定义CSS文件（比如src/styles/tailwind.css）中，添加自定义类：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .form-label {
    @apply input text-neutral-content;
  }
  .form-input {
    @apply grow text-base-content;
  }
}

之后在代码里直接使用这些自定义类：

<label class="form-label">
  Name
  <input type="text" class="form-input"/>
</label>

3. 全局设置base样式（谨慎使用） #

如果想让所有带input类的label及其内部的input自动应用样式，可以在base层添加全局规则：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  label.input {
    @apply text-neutral-content;
  }
  label.input input {
    @apply text-base-content;
  }
}

这样无需额外加类就能生效：

<label class="input">
  Name
  <input type="text" class="grow"/>
</label>

注意：该方法会影响全局所有符合选择器的元素，若有特殊输入框需要不同样式，需单独覆盖。

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