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.