Add dark mode support with just one class
https://tailwindcss-variable-colors.vercel.app/
pnpm i -D tailwindcss-variable-colors// tailwind.config.ts
import { Config } from 'tailwindcss'
import colors from 'tailwindcss/colors'
import { createVariableColors, variableColorsPlugin } from 'tailwindcss-variable-colors'
const config: Config = {
content: ['./src/**/*.tsx'],
theme: {
// You can also not pass the colors parameter,
// it will use the colors from tailwindcss by default.
colors: createVariableColors(colors),
},
plugins: [variableColorsPlugin(colors)],
}
export default config// Button.tsx
const Button = () => (
<button className="text-slate-700 bg-slate-100 hover:bg-blue-100 active:bg-blue-200 ...">
Button
</button>
)That's it!
To reduce the css bundle size, you can use postcss-prune-var to prune unused css variables.
First, install it as a dev dependency
pnpm i -D postcss-prune-varThen add it to postcss config
//postcss.config.js
module.exports = {
plugins: {
// ...
'postcss-prune-var': {},
},
}https://innei.ren/posts/programming/tailwind-built-in-colors-dark-mode
MIT