components
grid-background
Grid Background
Grid Background
Required
Install dependencies
yarn add framer-motion clsx tailwind-merge mini-svg-data-uri
Add util file
lib/utils.ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Add TailwindCSS plugin
tailwind.config.ts
const svgToDataUri = require('mini-svg-data-uri');
const {
default: flattenColorPalette,
} = require('tailwindcss/lib/util/flattenColorPalette');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{ts,tsx}'],
darkMode: 'class',
theme: {
// ...
},
plugins: [
require('@tailwindcss/aspect-ratio'),
function ({ matchUtilities, theme }: any) {
matchUtilities(
{
'bg-grid': (value: any) => ({
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>`
)}")`,
'bg-dot': (value: any) => ({
backgroundImage: `url("${svgToDataUri(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
)}")`,
}),
},
{ values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
);
},
],
};