Tailwind classes not working properly in storybook

[binishjoshi]

Summary

I setup storybook for a remix project that uses tailwind. I've imported the global styles in the preview.ts of storybook as instructed in the guide thing. The weird thing is some classes and some doesn't. What I found out is, say bg-lime-500 works as intended but bg-lime-400 does not.

I'm using storybook 8.1.3

Edit: I get this warning:

[vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
125|      box-sizing: border-box;
126|  
127|      & ol {
   |      ^^^^^^
128|        padding-left: 18px;
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^
129|        margin: 0;
   |  ^^^^^^^^^^^^^^^^
130|      }
   |  ^^^^^

Additional information

No response

Create a reproduction

No response

[valentinpalkovic]

Can you provide a reproduction?

[binishjoshi]

I forgot to mention, I get this warning:

[vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
125|      box-sizing: border-box;
126|  
127|      & ol {
   |      ^^^^^^
128|        padding-left: 18px;
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^
129|        margin: 0;
   |  ^^^^^^^^^^^^^^^^
130|      }
   |  ^^^^^

[binishjoshi]

Looks like nested css was the issue: https://tailwindcss.com/docs/using-with-preprocessors#nesting