Vite TailwindCSS : :focus is not working-CodePudding

I'm creating a react app with vite and tailwind.

I want to use :focus but it's not working. This is the code :

<button
onClick={dispatch({ type: 'SET_LOG_MODAL', payload: 'in' })}
className="focus:outline-none focus:shadow-outline py-2 px-4 mr-1 rounded bg-gray-100 text-black">
    Connexion
</button>

Here is my tailwind config file :

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: {
        'man': '/img/man.jpg'
      },
    },
  },
  variants: {
    extend: {
      boxShadow: ["hover", "focus", "active"]
    }
  }, 
  plugins: [],
}

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

CodePudding user response：

TailwindCSS doesn’t offer a shadow-outline class by default.

TailwindCSS Docs on Box-Shadow

You can create the extra class by adding it to your tailwind.config.js

I import the default theme, because I don’t think you’ll want to replace all the default box-shadow styles.

// tailwind.config.js
const { boxShadow } = require('tailwindcss/defaultTheme');

module.exports = {
  ...,
  theme: {
    boxShadow: {
      ...boxShadow,
      outline: 'shadow-style-here'
    }
  }
}