Flowbite styles in storybook

[getblad]

I have nx/next application with storybook in shared library. How can I configure flowbite, so that I could see it's styles in my storybook? Right now styles are not applied to the component.

[SutuSebastian]

1. can u describe the hierarchy of the files and folders?
2. is the storybook installed in a different package (aka ur repo is monorepo setup)

[getblad]

Nextjs application in ./apps/app_name folder. React shared library in ./libs/library_name folder, in the same folder I Installed storybook, so that I run storybook only for this specific library

[SutuSebastian]

I assume u installed storybook using vite? and that flowbite-react is installed in the ./libs/library_name/package.json.

To solve this issue u need to:

1. install and setup tailwindcss in ur ./libs/library_name/
2. create a tailwind.config.js
3. add flowbite-react to the content depending on where flowbite-react is installed in node_modules, it could be in the same folder with the libs/library_name or at the root level of the monorepo.

at the root:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["../../node_modules/flowbite-react/lib/esm/**/*.js"],
  theme: {
    extend: {},
  },
  plugins: [require("flowbite/plugin")],
};

OR

in current directory:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["node_modules/flowbite-react/lib/esm/**/*.js"],
  theme: {
    extend: {},
  },
  plugins: [require("flowbite/plugin")],
};

4. create a style.css file and add tailwind:

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

5. now import the style.css inside .storybook/preview.ts

[getblad]

storybook was installed using nx generate nx/next:storybook-configuration command. I assume that it uses vite as this is .storybook/main.ts

import type { StorybookConfig } from '@storybook/react-vite';

import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { mergeConfig } from 'vite';

const config: StorybookConfig = {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: ['@storybook/addon-essentials'],
framework: {
name: '@storybook/react-vite',
options: {},
},

viteFinal: async (config) =>
mergeConfig(config, {
plugins: [nxViteTsPaths()],
}),
};

export default config;

I did everything you said, and it still doesnt work properly. styles is not applied to the storybook preview.

[SutuSebastian]

I'll need to have to reproduce ur setup 1:1 locally in order to give more insights

[MiroslavPetrik]

I have one SB + flowbite running here https://github.com/form-atoms/flowbite/tree/main/.storybook You might notice something off

just 2 cents

[getblad]

I reinstalled storybook again using @nx/next generator and repeated your guide @SutuSebastian and everything seems to work now. Thank you everyone!

[SutuSebastian]

Wonderful! 🔥