Главная страница Категория css Компоненты Tailwind с несколькими стилями

Компоненты Tailwind с несколькими стилями

Name: Компоненты Tailwind с несколькими стилями
Price: 13 USD
Rating: 5 (15 reviews)

Multi-Style Tailwind Components

protailwind.com (Simon Vrachliotis)

★ 5 (всего оценок - 15)

Начать Сейчас

Продолжительность

1 ч 19 мин

Категория

CSS

Количество уроков

38 Видео

Дата добавления

18 окт. 2023 г., 18:40

Язык

Английский

На этом мастер-классе вы узнаете, как наилучшим образом создавать и управлять несколькими вариантами стилей для ваших компонентов пользовательского интерфейса, используя Tailwind CSS.

Движок Just-in-Time в Tailwind CSS не поддерживает динамические имена классов. Это приводит к чрезмерно сложным условным операторам и вложенным тернарным операторам, которые трудно отслеживать и еще сложнее добавлять новые варианты

На протяжении этого мастер-класса вы построите и практиковать повторяемый процесс для выявления, рефакторинга и реализации динамических наборов стилей с использованием Tailwind CSS.

Темы, которые мы рассмотрим

Этот мастер-класс разделен на три раздела: работа с кнопками, модальными окнами и рефакторинг демонстрационного приложения календаря из Мастер-класса. Эти разделы взаимодействуют друг с другом, исследуя разные способы определения и поддержания вариантов стилей для ваших компонентов.

Создание динамических вариантов размера, формы и цвета для увеличения гибкости
Настройка плагина Tailwind IntelliSense для VS Code для оптимизации вашего рабочего процесса разработки
Реализация асинхронно-готового доступного модального окна с настраиваемыми анимированными переходами
Рефакторинг сложной условной логики в дискретные состояния

К концу этого мастер-класса у вас будет:

способность расширять ваши компоненты пользовательского интерфейса для поддержки нескольких вариантов стилей с использованием Tailwind CSS.
удобство в определении и выполнении повторяемого процесса рефакторинга сложных стилей компонентов в более чистую и легко поддерживаемую структуру кода.

Посмотреть больше

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:00:34

01. Multi-Style Components Workshop Welcome
Урок 2. 00:01:05

02. Creating Dynamic Button Variants with Tailwind CSS
Урок 3. 00:01:04

03. Extract Common Base Classes
Урок 4. 00:02:30

04. Identifying Common Classes
Урок 5. 00:03:17

05. Customizing the Tailwind IntelliSense Plugin for VS Code
Урок 6. 00:02:16

06. Simplify Button Styling for All Possible Variants
Урок 7. 00:04:12

07. Dynamic Styling with the cx() Function
Урок 8. 00:00:38

08. Implement Size and Shape Variants
Урок 9. 00:06:01

09. Creating Dynamic Style Variants
Урок 10. 00:01:40

10. Separating Tone & Intensity Concerns
Урок 11. 00:04:26

11. Implementing Dynamic Tone & Intensity Styles
Урок 12. 00:00:20

12. Improve Accessibility and Usability with Headless UI
Урок 13. 00:01:40

13. Convert a Modal to a Headless UI Dialog
Урок 14. 00:02:31

14. Refactoring to use Headless UI
Урок 15. 00:01:11

15. Update the Modal to Support Dynamic Contents
Урок 16. 00:02:52

16. Refactoring for Dynamic Modal Contents
Урок 17. 00:00:42

17. Add Multiple Modal Sizes
Урок 18. 00:01:31

18. Dynamic Modal Sizes
Урок 19. 00:01:01

19. Implement Modal Background Tints
Урок 20. 00:01:45

20. Add Modal Background Color Support
Урок 21. 00:00:46

21. Transitioning Modals with Headless UI
Урок 22. 00:03:24

22. Animating Customize Modals
Урок 23. 00:00:45

23. Customizing Modal Slide-In Animation
Урок 24. 00:02:24

24. Animate Modal Panel Slide-In
Урок 25. 00:01:25

25. Add Support for Async Tasks in the Modal
Урок 26. 00:03:12

26. Conditionally Display a Loading Animation
Урок 27. 00:02:58

27. Updating State After a Transition
Урок 28. 00:01:27

28. Improve Modal Behavior During Async Operation
Урок 29. 00:01:33

29. Disabling Buttons and Modal Exits While Loading
Урок 30. 00:02:25

30. Modal State Management Patterns
Урок 31. 00:03:17

31. Calendar Style Complexity
Урок 32. 00:01:15

32. Identify Possible Calendar States
Урок 33. 00:01:32

33. Listing the Calendar States
Урок 34. 00:01:25

34. Porting Dynamic Styles to Specific States
Урок 35. 00:01:57

35. Create Styles for the Unique States
Урок 36. 00:02:16

36. Apply Styles for a Specific State
Урок 37. 00:05:44

37. Implementing the getStyles Function
Урок 38. 00:00:23

38. Multi-Style Tailwind Components

https://github.com/pro-tailwind/course-multi-style-components/

Автор - protailwind.com (Simon Vrachliotis)

protailwind.com (Simon Vrachliotis)

Овладейте искусством использования Tailwind CSS.Поднимитесь на более высокий уровень, изучив продвинутые концепции и шаблоны Tailwind. Освоитесь с многочисленными темами, стилями и компонентами пользовательского интерфейса для различных проектов.