nico.fyi
    Published on

    How to use Open Props with Tailwind CSS

    Spice up the animation!

    Authors

    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:

    components/PageTitle.tsx
    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