How to Create Custom Gradients in Tailwind CSS with JIT

Creating Gradients with Tailwind CSS JIT

If you're using these gradients more than once, it's worth adding them to the Tailwind CSS config.

The syntax for creating a gradient might seem confusing, but it's easy to understand when you see that spaces are replaced with underscores. Here's an example:

In CSS, this would be:

background-image: linear-gradient(180deg, #eab308 40%, #a855f7 60%, #3b82f6);

The underscores after the commas are a personal choice. I leave them in for readability, but you can remove them.

Conic Gradients in Tailwind CSS with JIT

For this, I've used Hypercolor to find a conic-gradient for the example.

Here's a preview of how it looks:

This results in the following CSS:

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

Radial Gradients in Tailwind CSS with JIT

Again, I'm using Hypercolor to find a radial-gradient for the example.

Here's a preview of how it looks:

This results in the following CSS:

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