Vite + TailwindCSS ：：焦点不起作用

Question

我正在使用 vite 和 tailwind 创建一个 React 应用程序。

我想使用 :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()]
})

Answer 1

TailwindCSS 默认不提供 shadow-outline class。

TailwindCSS Docs on Box-Shadow

您可以将额外的 class 添加到您的 tailwind.config.js

我导入默认主题，因为我认为您不会想要替换所有默认的框阴影样式。

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

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

Vite + TailwindCSS ：：焦点不起作用

Vite + TailwindCSS : :focus is not working

reactjs

tailwind-css

vite