9

*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!

2 Answers 2

13

Update!

Simply doing this worked:

Import

import 'tailwindcss/tailwind.css';

into preview.js

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

1

Add the path to the stories folder in the tailwind.config.js file.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./stories/**/*.{js,ts,jsx,tsx}", //instruct tailwind to read the stories folder
  ],
  theme: {},
  plugins: [],
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.