顺风CSS：“焦点:边框-2”类不存在，但“焦点:旋转-2”类不存在

Question

我在Vue 3中使用Tailwind，看起来我不能在焦点上更改输入元素的边框宽度。我拥有我的index.css：

form-input {
    @apply block appearance-none mb-1 bg-white w-full border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-blue-500 focus:border-2 disabled:bg-gray-200
}

我得到了一个错误：focus:border-2类不存在，但focus:rotate-2存在。如果您确信focus:border-2存在，请确保在Tailwind看到您的CSS之前，所有@import语句都被正确处理，因为@apply只能用于同一CSS树中的类。

我做错了什么吗？“package.json”-compat@^2.2.17-compat@^2.2.17

Answer 1

您应该在配置中的border变体中启用focus类：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      border: ['focus'],
    }
  },
}

Answer 2

或者，如果您想要更改宽度，这将工作：

ring-2

如果要更改颜色，则应该这样做：

focus:ring-blue-500

https://tailwindcss.com/docs/ring-width