Tailwind.css — новое, модное веяние современной web-разработки. С помощью этой нехилой замены Bootstrap, Вы сможете накидать более оригинальный сайт, чем он мог бы получиться на Bootstrap. Плюс ко всему, tw.css, очень умный и умеет выдавать Вам бандл с ровно теми стилями, которые необходимы на конкретной странице или конкретном сайте, который Вы верстаете.
1rem = 16px (CSS)
1 пункт (TW) = 0.25rem (CSS). Например: mt-1 означает margin-top: 0.25rem
Советы по использованию TailWindCSS
1. Пример файловой структуры стилей
styles
│ styles.css
│ scaffolding.css
│ helpers.css
│ fonts.css
│
└───components
│ header.css
│ footer.css
2. Сами файлы
styles.css
...
@import "fonts";
@import "scaffolding";
@import "helpers";
@import "typography";
@import "components/header";
@import "components/footer";
...
fonts.css
Используется для подключения шрифтов, к примеру
...
@font-face {
font-family: 'Neue Haas Grotesk Regular';
src: url('../fonts/neue-haas-grotesk-regular.woff2') format('woff2'),
url('../fonts/neue-haas-grotesk-regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
scaffolding.css
Импорт самого tailwind
...
@tailwind base;
@tailwind utilities;
html {
@apply font-body;
font-size: calc(100vw / 750 * 10);
@screen sm {
font-size: calc(100vw / 1920 * 10);
}
}
...
helpers.css
Используется для вспомогательных классов:
1. Основных контейнеров
2. Других особенностей компонентов
...
.section {
@apply py-12;
@screen sm {
@apply py-24;
}
...
Файл, содержащий в себе компоненты
component.css
.component {
@apply section;
}
...
typography.css
Используется для типографии h1, h2, h3 и т.д.
...
.h1 {
@apply text-4xl;
@apply font-bold;
}
h1 {
@apply h1;
}
...
... и затем Вы сможете применить их так:
component.css
.heading-component {
@apply h1;
}
```
Рекомендации по коду
1. Расширяйте функциональность TailwindCSS, а не создавайте собственный код.
2. Всегда используйте классы @apply, если это возможно, не создавайте собственные стили, если в этом нет необходимости.
3. Реорганизуйте сложные компоненты в файлы компонентов.
4. Используйте директиву Tailwind `screen` для медиа-запросов.
5. Вложите CSS для удобства чтения, включая медиа-запросы.
6. Используйте синтаксис БЭМ при создании нестандартного компонента (ПО ЖЕЛАНИЮ).
7. Добавляйте каждую директиву «apply» на новой строке (можно и через пробел, но так легче читается, хотя и дольше писать сам код).
8. Всегда используйте rem вместо px.
1. Расширяйте функциональность TailwindCSS, а не создавайте собственный код.
Решая, какие классы TW использовать, выберите близкие интервалы и размеры шрифта или создайте новый интервал в конфигурации TW (tailwind.config.js)..
✅ Так надо делать:
...
module.exports {
...
theme: {
fontSize: {
2xl: '10 rem'
}
}
}
...
type.css
.h4 {
@apply text-2xl;
}
...
❌Так НЕЖЕЛАТЕЛЬНО делать:
...
.new-title {
font-size: 10rem;
}
...
2. Всегда используйте классы @apply, если это возможно, не создавайте собственные стили, если в этом нет необходимости.
✅Так надо делать:
component.css
.component {
@apply pt-4;
}
...
❌Так НЕЖЕЛАТЕЛЬНО делать:
...
.mobpt2 {
padding-top: 2rem;
}
...
3. Реорганизуйте сложные компоненты в файлы компонентов.
✅Так надо делать:
component.css
.component {
@apply pt-4;
@apply mt-2;
@apply w-full;
@apply h-full;
@apply text-lg;
@apply text-base;
@apply font-bold;
}
...
❌Так НЕЖЕЛАТЕЛЬНО делать:
index.html
<div class="pt-4 mt-2 w-full h-full text-lg text-base font-bold">Name</div>
<div class="pt-4 mt-2 w-full h-full text-lg text-base font-bold">Name</div>
<div class="pt-4 mt-2 w-full h-full text-lg text-base font-bold">Name</div>
<div class="pt-4 mt-2 w-full h-full text-lg text-base font-bold">Name</div>
...
4. Используйте директиву Tailwind `screen` для медиа-запросов.
tailwind.config.js
screens: {
md: '768px',
},
✅Так надо делать:
component.css
.component {
@apply text-lg;
@screen sm {
@apply text-2xl;
}
}
...
❌Так НЕЖЕЛАТЕЛЬНО делать:
component.css
.component {
@apply text-lg;
}
@media (min-width: 768px) {
@apply text-2xl;
}
...
5. Вложите CSS для удобства чтения, включая медиа-запросы.
Это действительно затрудняет чтение...
✅Так надо делать:
component.css
.component {
@apply text-lg;
@screen sm {
@apply text-2xl;
}
&__block {
@apply bg-black;
@apply text-white;
}
}
...
❌Так НЕЖЕЛАТЕЛЬНО делать:
component.css
.component {
@apply text-lg;
}
@screen sm {
.component {
@apply text-2xl
}
}
.component__block {
@apply bg-black;
@apply text-white;
}
...
6. Используйте синтаксис БЭМ при создании нестандартного компонента (ПО ЖЕЛАНИЮ).
✅Так надо делать:
component.css
.component {
@apply text-lg;
&__block {
@apply bg-black;
}
&__block__another {
@apply bg-orange;
}
}
...
❌Так НЕЖЕЛАТЕЛЬНО делать:
component.css
.component {
@apply text-lg;
& ul {
@apply bg-black;
}
}
...
7. Добавляйте каждую директиву «apply» на новой строке (можно и через пробел, но так легче читается, хотя и дольше писать сам код).
Это просто способствует удобочитаемости компонентов, особенно когда много стилей.
✅Так надо делать:
component.css
.component {
@apply text-lg;
@apply bg-black;
}
...
❌Так НЕЖЕЛАТЕЛЬНО делать:
component.css
.component {
@apply text-lg bg-black;
}
...
8. Всегда используйте rem вместо px.
Стили всегда должен быть в значении rem, поскольку они относятся к размеру шрифта основного текста, который изменяется в зависимости от ширины экрана. Однако, такой подход НЕ ВСЕГДА УДОБЕН!
Это означает, что каждый элемент по умолчанию будет масштабироваться вверх и вниз по мере изменения окна.
Кроме того, вычисления в body означают, что любое значение пикселя из дизайна может быть легко преобразовано в эквивалентный rem в коде.
Например, отступ «192px» в верхней части элемента будет эквивалентен «12rem» в этой системе. Это полезно при определении значения rem.
✅Так надо делать:
component.css
.component {
margin-top: 10rem;
}
...
❌Так НЕЖЕЛАТЕЛЬНО делать:
component.css
.component {
margin-top: 100px;
}
...
Дополнительные замечания.
1. Попробуйте просто использовать классы TailwindCSS по умолчанию в HTML для макета (сетки и т.д.), Но используйте компоненты для элементов внутри сеток, например группа расширителей текста.
# Visual Studio Code Extensions
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss