Skip to content
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

Tailwind warns when using @tailwind within a native cascade layer #10216

Closed
adamwathan opened this issue Jan 2, 2023 Discussed in #10198 · 0 comments · Fixed by #10229
Closed

Tailwind warns when using @tailwind within a native cascade layer #10216

adamwathan opened this issue Jan 2, 2023 Discussed in #10198 · 0 comments · Fixed by #10229
Assignees

Comments

@adamwathan
Copy link
Member

Currently Tailwind throws a warning if you use @tailwind anywhere other than at the root of the stylesheet. This shouldn't be the case if just nesting inside of a native @layer at-rule — no reason for us to disallow that as it works totally fine 👍

Relevant code we'll need to look at is here:

https://github.com/tailwindlabs/tailwindcss/blob/master/src/lib/detectNesting.js#L8

Discussed in #10198

Originally posted by yevgeniy-belov December 31, 2022
Im trying to use the new CSS Cascade Layers like this:

@layer tw-base, tw-components, tw-utilities;

@layer tw-base { @tailwind base }
@layer tw-components { @tailwind components }
@layer tw-utilities { @tailwind utilities }

and Im getting the warning below:
[vite:css] Nested @tailwind rules were detected, but are not supported.

Is there a way to get rid of this warning?

Here is the the reproduction:
repo: https://github.com/yevgeniy-belov/vite-react-tw-nesting
codespaces: https://yevgeniy-belov-reimagined-engine-xrjg6pq6wq2vx96.github.dev/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants