Building a design system with Tailwind and Storybook
If you don’t already know what a design system is, Storybook tutorial on design system is a good place to start.
In short, design systems contain reusable UI components that help teams build complex, durable, and accessible user interfaces across projects. Storybook is a tool for us to do just that.
Our experience in this process as follows:
1, Generate full Tailwindcss configuration, then matching it with design tokens
We need to fine tune colors, spacing, font sizes and screens at first hand,
the rest can be updated later. The job is quite boring as we have to input
numbers manually from Figma to
tailwind.config.js file, but it is one-off
job so just do it anyway.
2, Build UI components in Storybook, one by one
This can be built in batch if you had the resources or whenever in need.
3, Publish Storybook as private npm package
We use GitLab package registry to do that. Every releases will be auto published to the registry as well as the Storybook web for showcase purpose.
4, Install the package and reuse UI components in other projects
For local development, you can use
npm link to link local Storybook project with
the project you are working on without having to publish the package consecutively.
For any project started out with a design team to spare, TailwindCSS is pefectly fit for setting up a “style API” with predefined variables such as colors or spacing. Along with Storybook for building reusable components and we got a design system good enough to make our product UI/UX experience become consistent at scale.