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.