Tailwind: Combine custom css with @components directive

Hi devs,
I came across a challenge that I want to share and how I solved it. These articles will help other devs like me who ran into the same issue.

The challenge

My challenge was to create a reusable component with tailwind  components directive while I applied my custom CSS as seen below. It seems impossible at first and challenging.

My custom css

.text-shadow: { text-shadow: none } .tap-highlight: { --webkit-tap-highlight-color: transparent } 

tailwind component directive

@layer components { @apply text-shadow tap-highlight bg-red-900 rounded-full text-base } 

The solution

After searching the internet for a solution I could not get it to work. So I had an idea to add my utility class through addUtilities function from tailwind plugin

const plugin = require("tailwindcss/plugin"); ---- other code goes here plugins: [ plugin(function ({ addUtilities }) { addUtilities({ ".text-shadow": { textShadow: "none", }, ".tap-highlight": { WebkitTapHighlightColor: "transparent", }, }); }), ], 

What I did was to import tailwindcss/plugin and add my utility classes as seen above. Voila it works

Thanks for reading! Let me know in the comments if you have any questions.