TailwindCSS 无法与 Vite + React - 项目内的样式元素一起使用？

Question

我有这样的配置。我会尝试使用参数“bg-event-60”从 div 元素中选择背景，但不起作用。

vite.config.js

import {defineConfig, loadEnv} from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from "tailwindcss";

export default defineConfig(({mode}) => {
    const env = loadEnv(mode,  process.cwd(), '')
    return{
        define: {
           'import.meta.env.API_URL': JSON.stringify(env.API_URL)
        },
        plugins: [react()],
        css: {
            postcss: {
                plugins: [tailwindcss()],
            },
        },
    }
})

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

export default {
  corePlugins: {
    preflight: false
  },
  content: ["./index.html", "./src/**/*.{js, ts, jsx, tsx}"],
  theme: {
    fontFamily: {
      general: ['"General Sans"', 'sans-serif']
    },
    extend: {}
  },
  plugins: [],
}

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.scss'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

应用程序.tsx

import './App.scss'

function App() {

  return (
    <>
        <div className="bg-event-60">ddddd</div>
    </>
  )
}

export default App

index.scss

@tailwind base;
@layer base {
  html {
    @apply font-general
  }
}

@tailwind components;
@tailwind utilities;

项目结构

图片来自网站

为什么不能设置样式元素？有人回答吗？请......

Answer 1

bg-event-60

不会评估具有您的 Tailwind 配置的类。

如果您打算应用它

background-color

，您需要修改 Tailwind 配置以将该值添加为

colors.event.60

:

export default {
  // …
  theme: {
    // …
    extend: {
      colors: {
        event: {
          '60': 'some color value',

或

colors.event-60

：

export default {
  // …
  theme: {
    // …
    extend: {
      colors: {
        'event-60': 'some color value',

或

backgroundColor.event.60

:

export default {
  // …
  theme: {
    // …
    extend: {
      backgroundColor: {
        event: {
          '60': 'some color value',

或

backgroundColor.event-60

:

export default {
  // …
  theme: {
    // …
    extend: {
      backgroundColor: {
        'event-60': 'some color value',

否则，如果您打算应用类名称

backgroundImage

，则需要修改 Tailwind 配置以将值添加为

backgroundImage.event-60

:

export default {
  // …
  theme: {
    // …
    extend: {
      backgroundImage: {
        'event-60': 'some color value',