Tailwind

Gradient Headings

Create gradient-colored heading styles.

Page Source Tailwind Gradients

Demo

transition.

grow.

transition.

Can be generated using Tailwind's gradient color stops. Skeleton is not required.

Using @apply

Create a new class using @apply in your app.postcss global stylesheet. Then apply the following styles.

css 
.gradient-heading {
	@apply bg-clip-text text-transparent box-decoration-clone;
	/* Direction */
	@apply bg-gradient-to-br;
	/* Color Stops */
	@apply from-primary-500 via-tertiary-500 to-secondary-500;
}
html 
<h1 class="h1"><span class="gradient-heading">Skeleton</span></h1>