Tailwind CSS: The `focus:border-2` class does not exist, but `focus:rotate-2` does-CodePudding

I am using Tailwind CSS with Vue 3, and it looks like that I cannot change border width of input element on focus. I my index.css I have:

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
}

And I get the error: The focus:border-2 class does not exist, but focus:rotate-2 does. If you're sure that focus:border-2 exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

Am I doing something wrong? package.json "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",

CodePudding user response：

You should enable the border class in focus variant in the config :


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

CodePudding user response：

Or if you want to change the width this will work:

ring-2

You should this if you want to change the color:

focus:ring-blue-500

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