jigsaw, overcast, formalinvitation, topography, texture, jupiter, architect, cutout, hideout, graphpaper, yyy, squares, fallingtriangles, pianoman, piefactory, dominos, hexagons, charliebrown, autumn, temple, stampcollection, deathstar, churchonsunday, ilikefood, overlappinghexagons, fourpointstars, bamboo, bathroomfloor, corkscrew, happyintersection, kiwi, lips, lisbon, randomshapes, steelbeams, tinycheckers, xequals, anchorsaway, bevelcircle, brickwall, fancyrectangles, heavyrain, overlappingcircles, plus, roundedplusconnected, volcanolamp, wiggle, bubbles, cage, connections, current, diagonalstripes, flippeddiamonds, floatingcogs, glamorous, houndstooth, leaf, linesinmotion, moroccan, morphingdiamonds, rails, rain, skulls, squaresinsquares, stripes, tictactoe, zigzag, aztec, banknote, boxes, circlessquares, circuitboard, curtain, diagonallines, endlessclouds, eyes, floortile, groovy, intersectingcircles, melt, overlappingdiamonds, parkayfloor, pixeldots, polkadots, signal, slantedstars, wallpaper

$3

#### Select only some templates

Hero Patterns contains more than 80 patterns, so the generated CSS could be really heavy (at least 24Mo).

3 solutions to reduce the CSS size during development:

1. only import the desired patterns:

`
const heropatterns = require("tailwindcss-hero-patterns/src/patterns");

module.exports = {
theme: {
heroPatterns: {
architect: heropatterns.architect,
},
extend: {
...
},
},
};
`

1. only import the desired colors and/or shades:

`

module.exports = {
theme: {
heroPatternsShades: ["100", "500"],
heroPatternsColors: ["blue", "red"],
heroPatternsOpacities: ['0, '50', '90', '100'],
},
};
`

And of course, don't forget to purce your CSS before going to PROD.

#### Add your own template

Prefined patterns comes from Hero Patterns, but you can add your own:

`
module.exports = {
theme: {
extend: {
heroPatterns: {
circles: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cpattern id='pattern-circles' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='20' cy='20' r='20'%3E%3C/circle%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23pattern-circles)'%3E%3C/rect%3E%3C/svg%3E");,
},
},
},
};
``

Contributions & debug

If you want to contribute to this project, or just play with this plugin, here is a tailwind playground demo which may interest you.

Credits

Thanks @steveschoger for all those nice patterns :-)