npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tailwind-heropatterns

v0.0.8

Published

Streamlined integration between tailwindcss and heropatterns

Downloads

921

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:

  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