Questions & Answers

How to setup Storybook with Tailwindcss, ReactJS and Typescript

How do you setup Storybook so that it parses Tailwindcss styles and also parses absolute paths?

Note: This is a self-documenting question/answer allowed as per this. This took a while to figure out and I'm sure many others will encounter this.

Answers(1) :

To resolve paths in Storybook, we'll be using tsconfig as the source. We assume you have installed a ReactJS project with the typescript template already.

Setting Absolute Paths

1. Define absolute paths in typescript

Add your absolute paths under "paths" in tsconfig.js.

// tsconfig.json

  "compilerOptions": {
    // ...
    "baseUrl": "src",
    "paths": {
      "#assets/*": ["./assets/*"],
      "#components/*": ["./components/*"],
      // etc.
  "include": ["src"]

2. Extend the tsconfig absolute paths to work in Storybook

Install the tsconfig-paths-webpack-plugin from npm. Has millions of weekly downloads at time of writing.

$ npm install -D tsconfig-paths-webpack-plugin
// or
$ yarn add -D tsconfig-paths-webpack-plugin

Under .storybook/main.js extend the tsconfig path resolution by adding the following to your module.exports.

// .storybook/main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // Add the following block of code in addition to what's existing
  "webpackFinal": async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
    return config;


3. Parsing Tailwind Styles in Storybook

Add the following two lines of code at the top of your .storybook/preview.js file.

// .storybook/preview.js

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';
import 'tailwindcss/tailwind.css';


Your tailwindcss should parse now.

Additional files

For Tailwind v3+, make sure your tailwind.config.js doesn't have the purge option and doesn't explicitly state JIT. Mine looks like this:

// tailwind.config.js

module.exports = {
    content: [
    theme: {
        extend: {},
    plugins: [],
2023-01-22 23:25:02
I am doing something similar and I have the base tailwind styles working, but the color scheme I set in theme.extends isn't loading. Were you able to get anything like that working? Ex: extends: { colors: primary: { DEFAULT: '#438D42' } }
2023-01-22 23:25:02
@kauffee000 not sure if you copied it exactly but it should be extend:{} no s, not extends:{}