Блог

Я создаю приложение react с помощью vite и tailwind.

Я хочу использовать :focus , но он не работает. Это код :

 <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>
 

Вот мой конфигурационный файл tailwind :

 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()]
})
 

TailwindCSS не предлагает shadow-outline класс по умолчанию.

Документы TailwindCSS на Box-Shadow

Вы можете создать дополнительный класс, добавив его в свой tailwind.config.js

Я импортирую тему по умолчанию, потому что я не думаю, что вы захотите заменить все стили теней по умолчанию.

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

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