SVG Pattern Backgrounds with TailwindCSS

README.MD

Install "mini-svg-data-uri"

$ pnpm install mini-svg-data-uri

Modify your tailwind.config.js like so

** @type {import('tailwindcss').Config} */

const svgToDataUri = require('mini-svg-data-uri')

module.exports = {
  darkMode: 'class',
  content: [
    ...
  ],
  ...
  plugins: [
    ...,
    function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'bg-grid': (value) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"><path fill="${value}" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"></path></svg>`
              // Replace the above with your svg
            )}")`,
          }),
        },
        { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
      )

      matchUtilities(
      ...
    },
    ...
}