I have configuration like this. I would try to pick background from div element with parameter “bg-event-60” and doesn’t work.

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

App.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;

Project structure
image

Image from website image

Why cannot style element? Anybody answers? Please…..