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:

1. anchors-away
2. architect
3. autumn
4. aztec
5. bamboo
6. bank-note
7. bathroom-floor
8. bevel-circle
9. boxes
10. brick-wall
11. bubbles
12. cage
13. charlie-brown
14. church-on-sunday
15. circles-squares
16. circuit-board
17. connections
18. cork-screw
19. current
20. curtain
21. cutout
22. death-star
23. diagonal-lines
24. diagonal-stripes
25. dominos
26. endless-clouds
27. eyes
28. falling-triangles
29. fancy-rectangles
30. flipped-diamonds
31. floating-cogs
32. floor-tile
33. formal-invitation
34. four-point-stars
35. glamorous
36. graph-paper
37. groovy
38. happy-intersection
39. heavy-rain
40. hexagons
41. hideout
42. houndstooth
43. i-like-food
44. intersecting-circles
45. jigsaw
46. jupiter
47. kiwi
48. leaf
49. lines-in-motion
50. lips
51. lisbon
52. melt
53. moroccan
54. morphing-diamonds
55. overcast
56. overlapping-circles
57. overlapping-diamonds
58. overlapping-hexagons
59. parkay-floor
60. piano-man
61. pie-factory
62. pixel-dots
63. plus
64. polka-dots
65. rails
66. rain
67. random-shapes
68. rounded-plus-connected
69. signal
70. skulls
71. slanted-stars
72. squares
73. squares-in-squares
74. stamp-collection
75. steel-beams
76. stripes
77. temple
78. texture
79. tic-tac-toe
80. tiny-checkers
81. topography
82. volcano-lamp
83. wallpaper
84. wiggle
85. x-equals
86. yyy
87. zig-zag