frontendmasters
FrontendMasters - Одна из самых лучших площадок для изучения Frontend. Видеокурсы ведут ведущие люди в этой отрасли.
Продолжительность
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" будет работать, если мы его напишем.
Что-то действительно полезное можно увидеть только во второй части последнего урока.