How to use Open Props with Tailwind CSS

There's a new CSS tool called Open Props, an open-source collection of CSS variables. It's essentially a collection of CSS variables that can be utilized anywhere CSS is used.

Since these are merely CSS variables, we can integrate them with Tailwind CSS. We don't even need to utilize everything Open Props offers. For instance, we can selectively use the Easing variables to enhance our CSS animations. As an example, I've added the ease-elastic-in-out-5 animation to the blog post titles when hovered over on this website. Try hovering over the blog title above.

How to use

First, let's install Open Props:

npm install open-props

Then, we'll update our CSS file. For this website, I updated the tailwind.css file:

@import 'open-props/easings';

Next, we need to update the tailwind.config.js file:

  theme: {
    extend: {
      transitionTimingFunction: {
        'spring-1': `var(--ease-spring-1)`,
        'spring-2': `var(--ease-spring-2)`,
        'spring-3': `var(--ease-spring-3)`,
        'spring-4': `var(--ease-spring-4)`,
        'spring-5': `var(--ease-spring-5)`,
        'elastic-in-out-1': `var(--ease-elastic-in-out-1)`,
        'elastic-in-out-2': `var(--ease-elastic-in-out-2)`,
        'elastic-in-out-3': `var(--ease-elastic-in-out-3)`,
        'elastic-in-out-4': `var(--ease-elastic-in-out-4)`,
        'elastic-in-out-5': `var(--ease-elastic-in-out-5)`,
      },

Finally, we can simply use the added class names in our components. For example, I updated the blog title component in the blog posts:

export default function PageTitle({ children }: Props) {
  return (
    <h1 className="ease-elastic-in-out-5 ...other classes...">
      {children}
    </h1>
  )
}

That's it!

Are you working in a team environment and your pull request process slows your team down? Then you have to grab a copy of my book, Pull Request Best Practices!

Image