Pixel Perfect Figma to Tailwind

You’re a developer tasked with converting visual designs to HTML and CSS.

You’re a confident developer already familiar with Tailwind CSS, but you don’t necessarily perceive yourself as having a “good eye for design”.

You want to improve the quality and fidelity of your design implementations — getting as close as possible to “pixel perfect” conversions.

If you see yourself in this description… this workshop is definitely for you!

The design
In this workshop, you’ll implement a redesign of the Epic Stack Homepage, starting from scratch.

You’ll work from a Figma file where the homepage is designed at 5 different screen sizes

Topics the workshop covers
Throughout this hands-on workshop, you will learn how to

Approach a new responsive design conversion, from the ground up
Leverage modern Figma features, such as autolayout and Dev Mode
Translate Figma “Design Tokens” to the Tailwind config
Leverage CSS layout tools like Grid and Flexbox to achieve complex designs
Create CSS-only Keyframe animations on page load
Manage dynamic styles in a Tailwind JIT-friendly way
In the process, you’ll develop acute attention to details around typography and spacing. You’ll become fluent with Figma’s Dev Mode, and confident in your ability to build high-fidelity implementations.

You will even do “screenshot overlay” tests to match the design against our build — that’s how pixel perfect we’re aiming for!

Here's why you should register for the workshop
By the end of this workshop, you will

Have the confidence in your ability to implement designs with high precision
Have a repeatable process you can use to implement any design
Have a good understanding of how designers think, and be able to better collaborate with design teams
Get comfortable using CSS Grid to build advanced layouts
Understand how to manage dynamic styles in a Tailwind JIT-friendly way
This workshop is your chance to take your UI design skills to the next level.

You’ll spend the day with like-minded developers looking to improve their craft.

You’ll gain a sense of ownership and pride over the design quality of the websites and applications you’re working on.

What to expect from Simon's workshop
You’ll be interacting and participating a lot throughout a series of hands-on exercises.

This is no boring “webinar” lecture where you listen to an instructor drone on for hours straight.

Simon is an experience educator, and formally trained school teacher. He knows how to create engaging and entertaining learning environments!

Over the years, Simon has converted hundreds of designs to Tailwind. He is a former member of the Tailwind Labs core team, where he has been teaching Tailwind CSS to thousands of developers.

You’ll be hanging out with Simon for the whole day — with ample time to ask questions and have meaningful conversations.

Required experience
This workshop is intended for developers who are already familiar with Tailwind CSS.

If you’re not, great free resources to quickly up-skill are the official Tailwind docs and YouTube channel. The From Zero to Production video series in particular is a great introduction to Tailwind.

Basic familiarity with JavaScript and React is also beneficial, since we’ll be using a React + Vite app to build our UI.

Again, not critical as the workshops stays firmly focused on HTML and CSS.

Github Link For Code and exercises