80+ geometric background patterns for TailwindCSS

About

This package allows you to quickly add repeating background patterns to your TailwindCSS projects. We've collected and designed 80+ geometric patterns that can be applied as utility classes in TailwindCSS.

Live Demo

Creators

This package is brought to you by MagmaFlow, we offer unlimited TailwindCSS development for a fixed monthly fee to startups, agencies and freelancers. Find out more here.

Installation

Install the plugin from npm:
``

 bash
npm i tailwindcss-patterns


Setup

Then add the plugin to your tailwind.config.js file:

javascript
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-patterns'),
    // ...
  ],
}


Usage

There are two main classes you can use:
$3

Add a background pattern using the following schema

pattern-{type}-{color}/{opacity}

.
You can find a list of patterns here.

For example:`html


$3

You can scale a background pattern, in line with its aspect ratio using the following schema

pattern-{type}-scale-{percent}.

For example:`html


Scaling options are the same as TailwindCSS's scale options (they can be found here.)

You may want to use a custom scaling multiplier. You can do that using the following schema pattern-{type}-scale-[multiplier].

For example:`html

$3

You can combine these classes with a generic background class to create the full effect.`html

$3

- jigsaw- Live Demo -ripples- Live Demo -topography- Live Demo -texture- Live Demo -hub- Live Demo -architect- Live Demo -voxel- Live Demo -crosses- Live Demo -graph- Live Demo -squares- Live Demo -falling-triangles- Live Demo -pies- Live Demo -hexagons- Live Demo -zig-zag- Live Demo -zig-zag-2- Live Demo -autumn- Live Demo -temple- Live Demo -death-star- Live Demo -overlapping-hexagons- Live Demo -stars- Live Demo -bamboo- Live Demo -floor- Live Demo -cork-screw- Live Demo -kiwi- Live Demo -lips- Live Demo -checkered- Live Demo -x-equals- Live Demo -bevel-circle- Live Demo -brick-wall- Live Demo -fancy-rectangles- Live Demo -heavy-rain- Live Demo -overlapping-circles- Live Demo -plus- Live Demo -plus-connected- Live Demo -volcano-lamp- Live Demo -wiggle- Live Demo -bubbles- Live Demo -cage- Live Demo -connections- Live Demo -current- Live Demo -diagonal-stripes- Live Demo -flipped-diamonds- Live Demo -houndstooth- Live Demo -leaf- Live Demo -lines-in-motion- Live Demo -moroccan- Live Demo -morphing-diamonds- Live Demo -rails- Live Demo -rain- Live Demo -squares-in-squares- Live Demo -stripes- Live Demo -tic-tac-toe- Live Demo -aztec- Live Demo -bank-note- Live Demo -boxes- Live Demo -circles-and-squares- Live Demo -circuit-board- Live Demo -curtain- Live Demo -clouds- Live Demo -eyes- Live Demo -tiles- Live Demo -groovy- Live Demo -intersecting-circles- Live Demo -melt- Live Demo -overlapping-diamonds- Live Demo -wood- Live Demo -polka- Live Demo -signal- Live Demo -slanted- Live Demo -lines-diagonal-right- Live Demo -lines-diagonal-left- Live Demo -lines-horizontal- Live Demo -lines-vertical- Live Demo -sprinkles- Live Demo -waves- Live Demo -hive- Live Demo -squiggles- Live Demo -triangles- Live Demo -grid- Live Demo -zebra` - Live Demo

Credits

This package couldn't have been put together without patterns from:
- Hero Patterns
- Pattern Monster
- MadeByCrevans