New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,392
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon

Integrate Tailwind CSS and Storybook

Tailwind CSS is a utility-first CSS framework packed with classes to build any design, directly in your markup. This recipe shows you how to get the most out of Tailwind CSS in Storybook.

This recipe assumes that you have a React app using Tailwind CSS and have just set up Storybook >=6.0 using the getting started guide. Don’t have this? Follow Tailwind's setup instructions then run:

How to setup Tailwind CSS and Storybook

Storybook.js is a fantastic tool for developing and showcasing UI components in isolation. One of the great things about it is that you can use any CSS framework you like, including Tailwind CSS.

In this post, we will:

  1. 🏗️ Build Tailwind next to Storybook
  2. 🎁 Provide Tailwind to stories
  3. 🧱 Use Tailwind in your components
  4. 🎨 Switch Tailwind themes in a click

Finished example of Tailwind CSS in Storybook with a theme switcher

Build Tailwind next to Storybook

To develop with Tailwind alongside your stories, you’ll need a development environment that runs two independent but coordinated processes using concurrently

Then add these updated scripts to your package.json

Provide Tailwind to stories

Now you can import the tailwind.css file into your .storybook/preview-head.html file. This will make Tailwind’s style classes available to all of your stories.

Use Tailwind in components

Let’s update some of our example components to use Tailwind instead. Open up Storybook to see what we have so far.

Storybook before adding tailwind CSS to the example components

To make use of Tailwind, replace the contents of each component file with the following code:

Storybook after adding tailwind CSS to the example components

Add a theme switcher tool using globalTypes

Tailwind comes out of the box with a light and dark theme. You can override those themes and add more. To get the most out of your stories, you should have a way to toggle between all of your themes.

Finished example of Tailwind CSS in Storybook with a theme switcher

First of all, update your tailwind.config.js file to change themes based on a class or data-attribute. This example uses a data-attribute.

To add the switcher, declare a global type named "theme" in .storybook/preview.js and give it a list of supported themes to choose from.

This code will create a new toolbar menu to select your desired theme for your stories.

Add a withTailwindTheme decorator

There needs to be a way to tell Tailwind to use the theme that is selected in the toolbar. To do that, This can be done using a decorator.

Below I created a new file in .storybook called withTailwindTheme.decorator.js that will take the global theme value and update the current theme.

Now all we have to do is give this decorator to Storybook to wrap our stories in. Add the decorator to the decorators array in .storybook/preview.js:

Get involved

Now you're ready to use Tailwind with Storybook. 🎉 Check out the example repo for a quick start.

If you use Tailwind at work, we'd love your help making an addon that automatically applies the configuration above. Join the maintainers in Discord to get involved, or jump into addon docs.

Join the community
5,883 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI