Zeplin and Tailwind CSS: A match made in heaven!

Zeplin is a cool web app / desktop app where you can upload your Sketch / Photoshop / XD designs and it can generate the CSS for you. This greatly speeds up the “cut up” process of turning designs into HTML and CSS.

Tailwind CSS is a utility CSS framework, that allows you to apply utility classes to rapidly achieve a custom design without repeating CSS over and over again. Because semantics are semantics and I prefer a better developer experience. I’m much happier now :)

While the CSS Zeplin spits out is good, it includes everything so if you simply copy and past all your components into your main.css, you could get the job done quickly but with a large and WET CSS file.

Zeplin also includes a style guide feature, whereby you can label and save common colours and text styles.

Recently, Zeplin opened up a feature called “extensions” whereby they expose JSON data for each element in your design to a JS function and your JS function can spit out whatever code it likes.

This is where the magic begins!

We can automatically generate Tailwind config and appropriate Tailwind classes for your config.

Step 1: Create Tailwind Config

Use Zeplin to add colors and text styles into your style guide. Then simply visit the style guide and copy the JS code generated into your Tailwind config file.

Step 2: Creating Tailwind Classes

Once you have colours and text styles in your style guide and in your Tailwind config, the generated classes will automatically be associated with your classes and components.

For example if I added a the color black to the style guide, and I clicked on a layer with black text, then it would generate the text-black class.

Simply click around on the various layers and see the HTML with Tailwind classes generated on the right.

How do I get started?

Update: It’s been added as an official extension — visit https://extensions.zeplin.io/5ae2d20017c57fd249c9876f to get started

That’s pretty much it. Go ahead, click a layer!