Pixel Perfect Figma to Tailwind

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
• Prepare for the new Tailwind v4 CSS-only configuration 🔮

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
• Be ready to hit the ground running when Tailwind v4.0 ships

This workshop is your chance to take your UI design skills to the next level.

You’ll spend two days 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 two days — 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.

Important Note

Depending on the questions asked during the workshop, or necessary changes in the material, the actual content of the workshop could differ from the above-mentioned topics.