thillmann / tailwindcss-bg-patterns Goto Github PK

In the default example for setting a pattern color, this code is used:

<div className="pattern-blue-500"/>

And we can see that the tailwind "macro" essentially sets these 3 variables which are used by the pattern system:

But it doesn't work the same when I provide a custom color that I defined in the theme in tailwind.config.js. I have the following code in a React node:

<div className="pattern-isometric pattern-opacity-100 pattern-rpPatternBlue500 pattern-bg-transparent">
  <MaxWidthSection constrainContent="max-w-4xl">
    {renderGamesSection(layoutDataWrapper, gameData)}
  </MaxWidthSection>
</div>

Which as you can see does not set the -77 color or -55 color the same as if I used a preset color:

Which ultimately breaks some of the patterns completely (it doesn't show up) because the needed variables are not defined:

Namely the isometric and 3D/gradient patterns which require this. The dots and simple shape patterns don't break since it seems like they don't need -77 and -55 to function.

There is a workaround which is to set the variables manually via style like this:

<div 
  style={{"--pattern-color-77" : "#363f5810", "--pattern-color-55" : "#363f5805"} as React.CSSProperties}
  className="pattern-isometric pattern-opacity-100 pattern-rpPatternBlue500 pattern-bg-transparent">
  <MaxWidthSection constrainContent="max-w-4xl">
    {renderGamesSection(layoutDataWrapper, gameData)}
  </MaxWidthSection>
</div>

But this isn't ideal I would think... I guess this comes up because somewhere in the code it assumes that the provided color is a preset or at least uses 100% opacity? But if you provide a color with non-100% opacity like I did here I feel like it should calculate 77% and 55% of the opacity of that to be used in these variables, or expose some tailwind shortcut to directly set them without having to go through style. Let me know what's possible here, thanks!

TailwindCSS version: 3.2.1

I think it would be great if you can modify the line thickness in pattern-boxes

I am using pattern-opacity-10 in a container tag, and all inherited tags also have opacity-10. How
can I fix that?

What I want is that the opacity only apply to the pattern

I want to use my custom color, how can I do it?