-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
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
Styles not applying with TailwindCSS's @apply on vue 3 #13962
Comments
Hey @jfdelarosa - can you explain what |
It's a feature TailwindCSS implements through PostCSS, to change the way you apply their styles on your project:
Basically these two have the same visual output, but differ in the css output (because second one relies on postcss):
Now that you mention it, I also tried loading Tailwind as a postcss plugin on the main.js file with no success:
|
@jfdelarosa Are you writing these things in |
I was using Vue's SFC with SCSS, using just css works but you loose sass benefits. Hopefully I found a workaround, theres a postcss plugin called postcss-nested which adds a sass-like syntax, it works like a charm. Seems like there's something wrong on my storybook's config, which results in postcss not been able to handle both sass and tailwindcss, I think it's actually better to use postcss-nested, because it doesn't make much sense to use two different css preprocessors. |
The Glad you were able to solve your issue by switching to a postcss plugin! |
Hi @jfdelarosa, so you were able to configure Storybook with Vue 3 and TailwindCSS? Do you have the required config files somewhere I can look at? Thank you! :) |
Hi! I haven't really tried it again, but if you don't use @apply, you can use the settings from the OP! |
@jfdelarosa fixed ? can you throw my settings. We couldn't start the tailwinds. |
did someone fix this? I'm also trying to use @apply |
Found a fix.
|
I'm using Next.js and adding |
Thanks @Garine519 I never would have figured it out since I am awful with webpack |
it didn't work for me... |
I am using React, Next.js, AntD, Tailwind with the mix of Tried many solutions, but simply adding |
Describe the bug
I'm trying to use Vue 3 + Pug + SASS + TailwindCSS, after reading some issues (e.g. #10654), I was able to get everything but Tailwind working correctly. My settings work if you use the TailwindCSS classes, not with
@apply
(PostCSS).To Reproduce
Use the settings listed below.
Expected behavior
Tailwind rules should be transformed into css.
Screenshots
Code snippets
.storybook/main.js
.storybook/preview.js
package.json
postcss.config.js
System
The text was updated successfully, but these errors were encountered: