tailwindcss-patterns weekly downloads statistics

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:

Setup

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

Usage

There are two main classes you can use:

Pattern

Add a background pattern using the following schema pattern-{type}-{color}/{opacity}.

You can find a list of patterns here.

For example:

Scale

You can scale a background pattern, in line with its aspect ratio using the following schema pattern-{type}-scale-{percent}.

For example:

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:

Putting it all together

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

Pattern types

• 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

Description from the npm listing.