This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: Configuration with TailwindCss #25177
Comments
I also have issues getting Tailwind CSS to work with a vite-based Storybook. In my case, it is a new Remix app with its built-in Tailwind CSS support. I did the following:
async viteFinal(config) {
// Merge custom configuration into the default config
return mergeConfig(config, {
assetsInclude: ["/sb-preview/runtime.js"], // Bug workaround, see https://github.com/storybookjs/storybook/issues/25256
});
},
When I inspect the preview, I see that the CSS file is present, but the Is this an issue with PostCSS? To my understanding, PostCSS doesn't need to be configured in vite-based storybooks. |
Ok, for Remix, I figured it out: while Remix automatically knows how to use Tailwind CSS, PostCSS needs to be configured for Storybook so that it knows that we want to use Tailwind CSS:
// Explicit PostCSS config file to support Tailwind CSS in Storybook
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
The Tailwind CSS stylings are applied now. @tibo-glamarche Not sure if this is the same issue in your case. Make sure your project has a PostCSS config file. |
I already have a postcss config file with the same configuration as you, but it doesn't work. Thanks anyway! |
@integrayshaun is this something you can help with? |
Same problem here using NextJS |
can you share a reproduction of your problem so that I can dig in? |
any progress with this? same story with TurboRepo and Next.js, tailwind classes not applied even with direct css file with tailwind config. Only thing that works is to import output css file |
@rafalwawrzyk I'm still waiting on a reproduction from someone so that I can investigate. Can you provide one? |
Hey! I have the same problem with TurboRepo and React when I use this example: https://github.com/vercel/turbo/tree/main/examples/design-system and I install tailwindCSS. |
If we have structure like this in monorepo:
storybook is a standalone application
In ui package we got all components with stories Also to precise this example, some-project-1 and some-project-2 are next apps, when the storybook is based on react app If you have questions, feel free :) |
I have found the solution to my problem. Turns out I only needed to add this: |
I've put together an example repository, which is a monorepo, based on turbo and has successfully set up Tailwind with Storybook: https://github.com/valentinpalkovic/example-turbo-repo-tailwind-storybook The folder structure looks like this:
Let's go through the steps I've done to make it work: Init TailwindI have installed and initialized Tailwind in
I have followed the tailwind guide to configure + const { join } = require("node:path");
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ["./src/**/*.{js,ts,jsx,tsx}"],
+ content: [join(__dirname, "./src/**/*.{js,ts,jsx,tsx}")],
theme: {
extend: {},
},
plugins: [],
} Setup Tailwind for StorybookIn Storybook Vite-based projects, Vite will automatically detect a postcss.config.js file and will apply all the setup plugins. I have installed and initialized tailwind and the autoprefixer plugin as described in the official Tailwind docs for Vite:
Now delete the generated tailwind config, because we will refer the one in /** @type {import('postcss-load-config').Config} */
const config = {
plugins: [
require("autoprefixer"),
require("tailwindcss")("../../packages/ui/tailwind.config.js"),
],
};
module.exports = config; As the last step, I've created a import "../../../packages/ui/index.css"; After this, Storybook starts and correctly applies Tailwind classes. Reproduction
Please let me know if it doesn't work in your scenario or you still have questions. |
I am converting this into a discussion because it is more about configuring TailwindCSS in a mono-repo rather than an actual issue with Storybook. |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Describe the bug
I have followed the procedure in the documentation and the proposed solution of other similar issues but it still doesn't work.Here is what I have tried:
In my app, I import the same index.css and it works.
To Reproduce
No response
System
Additional context
I am using React + vite
Tailwind v3.3.3
The text was updated successfully, but these errors were encountered: