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