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 в Денвере, Колорадо — это некоммерческая программа подготовки разработчиков. В прошлой жизни Стив был учителем в государственных школах Нью-Йорка, где он преподавал специальное образование и веб-разработку в
Категории
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Другие материалы в этой категории
TailwindCSS
На этом семинаре вы узнаете, как использовать Tailwind CSS для создания адаптивных дизайнов, поддержки темной темы и стилизации компонентов в ваших веб-приложениях. Вы также научитесь расширять Tailwind CSS для создания собственных компонентов и утилит.
Мастерство в Tailwind
Tailwind Mastery
Tailwind CSS стал одним из самых популярных способов стилизации современных веб-приложений, и это не случайно. Его API позволяет разработчикам чувствовать себя невероятно продуктивными, и поскольку это всего лишь набор тщательно продуманных CSS-классов, вы можете использовать его полностью внутри ваших компонентов фронтенда или HTML-шаблонов, не прибегая к изучению новых инструментов - даже не открывая отдельных файлов.В этом курсе вы научитесь T
Безупречный перевод макетов Figma в Tailwind
Pixel Perfect Figma to Tailwind
Этот мастер-класс разработан для того, чтобы помочь вам достичь "пиксельного совершенства" в реализации дизайна, устраняя разрыв между дизайном и разработкой. В течение мастер-класса вы пройдете через важные этапы - от анализа дизайнов в Figma до внедрения адаптивных макетов и изучения передовых техник CSS.
Каких-то стратегий и подходов, что улучшит/сделает более удобным то, что написано в доках по tailwind я не увидел, т.е. тут уровень обзора документации по tw и проверка, а действительно ли класс "text-red" будет работать, если мы его напишем.
Что-то действительно полезное можно увидеть только во второй части последнего урока.