Hi please help me to setup for react js with tailwind css postcss 8+ i cant using tailwind on storybook

[rhnnss]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Please create a reproduction by running npx sb@next repro and following the instructions. Read our documentation to learn more about creating reproductions. Paste your repository and deployed reproduction here. We prioritize issues with reproductions over those without.

System Please paste the results of npx sb@next info here.

Additional context Add any other context about the problem here.

[humarkx]

@Rayhanns04 Here is my code to use Tailwind with postcss

postcss.config.js

module.exports = { plugins: { 'postcss-import': {}, 'postcss-nesting': {}, tailwindcss: {}, autoprefixer: {}, }, }

.storybook/main.js inside addons[ ]

{ name: '@storybook/addon-postcss', options: { postcssLoaderOptions: { implementation: require('postcss'), }, }, },

import tailwind in preview.js

import 'tailwindcss/tailwind.css'

[mateusvahl]

I would love to see it documented somewhere 🙇‍♂️

[dustinevan]

For a Vite + Tailwind + React + Storybook, you have to be on storybook": "^7.0.0-alpha. On this version, all you need to do is import 'tailwindcss/tailwind.css' Not sure why. But it's working for me.

[ArmanNisch]

The answer from @humarkx works... thank you for this. Warning to anyone else, the steps in the official docs do not work: https://storybook.js.org/recipes/tailwindcss Specifically: do not follow the steps in the official docs relating to the .storybook/main.js config. Install the @storybook/addon-postcss and then implement steps as specified above by @humarkx .

[shilman]

cc @Integrayshaun

[austinm911]

i was stuck on this in a pnpm monorepo setup too.

this worked for me.. no idea why the tailwind.css import works. thanks @humarkx @dustinevan

main.js

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
    addons: [
        getAbsolutePath('@storybook/addon-links'),
        getAbsolutePath('@storybook/addon-essentials'),
        getAbsolutePath('@storybook/addon-onboarding'),
        getAbsolutePath('@storybook/addon-interactions'),
        getAbsolutePath('@storybook/addon-styling'),
    ],
    framework: {
        name: getAbsolutePath('@storybook/react-vite'),
        options: {},
    },
    docs: {
        autodocs: 'tag',
    },
}
export default config

postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

preview.js

import 'tailwindcss/tailwind.css'
/** @type { import('@storybook/react').Preview } */
const preview = {
    parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
    },
}

export default preview

[ShaunEvening]

Hey @austinm911 👋

Since you're using react-vite you don't need to use @storybook/addon-styling to configure tailwind. However, if you're using it for the light and dark mode toggle, you can switch it out for @storybook/addon-themes which does not contain all of the webpack dependencies that addon-styling does :)

[TheMikeyRoss]

@Integrayshaun I'm in a similar situation as @austinm911 but i'm in a @storybook/nextjs framework rather than vite.

all the code is in here

I just migrated to pnpm monorepo structure and the /packages/storybook is not recognizing the tailwind config in /packages/components

[ShaunEvening]

Hi @TheMikeyRoss,

When using @storybook/nextjs you shouldn't use @storybook/addon-styling-webpack as this overrides the nextjs specific configuration which will cause issues.

the /packages/storybook is not recognizing the tailwind config in /packages/components

Tailwind looks for the closest config and so the one in /packages/storybook would get picked up. If you want to use the one in /packages/components, you need to specify that in your /packages/storybook/postcss.config.js file.

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: { config: '../path/to/config' },
    autoprefixer: {}
  }
};

[cgcompassion]

Note: https://github.com/storybookjs/storybook/issues/26869#issuecomment-2079799851