Utilizing CSS Cascade Layers to Handle Customized Kinds in a Tailwind Challenge | CSS-Methods

If a utility class solely does one factor, chances are high you don’t need it to be overridden by any kinds coming from elsewhere. One strategy is to make use of !vital to be 100% sure the model might be utilized, no matter specificity conflicts.

The Tailwind config file has an !vital choice that may routinely add !vital to each utility class. There’s nothing flawed with utilizing !vital this fashion, however these days there are higher methods to deal with specificity. Utilizing CSS Cascade Layers we will keep away from the heavy-handed strategy of utilizing !vital.

Cascade layers permit us to group kinds into “layers”. The priority of a layer all the time beats the specificity of a selector. Specificity solely issues inside every layer. Establishing a wise layer order helps keep away from styling conflicts and specificity wars. That’s what makes CSS Cascade Layers a fantastic device for managing {custom} kinds alongside kinds from third-party frameworks, like Tailwind.

A Tailwind supply .css file often begins one thing like this:

@tailwind base;
@tailwind parts;
@tailwind utilities;
@tailwind variants;

Let’s check out the official Tailwind docs about directives:

Directives are {custom} Tailwind-specific at-rules you need to use in your CSS that supply particular performance for Tailwind CSS tasks. Use the @tailwind directive to insert Tailwind’s base, parts, utilities and variants kinds into your CSS.

Within the output CSS file that will get constructed, Tailwind’s CSS reset — generally known as Preflight — is included first as a part of the bottom kinds. The remainder of base consists of CSS variables wanted for Tailwind to work. parts is a spot so that you can add your individual {custom} lessons. Any utility lessons you’ve utilized in your markup will seem subsequent. Variants are kinds for issues like hover and focus states and responsive kinds, which is able to seem final within the generated CSS file.

The Tailwind @layer directive

Confusingly, Tailwind has its personal @layer syntax. This text is in regards to the CSS commonplace, however let’s take a fast have a look at the Tailwind model (which will get compiled away and doesn’t find yourself within the output CSS). The Tailwind @layer directive is a technique to inject your individual further kinds right into a specified a part of the output CSS file.

For instance, to append your individual kinds to the base kinds, you’ll do the next:

@layer base {
  h1 {
    font-size: 30px;
  }
}

The parts layer is empty by default — it’s only a place to place your individual lessons. If you happen to have been doing issues the Tailwind means, you’d in all probability use @apply (though the creator of Tailwind just lately suggested in opposition to it), however you may as well write lessons the common means:

@layer parts {
  .btn-blue {
    background-color: blue;
    coloration: white;
  }
}

The CSS commonplace is far more highly effective. Let’s get again to that…

Utilizing the CSS commonplace @layer

Right here’s how we will rewrite this to make use of the CSS commonplace @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 

Not like the Tailwind directive, these don’t get compiled away. They’re understood by the browser. In truth, DevTools in Edge, Chrome, Safari, and Firefox will even present you any layers you’ve outlined.

You may have as many layers as you need — and identify them no matter you need — however on this instance, all my {custom} kinds are in a single layer (my-custom-styles). The primary line establishes the layer order:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

This must be supplied upfront. Be sure you embrace this line earlier than some other code that makes use of @layer. The primary layer within the record would be the least highly effective, and the final layer within the record would be the most highly effective. Meaning tailwind-base is the least highly effective layer and any code in it is going to be overridden by all the following layers. That additionally means tailwind-utilities will all the time trump some other kinds — no matter supply order or specificity. (Utilities and variants may go in separate layers, however the maintainers of Tailwind will guarantee variants all the time trump utilities, as long as you embrace the variants under the utilities directive.)

Something that isn’t in a layer will override something that’s in a layer (with the one exception being kinds that use !vital). So, you would additionally decide to depart utilities and variants exterior of any layer:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind parts;
}

@tailwind utilities;
@tailwind variants;

What did this truly purchase us? There are many instances when superior CSS selectors are available in fairly useful. Let’s create a model of :focus-within that solely responds to keyboard focus slightly than mouse clicks utilizing the :has selector (which lands in Chrome 105). This may model a guardian aspect when any of its kids obtain focus. Tailwind 3.1 launched {custom} variants — e.g. <div class="[&:has(:focus-visible)]:outline-red-600"> — however generally it’s simpler to only write CSS:

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: stable 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    define: stable 2px blue;
  }
}

Let’s say in only one occasion we need to override the outline-color from blue to one thing else. Let’s say the aspect we’re working with has each the Tailwind class .outline-red-600 and our personal .radio-container:has(:focus-visible) class:

<div class="outline-red-600 radio-container"> ... </div>

Which outline-color will win?

Ordinarily, the upper specificity of .radio-container:has(:focus-visible) would imply the Tailwind class has no impact — even when it’s decrease within the supply order. However, not like the Tailwind @layer directive that depends on supply order, the CSS commonplace @layer overrules specificity.

Consequently, we will use complicated selectors in our personal {custom} kinds however nonetheless override them with Tailwind’s utility lessons when we have to — with out having to resort to heavy-handed !vital utilization to get what we wish.