Рекомендации по добавлению Ваших собственных глобальных базовых стилей поверх Tailwind.
Базовые (или глобальные) стили - это стили в начале таблицы стилей, которые устанавливают полезные значения по умолчанию для основных элементов HTML, таких как теги <a>, заголовки и т. д., или применяют выборочные сбросы, такие как популярный box-sizing reset.
Tailwind «из коробки» включает полезный набор базовых стилей, который мы называем Preflight, что на самом деле просто modern-normalize плюс тонкий слой дополнительных, более самоуверенных стилей.
Preflight - отличная отправная точка для большинства проектов, но если вы когда-нибудь захотите добавить свои собственные дополнительные базовые стили, вот несколько рекомендаций, как сделать это идиоматически.
Если вы просто хотите применить глобальный стиль к элементам html или body, рассмотрите возможность простого добавления существующих классов к этим элементам в Вашем HTML вместо написания нового CSS:
<!doctype html>
<html lang="ru" class="text-gray-900 leading-tight">
<!-- ... -->
<body class="min-h-screen bg-gray-100">
<!-- ... -->
</body>
</html>Если вы хотите применить некоторые базовые стили к определенным элементам, самый простой способ - просто добавить их в свой CSS.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}Используя директиву @layer, Tailwind автоматически перемещает эти стили в то же место, что и @tailwind base, чтобы избежать непреднамеренных проблем со специфичностью.
Использование директивы @layer также проинструктирует Tailwind рассмотреть эти стили для очистки при очистке базового слоя. Прочтите нашу документацию по оптимизации для продакшена для получения более подробной информации.
Рекомендуется использовать @apply или theme() для определения этих стилей, чтобы избежать случайного отклонения от Вашей дизайн-системы.
Вы можете использовать тот же подход, чтобы добавить свои правила @font-face для любых пользовательских шрифтов, которые вы используете:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: Proxima Nova;
font-weight: 400;
src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
}
@font-face {
font-family: Proxima Nova;
font-weight: 500;
src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
}
}Вы также можете добавить базовые стили, написав плагин и используя функцию addBase:
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addBase, theme }) {
addBase({
'h1': { fontSize: theme('fontSize.2xl') },
'h2': { fontSize: theme('fontSize.xl') },
'h3': { fontSize: theme('fontSize.lg') },
})
})
]
}Любые стили, добавленные с помощью addBase, будут вставлены в base слой вместе с другими базовыми стилями Tailwind.