Simon Vrachliotis

Tailwind CSS Color Tokens

Take a deep dive on multiple approaches for controlling typographic settings on an element with Tailwind.

A Deep Dive in Tailwind Font Settings

Figma's Auto Layout feature makes designing layouts feel more like building with Flexbox.

Auto Layout in Figma

Master converting Figma designs to Tailwind CSS with near "pixel perfection". Learn HTML structure, design tokens, layouts, responsive design, and animations.



Tips and Techniques for 'Pixel Perfect' Figma to Tailwind CSS Conversions

Explore how Tailwind CSS fosters collaboration between developers and designers, enhancing UI design skills with utility classes and shared principles.








Unleash the Designer in You (with Tailwind CSS)

Learn to implement 'pixel-perfect' designs from Figma with responsive layouts, advanced CSS techniques, and Tailwind v4 migration in this workshop.

Pixel Perfect Figma to Tailwind

Simon Vrachliotis highlights TailwindCSS for seamless designer-developer collaboration, emphasizing rapid prototyping and efficient communication.

Unleashing Designers with Tailwind CSS

Learn how to create a stunning text over image effect using mix blend modes.

Mix Blend Modes

Fluid Hover Cards with Tailwind CSS

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.

Motion Safe and Motion Reduce Modifiers

Exploring the has Utility in Tailwind CSS

Text and Image Clipping Effects

Simplify your Tailwind CSS code by styling direct children from the parent element.

Direct Children Selector in Tailwind CSS

Learn how to create an engaging hamburger menu animation with Tailwind CSS, improving user experience and adding a touch of fun flair.

Hamburger Menu Animation

Learn how to create glassmorphism effects using the backdrop blur in Tailwind CSS and achieve realistic translucent credit card designs.

Creating Glassmorphism Effects 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.

Resources