Tailwind - A utility-first CSS framework
Dark mode is supported in Tailwindcss, you can see it here
However, you want to edit your own mode. Please follow these steps
Installation
tailwindto your project (docs here)After complete install, you can see
taiwind.config.js (cjs)Create a
themesfolder to store your own themesCreate files
your-theme.jsin folderthemesand insert this code
const plugin = require("tailwindcss/plugin");
const themeName = "your-theme-name"; // this is name of your custom theme (dark, red, light, ...)
module.exports = plugin(function ({ addVariant, e }) {
addVariant(`${themeName}`, ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${themeName} .${e(`${themeName}${separator}${className}`)}`;
});
});
});
- Open
tailwind.config.js, import your custom theme by option plugin
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [require("./themes/your-theme.js")], // edit the path if it doesn't match your project structure
};
- Finish, you can use your custom same as dark mode in Tailwind
<h1 class="text-red-500 dark:text-white red:text-red-800 orange:text-orange-700">Hello</h1>
NOTE: Don't forget to add a class to the html tag if you want the attribute to be enabled <html lang="en" class="red">
Top comments (0)