CODEWITHSUNDEEP
tailwind-cssstorybook
OvO
OvO

Reputation: 1

Error: Tailwindcss not working in storybook

I use webpack5, typescript, tailwindcss and storybook to make an Button UI component, I modify the example code from storybook to tailwindcss Here is the css code:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
.storybook-button {
  @apply font-sans font-bold border-none rounded-3xl cursor-pointer inline-block leading-3;
}
.storybook-button--primary {
  @apply text-white bg-[#1ea7fd];
}
.storybook-button--secondary {
  @apply text-[#333] bg-[]
  color: #333 bg-transparent shadow-cyan-500/50;
}
.storybook-button--small {
  @apply text-xs px-4 py-2;
}
.storybook-button--medium {
  @apply text-sm px-5 py-3;
}
.storybook-button--large {
  @apply text-base px-6 py-3;
} 
}

But when I run yarn storybook, this css file is not working Button in storybook with tailwindcss

Upvotes: 0

Views: 2912

Answers (1)

Rafo
Rafo

Reputation: 654

This problem gave me headaches too. I followed every solution that can be found on StackOverflow and Github.

But I only could "fix it" by running the tailwind-CLI and building the global.css file and importing it to ./storybook/preview.js

here's the cli command used.

npx tailwindcss -i ./src/styles/global.css -o ./.storybook/global.css --watch

then import it from the output path (-o flag) in the command above.

// ./storybook/preview.js

import './global.css';

...rest of your preview config

Upvotes: 4

Related Questions