next.js - Hur man integrerar Storybook med Tailwind CSS, Create Next App & TypeScript

*Följande fråga är relaterad till en tidigare fråga jag ställde, så ursäkta i förväg om jag upprepar mig, men jag har fortfarande inte kunnat lösa mitt problem.

Jag försöker få Storybook att fungera med Tailwind CSS utan framgång hittills. Detta är stegen jag har följt:

  1. Jag har skapat ett nytt TypeScript-projekt från grunden och startat det med Create Next App. Jag följde instruktionerna på Tailwinds webbplats. Tailwind fungerar bra på appen.
  2. Jag satte upp Storybook enligt instruktionerna på deras webbplats. Storybook startar utan problem på port 6006.
  3. Jag konfigurerade main.js-filen därefter för att införliva PostCSS så att Tailwind fungerar inom 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"
}

Trots att jag har gjort allt detta ser jag ingen effekt av Tailwind på berättelsekomponenterna—endast i applikationen.

Jag försökte testa om Tailwind fungerar genom att sätta in ett litet element i en Storybook-komponent. Jag ser det inte återges som förväntat:

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

Länk till Github-repo: https://github.com/TRahulSam1997/storybook-tailwind-next-typescript-v2

All hjälp skulle uppskattas mycket!

Svar #1

Uppdatera!

Att helt enkelt göra detta fungerade:

Importera

import 'tailwindcss/tailwind.css';

in i preview.js

Tack till https://stackoverflow.com/a/68022201/12198222

Relaterade artiklar