0

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

OvO
  • 1
  • 1
  • Oh, I find the solution in here, https://stackoverflow.com/questions/68020712/tailwind-css-classes-not-showing-in-storybook-build/70805809#70805809 – OvO Mar 14 '22 at 05:59

1 Answers1

3

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
Rafo
  • 511
  • 3
  • 17