Pro Tailwind - Animated Background Stripes Recipe

demo.html

<div class="m-8 grid gap-4">
  <div class="flex flex-wrap gap-4">
    <div class="stripes h-16 w-20 rounded-lg bg-pink-600 stripes-white stripes-size-sm"></div>
    <div class="stripes h-16 w-20 rounded-lg bg-pink-600 stripes-white"></div>
    <div class="stripes h-16 w-20 rounded-lg bg-pink-600 stripes-white stripes-size-lg"></div>
    <div class="stripes h-16 w-20 rounded-lg bg-pink-600 stripes-white stripes-size-xl"></div>
    <div class="stripes h-16 w-20 rounded-lg bg-pink-600 stripes-white stripes-size-[99px]"></div>
  </div>
</div>

stripes-plugin.cjs

//? Pro Tailwind's Animated Background Stripes
//? https://www.protailwind.com/tutorials/animated-background-stripes
const plugin = require("tailwindcss/plugin");

module.exports = plugin(
	function ({ addBase, addComponents, addUtilities, matchUtilities, theme }) {
		// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		//  Base layer
		// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		addBase({
			// Setting default stripe options
			":root": {
				"--stripes-rgb": "0 0 0",
				"--stripes-angle": "-45deg",
				"--stripes-opacity": "1",
				"--stripes-size": "20px",
			},
			// Keyframe animations
			"@keyframes slide": {
				from: { transform: "translateX(0)" },
				to: { transform: "translateX(var(--stripes-size))" },
			},
		});

		// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		//  Components layer
		// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		addComponents({
			".stripes": {
				position: "relative",
				overflow: "hidden",
			},
			".stripes > *": {
				isolation: "isolate",
			},
			".stripes:before": {
				"--stripes-color": "rgb(var(--stripes-rgb) / var(--stripes-opacity))",
				position: "absolute",
				top: "0",
				right: "0",
				height: "100%",
				width: "calc(100% + var(--stripes-size))",
				content: "''",
				backgroundImage: `linear-gradient(
          var(--stripes-angle),
          var(--stripes-color) 5%,
          transparent 5% 45%,
          var(--stripes-color) 45% 55%,
          transparent 55% 95%,
          var(--stripes-color) 95%)`,
				backgroundSize: "var(--stripes-size) var(--stripes-size)",
			},
			//? Make animation play only on hover
			".stripes:hover::before": {
				animation: "slide 1s infinite linear",
			},
		});

		// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		//  Utilities layer
		// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		addUtilities({
			".stripes-white": {
				"--stripes-rgb": "255 255 255",
			},
			".stripes-reverse": {
				"--stripes-angle": "45deg",
			},
		});

		// Support for all opacity values
		matchUtilities(
			{
				"stripes-opacity": (value) => ({
					"--stripes-opacity": value,
				}),
			},
			{
				values: theme("opacity"),
			}
		);

		// Support for different stripe sizes
		matchUtilities(
			{
				"stripes-size": (value) => ({
					"--stripes-size": value,
				}),
			},
			{
				values: theme("stripesSize"),
			}
		);
	},
	{
		theme: {
			stripesSize: {
				sm: "12px",
				md: "20px",
				lg: "30px",
				xl: "40px",
			},
		},
	}
);