Play all

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

Description:

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.

Designing with Tailwind CSS

Add to list

#Programming #Web Development #HTML & CSS #Tailwind #Web Design #Responsive Web Design #User Experience Design #User Interface Design #Design Systems #PostCSS