tailwind-heropatterns
v0.0.8
Published
Streamlined integration between tailwindcss and heropatterns
Downloads
921
Maintainers
Readme
tailwind-heropatterns
Installation
Add this plugin to your project:
# Install via npm
npm install --save-dev tailwind-heropatterns
# or yarn
yarn add tailwind-heropatterns --dev
Usage
The tailwind heropatterns plugin exposes some options to configure the generated classes. Here is the example for adding it to your project plugins
require("tailwind-heropatterns")({
// as per tailwind docs you can pass variants
variants: [],
// the list of patterns you want to generate a class for
// the names must be in kebab-case
// an empty array will generate all 87 patterns
patterns: ["polka-dots", "signal"],
// The foreground colors of the pattern
colors: {
default: "#9C92AC",
"blue-dark": "#000044" //also works with rgb(0,0,205)
},
// The foreground opacity
opacity: {
default: "0.4",
"100": "1.0"
}
});
This configuration would create the following classes:
.bg-hero-polka-dots-100 {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='1.0' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.bg-hero-signal-100 {
background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%239C92AC' fill-opacity='1.0' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.bg-hero-polka-dots-blue-dark-100 {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000044' fill-opacity='1.0' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.bg-hero-signal-blue-dark-100 {
background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%23000044' fill-opacity='1.0' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.bg-hero-polka-dots {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.bg-hero-signal {
background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.bg-hero-polka-dots-blue-dark {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000044' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.bg-hero-signal-blue-dark {
background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%23000044' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}
As you can see when you use the default
key for colors or opacity it is omitted in the class name.
So the following configuration:
require("tailwind-heropatterns")({
variants: [],
patterns: ["polka-dots", "signal"],
colors: {
default: "#9C92AC"
},
opacity: {
default: "0.4"
}
});
Will generate only the following classes
.bg-hero-polka-dots {
/**/
}
.bg-hero-signal {
/**/
}
Defaults
The default configuration is the following. And it will generate alle the patterns with the default color of heropatterns.com
config = {
variants: [],
patterns: [],
colors: {
default: "#9C92AC"
},
opacity: {
default: 0.4
}
};
Pattern names list:
- anchors-away
- architect
- autumn
- aztec
- bamboo
- bank-note
- bathroom-floor
- bevel-circle
- boxes
- brick-wall
- bubbles
- cage
- charlie-brown
- church-on-sunday
- circles-squares
- circuit-board
- connections
- cork-screw
- current
- curtain
- cutout
- death-star
- diagonal-lines
- diagonal-stripes
- dominos
- endless-clouds
- eyes
- falling-triangles
- fancy-rectangles
- flipped-diamonds
- floating-cogs
- floor-tile
- formal-invitation
- four-point-stars
- glamorous
- graph-paper
- groovy
- happy-intersection
- heavy-rain
- hexagons
- hideout
- houndstooth
- i-like-food
- intersecting-circles
- jigsaw
- jupiter
- kiwi
- leaf
- lines-in-motion
- lips
- lisbon
- melt
- moroccan
- morphing-diamonds
- overcast
- overlapping-circles
- overlapping-diamonds
- overlapping-hexagons
- parkay-floor
- piano-man
- pie-factory
- pixel-dots
- plus
- polka-dots
- rails
- rain
- random-shapes
- rounded-plus-connected
- signal
- skulls
- slanted-stars
- squares
- squares-in-squares
- stamp-collection
- steel-beams
- stripes
- temple
- texture
- tic-tac-toe
- tiny-checkers
- topography
- volcano-lamp
- wallpaper
- wiggle
- x-equals
- yyy
- zig-zag