https://github.com/svengau/tailwindcss-hero-patterns

A simple tailwind plugin to display Hero Patterns by @steveschoger.
https://github.com/svengau/tailwindcss-hero-patterns

tailwindcss

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/svengau/tailwindcss-hero-patterns
• Owner: svengau
• Created: 2020-05-28T08:15:14.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-10T12:22:40.000Z (over 1 year ago)
• Last Synced: 2024-11-02T22:50:38.272Z (12 days ago)
• Topics: tailwindcss
• Language: JavaScript
• Homepage:
• Size: 1.68 MB
• Stars: 98
• Watchers: 3
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwind CSS Hero Patterns

[![npm](https://img.shields.io/npm/v/tailwindcss-hero-patterns)](https://www.npmjs.com/package/tailwindcss-hero-patterns)

A simple tailwind plugin to display [Hero Patterns](http://www.heropatterns.com/) by [@steveschoger](https://twitter.com/steveschoger).

[DEMO AVAILABLE HERE](https://svengau.github.io/tailwindcss-hero-patterns/)

[TAILWIND PLAYGROUND](https://play.tailwindcss.com/fnFV9iHnq4)

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

```html



  


    
heropattern-jigsaw-red-500

  



```


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](http://www.heropatterns.com/) 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](http://www.heropatterns.com/), 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](https://play.tailwindcss.com/45NQTo9Uey?file=config) which may interest you.

## Credits

Thanks [@steveschoger](https://twitter.com/steveschoger) for all those nice patterns :-)