Published on

Gradient Text using TailwindCSS


1

Create a utility function for merging classes

See how to create a utility function for this as shown here

2

Create the component

components/GradientText.tsx
import classNames from 'lib/classnames'
import React, { FunctionComponent } from 'react'

interface IGradientTextProps {
  className?: string
}

const GradientText: FunctionComponent<IGradientTextProps> = ({
  children,
  className = '',
  ...rest
}): JSX.Element => {
  const elementClassName = classNames(
    'bg-clip-text text-transparent bg-gradient-to-r font-extrabold from-pink-600 to-sky-600 dark:from-pink-400 dark:to-sky-400 selection:text-gray-800 dark:selection:text-gray-200',
    className
  )
  return (
    <span className={elementClassName} {...rest}>
      {children}
    </span>
  )
}

export default GradientText
3

Use it

import React, { FunctionComponent } from 'react'
import GradientText from 'components/GradientText'

const Headline: FunctionComponent = () => {
  return (
    <div>
      <GradientText>Catchy headline here</GradientText>
    </div>
  )
}

export default Headline
4

Example

Catchy headline here

Updates straight in your inbox!

A periodic update about my life, recent blog posts, TIL (Today I learned) related stuff, things I am building and more!

Share with others