DEV Community

Cover image for How to solve: TailwindCSS IntelliSense can't pick up your custom utility classname
Summerbud
Summerbud

Posted on • Edited on • Originally published at summerbud.org

How to solve: TailwindCSS IntelliSense can't pick up your custom utility classname

Recently, I finally solved a big issue with the TailwindCSS that bother me for a long period of time. That is TailwindCSS intelligence won't pick up the custom utility classnames using the @layer directive.

When you are building the app with TailwindCSS, at some point you need to add a custom style. You could add a custom style within tailwind.config.js file. In this way, TailwindCSS intelligence can correctly pick it up for you.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary_colour_light_blue: "#40A8F5",
      },
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

But if we want a much more complicated style? The next step comes naturally with the help of a custom utility class using the @layer directive at the CSS file we just injected into the app root.1

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  ".text-header1": {
    @apply font-sans text-[32px] font-medium leading-[42px];
  }
  ".custom-shadow": {
    boxshadow: "0px 0px 0px 3px rgba(64, 168, 245, 0.2)";
  }
}
Enter fullscreen mode Exit fullscreen mode

And here comes the problem, although this can work, TailwindCSS will not purge this class name and correctly digest it as CSS, the TailwindCSS intelligence can't pick up this class. So when you hover the class itself text-header1 on your IDE, there won't be any style information popping up(issue) 2 The reason is quite simple, TailwindCSS intelligence doesn't read through your file and find the injection file, it only read the tailwind.config.js at the root of the project.

So how can I add a custom style that can be picked up by TailwindCSS intelligence? Here comes Tailwind plugin for rescue.

Tailwind CSS plugin

You can use the TailwindCSS plugin to add any custom style you want and intelligence will pick it up for you. The way to add a custom utility class is quite simple.

module.exports = {
  plugins: [
    ({ addUtilities, addComponents }) => {
      addUtilities({
        ".custom-shadow": {
          boxShadow: "0px 0px 0px 3px rgba(64, 168, 245, 0.2)",
        },
      });
    },
  ],
};
Enter fullscreen mode Exit fullscreen mode

You could also add the @apply directive in plugin3

module.exports = {
  plugins: [
    ({ addUtilities, addComponents }) => {
      addUtilities({
        ".test-color-red": {
          "@apply text-red-900": {},
        },
      });
    },
  ],
};
Enter fullscreen mode Exit fullscreen mode

After setting up your plugin, the intelligence can now correctly pick up the custom style, but this is not an ideal solution but only a comfy workaround. I am looking forward to one day, the TaiwlindCSS have native support for this issue.

Here is some working example: instill-ai/console

Photo by Jené Stephaniuk on Unsplash


  1. TailwindCSS installation example - Next.js 

  2. Tailwind IntelliSense does not list my custom class in @layer Utilities #227 

  3. JS API for using @apply in Plugins 

Top comments (2)

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Hi @summerbud thank you for sharing!

Just a correction on a typo in the title, it's called IntelliSense 😁

Best regards!

Collapse
 
summerbud profile image
Summerbud

@joelbonetr Thank you so much!! I will fix it right away!!