@danielfgray/tw-heropatterns weekly downloads statistics

tw-heropatterns

Tailwind CSS v4 plugin for dynamically generating heropatterns

Only generates CSS for the patterns you actually use — no unused combinations.

Install

Setup

Add the plugin to your CSS file:

Usage

Theme colors

Arbitrary colors

Opacity is optional and defaults to 1. The /{opacity} modifier uses a 0-100 scale (e.g. /50 = 50% opacity).

Patterns

All of the patterns in heropatterns should be available in this plugin in camelCased form:

• anchorsAway • architect • autumn • aztec • bamboo • bankNote • bathroomFloor • bevelCircle • boxes • brickWall • bubbles • cage • charlieBrown • churchOnSunday • circlesAndSquares • circuitBoard • connections • corkScrew • current • curtain • cutout • deathStar • diagonalLines • diagonalStripes • dominos • endlessClouds • eyes • fallingTriangles • fancyRectangles • flippedDiamonds • floatingCogs • floorTile • formalInvitation • fourPointStars • glamorous • graphPaper • groovy • happyIntersection • heavyRain • hexagons • hideout • houndstooth • iLikeFood • intersectingCircles • jigsaw • jupiter • kiwi • leaf • linesInMotion • lips • lisbon • melt • moroccan • morphingDiamonds • overcast • overlappingCircles • overlappingDiamonds • overlappingHexagons • parkayFloor • pianoMan • pieFactory • pixelDots • plus • polkaDots • rails • rain • randomShapes • roundedPlusConnected • signal • skulls • slantedStars • squares • squaresInSquares • stampCollection • steelBeams • stripes • temple • texture • ticTacToe • tinyCheckers • topography • volcanoLamp • wallpaper • wiggle • xEquals • yyy • zigZag