IntelliSense with extendVariants

[teo-goulois]

Hello, is there a way to use tailwind IntelliSense with vsCode while extending a variant with extendVariants.

I followed the documentation on https://www.tailwind-variants.org/docs/getting-started#intellisense-setup-optional, but it doesn't work with the extendVariants function.

So if anyone have some hint to fix this it will be really helpful, thank you !

[winchesHe]

@teo-goulois Could you provide your code?

The following config is only work for tv function

{
  "tailwindCSS.experimental.classRegex": [
    ["tv\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

[teo-goulois]

Thanks for the answer, so here a simple example of what I have:

// MyButton.tsx
import {
  extendVariants,
  Button as _Button,
  colorVariants,
} from "@nextui-org/react";

export const Button = extendVariants(_Button, {
  variants: {
    // <- modify/add variants
    variant: {},
    color: {
      olive: "text-[#000] bg-[#84cc16]",
      orange: "bg-[#ff8c00] text-[#fff]",
      violet: "bg-[#8b5cf6] text-[#fff]",
    },
    isDisabled: {
      true: "bg-[#eaeaea] text-[#000] opacity-50 cursor-not-allowed",
    },
    size: {
      xs: "px-2 min-w-12 h-6 text-tiny gap-1 rounded-small",
      md: "px-4 min-w-20 h-10 text-small gap-2 rounded-small",
      xl: "px-8 min-w-28 h-14 text-large gap-4 rounded-medium",
    },
  },
  defaultVariants: {
    // <- modify/add default variants
  },
  compoundVariants: [
    // <- modify/add compound variants
    {
      isDisabled: true,
      color: "olive",
      class: "bg-[#84cc16]/80 opacity-100",
    },
    {
      variant: "light",
      color: "default",
      class: [
        colorVariants.light.default,
        "text- data-[hover=true]:bg-default/40",
      ],
    },
  ],
});

I have this extended component from the doc, and I was wondering if there is a way to enable IntelliSense there ?

[shripadk]

As @winchesHe explained, you can just modify the LSP setting to this:

{
  "tailwindCSS.experimental.classRegex": [
    ["extendVariants\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

It works ^

[ellisio]

@shripadk This does not appear to work with a Turborepo. I've opened an issue with the plugin authors: tailwindlabs/tailwindcss-intellisense#1023