Что выбрать
Теперь вы знаете несколько способов оформить элемент с помощью Tailwind. Вот когда какой использовать:
| Что нужно | Что использовать | Пример |
|---|---|---|
| Оформить элемент (в большинстве случаев) | утилитные классы в HTML | p-4 text-center |
| Значение, которое нужно только один раз и которого нет в теме | произвольное значение | w-[350px] |
| Цвета, шрифты и другие значения вашего дизайна, которые используются во многих местах | тема: @theme | --color-brand-500 |
| Один и тот же список классов у многих элементов | шаблон или компонент, если они есть, или изменение всех мест сразу; иначе — класс с @apply в @layer components | .btn |
| CSS, для которого в Tailwind нет класса, в том числе с вариантами | @utility | bg-stripes |
И ещё два совета:
- Не создавайте класс для всего подряд. Если бы каждый элемент получил собственный класс с
@apply, вы вернулись бы к написанию правил, как в курсе CSS, только другим способом. Вы потеряли бы то, что делает Tailwind удобным: вид элемента виден прямо в HTML, и не нужно придумывать имена. Оставьте@applyдля небольших частей, которые часто повторяются: кнопок, значков, полей форм. - Произвольному значению, которое встретилось дважды, место в теме. Квадратные скобки хороши для разового случая, например для точной ширины логотипа. Но когда то же значение появляется снова, оно становится частью вашего дизайна: дайте ему имя в
@theme.
На нашей странице есть два произвольных значения, которым место в теме. Когда её делали, кто-то скопировал из дизайна приюта два цвета в виде произвольных значений: фон первого экрана bg-[#ffedd5] и text-[#ea580c] у ссылки «Поддержать». Присмотритесь: #ea580c — это наш brand-600. А #ffedd5 — светлый оттенок того же оранжевого, поэтому он тоже относится к фирменным цветам, как brand-100.
Задание
- 1
В
@themeдобавьте цвет--color-brand-100: #ffedd5;. - 2
В элементе
sectionпервого экрана заменитеbg-[#ffedd5]наbg-brand-100. - 3
В ссылке «Поддержать» в шапке замените
text-[#ea580c]наtext-brand-600.