How to integrate Storybook with Tailwind CSS, Create Next App & TypeScript

Question

*The following question is related to a previous question I asked, so apologies in advance if I'm being repetitive, but I still haven't been able to resolve my issue.

I'm trying to get Storybook to work with Tailwind CSS to no avail so far. These are the steps I've followed:

1. I have created a new TypeScript project from scratch, bootstrapping it with Create Next App. I followed the instructions on Tailwinds website. Tailwind works fine on the App.
2. I set up Storybook following the instructions on their website. Storybook starts up fine on port 6006.
3. I configured the main.js file accordingly to incorporate PostCSS for Tailwind to work within Storybook:

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-postcss"
  ],
  "framework": "@storybook/react"
}

Despite doing all these, I don't see any effect of Tailwind on the story components—only in the application.

I tried testing if Tailwind works by putting in a small element in a Storybook component. I don't see it rendered as expected:

<h1 className="text-3xl font-bold underline">
    Tailwind Works!
</h1>

Link to Github repo: https://github.com/TRahulSam1997/storybook-tailwind-next-typescript-v2

Any help would be much appreciated!

Answer 1

Update!

Simply doing this worked:

Import

import 'tailwindcss/tailwind.css';

into preview.js

Thanks to https://stackoverflow.com/a/68022201/12198222