This repo contains notes on Simon Vrachliotis's collection Build User Interfaces by Composing CSS Utility Classes with Tailwind. These notes follow along with the collection and guide you as you install, configure, and create components using: Tailwind CSS
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!
Swiss front-end designer and developer based on Sydney's Northern Beaches. Proud father of two. Surf, basketball, ukulele. Love learning, love teaching.
Other Egghead content created by Simon
Also find Simon on Twitter
- 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