Setting up Tailwind CSS for Storybook in the Cleanest Way Possible

[FcoJacob]

I'm trying to get Storybook to apply Tailwind CSS styles globally to the stories, but the documentation refers to using the base.css file with Tailwind CSS imports. However, I'm wondering if there's another way to achieve this since, by default, this addon doesn't expose such a .css file.

I would appreciate any guidance on this matter.

I have currently only added both plugins and configured them to the Nuxt.js project.

[ineshbose]

Thanks for opening an issue and this has given a great idea for enhancement for documentation and possible integration between this module and @nuxtjs/storybook.

To answer your question regarding an exposed CSS, we use the default tailwindcss/tailwind.css file that Storybook should be able to resolve. For any CSS file this module may create, you will find it in your project's .nuxt directory that you can point to using the #build alias. Let me know if you still have questions!

[FcoJacob]

tailwindcss/tailwind.css file that Storybook should be able to resolve. For any CSS file this module may create, you will find it in your project's

What is 'I have tried it.

But it seems that it cannot find the path, and I get the following error: "Error: Cannot find module '#build/tailwind/tailwind.css'"

I also tried accessing it through regular navigation, but I encountered the following error: "Error: Cannot find module '../.nuxt/tailwind/tailwind.css'"

On exploring the directory (.nuxt), it appears that such a directory does not exist. However, I do see the tailwind.config directory with two files inside (index.mjs and viewer-config.cjs).

[ineshbose]

You need not add #build there; and remember that the npm package is tailwindcss (not tailwind, without the css), so you should just import 'tailwindcss/tailwind.css'; this will resolve to node_modules/tailwindcss/tailwind.css.

[FcoJacob]

You need not add #build there; and remember that the npm package is tailwindcss (not tailwind, without the css), so you should just import 'tailwindcss/tailwind.css'; this will resolve to node_modules/tailwindcss/tailwind.css.

First of all, thank you for your prompt response!

It seems that importing it in the preview.js as indicated here: https://storybook.js.org/recipes/tailwindcss#2-provide-tailwind-to-stories and making reference to the .css file in node-modules still does not load the styles.

The preview file now looks like this:

/** @type { import('@storybook/vue3').Preview } */
import 'tailwindcss/tailwind.css';

const preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

[ineshbose]

Hi, sorry I'm responding to you later - I took some time to take a look at setting up Storybook (I personally haven't used it much, though I should!)

First, I'm not aware of the context of your project so I'll be making some fair assumptions like you're using this module without much configuration, i.e., using default Tailwind CSS file, no extras to your tailwind config (just whatever content config the module adds), etc.

Second, I'm not aware how you've setup Storybook. I went over the Nuxt Storybook module and I can't say that module is quite optimised (in my opinion) as currently in its latest stage, it's a wrapper for another package while older versions are for Nuxt 2. So as you linked earlier as well, we will refer to the docs and set up Storybook normally without any Nuxt modules for now.

Here's the thing, the Tailwind config isn't available to the Storybook server, so we will add a quick and simple module to our Nuxt project that'll solve it all:

import { resolve, dirname } from 'pathe'

import { defineNuxtModule, addTemplate } from '@nuxt/kit'

import { buildDevStandalone } from '@storybook/core-server'

import sbMain from '../.storybook/main'

export default defineNuxtModule({

  setup (_options, nuxt) {

    nuxt.hook('tailwindcss:config', (config) => {

      addTemplate({

        filename: 'tailwind.config.mjs', // gets prepended by .nuxt/

        getContents: () => `export default ${JSON.stringify(config, null, 2)}`,

        write: true

      })

    })

    const { dst } = addTemplate({

         filename: '.storybook/main.js',

         getContents: () => `

         import { mergeConfig } from 'vite'

         import twPostcssPlugin from 'tailwindcss/lib/plugin'

         import twConfig from '../tailwind.config.mjs'

         const config = ${JSON.stringify(sbMain, null, 2)};

         config.core = { builder: '@storybook/builder-vite' }

         config.viteFinal = (viteConfig) => mergeConfig(viteConfig, { css: { postcss: { plugins: [twPostcssPlugin(twConfig)] } } })

         export default config;

         `,

         write: true

     })

     addTemplate({

        filename: '.storybook/preview.js',

        src: resolve('.storybook/preview.js'),

        write: true

     })

    nuxt.hook('app:templatesGenerated', () => {

        buildDevStandalone({ packageJson: { version: '' }, configDir: dirname(dst) || resolve(nuxt.options.rootDir, '.storybook') })

    })

  }

})

You can put this code in modules/my-custom-storybook-module.ts and it should start the server along with Nuxt - neat! Infact if you switch to the nightly release of this module or wait for 6.11, you need not have to use the hook at the start to make the template but use editorSupport.generateConfig instead. Anyway, let me know if this helps, and thank you for bringing this to my notice as this gives an idea on what to focus on next, so I'll leave this issue open for now.

(Sorry about the blank lines in the source code, I'm on mobile)

[FcoJacob]

Thank you again for your efforts. I am incredibly grateful. But even with this, I still can't visualize tailwindcss styles in my stories. I think that since the testing of the project is just in the configuration phase, if you want I leave you this link to the: Repository , in case you want to try it here and maybe you can move forward with more clarity. Don't feel like I'm trying to get you to do it, I just want to give you a chance to see what might be going on. Whether you contribute here or not, I'm already enormously grateful for your cooperation in this thread.

[ineshbose]

Yes, sorry I forgot to mention that the paths in .storybook/main.js need to be relative to .nuxt/.storybook, so you'll need to prepend ../ to your paths, and it should work.

Probably best you can add this line to the setup function of the module (and before addTemplate({ filename: '.storybook/main.js' ... })) I mentioned above:

sbMain.stories = sbMain.stories.map((p) => `../${p}`)

[ineshbose]

Also forgot to mention, you want to exclude this from builds so use

if (!nuxt.options.dev) return

at the start of the setup function.

[ineshbose]

I'll close this issue for now, but will reopen if something comes up.