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.