frontendmasters
FrontendMasters - Одна из самых лучших площадок для изучения Frontend. Видеокурсы ведут ведущие люди в этой отрасли.
Tailwind CSS, v2
Продолжительность
4 ч 28 мин
Категория
CSS
Количество уроков
30 Видео
Дата добавления
18 июн. 2025 г., 01:20
Язык
Английский
Дата выхода
13 июн. 2025 г., 01:00
Дата обновления
5 авг. 2025 г., 09:04
Этот насыщенный практический воркшоп поможет вам пройти путь от нуля до готового к продакшену проекта с использованием Tailwind CSS версии 4. Вы освоите подход utility-first, научитесь работать с цветовыми темами OKLCH, использовать container queries, строить адаптивные макеты, применять варианты взаимодействия (group/peer/has), а также добавлять анимации и создавать настоящие компоненты, которые сразу можно использовать в своих проектах.
В ходе воркшопа вы научитесь:
- Создавать любые дизайны прямо в разметке с помощью utility-first подхода Tailwind
- Реализовывать адаптивные макеты на основе flexbox, grid, sub-grid и container queries
- Строить доступные, интерактивные компоненты с использованием вариантов group, peer и has, а также состояний ARIA и data-атрибутов
- Настраивать семантичные дизайн-токены, цветовые темы на OKLCH и поддержку тёмного режима
- Расширять Tailwind с помощью собственных плагинов, утилит и анимаций
Посмотреть больше
Удален по просьбе правообладателя
-
Урок 1. 00:10:38Introduction
-
Урок 2. 00:05:43How Tailwind CSS Works
-
Урок 3. 00:05:26Using CSS Layers
-
Урок 4. 00:02:06Configuration & Variants
-
Урок 5. 00:03:05Tailwind CSS Anti-Patterns
-
Урок 6. 00:07:02Course Setup
-
Урок 7. 00:11:10Styling a Button
-
Урок 8. 00:08:05Styling Buttons Exercise
-
Урок 9. 00:06:17Borders, Outlines, & Rings
-
Урок 10. 00:06:36Card Layout Exercise
-
Урок 11. 00:05:44Spacing Between Elements
-
Урок 12. 00:16:56Styling a Form Input
-
Урок 13. 00:06:16Form Validation Style
-
Урок 14. 00:04:14Focus States
-
Урок 15. 00:04:30Checkbox focus-within
-
Урок 16. 00:08:46Parent State Styling
-
Урок 17. 00:11:53Has Utility Class
-
Урок 18. 00:09:36Required Field Indicator
-
Урок 19. 00:13:32Has Utility Exercises
-
Урок 20. 00:14:09File Tree Challenge
-
Урок 21. 00:09:39Input with Button Component
-
Урок 22. 00:10:07Flexbox
-
Урок 23. 00:16:01Flexbox Nav Layout Exercise
-
Урок 24. 00:17:25Grid
-
Урок 25. 00:09:23Grid Exercise
-
Урок 26. 00:11:34Container Queries
-
Урок 27. 00:06:12Dark Mode
-
Урок 28. 00:11:13Tailwind Tools
-
Урок 29. 00:05:50Transitions & Animations
-
Урок 30. 00:09:04Wrapping Up
https://stevekinney.com/courses/tailwind
Авторы - frontendmasters, Steve Kinney
Steve Kinney
Стив - архитектор фронтенда в компании Temporal. Ранее он занимал аналогичную должность в Twilio и SendGrid. Стив также является основателем и почетным директором программы обучения фронтенд-разработке в Turing School for Software and Design в Денвере, Колорадо — это некоммерческая программа подготовки разработчиков. В прошлой жизни Стив был учителем в государственных школах Нью-Йорка, где он преподавал специальное образование и веб-разработку в
Комментарии
Каких-то стратегий и подходов, что улучшит/сделает более удобным то, что написано в доках по tailwind я не увидел, т.е. тут уровень обзора документации по tw и проверка, а действительно ли класс "text-red" будет работать, если мы его напишем.
Что-то действительно полезное можно увидеть только во второй части последнего урока.