Познакомился c Tailwind CSS

04.03.2021

Как-то и где-то мне попался на глаза курс BeginnerTailwind и я решил уже наконец поближе познакомиться с таким явлением от мира верстки как Tailwind CSS.

---

На лендинге проекта нас сразу встречает уведомление, что мы можем получить скидку в 70%, автор курса поддерживает паритетный принцип установки цен. На момент написания поста, цена на курс, с учётом скидки равна $14.10:

Далее, нам сообщают что на курсе будем делать…лендинг на котором сейчас находимся. Забегая вперед, могу сказать, что будут расхождения с оригиналом, учитывая, что курс вышел уже давно, но в целом итоговый результат будет очень похож.

Курс делится на две части:

• Сначала нам рассказывают о базовых особенностях Tailwind CSS (цвета, типографика, позиционирование). Демонстрация происходит в Codepen, автор делает не особо связанные друг с другом элементы - блоки, кнопки, заголовки, тем самым подготавливая нас к реальной практике;
• Во второй части дело принимает серьезный оборот и с помощью npm и parcel подготавливается проект, который будет верстаться в настоящем текстовом редакторе и запускаться локально.

В целом, начиная со второй части, автор начинает по кусочкам, «на глаз», собирать свой собственный лендинг, блок за блоком, получая в итоге готовый результат.

Мне показалось неинтересным и бессмысленным просто повторять работу автора, это всё равно что просто скопировать его код с Github и положить в свой репозиторий. Я решил сделать свой лендинг с помощью Tailwind CSS. Получился шуточный сайт по продаже курсов для начинающих web-разработчиков. Конечно, идеи некоторых элементов я позаимствовал с лендинга Beginner Tailwind и дизайн "от меня" оставляет желать лучшего, но в любом случае для пользы дела лучше что-то сделать самому, своими руками, чем просто повторять за автором «один в один».

Что понравилось в курсе

• Видео расположено на сторонней платформе, которая изначально предназначалась для публикации учебного видео, и работает без запинок на любых устройствах;
• Автор понятно и адекватно объясняет материал, можно сказать что курс рассчитан на любого, кто знает что такое html и css;
• CSS Grid. Здесь показано как использовать Grid, и благодаря Tailwind CSS это делается очень просто. Ещё для меня было полезным открытием, то что блоки в Grid выравниваются по максимальной высоте друга друга, уже есть идеи где это можно применить у себя;
• Responsive. Проект делается с учетом размера экранов различных устройств, опять же таки благодаря магии Tailwind CSS.

Недостатки

Не могу решить, что именно мне не понравилось, так как явных недостатков я не увидел, всё понравилось. Курс идет всего 9 часов и нет ощущения что слишком затянут.

Вердикт

Курс рекомендую к изучению, тем более, что Tailwind CSS уже давно ворвался в мир Laravel и всеми там очень любим. Как минимум, будет удобнее и проще делать свои pet-projects или дорабатывать под свои нужны стартовые пакеты авторизации Laravel Breeze или Laravel JetStream.

Об авторе

---