Многократный режим с использованием того же класса, что и темный режим — Tailwindcss

Tailwind — CSS-фреймворк, ориентированный на утилиты.
Темный режим поддерживается в Tailwindcss, вы можете увидеть его здесь

Однако вы хотите отредактировать свой собственный режим. Пожалуйста, выполните следующие шаги

  1. Установите tailwind в ваш проект (документация здесь).

  2. После установки вы увидите taiwind.config.js (cjs).

  3. Создайте папку themes для хранения ваших собственных тем

  4. Создайте файлы your-theme.js в папке themes и вставьте этот код

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}`)}`;
    });
  });
});
Войдите в полноэкранный режим Выйти из полноэкранного режима
  1. Откройте файл tailwind.config.js, импортируйте вашу пользовательскую тему с помощью опций плагина
/** @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
};
Войти в полноэкранный режим Выйдите из полноэкранного режима
  1. В завершение вы можете использовать вашу пользовательскую тему в качестве темного режима в Tailwind
<h1 class="text-red-500 dark:text-white red:text-red-800 orange:text-orange-700">Hello</h1>
Войти в полноэкранный режим Выйти из полноэкранного режима

ПРИМЕЧАНИЕ: Не забудьте добавить класс к тегу html, если вы хотите, чтобы атрибут был включен <html lang="en" class="red">.

Оцените статью
devanswers.ru
Добавить комментарий