Gradient Text using TailwindCSS

Create a utility function for merging classes

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

Create the component

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;

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;

Example

Catchy headline here