CODEWITHSUNDEEP
typescriptnext.jstailwind-cssstorybookpostcss
Rahul
Rahul

Reputation: 849

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

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

Upvotes: 10

Views: 8777

Answers (2)

roshan
roshan

Reputation: 2510

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: [],
}

Upvotes: 1

Rahul
Rahul

Reputation: 849

Update!

Simply doing this worked:

Import

import 'tailwindcss/tailwind.css';

into preview.js

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

Upvotes: 14

Related Questions