DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Mark Mead
Mark Mead

Posted on • Originally published at hyperui.dev on

How to Create Custom Gradients in Tailwind CSS with JIT

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>
Enter fullscreen mode Exit fullscreen mode

And for the CSSโ€ฆ

.floating-alert {
  bottom: 5px;
  right: 5px;
}
Enter fullscreen mode Exit fullscreen mode

With Tailwind CSS JIT

<div class="absolute p-4 bottom-[5px] right-[5px]">Hello World! ๐Ÿ‘‹</div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

In CSS this would be:

background-image: linear-gradient(180deg, #005bbb 49.9%, #ffd500 50%);
Enter fullscreen mode Exit fullscreen mode

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.

Conic Gradient Example

Here's the code written to replicate the example:

<div
  class="bg-[conic-gradient(at_left_center,_#eab308,_#a855f7,_#3b82f6)]"
></div>
Enter fullscreen mode Exit fullscreen mode

Which results in the follow CSS:

background-image: conic-gradient(at left center, #eab308, #a855f7, #3b82f6);
Enter fullscreen mode Exit fullscreen mode

Radial Gradients in Tailwind CSS with JIT

Once again I'm using Hypercolor to find a radial-gradient for the example.

Radial Gradient Example

Here's the code written to replicate the example:

<div
  class="bg-[radial-gradient(at_center_bottom,_#fde68a,_#7c3aed,_#0c4a6e)]"
></div>
Enter fullscreen mode Exit fullscreen mode

Which results in the follow CSS:

background-image: radial-gradient(at center bottom, #fde68a, #7c3aed, #0c4a6e);
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
naomipham_ profile image
Naomi Pham

This is awesome! Just what I need for my project. Thank you!!

๐ŸŒš Life is too short to browse without dark mode