Table of Contents
IntroductionSteve Kinney introduces Tailwind CSS and discusses discovering Tailwind CSS as a solution for writing CSS more efficiently. Tailwind CSS is a utility-first CSS framework classes that can be composed to build any design, directly in markup. The Tailwind CSS playground will be used to code and test the exercises throughout the course.
What is Tailwind CSSSteve explains the purpose of a utility-first CSS framework like Tailwind CSS. Tailwind CSS can increase productivity and the ability to add customizations. Questions about using Tailwind, including the level of CSS knowledge required and how it compares to other CSS libraries, are also addressed in this lesson.
Utility First CSS & LayersSteve discusses the basics of Tailwind CSS and explains its philosophy. The Tailwind CSS playground is helpful for experimentation, and the course website provides information about tools like Tailwind IntelliSense and Prettier. CSS layers are introduced and help encapsulate styles and manage specificity. Tailwind CSS ships with a base, components, and utilities layer.
Base StylesSteve demonstrates the base styles within Tailwind and how to add core styles to the base layer using utility classes and the @apply function. Using a theme in Tailwind CSS, including using predefined colors and creating custom color classes, is also covered in this lesson.
Theming & Named ColorsSteve 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.
Styling & Customizing SpacingSteve 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.
Styling a Modal ExerciseStudents are instructed to style an alert/modal dialog that contains text and two buttons.
Spacing & DividingSteve 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.
Spacing & Dividing ExerciseStudents are instructed to use the spacing utility classes to separate menu items.
Styling Pseudo-Classes with VariantsSteve demonstrates how to use pseudo-classes to apply different styles to elements based on their state, such as hover, active, and disabled.
Styling a Form ExerciseStudents are instructed to use style a form using Tailwind CSS pseudo-classes.
Tailwind Q&ASteve 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.
Form ImprovementsSteve 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.
Form Improvements ExerciseStudents are instructed to improve the form's look by adding accent colors, placeholder styles, border and ring styles, and removing the default outline.
Peer ModifiersSteve 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.
Group ModifiersSteve 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.
Group Modifiers ExerciseStudents 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.
Group Open ModifierSteve 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.
Before & After Pseudo SelectorsSteve 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.
Dark ModeSteve 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.
Responsive BreakpointsSteve 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.
ColumnsSteve 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.
Columns ExerciseStudents are instructed to use the the columns class to create a multi-column layout.
FlexboxSteve 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.
Flexbox ExerciseStudents 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.
GridSteve explores the grid classes in Tailwind CSS and compares them with the Flexbox classes. The grid playground is used to experiment with the layout classes justify, align, place, content, and items.
Creating a Page LayoutSteve demonstrates how to create a grid layout using Tailwind CSS. The HTML structure uses header, sidebar, main, and footer elements. CSS grid properties like grid-template-rows and grid-template-columns are applied, and Tailwind's responsive breakpoints are used to adjust the layout for different screen sizes.
Additional Tailwind CSS Features
Animations & Useful TricksSteve demonstrates the pre-defined animation classes like a pulse for creating loading indicators or notifications. The animation classes can be combined with transitions and transforms to display indicators based on an empty state. Copying content and screen reader-specific classes are also demonstrated in this lesson.
PluginsSteve explains that plugins in Tailwind CSS are a way to package up functionality that can be added to the build system. Typography and container query plugins are demonstrated. Tailwind CSS configuration for plugins is also explained in this lesson.
Wrapping UpSteve wraps up the course by answering Tailwind CSS questions, including important features, considerations for building for production, tools in the Tailwind ecosystem, building a custom design system with Tailwind CSS and Figma, using CSS variables, and handling scrolling panels within a grid container.