Probleme with CSS classes not showing or imported.

[FlorientPlouvin]

Hello everyone,

I have just installed the latest version of nuxt storybook on a project and everything works.

Attention the initialization command in the documentation is always : npx storybook-nuxt init

And I've noticed two problems, the first is that none of my classes are imported (either custom classes or tailwind classes).

I've also noticed that I get an error when I don't explicitly import ‘computed’ or similar into my component.

I suppose the two problems are linked, but I don't want to get ahead of myself.

[blowsie]

Regarding npx storybook-nuxt init this may be related? https://github.com/nuxt-modules/storybook/issues/721

For the other items, I have not encountered those, perhaps a reproduction may help others to help you.

[tobiasdiez]

We have various tests / examples that show that css/tailwind are working in principle. Could you please provide a minimal example (in the best case as a PR adding a test case in the "showcase" example? Thanks!

[prodoxx]

I also have this problem where tailwind isn't being imported. I import it manually but it only shows up when I view something with the same class on my non-storybook app as if it's being fetched in one of the build folders and it won't show if it's not in a build folder maybe. That's my guess. This is my preview.ts file right now:

import "tailwindcss/tailwind.css";
import type { Preview } from "@storybook/vue3";
import "./style.css";
import "../assets/css/tailwind.css";
import "../assets/css/main.css";

const preview: Preview = {
    parameters: {
        actions: { argTypesRegex: "^on[A-Z].*" },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
        layout: "centered",
        options: {
            storySort: {
                order: ["Styles", "Components"],
            },
        },
        globalTypes: {
            theme: {
                name: "Toggle theme",
                description: "Global theme for components",
                defaultValue: "light",
            },
        },
    },
};

export default preview;

I guess to reproduce would be to add a custom class like a color for example, don't add it to the main app, add it in storybook and then try to view it.

By the way, I'm using a tailwind.config.ts file and not the default that comes with the plugin. This it with a custom tailwind.config.ts file

[tobiasdiez]

@prodoxx @FlorientPlouvin could you please provide a minimal reproduction based on the tailwind example in the repo? (in the best case as a PR, then I can directly continue working on it).