Работает с tailwindcss 3.0.23
Добавить цветовую тему
В tailwind вы можете использовать bg-white для белого цвета фона, text-white для белого текста и т.д., но вы можете использовать свой собственный цвет в части white.
tailwind.config.js
module.exports = {
・・・
theme: {
extend: {
colors: {
"foo": "#f97316",
"bar": {
"buz": "#65C18C",
・・・
},
},
},
},
・・・
}
Позволяет указать цвет фона foo и цвет текста bar-buz.
<div class="bg-foo text-bar-buz"> ・・・</div>
Использовать пользовательские шрифты
Считывание файла шрифта
html
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet" />
или загружен с помощью css
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
Укажите название шрифта и семейство шрифтов
tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
fancy: ["Dancing Script"],
},
},
},
}
Можно использовать font-fancy.
html
<span class="font-fancy">・・・</span>
Инструкции по добавлению шрифтов google можно найти в этой статье
Создание класса
Можно создать класс, который обобщает классы tailwind с помощью @apply.
css
.custom-btn {
@apply w-20 h-20 m-5 p5 text-center;
}
html
<button class="custom-btn">Button</button>
@layer определяет приоритет добавляемого стиля. В данном случае base < components < utilities.
@layer base {
h1 { @apply text-2xl; }
}
@layer components {
h1 { @apply text-4xl; }
}
@layer utilities {
h1 { @apply text-5xl; }
}
Эти использования процитированы из документа, переведенного
базовый
Базовый слой предназначен для таких вещей, как правила сброса или стили по умолчанию, применяемые к обычным элементам HTML.
компоненты
Слой components предназначен для стилей на основе классов, которые вы хотите иметь возможность переопределять с помощью утилит.
утилиты
Слой утилит предназначен для небольших, одноцелевых классов, которые всегда должны иметь приоритет над любыми другими стилями.
Переключение светлого/темного режима
dark: указывает класс для темного режима.
<div class="bg-white dark:bg-black">
・・・
</div>
Как определить, находится ли он в темном режиме
tailwind.config.js
module.exports = {
// elements with dark class and below act as dark mode
darkMode: "class",
// dark mode is determined by os setting (default)
// darkMode: "media",
}
}
В этом случае он работает в темном режиме
<html class="dark">
・・・
<div class="bg-white dark:bg-black">
・・・
</div>
</html>
Динамическое добавление и удаление классов dark для переключения между темным и светлым режимами
Переключение тем
Создайте цвета primary и primary-text в этом примере
tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
"primary": "var(--color-primary)",
"primary-text": "var(--color-primary-text)",
}
},
},
}
Установите цвет с помощью css
/* default theme */
:root {
--color-primary: #ffffff;
--color-primary-text: #000000;
}
/* alternate-theme */
.custom-theme {
--color-primary: #000000;
--color-primary-text: #ffffff;
}
Применить, указав имя класса темы
<div class="custom-theme">
<button class="bg-primary text-primary-text">Button</button>
</div>
Если сделать имя класса темы динамическим, можно, например, переключать тему приложения для каждого пользователя.
Элементы, которые можно указать в tailwind.config.js, и их значения по умолчанию
Вы можете проверить это здесь.
https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js