Utilizing CSS Cascade Layers to Handle Customized Kinds in a Tailwind Mission | 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 method is to make use of !necessary to be 100% sure the model might be utilized, no matter specificity conflicts.

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

Cascade layers enable 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 smart layer order helps keep away from styling conflicts and specificity wars. That’s what makes CSS Cascade Layers an excellent software for managing {custom} kinds alongside kinds from third-party frameworks, like Tailwind.

A Tailwind supply .css file normally 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 provide 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 — referred to 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 personal {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 concerning the CSS customary, however let’s take a fast take 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 approach to inject your personal further kinds right into a specified a part of the output CSS file.

For instance, to append your personal kinds to the base kinds, you’d do the next:

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

The parts layer is empty by default — it’s only a place to place your personal lessons. If you happen to have been doing issues the Tailwind manner, you’d most likely use @apply (though the creator of Tailwind just lately suggested in opposition to it), however it’s also possible to write lessons the common manner:

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

The CSS customary is rather more highly effective. Let’s get again to that…

Utilizing the CSS customary @layer

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

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

@layer tailwind-base {
  @tailwind base;
}

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

In contrast to the Tailwind directive, these don’t get compiled away. They’re understood by the browser. In reality, 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 offered upfront. Make sure you embody this line earlier than another code that makes use of @layer. The primary layer within the listing would be the least highly effective, and the final layer within the listing would be the most highly effective. Which means tailwind-base is the least highly effective layer and any code in it will likely be overridden by all the following layers. That additionally means tailwind-utilities will all the time trump another 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 embody 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 !necessary). So, you could possibly additionally choose to go away utilities and variants outdoors 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 helpful. Let’s create a model of :focus-within that solely responds to keyboard focus somewhat than mouse clicks utilizing the :has selector (which lands in Chrome 105). This can model a mother or father factor when any of its youngsters 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: strong 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    define: strong 2px blue;
  }
}

Let’s say in only one occasion we wish to override the outline-color from blue to one thing else. Let’s say the factor 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 customary @layer overrules specificity.

In consequence, we will use advanced 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 !necessary utilization to get what we wish.