Tailwind CSS:`focus:bolder-2'类不存在，但`focus:rotate-2`存在

Question

我在Vue 3中使用Tailwind CSS，看起来我无法更改焦点上输入元素的边框宽度。我的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看到您的CSS之前，任何@import语句都得到了正确处理，因为@apply只能用于同一CSS树中的类

我做错什么了吗？package.json"tailwindcss"："npm:@tailwindcss/postcss7-compat@^2.2.17"；，

Answer 1

这个答案帮助了我：

https://github.com/tailwindlabs/tailwindcss/discussions/1889#discussioncomment-23241

重要的是要理解@apply将不适用于内联伪类或其他实用程序的响应变体。相反，将该实用程序的普通版本应用于适当的伪选择器或新的媒体查询：

/* Won't work: */
.btn {
@apply block bg-red-500;
@apply hover:bg-blue-500;
@apply md:inline-block;
}
/* Do this instead: */
.btn {
@apply block bg-red-500;
}
.btn:hover {
@apply bg-blue-500;
}
@screen md {
.btn {
@apply inline-block;
}
}

Answer 2

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

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

Answer 3

或者，如果您想更改宽度，这将起作用：

ring-2

如果你想改变颜色，你应该这样做：

focus:ring-blue-500

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