Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Build User Interfaces by Composing CSS Utility Classes with Tailwind

via egghead.io

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!

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

Reviews

4.5 rating at egghead.io based on 257 ratings

Start your review of Build User Interfaces by Composing CSS Utility Classes with Tailwind

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.