I want to add tailwind to storybook. So that Stories will render just like it will render on web.

I used `create-react-app project-name --template typescript` to create the project.

Then to install the tailwind I followed this https://tailwindcss.com/docs/guides/create-react-app  instruction from the documentation of tailwind.

Once I finished it I ran the code `npm sb init`. Which made sure that storybook ran.

Now I need to tell storybook to use tailwindcss for styling. But I have no idea how.

Every other answer I saw tells to edit `postcss.config.js` files.

But I followed this https://tailwindcss.com/docs/guides/create-react-app documentation where I didnt even have to create postcss.config.js file. So I am confused to what to do now.

For clarity I will include some configuration file below.


`craco.config.js`
```
module.exports = {
    style: {
      postcss: {
        plugins: [
          require(&#39;tailwindcss&#39;),
          require(&#39;autoprefixer&#39;),
        ],
      },
    },
  }

```

`.storybook/preview.js`
```
import &quot;../src/index.css&quot;

export const parameters = {
  actions: { argTypesRegex: &quot;^on[A-Z].*&quot; },
}
```

`.storybook/main.js`
```
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;
  ]
}
```

`src/index.css`
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```


`tailwind.config.js`
```
module.exports = {
  purge: [&#39;./src/**/*.{js,jsx,ts,tsx}&#39;, &#39;./public/index.html&#39;],

  darkMode: false, // or &#39;media&#39; or &#39;class&#39;
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

`package.json`
```
`{
  &quot;name&quot;: &quot;memory&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;dependencies&quot;: {
    &quot;@craco/craco&quot;: &quot;^6.0.0&quot;,
    &quot;@tailwindcss/postcss7-compat&quot;: &quot;^2.0.2&quot;,
    &quot;@testing-library/jest-dom&quot;: &quot;^5.11.4&quot;,
    &quot;@testing-library/react&quot;: &quot;^11.1.0&quot;,
    &quot;@testing-library/user-event&quot;: &quot;^12.1.10&quot;,
    &quot;@types/jest&quot;: &quot;^26.0.15&quot;,
    &quot;@types/node&quot;: &quot;^12.0.0&quot;,
    &quot;@types/react&quot;: &quot;^16.14.2&quot;,
    &quot;@types/react-dom&quot;: &quot;^16.9.8&quot;,
    &quot;autoprefixer&quot;: &quot;^9.8.6&quot;,
    &quot;postcss&quot;: &quot;^7.0.35&quot;,
    &quot;react&quot;: &quot;^17.0.1&quot;,
    &quot;react-dom&quot;: &quot;^17.0.1&quot;,
    &quot;react-scripts&quot;: &quot;4.0.1&quot;,
    &quot;tailwindcss&quot;: &quot;npm:@tailwindcss/postcss7-compat@^2.0.2&quot;,
    &quot;typescript&quot;: &quot;^4.0.3&quot;,
    &quot;web-vitals&quot;: &quot;^0.2.4&quot;
  },
  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;craco start&quot;,
    &quot;build&quot;: &quot;craco build&quot;,
    &quot;test&quot;: &quot;craco test&quot;,
    &quot;eject&quot;: &quot;react-scripts eject&quot;,
    &quot;storybook&quot;: &quot;start-storybook -p 6006 -s public&quot;,
    &quot;build-storybook&quot;: &quot;build-storybook -s public&quot;
  },
  &quot;eslintConfig&quot;: {
    &quot;extends&quot;: [
      &quot;react-app&quot;,
      &quot;react-app/jest&quot;
    ]
  },
  &quot;browserslist&quot;: {
    &quot;production&quot;: [
      &quot;&gt;0.2%&quot;,
      &quot;not dead&quot;,
      &quot;not op_mini all&quot;
    ],
    &quot;development&quot;: [
      &quot;last 1 chrome version&quot;,
      &quot;last 1 firefox version&quot;,
      &quot;last 1 safari version&quot;
    ]
  },
  &quot;devDependencies&quot;: {
    &quot;@storybook/addon-actions&quot;: &quot;^6.1.11&quot;,
    &quot;@storybook/addon-essentials&quot;: &quot;^6.1.11&quot;,
    &quot;@storybook/addon-links&quot;: &quot;^6.1.11&quot;,
    &quot;@storybook/node-logger&quot;: &quot;^6.1.11&quot;,
    &quot;@storybook/preset-create-react-app&quot;: &quot;^3.1.5&quot;,
    &quot;@storybook/react&quot;: &quot;^6.1.11&quot;
  }
}

```


`tsconfig.json`

```
{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;es5&quot;,
    &quot;lib&quot;: [
      &quot;dom&quot;,
      &quot;dom.iterable&quot;,
      &quot;esnext&quot;
    ],
    &quot;allowJs&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;allowSyntheticDefaultImports&quot;: true,
    &quot;strict&quot;: true,
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;noFallthroughCasesInSwitch&quot;: true,
    &quot;module&quot;: &quot;esnext&quot;,
    &quot;moduleResolution&quot;: &quot;node&quot;,
    &quot;resolveJsonModule&quot;: true,
    &quot;isolatedModules&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;jsx&quot;: &quot;react-jsx&quot;
  },
  &quot;include&quot;: [
    &quot;src&quot;
  ]
}

```

All Storybook Solutions on Gang of Coders

Total of 1 Storybook Solutions

Storybook-tailwind. How should I add tailwind to storybook