Tailwind CSS has become one of the most popular utility-first frameworks- but being popular doesn’t mean perfection.
There are a few challenges in using Tailwind CSS, like having a huge stylesheet during development and having to enable extra variants on your own, among others.
In this guide, we’ll learn how to conquer them.
First up, we’ll cover a very important feature of the Tailwind CSS framework known as the just-in-time compiler, more commonly referred to as the JIT compiler.
Keep reading to see some practical applications of the JIT compiler, starting with arbitrary values which help us extend Tailwind’s design system.
Arbitrary Values
Cases may arise where we’d rather use values outside the already created design system. These values may be for our colors, padding, margin, width, and so on.
The JIT compiler enables us to achieve this with the use of arbitrary values. These arbitrary values allow us to break out of the design system and define our own custom values.You’d see these values in this syntax: [300px], [#FA8072].
In order to do this, we must nest the value in square brackets so that Tailwind knows we are defining new values in our design system. Here’s an example below:
<div class="mt-[300px] w-[500px]">
</div>
In the example above, we have used two new values — 300px and 500px — which didn’t exist in the design system initially. Prior to the JIT compiler, you’d probably have to first define these values in the config.js file to achieve this same effect.
The next example shows how you can define new color values as:
<p class="bg-[#FA8072] ">This paragraph has a salmon background </p>
Here, we have created a paragraph with a salmon background color. You wouldn’t see a Tailwind utility class that says bg-salmon, but we’re able to define this using an arbitrary value.
Stackable Variants
With the JIT compiler, all variants are enabled by default so you can forget about using the config.js file to enable any. In addition to this, variants can be stacked to achieve awesome results.
Each variant is separated by a colon.
Here is an example:
<button class="sm:dark:disabled:focus:hover:bg-blue-300">
The code above creates a button with the focus property disbaled and turns blue when hovered on.
Pseudo-Elements
The JIT compiler allows us to style pseudo-element. Pseudo-elements are used to style specific parts of an element such as styling the first letter of an element or inserting content before/after an element.
Here are a few examples:
<p class="first-letter:bg-green-600">
First letter will have a green color
</p>
In the example above, the first letter “M” will have a green color.
<p class="selection:bg-green-600">
Highlight this text to see a green color.
</p>
When you highlight the text from the code above, it will have a green background color.
Per-Side Border Colors
Due to file size considerations, this feature was left out initially, but that changed with the release of the JIT compiler. We can give each border a different color.
Let’s see an example of this:
<div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400">
</div>
We have given our div multiple border colors — the top border is red, the right border is blue, the bottom border is yellow, and the left border is green.
Summary
The JIT compiler took the Tailwind CSS framework to a whole new level. Its release came with new helpful features to make our use of the framework better. We no longer have to worry about our file size being so heavy they make our dev tools lag, since only the styles we actually use are generated, all on the go.
We’ve far from reached the limitations of Tailwind’s JIT capabilities here, so your next steps will be to test for yourself and explore how you can best harness JIT’s features for your work.
Learned something new today? Check out our full library of web development tools to step up your web dev game: kinsta.com/topic/web-development-tools