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-spring-5 animation to images when hovered over in the blog posts on this website. Try hovering over the image below.

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 image component in the blog posts:

const Image = ({ ...rest }: ImageProps) => (
  <NextImage className="duration-700 ease-spring-4 hover:scale-105" {...rest} />
)

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!