TailwindCSS Recipe Missing Info

[marlatte]

I recently added Storybook to my Next.js app, and even after following the this recipe and it's YouTube counterpart, my stories were only picking up some styling from Tailwind, nor was HMR working. I eventually found the answer, and I would love to add it to the recipe so future users don't face the same frustration.

The solution wasn't in my Storybook config files, but my tailwind.config.ts. Nonetheless, I think it's worth adding a line to the recipe since it's an integration guide, not just Storybook docs.

The problem was that the stories/ directory created by npm create storybook@latest fell outside the folders where Tailwind was looking for content (in my case, the Next.js app/ directory). I think it would be very helpful to add a step to the recipe. I'm happy to open the PR myself.

---

x.x Provide Stories to Tailwind

Depending on your project's structure, the stories/ directory may be outside the rest of your app. Make sure your stories are listed inside your Tailwind config's content array.

// tailwind.config.js

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}', // your project's other code
    './path/to/stories/**/*.{js,ts,jsx,tsx,mdx}',
  ],
// other config settings
}

---

I think the best place for this is making it either 2.2 after Angular, or just make it step 3 and push the theme-switcher to step 4.

Also, if the wording could be clearer, I can change it as needed.