Custom Gradients with JIT in Tailwind CSS (No Custom CSS)
What is JIT?
Since v3, JIT has been the default in Tailwind CSS and has bought a lot of power to the framework. One of the best additions are arbitrary values, these allow you to replace custom CSS with Tailwind CSS like classes.
Without Tailwind CSS JIT
<div class="absolute p-4 floating-alert">
Hello World! 👋
</div>
<style>
.floating-alert {
bottom: 5px;
right: 5px;
}
</style>
With Tailwind CSS JIT
<div class="absolute p-4 bottom-[5px] right-[5px]">
Hello World! 👋
</div>
The benefit here is keeping everything within the HTML, this means:
- Less switching between files
- No need to update Tailwind CSS config
- Easily use Tailwind CSS breakpoints
top-[2px] sm:top-[3px] lg:top-[5px]
Creating Gradients with Tailwind CSS JIT
If you are using these gradients more than once, it's worth adding them to the Tailwind CSS config.
The syntax for creating a gradient looks confusing, but it's easy to understand once you realise that spaces are replaced with underscores. Take the following example:
<div class="bg-[linear-gradient(180deg,_#005BBB_49.9%,_#FFD500_50%)]"></div>
In CSS this would be:
background-image: linear-gradient(180deg, #005BBB 49.9%, #FFD500 50%);
The underscores after commas are personal choice, I leave them in for readability but you can remove them.
Here's a preview of the example created in Tailwind CSS play sandbox.
Let's try something a little tougher.
Conic Gradients in Tailwind CSS with JIT
For this I've used Hypercolor to find a conic-gradient
for the example.
Here's the code written to replicate the example:
<div class="bg-[conic-gradient(at_left_center,_#eab308,_#a855f7,_#3b82f6)]"></div>
Which results in the follow CSS:
background-image: conic-gradient(at left center, #eab308, #a855f7, #3b82f6);
Radial Gradients in Tailwind CSS with JIT
Once again I'm using Hypercolor to find a radial-gradient
for the example.
Here's the code written to replicate the example:
<div class="bg-[radial-gradient(at_center_bottom,_#fde68a,_#7c3aed,_#0c4a6e)]"></div>
Which results in the follow CSS:
background-image: radial-gradient(at center bottom, #fde68a, #7c3aed, #0c4a6e);
And that's all it takes to add custom gradients, even styles that don't exist in Tailwind CSS to Tailwind CSS with JIT. Checkout Hypercolor for more gradients including; mesh gradients, grainy gradients and a gradient generator.