tailwindcss-themer-cli is a small JavaScript library that can be used with
Tailwind for managing different themes and the colors for each of those themes.
To use this library is pretty simple.
All you have to do is reference the tailwindThemerColors function inside your
tailwind.config.js file like so:
const { tailwindThemerColors } = require("tailwindcss-themer-cli");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
colors: tailwindThemerColors({
defaultLightTheme: "light",
defaultDarkTheme: "dark", // Optional
cssOutputPath: "./tailwind.css", // Optional (./tailwind.css is the default)
themes: [
{
name: "light",
colorScheme: "light",
colors: {
slate: "#cfcfcf",
contrast: "#3d3d3d",
success: "#14993e",
error: "#a64737",
},
},
{
name: "dark",
colorScheme: "dark",
colors: {
slate: "#2e2d2d",
contrast: "#dedede",
success: "#14993e",
error: "#a64737",
},
},
// You can have as many themes as you would like...
],
}),
},
plugins: [],
};Calling this function will do 2 things:
- Parse all the theme colors and return an object that can be understood by Tailwind
- Will generate a CSS file (output specified by the
cssOutputPathfield) that contains all the color definitions. This is the CSS file you will reference before the build process.
That's it! That tailwind.css file will be generated every time tailwind decides to read the config file.
By default, this library will use the users preferred color scheme to set the
theme. However, you can force change the theme by setting the class on the HTML
body tag to whatever you named your theme. No need for dark: variant anymore!
e.g. If you want to force dark mode (assuming you named one of your themes dark):
...
<body class="dark">
...
</body>
...