Tailwind support?

[danlourenco]

Hi there,

Great job with this addon! Wondering if this has been tested with Tailwind? I've followed whatever documentation I could find on Storybook 7 + Tailwind 3, but I can't get my Tailwind css to actually load in my stories. Any ideas?

[prnews-io-tech]

Just install the following module: @storybook/addon-styling

And push it to your addons section:

addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: '@storybook/addon-styling',
      options: {
        postCss: true,
      },
    },
    'storybook-addon-nuxt'
  ],

And then just import it inside your .storybook/preview.ts import '../assets/css/tailwind.css';

[danlourenco]

@prnews-io I was doing just that, except in my preview.js file, I was importing the following:

import "tailwindcss/tailwind.css";
import "~/assets/css/main.css";

The tailwind.css file does not exist in the assets folder, and also I thought the options/postCss flag was unnecessary as that appears to be specific to webpack builds.

[hirotaka]

Thanks for using the addon, and sorry for the late reply.
I just started exploring how to make Tailwindcss available in a simple setup.
I will let you know if there are any further improvements.

[daniel007enirman]

@danlourenco any solution did you find ?

[daniel007enirman]

i got solution

1. Create Seperate post.config.js file
2. import postcss-import in post.config.js @layer utilities is used but no matching @tailwind utilities directive is present. tailwindlabs/tailwindcss#5934 (reply in thread)

[woldtwerk]

I made a pr #23
this merges nuxt postcss config (also tailwind when using the nuxt tailwind addon) into storybook config.
You do not need @storybook/addon-styling or a custom postcss.config.js