I have configuration like this. I would try to pick background from div element with default parameter from tailwind configuration “bg-lime-400” 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-lime-400">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…..
bg-event-60 would not evaluate to a class with your Tailwind configuration.
If you intend for it to apply background-color, you’d need to modify your Tailwind configuration to add the value as a colors.event.60:
export default {
// …
theme: {
// …
extend: {
colors: {
event: {
'60': 'some color value',
Or colors.event-60:
export default {
// …
theme: {
// …
extend: {
colors: {
'event-60': 'some color value',
Or backgroundColor.event.60:
export default {
// …
theme: {
// …
extend: {
backgroundColor: {
event: {
'60': 'some color value',
Or backgroundColor.event-60:
export default {
// …
theme: {
// …
extend: {
backgroundColor: {
'event-60': 'some color value',
Otherwise, if you intended for the class name to apply backgroundImage, you’d need to modify your Tailwind configuration to add the value as a backgroundImage.event-60:
export default {
// …
theme: {
// …
extend: {
backgroundImage: {
'event-60': 'some color value',
You seem to have an incorrect file glob in the content array of your Tailwind configuration:
export default {
// …
content: ["./index.html", "./src/**/*.{js, ts, jsx, tsx}"],
At the moment, this would expand to:
./index.html
./src/**/*.js
./src/**/*. ts
./src/**/*. jsx
./src/**/*. tsx
Notice the spaces after the dot (.) for the ts, jsx and tsx candidates. Consider removing the spaces like:
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
So that these would expand to:
./index.html
./src/**/*.js
./src/**/*.ts
./src/**/*.jsx
./src/**/*.tsx
Thus, Tailwind would scan your src/App.tsx file and properly create CSS rules for matching class name candidates found in this src/App.tsx file.
3