Tailwind CSS Hero Patterns

A simple tailwind plugin to display Hero Patterns by @steveschoger.

DEMO AVAILABLE HERE

TAILWIND PLAYGROUND

Installation

yarn add tailwindcss-hero-patterns

or

npm i tailwindcss-hero-patterns

Usage

Simple

Just include the plugin:

  plugins: [
    require('tailwindcss-hero-patterns'),
  ],

And start using it:

<div class="flex m-2 relative w-40 h-40 sm:pb-0 sm:w-48 sm:h-48 bg-red-500">
  <div
    class="bg-repeat w-full h-full text-primary-100 heropattern-jigsaw-red-100"
  >
    <div class="text-sm inline">heropattern-jigsaw-red-500</div>
  </div>
</div>

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

Advanced Usage

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 :-)