Tailwind utility classes do not work

[smares]

I created a Nuxt module based on https://github.com/nuxt/module-builder and placed a component in src/runtime/components/MyBtn.vue where I use some Tailwind classes.

In the root I created a histoire.config.ts with the following config:

import { defineConfig } from 'histoire'
import { HstVue } from '@histoire/plugin-vue'
import { HstNuxt } from '@histoire/plugin-nuxt'

export default defineConfig({
  plugins: [
    HstVue(),
    HstNuxt(),
  ],

  setupFile: './src/histoire-setup.ts',
})

In src I added a file histoire-setup.ts with the following content:

import './tailwind.css'

In src I also added a tailwind.css with the following content:

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

Finally, in src I also have a MyBtn.story.vue that imports the MyBtn component and the story uses Tailwind classes itself, too. However, none of the Tailwind classes work. Neither the ones in the component, nor the ones in the story.

To check that everything is loaded properly, I added html { background-color: lime; } to the tailwind.css and inspecting the html element, I can see that the style is picked up, so the setupFile works and also the tailwind.css is loaded.

I also tried adding a tailwind.config.ts in the root with the following content, but it didn't help:

import type { Config } from 'tailwindcss'

export default (): Config => ({
  content: ['./src/**/*.vue'],
})

Any idea what I am doing wrong?

[smares]

I was able to get Tailwind to work by adding a nuxt.config.ts and loading the Tailwind module by hand along with my own module. Apparently I don't need a histoire setup file and manually import the Tailwind CSS if the Tailwind CSS is in assets/css/tailwind.css. And since my module has a hook that extends the content config and adds the src/runtime/components/**/*.vue path, using Tailwind utility classes in the components works as well.

What does not work is using utility classes in the stories. I tried to change the module hook to add src/**/*.vue rather than src/runtime/components/**/*.vue to content, also tried adding a tailwind.config.ts where I extend content to include src/**/*.vue, but to no avail. The only way to use Tailwind in the components and the storys is to move the stories to src/runtime as well, but then they're part of the dist.

Happy for any feedback what I might be doing wrong. I can try to put together a StackBlitz environment demonstrating the issue.

[smares]

I have no idea what I did differently, but it works now. 😱 Here's a playground: https://stackblitz.com/edit/github-3rwar8