Tailwind — CSS-фреймворк, ориентированный на утилиты.
Темный режим поддерживается в Tailwindcss, вы можете увидеть его здесь
Однако вы хотите отредактировать свой собственный режим. Пожалуйста, выполните следующие шаги
-
Установите
tailwind
в ваш проект (документация здесь). -
После установки вы увидите
taiwind.config.js (cjs)
. -
Создайте папку
themes
для хранения ваших собственных тем -
Создайте файлы
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}`)}`;
});
});
});
- Откройте файл
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
};
- В завершение вы можете использовать вашу пользовательскую тему в качестве темного режима в 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">
.