vue.js - Tailwind CSS : The `focus:border-2` class does not exist, 但 `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 树中的类。

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

Answer 1

这个答案对我有帮助:

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

It's important to understand that @apply will not work for inlining pseudo-class or responsive variants of another utility. Instead, apply the plain version of that utility into the appropriate pseudo-selector or a new media query:

    /* 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;
      }
    }