Designing with Tailwind CSS

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Explore a comprehensive 3.5-hour tutorial on designing with Tailwind CSS, covering essential topics from setup to advanced techniques. Learn the utility-first workflow, responsive design, and component extraction. Master hover, focus, and active styles, customize your design system, and optimize for production. Dive into practical exercises like structuring cards, working with SVG icons, and creating badges. Discover techniques for image handling, creating depth with shadows, and building responsive layouts. Develop interactive elements such as navbar toggles and dropdown menus, ensuring adaptability across devices. Gain hands-on experience in crafting efficient, responsive, and visually appealing designs using Tailwind CSS.

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.