Unsolicited tip for Tailwind developers.

Fun shadow trick, to avoid repeating yourself on your “Tailwind.config.cjs” file.

So we have two buttons and then we have a shadow that we have created on the “Tailwind.config.cjs”.

This buttons have the same shadow, in this case is called “shadow-button” and then there’s a clase defining the colour of the shadow for example the first one is “shadow-blue-600/50”

This is how the shadow is defined “Tailwind.config.cjs” file. As you can see, there’s no colour defined within the CSS shadow styles.

Doing like this you can avoid creating the same shadow with different colorus.

And this is how it looks. As you can see the blue button has a blue shadow and the white button has a white shadow…

You can add transparency too when adding “/50” or any other value supported by Tailwind/custom

Hope this was useful for you!

If you have any questions ask me on https://x.com/Mike_Andreuzza

Have a great day and thank you for reading!