如何覆盖输入类型文本焦点的 tailwind 配置文件

Question

我在我的项目中使用了react-select包中的多重选择下拉菜单。现在，输入字段中的光标正在从 tailwind 基类获取 css，但我无法从我从反应选择包中获取的选择组件覆盖它。我尝试覆盖 tailwind.config.js 文件但没有成功。这是我的 tailwind.config 下面的代码

/** @type {import('tailwindcss').Config} */

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    input: {
      focus: {
        boxShadow: "none",
      },
    },
    extend: {
      container: {
        center: true,
        padding: "15px",
      },
      fontFamily: {
        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [require("@tailwindcss/forms")],
};

即使我的轮廓设置为零，但由于弓形阴影属性，我的光标周围出现了边框。当我尝试从开发人员的控制台检查它并设置 box-shadow: none 时，它就消失了。

任何人都可以帮助我实现它吗？

Answer 1

你必须添加

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,

确保您的顺风风格可以覆盖。

您可能还必须在react-select中为适当的组件指定className，例如：

<Select
  classNames={{
    control: ({ isFocused }) =>
      isFocused ? "border-blue-600 shadow-none" : "border-grey-300",