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

Move custom CSS within layers to corresponding Tailwind layer #2312

Merged
merged 2 commits into from
Sep 4, 2020

Conversation

adamwathan
Copy link
Member

This PR takes any custom CSS defined within a @layer at-rule that matches one of Tailwind's layers and groups them together with the corresponding Tailwind rules.

For example, this CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn { background: blue }
}

@layer utilities {
  .align-banana { text-align: banana }
}

@layer base {
  h1 { font-weight: bold }
}

@layer components {
  .card { border-radius: 12px }
}

@layer base {
  p { font-weight: normal }
}

@layer utilities {
  .align-sandwich { text-align: sandwich }
}

...conceptually becomes this:

@tailwind base;
h1 { font-weight: bold }
p { font-weight: normal }

@tailwind components;
.btn { background: blue }
.card { border-radius: 12px }

@tailwind utilities;
.align-banana { text-align: banana }
.align-sandwich { text-align: sandwich }

This is useful for avoiding CSS declaration order specificity issues and lets you decouple authoring order from intended render order. This is generally inline with the new @layer CSS proposal that came out shortly after we introduced this at-rule to Tailwind ourselves without knowing that existed, heh.

This is a change in behavior to how things worked before but we don't document the @layer rule outside of mentioning it in the release notes for Tailwind 1.6. I am going to be a bit bold and classify this as a bugfix, as this is how this always should have worked.

@adamwathan adamwathan merged commit 09bd7d4 into master Sep 4, 2020
@adamwathan adamwathan deleted the group-layers branch September 4, 2020 18:21
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 this pull request may close these issues.

2 participants