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:
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.
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.
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.
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.
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!? ๐๐ผ๐๐ผ๐๐ผ