5 Reasons why you need to build design systems based on Tailwind CSS

For the past couple of months I’ve been working on a meditation web app built with Sveltekit and Tailwind.

The ease of customizing css classes and themes with Tailwind completely changed how I would implement a design system as a product designer.

Here are the reasons why, if the front end of your project is built with Tailwind, you should also build the design system based on it:

1. (Almost) Everybody is using Tailwind

If your project is built using a modern javascript framework such as Vue, Next, React, Sveltekit etc. chances are that Tailwind is also used along with it.

And even if your project is built with vanilla CSS, Tailwind is still a very solid foundation for organizing your design system.

2. Direct control of how the design system is implemented

By using Tailwind as the base for your design system, you are specifying how the style should be coded directly, and every time the class is called it will appear exactly the same.

3. Easy to update

I know, when you have more and more of the design system built out, it may start to feel as sacred as the 10 commandments (except there’s probably hundreds of them in your design system 😂😂😂).

The truth is, how it looks in Figma can be different from how it looks in production. I constantly change up my font and color definitions, and in Tailwind it’s extremely easy to update or add new styles.

4. No ringing the developer's neck

Like the above point, when something doesn’t look right, you can very easily point out which element is incorrect, and the correct way - in code - that it should be.

For the developer, it is also easy to go to the Tailwind config file and change a few lines of code and affect changes throughout the project.

5. Easy to rapid prototype

By designing the design system based on Tailwind, you and the developer can have the Tailwind theme built first, then utilize prebuilt components to quickly prototype pages not only with interactions, but also on brand. How cool is that!? 👍🏼👍🏼👍🏼