Hello Reader 👋🏻

I hope you're having a great start of the week. In the past few months we've been working really hard on a new Figma design kit that is built specifically for integration with Tailwind CSS. It solves a big problem when it comes to integrate a design into a web project, and that is having to write all of the styles and classes from the ground up. This is where Tailwind Figma comes into play.

Figma to Tailwind CSS

Other than all of the awesome Figma features, such as the smart use of variants that we used, what is interesting about this project is that EVERY color, typography, spacing, shadow, size is EXACTLY the same as the default utility classes from Tailwind CSS.

So yes, if a designer or you yourself use this Figma kit to build an app or a website, you don't need to write any extra classes outside the default ones that come from Tailwind CSS. Imagine coding everything right in your HTML markup file, without having to even open a CSS file.

​

The website that we designed and coded for Tailwind Figma which can be found on tailwind-figma.com was also designed using this Figma kit and wrote using Tailwind CSS. We only had to write 5 extra classes outside of the Tailwind CSS default ones, mostly for the YouTube presentation embed.

Figma variants and application UI

We really went crazy when it comes to component and section variants for Tailwind Figma. Many of the UI components, such as buttons, forms, sidebars, top bars all have tens of variants that you can use and easily change the colors and appearance of the components.

To better understand what this actually means, check out this YouTube video where Arnau (a freelance Figma designer and influencer) shows you what is actually happening:

27 hand-crafted application UI pages (dashboard interface)

Although the Figma design kit has most of its features when it comes to the UI elements and style guide, we also made sure to build a handful of application UI pages that you can use to prototype a fast presentation for your project or your clients.

​

Mobile and Tablet responsive screens included

Considering that over 56% of internet usage is now on mobile and tablet devices, we decided to build responsive screen examples for all of the 27 application UI pages and components inside Tailwind Figma. You can preview the tablet pages and mobile pages on Figma.

Roadmap

Everything you see now is only 30% of the Phase 1... and there are 3 phases for the roadmap of this project. Overall, everything in Figma will also have an equivalent in Tailwind CSS coded by us, and we will also release a dark version, marketing UI pages (landing pages, about pages etc), and e-commerce UI as well.

​

​Read more about the roadmap on the website.

Pricing and free community edition

The pricing plan is pretty straightforward:

• ​Figma design files only - $129 + VAT (for designers)
• ​Figma design files + pre-order Tailwind CSS code - $278 $189 + VAT (20% off) (for designers and developers)
• ​Pre-order Tailwind CSS code - $149 $119 (20% off) (for developers)​

There are two licenses: standard license and team license. Please read more the usage limitations on the FAQ page and the license page.

There is also a free community edition on Figma that you can duplicate and play around.

Conclusion

We really put everything into this project in terms of effort. I coded the website itself (tailwind-figma.com) and it was so fun! I could finally concentrate only on the coding part, without having to think about design or write a lot of CSS just to get things working.

There are many links and text in this email, but this is really how much it also offers and WILL offer in the future.

Please, reply to this email if you have any questions or feedback. I'm more than happy to help!

'Till next time ✌🏻

Zoltan