Время чтения: 1 мин.
В Tailwind CSS есть несколько способов создавать повторно используемые композиции стилей:
1. Использование @apply в CSS
Вы можете создать собственный класс, который объединяет несколько утилит Tailwind:
/* В вашем CSS файле */
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}Затем используйте его в HTML:
<button class="btn-primary">Кнопка</button>2. Создание компонентов с помощью директив @layer
В файле tailwind.config.js или в основном CSS файле:
// tailwind.config.js
module.exports = {
// ...
plugins: [
function({ addComponents }) {
addComponents({
'.btn': {
padding: '.5rem 1rem',
borderRadius: '.25rem',
fontWeight: '600',
'&:hover': {
transform: 'translateY(-1px)',
},
},
'.btn-primary': {
backgroundColor: '#3b82f6',
color: '#fff',
'&:hover': {
backgroundColor: '#2563eb',
},
},
})
},
]
}3. Использование JavaScript-переменных
Если вы используете JavaScript-фреймворк (React, Vue и т.д.), можно создать переменные со стилями:
// React пример
const baseButtonStyles = "py-2 px-4 font-semibold rounded-lg shadow-md";
const primaryButtonStyles = `${baseButtonStyles} bg-blue-500 text-white hover:bg-blue-700`;
function Button({ children }) {
return <button className={primaryButtonStyles}>{children}</button>;
}4. Расширение конфигурации Tailwind
В tailwind.config.js вы можете расширить или переопределить стандартные классы:
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url('/img/hero-pattern.svg')",
}
}
}
}Рекомендации
- Используйте
@applyдля простых повторяющихся комбинаций - Для более сложных случаев создавайте плагины или компоненты
- Не злоупотребляйте
@apply— Tailwind создан для использования утилит непосредственно в HTML - Для проектов на React/Vue/Svelte рассмотрите возможность создания компонентов с предопределенными классами
Лучший подход зависит от конкретного проекта и ваших предпочтений.
Добавить комментарий