DEV Community

omoogun olawale
omoogun olawale

Posted on

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
}
Enter fullscreen mode Exit fullscreen mode

tailwind component directive

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

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",
        },
      });
    }),
  ],
Enter fullscreen mode Exit fullscreen mode

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.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay