Doğuhan ELMA tarafından Tailwind Plugin yayınlanma tarihi
108 görünüm
Kayan arkaplan animasyonu...
HTML:
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"> </head> <body> <div class="block grid grid-cols-2 w-[400px] m-8"> <div class="elm-stripes h-20 w-40 m-8"><span class="text-pink-800 font-bold">Default</span></div> <div class="elm-stripes elm-stripes-color-[60_255_255] h-20 w-40 m-8">Color</div> <div class="elm-stripes elm-stripes-size-[32px] h-20 w-40 m-8">Size</div> <div class="elm-stripes elm-stripes-reverse h-20 w-40 m-8">Reverse</div> <div class="elm-stripes elm-stripes-white bg-cyan-500 h-20 w-40 m-8">White</div> <div class="elm-stripes elm-stripes-opacity-[0.2] bg-cyan-500 h-20 w-40 m-8">Opacity</div> </div> </body> </html>
tailwind.config.js:
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [require('./plugins/stripes-plugin.cjs')], }
stripes-plugin.cjs
const plugin = require('tailwindcss/plugin') module.exports = plugin(function ({addBase, addComponents, addUtilities, matchUtilities, theme}) { addBase({ ":root": { "--stripes-rgb": "0 0 0", "--stripes-angle": "-45deg", '--stripes-opacity': '1', '--stripes-size': '10px' }, "@keyframes slide": { from: {transform: "translateX(0)"}, to: {transform: "translateX(var(--stripes-size))"} } }) addComponents({ ".elm-stripes": { position: "relative", overflow: "hidden", isolation: "isolate" }, ".elm-stripes:before": { '--stripes-color': 'rgb(var(--stripes-rgb) / var(--stripes-opacity))', content: "''", zIndex: -1, position: "absolute", top: "0", right: "0", height: "100%", width: "calc(100% + var(--stripes-size))", 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)", animation: "slide 1s infinite linear" } }) addUtilities({ ".elm-stripes-white": {"--stripes-rgb": "255 255 255"}, ".elm-stripes-reverse": {"--stripes-angle": "45deg"} }) matchUtilities({ 'elm-stripes-opacity': value => ({ '--stripes-opacity': value, }), }, { values: theme('opacity') } ) matchUtilities( { "elm-stripes-size": (value) => ({ "--stripes-size": value, }), }, { values: theme("stripesSize"), } ) matchUtilities( { "elm-stripes-color": (value) => ({ "--stripes-rgb": value, }), }, { values: theme("stripesColor"), } ) }, { // Customising the user's theme theme: { stripesSize: { sm: "12px", md: "20px", lg: "30px", xl: "40px", }, stripesColor: { white: "255 255 255", black: "0 0 0", elm: "0 0 255", }, }, } )
0 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.