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.
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.
Install the plugin from npm:
npm i tailwindcss-patterns
Then add the plugin to your tailwind.config.js file:
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-patterns'),
// ...
],
}
There are two main classes you can use:
Add a background pattern using the following schema pattern-{type}-{color}/{opacity}
.
You can find a list of patterns here.
For example:
<div class="pattern-hive-amber-500/100"...
You can scale a background pattern, in line with its aspect ratio using the following schema pattern-{type}-scale-{percent}
.
For example:
<div class="pattern-hive-scale-50"...
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:
<div class="pattern-hive-scale-[2.5]"...
You can combine these classes with a generic background class to create the full effect.
<div class="bg-amber-300 pattern-hive-amber-700/50 pattern-hive-scale-[0.5]"></div>
jigsaw
- Live Demoripples
- Live Demotopography
- Live Demotexture
- Live Demohub
- Live Demoarchitect
- Live Demovoxel
- Live Democrosses
- Live Demograph
- Live Demosquares
- Live Demofalling-triangles
- Live Demopies
- Live Demohexagons
- Live Demozig-zag
- Live Demozig-zag-2
- Live Demoautumn
- Live Demotemple
- Live Demodeath-star
- Live Demooverlapping-hexagons
- Live Demostars
- Live Demobamboo
- Live Demofloor
- Live Democork-screw
- Live Demokiwi
- Live Demolips
- Live Democheckered
- Live Demox-equals
- Live Demobevel-circle
- Live Demobrick-wall
- Live Demofancy-rectangles
- Live Demoheavy-rain
- Live Demooverlapping-circles
- Live Demoplus
- Live Demoplus-connected
- Live Demovolcano-lamp
- Live Demowiggle
- Live Demobubbles
- Live Democage
- Live Democonnections
- Live Democurrent
- Live Demodiagonal-stripes
- Live Demoflipped-diamonds
- Live Demohoundstooth
- Live Demoleaf
- Live Demolines-in-motion
- Live Demomoroccan
- Live Demomorphing-diamonds
- Live Demorails
- Live Demorain
- Live Demosquares-in-squares
- Live Demostripes
- Live Demotic-tac-toe
- Live Demoaztec
- Live Demobank-note
- Live Demoboxes
- Live Democircles-and-squares
- Live Democircuit-board
- Live Democurtain
- Live Democlouds
- Live Demoeyes
- Live Demotiles
- Live Demogroovy
- Live Demointersecting-circles
- Live Demomelt
- Live Demooverlapping-diamonds
- Live Demowood
- Live Demopolka
- Live Demosignal
- Live Demoslanted
- Live Demolines-diagonal-right
- Live Demolines-diagonal-left
- Live Demolines-horizontal
- Live Demolines-vertical
- Live Demosprinkles
- Live Demowaves
- Live Demohive
- Live Demosquiggles
- Live Demotriangles
- Live Demogrid
- Live Demozebra
- Live Demo
This package couldn't have been put together without patterns from: