Grid Background
Preview
Code
Background
Tailwind CSS
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' } ); }, ], };
Backgrounds