-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
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
Update tailwindcss @apply
suggestion
#5406
Conversation
|
Update looks good to me. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @bluwy! If I understand correctly, this text and the code sample that follow are not strictly speaking related to the config.applyBaseStyles
option, correct? We just added these there because we were already talking about @layer
?
I wonder if we should move this to the “Troubleshooting” section with a dedicated subheading like “Using @apply
with components”?
Make sense to me. I wonder why the previous docs were there too but this definitely sounds like a troubleshooting guide. Will move it there. |
Updated the docs and moved the two |
For issue (1), is that a Tailwind issue in general, or does it have something to do with how Tailwind picks up the config file in an astro project? For (3), @media (prefers-color-scheme: dark) {
h1:where(.astro-GFDZHAND) {
--tw-text-opacity: 1;
color:rgb(249 250 251 / var(--tw-text-opacity))
}
} |
It's a tailwind issue in general added in #4353. The tailwind docs also outlined this caveat: https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css Yup re no3, it only happens for |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @bluwy! I think these are really good and provide clear examples of both the problem and what to do instead. I’ve suggested some wording tweaks but then should be good to go 🙌
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for working through this with me @bluwy!
Changes
There has been a couple issues about tailwindcss recently:
This PR clarifies that inline classes should be preferred instead of
@apply
as it does not work for classes likedark:text-pink
and duplicates the global and Astro scoped style output.Question: Should we mentioned that it's not possible to code-split tailwind CSS output per-page too? All pages can currently only share one stylesheet file.
Testing
N/A
Docs
Updated tailwindcss README