title: How to configure Storybook JS with Tailwind CSS for a pre-existing React application
body: <p>I'm working on a TypeScript-React-Next.js-Tailwind CSS application.</p>
  <p>I've been trying to configure Storybook with Tailwind CSS. I tried adding PostCSS as an add on as instructed in the docs to no avail.</p>
  <p>Current <code>main.js</code> file in <strong>.storybook</strong>:</p>
  <pre><code>const path = require('path')
  
  module.exports = {
    &quot;stories&quot;: [
      &quot;../src/**/*.stories.mdx&quot;,
      &quot;../src/**/*.stories.@(js|jsx|ts|tsx)&quot;
    ],
    &quot;addons&quot;: [
      &quot;@storybook/addon-links&quot;,
      &quot;@storybook/addon-essentials&quot;,
      &quot;@storybook/preset-create-react-app&quot;
    ],
    webpackFinal: async (config) =&gt; {
      config.module.rules.push({
        test: /\,css&amp;/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('tailwindcss'),
                require('autoprefixer')
              ]
            }
          }
        ],
        include: path.resolve(__dirname, '../'),
      })
      return config
    }
  }
  </code></pre>
  <p>Current <code>package.json</code>:</p>
  <pre><code>{
    &quot;name&quot;: &quot;vimi&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;codegen&quot;: &quot;graphql-codegen --config codegen.yml&quot;,
      &quot;dev&quot;: &quot;next dev&quot;,
      &quot;build&quot;: &quot;next build &amp;&amp; next export&quot;,
      &quot;start&quot;: &quot;next start&quot;,
      &quot;lint&quot;: &quot;next lint&quot;,
      &quot;storybook&quot;: &quot;start-storybook -p 6006&quot;,
      &quot;build-storybook&quot;: &quot;build-storybook&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@apollo/client&quot;: &quot;^3.4.7&quot;,
      &quot;@auth0/auth0-react&quot;: &quot;^1.6.0&quot;,
      &quot;@aws-amplify/ui-react&quot;: &quot;^1.2.20&quot;,
      &quot;@graphql-tools/merge&quot;: &quot;^7.0.0&quot;,
      &quot;@graphql-tools/schema&quot;: &quot;^8.0.3&quot;,
      &quot;@headlessui/react&quot;: &quot;^1.3.0&quot;,
      &quot;@heroicons/react&quot;: &quot;^1.0.1&quot;,
      &quot;@hookform/resolvers&quot;: &quot;^2.8.2&quot;,
      &quot;aws-amplify&quot;: &quot;^4.3.2&quot;,
      &quot;aws-appsync-auth-link&quot;: &quot;^3.0.6&quot;,
      &quot;date-fns&quot;: &quot;^2.25.0&quot;,
      &quot;graphql&quot;: &quot;^15.5.1&quot;,
      &quot;immer&quot;: &quot;^9.0.5&quot;,
      &quot;jotai&quot;: &quot;^1.1.2&quot;,
      &quot;next&quot;: &quot;^12.0.1&quot;,
      &quot;phin&quot;: &quot;^3.6.0&quot;,
      &quot;react&quot;: &quot;17.0.2&quot;,
      &quot;react-dom&quot;: &quot;17.0.2&quot;,
      &quot;react-google-button&quot;: &quot;^0.7.2&quot;,
      &quot;react-hook-form&quot;: &quot;^7.17.1&quot;,
      &quot;yup&quot;: &quot;^0.32.9&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.16.5&quot;,
      &quot;@graphql-codegen/cli&quot;: &quot;^2.1.1&quot;,
      &quot;@graphql-codegen/import-types-preset&quot;: &quot;^2.0.0&quot;,
      &quot;@graphql-codegen/typescript&quot;: &quot;^2.1.2&quot;,
      &quot;@graphql-codegen/typescript-operations&quot;: &quot;^2.0.1&quot;,
      &quot;@graphql-codegen/typescript-react-apollo&quot;: &quot;^3.0.0&quot;,
      &quot;@storybook/addon-actions&quot;: &quot;^6.4.9&quot;,
      &quot;@storybook/addon-essentials&quot;: &quot;^6.4.9&quot;,
      &quot;@storybook/addon-links&quot;: &quot;^6.4.9&quot;,
      &quot;@storybook/react&quot;: &quot;^6.4.9&quot;,
      &quot;@tailwindcss/forms&quot;: &quot;^0.3.3&quot;,
      &quot;@tailwindcss/postcss7-compat&quot;: &quot;^2.2.17&quot;,
      &quot;@types/react&quot;: &quot;17.0.11&quot;,
      &quot;autoprefixer&quot;: &quot;^9.8.8&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.3&quot;,
      &quot;eslint&quot;: &quot;7.28.0&quot;,
      &quot;eslint-config-next&quot;: &quot;11.0.0&quot;,
      &quot;graphql-auto-transformer&quot;: &quot;^1.3.1&quot;,
      &quot;graphql-let&quot;: &quot;^0.18.4&quot;,
      &quot;import-sort-style-react2&quot;: &quot;^0.3.6&quot;,
      &quot;postcss&quot;: &quot;^7.0.39&quot;,
      &quot;prettier&quot;: &quot;^2.3.2&quot;,
      &quot;prettier-plugin-import-sort&quot;: &quot;^0.0.7&quot;,
      &quot;tailwindcss&quot;: &quot;npm:@tailwindcss/postcss7-compat@^2.2.17&quot;,
      &quot;typescript&quot;: &quot;4.3.2&quot;,
      &quot;yaml-loader&quot;: &quot;^0.6.0&quot;
    },
    &quot;importSort&quot;: {
      &quot;.js, .jsx, .ts, .tsx&quot;: {
        &quot;style&quot;: &quot;react2&quot;,
        &quot;parser&quot;: &quot;typescript&quot;
      }
    }
  }
  </code></pre>
  <p>I also followed the instruction in this <a href="https://medium.com/storybookjs/building-a-front-end-project-with-react-tailwindcss-and-storybook-742bdb1417da" rel="nofollow noreferrer">Medium</a> post and <a href="https://stackoverflow.com/a/68757745/12198222">Stack Overflow answer</a> without any luck.</p>
  <p>Even though Storybook starts up fine, in the building process, I get the following error, and I see Tailwind CSS hasn't worked on my components (stories):</p>
  <pre><code>info @storybook/react v6.4.9
  info 
  info =&gt; Loading presets
  ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
  ERR! @storybook/preset-create-react-app
  </code></pre>
  <p>I don't understand why this preset is invalid. Even when I simply put the add on:</p>
  <pre><code>module.exports = {
    &quot;stories&quot;: [
      &quot;../src/**/*.stories.mdx&quot;,
      &quot;../src/**/*.stories.@(js|jsx|ts|tsx)&quot;
    ],
    &quot;addons&quot;: [
      &quot;@storybook/addon-links&quot;,
      &quot;@storybook/addon-essentials&quot;,
      &quot;@storybook/addon-postcss&quot;,
    ],
    &quot;framework&quot;: &quot;@storybook/react&quot;
  }
  </code></pre>
  <p>I get the error:</p>
  <pre><code>info @storybook/react v6.4.9
  info 
  info =&gt; Loading presets
  ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
  ERR! @storybook/addon-postcss
  </code></pre>
  <p>Any help would be much appreciated!</p>