Tailwind CSS：`focus:border-2` 类不存在，但`focus:rotate-2` 存在答案

【问题标题】：Tailwind CSS: The `focus:border-2` class does not exist, but `focus:rotate-2` doesTailwind CSS：`focus:border-2` 类不存在，但`focus:rotate-2` 存在
【发布时间】：2022-01-11 08:00:14
【问题描述】：

我正在使用带有 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 存在，请确保所有 @import 语句都在 Tailwind CSS 看到您的 CSS 之前得到正确处理，因为 @apply 只能用于同一 CSS 树中的类。

我做错了吗？包.json "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",

【问题讨论】：

标签： vue.js tailwind-css postcss

【解决方案1】：

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


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

【讨论】：

错误仍然存在...
请分享您的tailwind.config.js文件
module.exports = { purge: ["./src/**/*.vue"], darkMode: false, // or 'media' or 'class' theme: { extend: { }、}、变体：{ 扩展：{ backgroundColor：['disabled']、边框：['focus'] }、}、插件：[]、}

【解决方案2】：

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

ring-2

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

focus:ring-blue-500

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

【讨论】：

我不要戒指