Start with the free articles, talks, and tutorials. The Pro workshops at the bottom go deeper for the complete, hands-on path.
Articles
2FreeTips and Techniques for 'Pixel Perfect' Figma to Tailwind CSS Conversions
Master converting Figma designs to Tailwind CSS with near "pixel perfection". Learn HTML structure, design tokens, layouts, responsive design, and animations.
Written bySimon VrachliotisTime to read~ 3 minutesUnleash the Designer in You (with Tailwind CSS)
Explore how Tailwind CSS fosters collaboration between developers and designers, enhancing UI design skills with utility classes and shared principles.
Written bySimon VrachliotisTime to read~ 3 minutes
Talks & Tips
11Free
Unleashing Designers with Tailwind CSS
Simon Vrachliotis highlights TailwindCSS for seamless designer-developer collaboration, emphasizing rapid prototyping and efficient communication.
Watch
A Deep Dive in Tailwind Font Settings
Take a deep dive on multiple approaches for controlling typographic settings on an element with Tailwind.
Watch tip
Auto Layout in Figma
Figma's Auto Layout feature makes designing layouts feel more like building with Flexbox.
Watch tip
Mix Blend Modes
Learn how to create a stunning text over image effect using mix blend modes.
Watch tip
Motion Safe and Motion Reduce Modifiers
Learn how to make your web animations respect user preferences by using Tailwind CSS's motion-safe modifier to handle prefers-reduced-motion in OS.
Watch tip
Exploring the has Utility in Tailwind CSS
Watch tip
Text and Image Clipping Effects
Watch tip
Direct Children Selector in Tailwind CSS
Simplify your Tailwind CSS code by styling direct children from the parent element.
Watch tip
Hamburger Menu Animation
Learn how to create an engaging hamburger menu animation with Tailwind CSS, improving user experience and adding a touch of fun flair.
Watch tip
Creating Glassmorphism Effects with Tailwind CSS
Learn how to create glassmorphism effects using the backdrop blur in Tailwind CSS and achieve realistic translucent credit card designs.
Watch tip
Adding a Shadow to an SVG Icon with Tailwind CSS
Learn how to add a shadow that follows the edges of an SVG icon using Tailwind CSS DropShadow, giving your icons a smoother and more visually appealing look.
Watch tip
