Multiples mode using same as dark mode class by Tailwindcss

#tailwindcss #javascript #module

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 tailwind to your project (docs here)
After complete install, you can see taiwind.config.js (cjs)
Create a themes folder to store your own themes
Create files your-theme.js in folder themes and 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">

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more