Tailwind global colors
Parses your global.scss (or css) and makes colors available in :root to be used as Tailwind Colors.
npm i -D tailwind-global-colors
For example for following styles/global.scss:
:root {
--color-dark: #020914;
--color-primary: #e8ebe0;
}Add following to tailwind.config.js:
const generateColors = require("tailwind-global-colors");
const colors = generateColors("./styles/global.scss");
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
// Your colors defined in global.scss will be available in Tailwind CSS
colors,
},
};Afterwards, use these in HTML or JSX:
const MyElement = () => <div className="text-primary bg-dark">Hello, world!</div>;When you add new colors, Tailwind CSS will automatically update to new colors.