-
-
Save rphlmr/f616943074686325574a7a3c1a50e69f to your computer and use it in GitHub Desktop.
Tailwind SVG Grid Background : https://twitter.com/jordienr/status/1680143368553213952
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
// Remember to install mini-svg-data-uri | |
// Follow me on twitter for memes @jordienr | |
import { type Config } from "tailwindcss"; | |
const { | |
default: flattenColorPalette, | |
} = require("tailwindcss/lib/util/flattenColorPalette"); | |
const svgToDataUri = require("mini-svg-data-uri"); | |
export default { | |
content: ["./src/**/*.{js,ts,jsx,tsx}"], | |
theme: { | |
}, | |
plugins: [ | |
function ({ matchUtilities, theme }: { matchUtilities: any; theme: any }) { | |
matchUtilities( | |
{ | |
"bg-grid": (value: string) => ({ | |
backgroundImage: `url("${svgToDataUri( | |
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>` | |
)}")`, | |
}), | |
}, | |
{ values: flattenColorPalette(theme("backgroundColor")), type: "color" } | |
); | |
}, | |
], | |
} satisfies Config; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment