Intellisense stops working if the tailwind classes string is on a separate line

[asnaseer]

What version of VS Code are you using? v1.86.1

What version of Tailwind CSS IntelliSense are you using? v0.10.5

What version of Tailwind CSS are you using? v2.0.2

What package manager are you using? yarn

What operating system are you using? macOS

Tailwind config

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontSize: {
      xs: ["12px", "1rem"],
      sm: ["14px", "1.25rem"],
      base: ["16px", "1.5rem"],
      lg: ["18px", "1.625rem"],
      xl: ["20px", "1.75rem"],
      "2xl": ["24px", "2rem"],
      "3xl": ["30px", "2.25rem"],
      "4xl": ["36px", "2.5rem"],
    },
    borderWidth: {
      DEFAULT: "1px",
      0: "0px",
      2: "2px",
      3: "3px",
      4: "4px",
      8: "8px",
    },
    colors: {
      // to keep
      "success-green": "#00E0B7",

      "loading-skeleton": "#E4E8F0",

      "dark-petrol-5": "#E4E8F0",

      "brand-blue": "#1F87FE",
      "brand-blue-4": "#8fc3ff",
      "brand-blue-5": "#E3F0FF",

      "sizzling-red": "#F2545B",
      "sizzling-red-5": "#F9EBEE",

      "green-nature": "#20a39e",
      "green-nature-4": "#beebe8",
      "green-nature-6": "#e7f7f6",

      "wild-magenta": "#c62f78",
      "wild-magenta-4": "#ffd5e9",
      "wild-magenta-6": "#feedf5",

      "session-orange": "#ff9857",
      "session-orange-4": "#ffd8c2",
      "session-orange-6": "#fbebe2",

      black: "#000000",

      "photo-teal": "#20A39E",
      "photo-teal-2": "#E7F7F6",

      "brand-violet": "#7265E3", // lifers, confetti, notice title, accent-gradient
      "brand-violet-3": "#B8B2F1", // lifer animation
      "brand-violet-4": "#d3cffa",
      "brand-violet-6": "#e9e7ff",

      // to review
      "dark-petrol": "#2D3142",
      "dark-petrol-2": "#555D7D",
      "dark-petrol-3": "#8890AE",
      "dark-petrol-4": "#C4C7D7",

      "sensitive-yellow": "#FFE606",

      "subtle-mauve": "#4C5980",
      "accent-pale": "#D6D9E0",
      "light-cloud": "#F4F6FA",
      "off-white": "#FAFCFE",
      white: "#FFFFFF",
      transparent: "rgba(0,0,0,0)",
      "overlay-background": "rgba(45,49,66,0.9)",

      "sizzling-red-6": "#faf4f6",
      "brand-aqua-6": "#f1fafd",
      "brand-blue-6": "#ebf4fe",
      "brand-orange": "#ff6a5a",
      "brand-orange-2": "#ffedeb",
      "time-in-nature-green": "#E5FBF7",
      "emerald-green": "#00cc70",

      // deprecated
      "brand-blue-2": "#57A5FE", // Blue Kite Illustration
      "brand-cornflower": "#5582BD", // lifelist bg
      "brand-aqua": "#3FCEE0", // animations, confetti, notice title
    },
    extend: {
      spacing: {
        "nav-bar-height": "180px",
      },
      borderRadius: {
        "4xl": 36,
      },
      fontSize: {
        "5xl": 48,
        "7xl": 64,
        "8xl": 72,
      },
      lineHeight: {
        "7xl": 80,
        "8xl": 90,
      },
    },
  },
  plugins: [],
};

VS Code settings I will omit this as I am concerned that there may be some sensitive data within it - please let me know if there are any specific settings that you wanted to look at.

// Paste your VS Code settings in JSON format here

Reproduction URL I don't believe you need a reproduction URL as the issue is very simple to produce.

Describe your issue We use tailwind in a react native app as follows:

import { create } from "tailwind-rn";
import { StyleSheet } from "react-native";
import styles from "./styles.json";

const { tailwind } = create(styles);

const styles = StyleSheet.create({
  s1: tailwind(
      "p-0 mx-3 mt-2 w-36 h-16 border-brand-blue rounded-md bg-brand-blue-5"
  ),
  s2: tailwind("h-0"),
});

As you can see, we have two styles defined s1 and s2. s1 has the tailwind string on the next line following the call to tailwind where as s2 has the tailwind string on the same line as the call to tailwind.

When hovering over the tailwind string for s1 we see no intellisense at all, where as hovering over the tailwind string for s2 correctly pops up the intellisense for the various tailwind classes.

If we move the string to the same line as follows:

const styles = StyleSheet.create({
  s1: tailwind("p-0 mx-3 mt-2 w-36 h-16 border-brand-blue rounded-md bg-brand-blue-5"),
  s2: tailwind("h-0"),
});

then intellisense starts working again for s1.

We use Prettier to enforce a max line length which is why some of our tailwind strings gets pushed onto the next line.

[thecrypticace]

I'm guessing you're using a class regex to detect the tailwind function so intellisense works. Use this one and the problem should go away:

{
  "tailwindCSS.experimental.classRegex": [
    ["tailwind\\(([^)]+)\\)", "\"([^\"]*)\""],
  ]
}

I tested with your code snippet locally and seems to work fine on single and multiple lines.

[asnaseer]

Why is this marked as closed? Will the suggestion by @thecrypticace be implemented in this library?

[asnaseer]

@thecrypticace I see that you are an active maintainer of this library and just wanted to understand your comment above - are you indicating that I need to do something within VSCode to get intellisense to work correctly or that something within this library needs to be changed to fix the issue that I reported?

[iMuhammadMustafa]

@thecrypticace I see that you are an active maintainer of this library and just wanted to understand your comment above - are you indicating that I need to do something within VSCode to get intellisense to work correctly or that something within this library needs to be changed to fix the issue that I reported?

Hi

1. Open Extensions and search "Tailwind CSS IntelliSense"
2. Click on the gear icon to open extension settings
3. scroll down you will find a "Class Regex" click on edit in settings.json
4. Write the snippet that thecrypticace provided

[asnaseer]

@iMuhammadMustafa Thank you for clarifying this. I just tried it and it works just fine - much appreciated!

[asnaseer]

In fact, I found this regex works even better: "tailwind\\([\\n\\s]*\\\"([^\"]+)\\\"[\\n\\s]*\\)"