Visual Testing with CRA, Tailwind, Storybook, and Chromatic


Until now I didn’t know how to create a test suite that prevents errors while working on UIs. Fortunately, I came across Chromatic, an automating visual testing tool for your projects. No more having to manually verify if a code change broke your UI components 🙌🏼 . You can be sure that if something breaks Chromatic will tell you about it.

Unfortunately, as always, setting up a javascript project can be difficult. I spend a whole day setting up chromatic with a create-react-app project and tailwind. In this tutorial, you will learn how to do it in 20 minutes or less.

What’s the final product of this tutorial?

What you need:

  1. Create React App
  2. Storybook
  3. tailwindcss
  4. craco
  5. storybook-preset-craco
  6. A chromatic account and library

Important This guide follows the original guides to install each of these libraries. If you need more detail go to the correspondent guide. The only extra thing is the storybook-preset-craco to make tailwindcss work with storybook. On both its development, and build mode.

1.Setup a new project with create-react-app(CRA)

1.1 Create a new project

1.2 Verify everything is working

  1. Go to cd my-app
  2. Run yarn start

You should see the following page in your browser

2. Install tailwindcss

2.1. Install tailwind and its dependencies

2.2. Install CRACO to override CRA PostCSS configuration

2.3 Replace react-scripts for craco on package.json

2.4 Create a craco.config.js

2.5 Setup tailwindCSS

2.6 Remove unused styles on production

2.7 Include Tailwind in your CSS

2.8 Verify tailwind is working by adding a background to the paragraph on App.js.

It should look something like:

3. Install Storybook

3.1 Run storybook-cli to install and configure storybook.

3.2 Verify the installation was successful

Important: one thing to notice is that even though storybook is working it does not recognizes tailwind classes. Let’s resolved that.

4. Configure PostCSS and AutoPrefixer

4.1 install the preset:

yarn add --dev storybook-preset-craco

4.2 Configure preset on storybook

Your .storybook/main.js file should look something like this:

4.3 Import tailwindcss globally on storybook

The .storybook/preview.js file should look something like this:

4.4 Ignore storybook build outputs

4.5 Verify tailwind integration



5. Set up Chromatic

5.1 Install chromatic

5.2 Sign Up

5.3 Push your project to Chromatic

npx chromatic --project-token=YOUR_PROJECT_TOKEN

Verify the project was uploaded to Chromatic correctly. If that’s the case then the project is ready for a component driven workflow with automated visual tests 🔥. The next step is to create one component.

6. Create a component using Visual Testing

6.1 Component Spec

6.2 Implement component(and Stories)

This component since it only changes visually depending on the primary prop lets create two stories to show how it looks when primary is true and when it’s false.


6.3 Validate that it works on storybook build mode.

If you open storybook-build/index.html it should look exactly as in development mode.

If everything looks good then let’s push the changes to chromatic with this command:

npx chromatic --project-token=YOUR_PROJECT_TOKEN

Go into chromatic’s dashboard to see your components and approve any changes. Congratulations! You have a project with visual regression tests 😄.


To learn more about visual testing and component driven development check out the visual testing handbook, chromatic’s website, and the Component Drive User Interfaces site. As the next step try to configure chromatic to run inside a CI pipeline. You can follow this guide.



Software Engineer, binge watcher, long posts reader.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store