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

YouTube

Designing with Tailwind CSS

via YouTube

Overview

Prepare for a new career with $100 off Coursera Plus
Gear up for jobs in high-demand fields: data analytics, digital marketing, and more.
This course teaches learners how to design responsive websites using Tailwind CSS. The learning outcomes include setting up Tailwind and PostCSS, implementing the Utility-First Workflow, creating responsive designs, customizing design systems, and optimizing for production. Students will also acquire skills in composing utilities, extracting reusable components, working with SVG icons, and building various UI elements like cards, badges, and navigation bars. The course employs a hands-on teaching method with practical exercises and demonstrations. It is intended for web developers, designers, and anyone interested in learning modern CSS frameworks for web design.

Syllabus

Designing with Tailwind CSS: Setting up Tailwind and PostCSS.
Designing with Tailwind CSS: The Utility-First Workflow.
Designing with Tailwind CSS: Responsive Design.
Designing with Tailwind CSS: Hover, Focus, and Active Styles.
Designing with Tailwind CSS: Composing Utilities with @apply.
Designing with Tailwind CSS: Extracting Reusable Components.
Designing with Tailwind CSS: Customizing Your Design System.
Designing with Tailwind CSS: Optimizing for Production with Purgecss.
Designing with Tailwind CSS: Structuring a Basic Card.
Designing with Tailwind CSS: Making Text Content Feel Designed.
Designing with Tailwind CSS: Working with SVG Icons.
Designing with Tailwind CSS: Designing a Badge.
Designing with Tailwind CSS: Cropping and Positioning Images.
Designing with Tailwind CSS: Locking an Image to a Fixed Aspect Ratio.
Designing with Tailwind CSS: Creating Depth with Shadows and Layers.
Designing with Tailwind CSS: Building a Navbar Layout with Flexbox.
Designing with Tailwind CSS: Toggling the Navbar Links on Mobile.
Designing with Tailwind CSS: Making the Navbar Responsive.
Designing with Tailwind CSS: Styling a Dropdown Menu.
Designing with Tailwind CSS: Positioning the Dropdown Area.
Designing with Tailwind CSS: Making the Dropdown Interactive.
Designing with Tailwind CSS: Adapting the Dropdown for Mobile.

Taught by

Adam Wathan

Reviews

Start your review of Designing with Tailwind CSS

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.