YoVDO

Designing with Tailwind CSS

Offered By: YouTube

Tags

Tailwind Courses Web Development Courses Responsive Web Design Courses Design Systems Courses PostCSS Courses

Course Description

Overview

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.


Taught by

Adam Wathan

Related Courses

Building a Responsive Single-Page Design with PostCSS
LinkedIn Learning
Next Generation CSS Design with PostCSS and CSSNext
LinkedIn Learning
現役エンジニアのためのWebpack環境構築入門 with Babel|Sass|Eslint
Udemy
Learn Laravel Mix
Laracasts
PostCSS Crash Course
Traversy Media via YouTube