@rozsazoltan/tailwindcss-patterns weekly downloads statistics

Tailwind CSS Patterns

A simple tailwind plugin to display Hero Patterns.

Installation

npm i @rozsazoltan/tailwindcss-patterns

TailwindCSS v4

CSS entrypoint

TailwindCSS v3

[!WARNING] It is important to note that the package has been rewritten in ESM, so it works exclusively in ESM environments. You will need to use postcss.config.mjs and tailwind.config.mjs; or declare "type": "module" in your package.json.

tailwindcss.config.ts

Usage

[!IMPORTANT] Breaking change: The original tailwindcss-hero-patterns plugin provided heropattern-* utilities. I believe that, with pattern-* being available, it's simpler to shorten the name, so in this plugin the utilities are now used as pattern-*.

Here is the list of the available templates:

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

Customization

In Tailwind CSS v4, you can customize under the --pattern-* namespace using CSS-first configuration. In Tailwind CSS v3, the theme.pattern key is available for JS-based configuration. Since the plugin was released primarily for v4 compatibility, I won't go into details regarding v3 configuration.

New pattern

You can publish a new pattern using the --pattern-* namespace:

Remove defaults

You can remove all default patterns; in this case, you will only be able to use the patterns you declare afterwards.

Color

By default, the pattern-* utility uses the colors declared in --color-*. However, similar to the --text-color-* or --background-color-* namespaces, you can declare colors specifically for use by the pattern-* utility via the --pattern-color-* namespace.

Opacity

The original tailwindcss-hero-patterns plugin handled this separately. However, starting from Tailwind CSS v4, the old bg-opacity-*, border-opacity-*, and other utilities were removed, so having a pattern-opacity-* utility doesn't make much sense. Instead, the opacity value can be passed as a modifier, similar to bg-sky-500/30.

Since any number or variable can be passed, there's no need to provide a separate declaration.

Contributions

This plugin includes only the changes required for Tailwind CSS v4 and is not intended to be actively maintained, so use it at your own discretion. I plan to release a set of utilities under a new brand, based on tools and snippets I have shared over the years in GitHub Discussions, Stack Overflow answers, and other platforms with the wider community. The plan is to eventually migrate tailwindcss-patterns into this new package as well.

Credits

Special thanks to @svengau for creating the original tailwindcss-hero-patterns. The package worked well up to Tailwind CSS v3, but migrating to ESM became necessary to ensure smooth maintenance going forward. Feel free to use this package starting from Tailwind CSS v4.

Thanks to the team behind Hero Patterns for providing the SVG patterns used in this package for free.

Description from the npm listing.