8000 < 8000 link crossorigin="anonymous" rel="modulepreload" href="https://github.githubassets.com/assets/80897-59d2fca4379e1f6e.js" /> Move custom CSS within layers to corresponding Tailwind layer by adamwathan · Pull Request #2312 · tailwindlabs/tailwindcss · GitHub
Skip to content

Move custom CSS within layers to corresponding Tailwind layer - #2312

Merged
adamwathan merged 2 commits into
masterfrom
group-layers
Sep 4, 2020
Merged

Move custom CSS within layers to corresponding Tailwind layer#2312
adamwathan merged 2 commits into
masterfrom
group-layers

Conversation

@adamwathan

@adamwathan adamwathan commented Sep 4, 2020

Copy link
Copy Markdown
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

Reviewers

@RobinMalfait RobinMalfait RobinMalfait approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@adamwathan @RobinMalfait