Created
July 20, 2023 10:10
-
-
Save Insidiae/d6ae45e30afb3ac639f324b0f2e6d3d9 to your computer and use it in GitHub Desktop.
Pro Tailwind - Animated Background Stripes Recipe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//? 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", | |
}, | |
}, | |
} | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment