Menu
I'm using react 18, nextjs 13 with tailwindcss, postcss, autoprefixer
expect: clicking the button to toggle border-color and other styles behavior: all styles toggle except border-color
question: why doesn't border-color behave the same way as the other styles?
broken code:
import Head from 'next/head'
import { useState } from 'react'
export default function Home() {
const [dark, darkSet] = useState(true)
function handleClick() {
darkSet((prev) => !prev)
}
const bgColor = 'bg-' + (dark ? 'black' : 'white')
const textColor = 'text-' + (dark ? 'white' : 'black')
const borderColor = 'border-' + (dark ? 'white' : 'black')
const borderStyle = 'border-' + (dark ? 'solid' : 'dashed')
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<main>
<div className={`flex min-h-screen min-w-screen `}>
<div
className={`${bgColor} ${textColor} border-8 ${borderStyle} ${borderColor}`}
>
Get started by editing
</div>
<button onClick={handleClick} className="h-8 bg-red-500">
theme
</button>
</div>
</main>
</>
)
}
396
asked May 06 '26 08:05
Change
const bgColor = 'bg-' + (dark ? 'black' : 'white')
const textColor = 'text-' + (dark ? 'white' : 'black')
const borderColor = 'border-' + (dark ? 'white' : 'black')
const borderStyle = 'border-' + (dark ? 'solid' : 'dashed')
to
const bgColor = dark ? 'bg-black' : 'bg-white'
const textColor = dark ? 'text-white' : 'text-black'
const borderColor = dark ? 'border-white' : 'border-black'
const borderStyle = dark ? 'border-solid' : 'border-dashed'
dynamic class in tailwind ?Using dynamic classes in tailwind-css is usually not recommended because tailwind uses tree-shaking i.e any class that wasn't declared in your source files, won't be generated in the output file.
Hence it is always recommended to use full class names
According to [Docs][1]
If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS
As a last resort, Tailwind offers [Safelisting classes][2].
Safelisting is a last-resort, and should only be used in situations where it’s impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature.
You can use [regular expressions][3] to include all the colors you want using pattern
variants as well:In tailwind.config.js
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
safelist: [
{
pattern: /bg-(red|green|blue|orange)/, // You can display all the colors that you need
variants: ['lg', 'hover', 'focus', 'lg:hover'], // Optional
},
],
// ...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With