tailwind css gradients explained

tailwind-css-gradients.md

Tailwind css gradients explained

I will be updating this gist time and again.In this gist, i show how you how you can use gradients to improve your front end.

Repo

https://github.com/Bwogi/modals-in-action

two colour combinations

Person component

The Person component has a gradient flowing from left to the right from white color to a grey shade.

className = 'bg-gradient-to-r from-white to-gray-500 ...'

Screenshot before

Screenshot after applying the gradient

Three colour combinations

Navbar component

The Navbar has a gradient flowing from left to the right from an indigo shade via a brown shade to a grey one.

className='bg-gradient-to-r from-indigo-800 via-brown-300 to-gray-500 ...'

Screenshot before

Screenshot after applying the gradient

The Details component

The Details component has a gradient flowing to the right from white via a red shade to a grey one.

className='bg-gradient-to-r from-white via-red-300 to-gray-500 ...'

Screenshot before

Screenshot after applying the gradient

** One Coloured gradient **

// Notice from the code above, we also have another utility class called .bg-gradient-to-r; this must be included for gradients to work. This class will tell our element that we want the background gradient to flow to the right.

Specifying an end colour(2 colour gradient)

If we want to specify an ending color for our gradient we can use the .to- utility class like so:

<div class="from-blue-600 to-purple-500 bg-gradient-to-r w-full h-64 block"></div>

Third color

In order to specify a middle color in our gradient we can utilize the .via- class, like so:

<div class="from-blue-600 via-teal-500 to-purple-500 bg-gradient-to-r w-full h-64 block"></div>

If you phrase it like a sentence, it's easier to remember. "I want my background gradient to flow to the right, and I want it to go from blue, via teal, to purple."

Gradient Direction

In addition to flowing your gradient to the right, you may also use the following classes.

    .bg-gradient-to-t from bottom to top
    .bg-gradient-to-r from left to right
    .bg-gradient-to-bottom from top to bottom
    .bg-gradient-to-l from right to left

There are also a few more directions where you can choose to create a diagonal gradient. To accomplish this, you can use the following:

    .bg-gradient-to-tr from bottom left to top right
    .bg-gradient-to-br from top left to bottom rright
    .bg-gradient-to-bl from top right to bottom left
    .bg-gradient-to-tl from bottom right to to top left

Text Gradients

You can also apply gradients to your text elements by leveraging the .bg-clip-text utility class.

<div class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-500 text-5xl font-black">
    Tailwind Rocks!
</div>

Notice that we also need to use the .text-transparent class; otherwise, the text color would sit on top of our gradient.

Linear gradients

To give an element a linear gradient background, use one of the bg-gradient-{direction} utilities, in combination with the gradient color stop utilities.

<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-gradient-to-r from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500"></div>

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:bg-gradient-to-r to only apply the bg-gradient-to-r utility on hover.

div class="bg-gradient-to-l hover:bg-gradient-to-r">
  <!-- ... -->
</div>

Feel free to add a comment or two. This gist is definitely not conclusive but will grow with your input. Thanks.

Gist updated