[tailwindcss]:

[aaronm-git]

Details

Recipe Page: tailwindcss
Recipe Template: tailwindcss

What is wrong

You MUST add this to the tailwind config in NEXTjs 14 with tailwind implementation:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
    "./stories/**/*.{js,ts,jsx,tsx}", // Here!
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};

otherwise tailwind will NOT work in storybook. Took me 2 days to figure this out. Almost stopped trying to use Storybook.

[domyen]

Thanks for the report @aaronm-git!

Just to confirm, you added "./stories/**/*.{js,ts,jsx,tsx}" to the tailwind.config.js file?

I'm not super familiar with Tailwind myself, could you tell me a bit about why that line is needed. Story files don't typically have CSS in them. They import the component itself (which has CSS). So I wouldn't think to have Tailwind look at story files. (I'm probably missing something though!)