Parallax plugin for tailwindcss

tailwind.config.ts

/*

Provides a tailwindcss plugin for parallax effects. 

Usage:

  1. Define class names for background images in the themes section of tailwind.config.ts
  2. Use parralax effect on element:
    
      <div className="parallax-my-background w-screen h-screen"></div>
  
*/

import type { Config } from "tailwindcss";
const plugin = require('tailwindcss/plugin')

const config: Config = {
  theme: {
    extend: {
      backgroundImage: {
        "my-background": "<background-image definition here>
      },
    },
  },
  plugins: [
    plugin(function({matchUtilities, theme}) {
      matchUtilities(
        {
          parallax: (value) => ({
              backgroundImage: value,
              backgroundAttachment: 'fixed',
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat',
              backgroundSize: 'cover'
          })
        },
        { values: theme('backgroundImage') }
      )
    })
  ],
};
export default config;