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

egghead.io

Design with Tailwind CSS Masterclass

via egghead.io

Overview

Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off
One annual plan covers every course and certificate on Coursera. 40% off for a limited time.
Get Full Access
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.
There are options. You can turn to a full-blown CSS framework like Bootstrap to help build your app. But, out of the box, you end up building an app that people will look at and say, "Hey there, nice Bootstrap app."
So if you want a fully custom design, you are back at step 1.
There's a middle way. An approach that gives you the freedom to apply your custom design, but in a way that greatly simplifies the CSS, providing you with core functionality without applying heavily opinionated design to your app.
This is Tailwind, a utility-first CSS framework for rapidly building custom user interfaces.
Design with Tailwind CSS is a series that teaches you how to build fully responsive, professionally designed UIs from scratch using Tailwind CSS.
Together we’ll build Workcation, a property rental app loaded with interesting details that will help you master Tailwind in no time.

Syllabus

  • Set up Tailwind and PostCSS
  • The Tailwind Utility-First Workflow
  • Make Styles Responsive in Tailwind
  • Conditionally Style Elements with Tailwind Variants on Hover and Focus
  • Compose Tailwind Utilities with @apply
  • Extract Reusable Tailwind Components
  • Customize the Tailwind Design System
  • Remove unused CSS with Purgecss
  • Structure a Basic Card in Tailwind
  • Design Text in a Tailwind Card to Emphasize Important Content
  • Style SVG Icons with Tailwind Utility Classes
  • Use Tailwind to Design a span that Looks like a Badge
  • Crop and Position Images with Tailwind object-fit Utilities
  • Lock an Image to a Fixed Aspect Ratio with Percentage-based Padding in Tailwind
  • Create Depth in a Tailwind Component with Shadows and Layers
  • Build a Navbar Layout using Tailwind and Flexbox
  • Toggle Navar Menu Links in Tailwind with Vue
  • Prefix Tailwind Utility Classes with Breakpoints to Make a Responsive Navbar
  • Style the Basic Dropdown Elements with Tailwind
  • Use Absolute Positioning to Position a Tailwind Styled Dropdown Area in a Navbar
  • Make a Tailwind Styled Dropdown Interactive
  • Redesign a Dropdown List for Mobile with Tailwind

Taught by

Adam Wathan

Reviews

Start your review of Design with Tailwind CSS Masterclass

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.