Build User Interfaces by Composing CSS Utility Classes with Tailwind
Offered By: egghead.io
Course Description
Overview
Building your web app with a fully customized design is a daunting task. If you aren't a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.
Tailwind provides us with highly composable utility classes but leaves the design specification entirely up to the user to maintain that custom look and feel to your app.
In this course, you'll learn how to handle responsive breakpoints, how to trigger specific element states, how to handle specificity, how to keep your bundle file size in check, and how to seamlessly extend Tailwind with your own custom utility classes.
By the end of the course, you should have a firm understanding of how Tailwind works and be able to create your own tailor-made design system and utility class CSS toolkit for your next project!
Tailwind provides us with highly composable utility classes but leaves the design specification entirely up to the user to maintain that custom look and feel to your app.
In this course, you'll learn how to handle responsive breakpoints, how to trigger specific element states, how to handle specificity, how to keep your bundle file size in check, and how to seamlessly extend Tailwind with your own custom utility classes.
By the end of the course, you should have a firm understanding of how Tailwind works and be able to create your own tailor-made design system and utility class CSS toolkit for your next project!
Syllabus
- Composing CSS Utility Classes with Tailwind Course Introduction
- Compile Tailwind to CSS with gulp
- Create Custom Utility Classes in Tailwind
- Apply mobile-first Responsive Classes in Tailwind
- Style Elements on hover and focus with Tailwind’s State Variants
- Change Styles on Multiple Elements with Tailwinds group-hover
- Control What Variations are Generated for Each Utility Class Module in Tailwind
- Keep Specificity in Check when Working with Tailwind
- Extending Tailwind with Responsive Custom Utility Classes
- Abstract Utility Classes to BEM Components in Tailwind
- Create a Responsive Card Component by Composing Tailwind's Utility Classes
- Customize Tailwind’s Naming Convention for Generated Utility Classes
- Removing Unused CSS in Tailwind with PurgeCSS
Taught by
Simon Vrachliotis
Related Courses
Architect an Extensible Digital Garden with Next.js, Tailwind, and Nxegghead.io Build a Responsive Navbar with Tailwind
egghead.io Build and Style a Dropdown in Tailwind
egghead.io Craft Scalable, Custom-Made Interfaces with Tailwind CSS
egghead.io Design and Implement Common Tailwind Components
egghead.io