Media is too big
VIEW IN TELEGRAM
5. Theming & Named Colors
Steve explains how to customize the color theme in Tailwind CSS. The default theme can be extended with new colors and shades of colors. The custom theme colors can be used in custom CSS classes or to override the existing primary and secondary colors. The lesson emphasizes the flexibility and extensibility of Tailwind CSS in terms of color customization.
#lesson
Steve explains how to customize the color theme in Tailwind CSS. The default theme can be extended with new colors and shades of colors. The custom theme colors can be used in custom CSS classes or to override the existing primary and secondary colors. The lesson emphasizes the flexibility and extensibility of Tailwind CSS in terms of color customization.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Styling & Customizing Spacing
Steve customizes a button with various properties such as background color, text color, padding, border, shadow, and rounding corners. Arbitrary values and measurements can be used by wrapping them in square brackets. Text sizing and spacing are also explained.
#lesson
Steve customizes a button with various properties such as background color, text color, padding, border, shadow, and rounding corners. Arbitrary values and measurements can be used by wrapping them in square brackets. Text sizing and spacing are also explained.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Styling a Modal Exercise
Students are instructed to style an alert/modal dialog that contains text and two buttons.
- https://tailwind-workshop.vercel.app/styling-an-alert
#lesson
Students are instructed to style an alert/modal dialog that contains text and two buttons.
- https://tailwind-workshop.vercel.app/styling-an-alert
#lesson
Media is too big
VIEW IN TELEGRAM
8. Spacing & Dividing
Steve explains how utility classes can easily add background colors, spacing, and other styles to elements without writing custom CSS. Composing multiple utility classes together can create custom utilities.
#lesson
Steve explains how utility classes can easily add background colors, spacing, and other styles to elements without writing custom CSS. Composing multiple utility classes together can create custom utilities.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Spacing & Dividing Exercise
Students are instructed to use the spacing utility classes to separate menu items.
- https://tailwind-workshop.vercel.app/space
#lesson
Students are instructed to use the spacing utility classes to separate menu items.
- https://tailwind-workshop.vercel.app/space
#lesson
Media is too big
VIEW IN TELEGRAM
10. Styling Pseudo-Classes with Variants
Steve demonstrates how to use pseudo-classes to apply different styles to elements based on their state, such as hover, active, and disabled.
#lesson
Steve demonstrates how to use pseudo-classes to apply different styles to elements based on their state, such as hover, active, and disabled.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Styling a Form Exercise
Students are instructed to use style a form using Tailwind CSS pseudo-classes.
- https://tailwind-workshop.vercel.app/form-state
#lesson
Students are instructed to use style a form using Tailwind CSS pseudo-classes.
- https://tailwind-workshop.vercel.app/form-state
#lesson
Media is too big
VIEW IN TELEGRAM
12. Tailwind Q&A
Steve answers questions about Tailwind CSS. Questions include how to utilize features of SASS, trade-offs of not using the cascade, and when to use the utility layer versus the component layer.
#lesson
Steve answers questions about Tailwind CSS. Questions include how to utilize features of SASS, trade-offs of not using the cascade, and when to use the utility layer versus the component layer.
#lesson
Media is too big
VIEW IN TELEGRAM
13. Form Improvements
Steve adds a few more enhancements to the form and demonstrates how to customize placeholder text, input cursors, and the mouse. Tailwind CSS plugins that can support new CSS features are also discussed.
#lesson
Steve adds a few more enhancements to the form and demonstrates how to customize placeholder text, input cursors, and the mouse. Tailwind CSS plugins that can support new CSS features are also discussed.
#lesson
Media is too big
VIEW IN TELEGRAM
14. Form Improvements Exercise
Students are instructed to improve the form's look by adding accent colors, placeholder styles, border and ring styles, and removing the default outline.
- https://tailwind-workshop.vercel.app/form-improvements
#lesson
Students are instructed to improve the form's look by adding accent colors, placeholder styles, border and ring styles, and removing the default outline.
- https://tailwind-workshop.vercel.app/form-improvements
#lesson
Media is too big
VIEW IN TELEGRAM
15. Peer Modifiers
Steve introduces "peer" and "group" modifiers, which style elements based on their relationship to other elements. The peer modifier only works with future siblings. Namespacing peer modifiers and decoration classes are also covered in this lesson.
#lesson
Steve introduces "peer" and "group" modifiers, which style elements based on their relationship to other elements. The peer modifier only works with future siblings. Namespacing peer modifiers and decoration classes are also covered in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Group Modifiers
Steve demonstrates group modifiers and compares them with peer modifiers. Group modifiers can have different variants, such as hover, to apply specific styles to elements within the group. Data attributes can also be used with groups to create more dynamic styling effects.
#lesson
Steve demonstrates group modifiers and compares them with peer modifiers. Group modifiers can have different variants, such as hover, to apply specific styles to elements within the group. Data attributes can also be used with groups to create more dynamic styling effects.
#lesson
Media is too big
VIEW IN TELEGRAM
17. Group Modifiers Exercise
Students are instructed to use group modifiers to add a hover style to the modal and a separate hover style to the button in the modal.
- https://tailwind-workshop.vercel.app/group-modifier
#lesson
Students are instructed to use group modifiers to add a hover style to the modal and a separate hover style to the button in the modal.
- https://tailwind-workshop.vercel.app/group-modifier
#lesson
Media is too big
VIEW IN TELEGRAM
18. Group Open Modifier
Steve demonstrates additional group modifiers. The group-open modifier can style details and summary elements based on an open or closed condition. Additional background colors and rounded corner styles are discussed as well.
#lesson
Steve demonstrates additional group modifiers. The group-open modifier can style details and summary elements based on an open or closed condition. Additional background colors and rounded corner styles are discussed as well.
#lesson
Media is too big
VIEW IN TELEGRAM
19. Before & After Pseudo Selectors
Steve demonstrates how the before and after modifiers add content before or after an element, and how they can be stacked and combined to create interactive effects.
#lesson
Steve demonstrates how the before and after modifiers add content before or after an element, and how they can be stacked and combined to create interactive effects.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Dark Mode
Steve implements dark mode using the dark variant and the Tailwind CSS configuration option for a dark parent class. By default, the variants will use the user's color preference. Other variants like selection and aspect ratio are also introduced in this lesson.
#lesson
Steve implements dark mode using the dark variant and the Tailwind CSS configuration option for a dark parent class. By default, the variants will use the user's color preference. Other variants like selection and aspect ratio are also introduced in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
21. Responsive Breakpoints
Steve uses the breakpoint variants to apply different styling rules at the predefined breakpoints. If a custom breakpoint is required, it can be added to the configuration file.
#lesson
Steve uses the breakpoint variants to apply different styling rules at the predefined breakpoints. If a custom breakpoint is required, it can be added to the configuration file.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Columns
Steve introduces the columns property, which is helpful for masonry layouts or multi-column text layouts. Options for controlling the columns include specifying the number of columns or the width of each column. Aspect ratios for images are also discussed in this lesson.
#lesson
Steve introduces the columns property, which is helpful for masonry layouts or multi-column text layouts. Options for controlling the columns include specifying the number of columns or the width of each column. Aspect ratios for images are also discussed in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
23. Columns Exercise
Students are instructed to use the the columns class to create a multi-column layout.
- https://tailwind-workshop.vercel.app/columns
#lesson
Students are instructed to use the the columns class to create a multi-column layout.
- https://tailwind-workshop.vercel.app/columns
#lesson
Media is too big
VIEW IN TELEGRAM
24. Flexbox
Steve introduces the Flexbox and Grid classes in Tailwind CSS and uses a playground to demonstrate the Flexbox classes. By default, the horizontal axis for layout is the main axis, and the vertical axis is the cross axis.
#lesson
Steve introduces the Flexbox and Grid classes in Tailwind CSS and uses a playground to demonstrate the Flexbox classes. By default, the horizontal axis for layout is the main axis, and the vertical axis is the cross axis.
#lesson
Media is too big
VIEW IN TELEGRAM
25. Flexbox Exercise
Students are instructed to use the Flexbox classes in Tailwind CSS to create horizontal and vertical layouts. Breakpoints should be added to adjust the design across different viewports.
- https://tailwind-workshop.vercel.app/flex
#lesson
Students are instructed to use the Flexbox classes in Tailwind CSS to create horizontal and vertical layouts. Breakpoints should be added to adjust the design across different viewports.
- https://tailwind-workshop.vercel.app/flex
#lesson