Tailwind Intellisense not working after upgrading to v4

[CraigLu]

What version of VS Code are you using?

v1.96.2

What version of Tailwind CSS IntelliSense are you using?

v0.14.16

What version of Tailwind CSS are you using?

v4.1.4

What package manager are you using?

yarn

What operating system are you using?

macOS

Tailwind config

Base tailwind config

/** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin");

const sharedSizes = {
  small: "24px",
  base: "32px",
  large: "40px",
};

const config = {
  content: ["./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      padding: {
        none: "0px",
        small: "4px 8px",
        base: "6px 8px",
        large: "8px 8.5px",
      },
      height: { ...sharedSizes },
      lineHeight: {
        ...sharedSizes,
        zero: "0px", // Custom class `leading-zero`
      },
      borderWidth: {
        1: "1px",
        0.5: "0.5px",
        0.75: "0.75px",
      },
      transitionProperty: {
        height: "height",
        spacing: "margin, padding",
        margin: "margin",
        opacity: "opacity",
      },
      animation: {
        leave: "leave .15s ease-in forwards",
        pulseDeep: "pulseDeep 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;",
        pulseShallow: "pulseShallow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;",
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "collapsible-down": "collapsible-down 0.2s ease-out",
        "collapsible-up": "collapsible-up 0.2s ease-out",
        "fade-in": "fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1)",
        "fade-out": "fade-out 150ms cubic-bezier(0.16, 1, 0.3, 1)",
        "slide-in": "slide-in 150ms cubic-bezier(0.16, 1, 0.3, 1)",
        "slide-out": "slide-out 150ms cubic-bezier(0.16, 1, 0.3, 1)",
      },
      keyframes: {
        leave: {
          "0%": {
            opacity: "1",
          },
          "100%": {
            opacity: "0",
          },
        },
        pulseDeep: {
          "0%": {
            opacity: "1",
          },
          "100%": {
            opacity: "1",
          },
          "50%": {
            opacity: "0",
          },
        },
        pulseShallow: {
          "0%": {
            opacity: "1",
          },
          "50%": {
            opacity: "0.8",
          },
          "100%": {
            opacity: "1",
          },
        },
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        "collapsible-down": {
          from: { height: 0 },
          to: { height: "var(--radix-collapsible-content-height)" },
        },
        "collapsible-up": {
          from: { height: "var(--radix-collapsible-content-height)" },
          to: { height: 0 },
        },
        "fade-in": {
          from: { opacity: 0 },
          to: { opacity: 1 },
        },
        "fade-out": {
          from: { opacity: 1 },
          to: { opacity: 0 },
        },
        "slide-in": {
          from: { transform: "translateX(100%)" },
          to: { transform: "translateX(0)" },
        },
        "slide-out": {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(100%)" },
        },
      },
      boxShadow: {
        symmetrical:
          "0 0 6px -1px rgb(0 0 0 / 0.1), 0 0 4px -2px rgb(0 0 0 / 0.1)",
        thumb:
          "0px 6px 15px -3px rgba(0, 0, 0, 0.06), 0px 3px 6px -1.5px rgba(0, 0, 0, 0.04);",
        popover: "4px 4px 16px 0px rgba(0, 0, 0, 0.06)",
        menu: "4px 4px 12px 0px rgba(0, 0, 0, 0.06)",
        dropdown: "4px 4px 20px 0px rgba(0, 0, 0, 0.08)",
        alert:
          "8px 10px 16px 2px rgba(0, 0, 0, 0.10), 0px 4px 12px -2px rgba(0, 0, 0, 0.04)",
        modal:
          "8px 16px 16px -4px rgba(0, 0, 0, 0.04), 0px 4px 6px 0px rgba(0, 0, 0, 0.06)",
        panel: "0px 4px 20px 4px rgba(0, 0, 0, 0.02)",
        selectable: "0px 0px 4px 2px rgba(0, 0, 0, 0.02)",
      },
      colors: {
        default: {
          DEFAULT: "#1E293B", // slate-800
        },
        muted: {
          DEFAULT: "#475569", // slate-600
        },
        placeholder: {
          DEFAULT: "#64748B", // slate-500
        },
        white: "#FFFFFF",
        primary: {
          DEFAULT: "#2563EB", // blue-600
          hover: "#1D4ED8", // blue-700
          muted: "#51a2ff", // blue-400
          light: "#bedbff", // blue-200
        },
        secondary: {
          DEFAULT: "#E2E8F0", // slate-200
          hover: "#f8fafc", // slate-50
        },
        border: {
          DEFAULT: "#CBD5E1", // slate-300
          blue: "#51a2ff", // blue-400
          component: "#A6B3C4", // slate-400
        },
        neutral: {
          DEFAULT: "#475569", // slate-600
          soft: "#F8FAFC", // slate-50
        },
        info: {
          DEFAULT: "#2563EB", // blue-600
          soft: "#EFF6FF", // blue-50
        },
        success: {
          DEFAULT: "#15803D", // green-700
          soft: "#F0FDF4", // green-50
        },
        beta: {
          DEFAULT: "#0891B2", // cyan-600
          soft: "#ECFEFF", // cyan-50
        },
        "dynamic-data": {
          DEFAULT: "#7E22CE", // purple-700
          soft: "#D8B4FE", // purple-300
        },
        danger: {
          DEFAULT: "#DC2626", // red-600
          soft: "#FEF2F2", // red-50
        },
        attention: {
          DEFAULT: "#A16207", // yellow-700
          muted: "#d08700", // yellow-600
          soft: "#FEFCE8", // yellow-50
        },
        ai: {
          DEFAULT: "#F97316", // orange-500
          soft: "#FFEDD5", // orange-100
        },
        padding: {
          DEFAULT: "#22c55e", // green-500
        },
        margin: {
          DEFAULT: "#0284C7", // sky-600
        },
        published: "#22c55e", // green-500
        "section-drag": "#fda5d5", // pink-400
        graph: {
          primary: {
            a: "#2563EB", // blue-600
            b: "#8B5CF6", // purple-600
            c: "#16A34A", // green-600
            d: "#DB2777", // pink-600
            e: "#EA580C", // orange-600
            f: "#CA8A04", // yellow-600
            g: "#DC2626", // red-600
            h: "#4F46E5", // indigo-600
            i: "#57534E", // stone-600
            j: "#65A30D", // lime-600
            k: "#C026D3", // fuchsia-600
            l: "#0891B2", // sky-600
          },
          secondary: {
            a: "#93C5FD", // blue-300
            b: "#D8B4FE", // purple-300
            c: "#86EFAC", // green-300
            d: "#F9A8D4", // pink-300
            e: "#FDBA74", // orange-300
            f: "#FDE047", // yellow-300
            g: "#FCA5A5", // red-300
            h: "#D8B4FE", // indigo-300
            i: "#D6D3D1", // stone-300
            j: "#BEF264", // lime-300
            k: "#F0ABFC", // fuchsia-600
            l: "#7DD3FC", // sky-300
          },
        },
        light: {
          DEFAULT: "#FFFFFF",
          sheet: "#F8FAFC", // slate-50
          "surface-hover": "#E2E8F0", // slate-200
          surface: "#F1F5F9", // slate-100
        },
        dark: {
          primary: "#2563EB",
          contrast: "#1E293B", // slate-800
        },
        menu: {
          item: {
            hover: "#F8FAFC", // slate-50
            selected: "#DBEAFE", // blue-100
          },
        },
        button: {
          "primary-hover": "#1d4ed8", // blue-700
          "secondary-hover": "#e2e8f0", // slate-200
          "danger-hover": "#b91c1c", // red-700
          "tertiary-hover": "#f1f5f9", // slate-100
          "link-hover": "#dbeafe", // blue-100
          "danger-link-hover": "#fee2e2", // red-100
        },
        selectable: {
          hover: "#F8FAFC", // slate-50
          selected: {
            DEFAULT: "#eff6ff", // blue-50
            hover: "#dbeafe", // blue-100
          },
        },
      },
      textColor: {
        DEFAULT: "#1E293B", // slate-800
        subtle: "#94A3B8", // slate-400
        disabled: "#9CA3AF", // gray-400
        accent: "#2563EB", // blue-600
        onEmphasis: "#FFFFFF",
      },
      backgroundColor: {
        default: "#FFFFFF",
        subtle: "#F1F5F9", // slate-100
        disabled: "#E5E7EB", // gray-200
        emphasis: "#94A3B8", // slate-400
        selected: "#BFDBFE", // blue-200
        accent: "#2563EB", // blue-600
        "accent-emphasis": "#EFF6FF", // blue-50
        placeholder: "#cad5e2", // slate-300
        brand: {
          primary: {
            black: "#000000",
            white: "#FFFFFF",
            blue: "#274AE2",
            lime: "#DEF988",
          },
          secondary: {
            jungle: "#6CB594",
            honey: "#FFB931",
            magenta: "#E02F66",
            aqua: "#73C6E9",
            wheat: "#FFE3AE",
            flamingo: "#FFBEC6",
          },
        },
      },
    },
    opacity: {
      0: "0",
      5: "0.05",
      10: "0.1",
      15: "0.15",
      20: "0.2",
      25: "0.25",
      30: "0.3",
      35: "0.35",
      40: "0.4",
      45: "0.45",
      50: "0.5",
      55: "0.55",
      60: "0.6",
      65: "0.65",
      70: "0.7",
      75: "0.75",
      80: "0.8",
      85: "0.85",
      90: "0.9",
      95: "0.95",
      100: "1",
    },
    fontFamily: {
      sans: ['"Inter"', '"Helvetica Neue"', "Arial", "sans-serif"],
      serif: [
        "ui-serif",
        "Georgia",
        "Cambria",
        '"Times New Roman"',
        "Times",
        "serif",
      ],
      mono: [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Monaco",
        "Consolas",
        '"Liberation Mono"',
        '"Courier New"',
        "monospace",
      ],
    },
    fontWeight: {
      thin: "100",
      extralight: "200",
      light: "300",
      normal: "400",
      medium: "500",
      semibold: "600",
      bold: "700",
      extrabold: "800",
      black: "900",
    },
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
    colors: {
      inherit: "inherit",
      current: "currentColor",
      transparent: "transparent",
      black: "#000",
      white: "#FFF",
      slate: {
        50: "#F8FAFC",
        100: "#F1F5F9",
        200: "#E2E8F0",
        300: "#CBD5E1",
        400: "#94A3B8",
        500: "#64748B",
        600: "#475569",
        700: "#334155",
        800: "#1E293B",
        900: "#0F172A",
        950: "#020617",
      },
      gray: {
        50: "#F9FAFB",
        100: "#F3F4F6",
        200: "#E5E7EB",
        300: "#D1D5DB",
        400: "#9CA3AF",
        500: "#6B7280",
        600: "#4B5563",
        700: "#374151",
        800: "#1F2937",
        900: "#111827",
        950: "#030712",
      },
      zinc: {
        50: "#FAFAFA",
        100: "#F4F4F5",
        200: "#E4E4E7",
        300: "#D4D4D8",
        400: "#A1A1AA",
        500: "#71717A",
        600: "#52525B",
        700: "#3F3F46",
        800: "#27272A",
        900: "#18181B",
        950: "#09090B",
      },
      neutral: {
        50: "#FAFAFA",
        100: "#F5F5F5",
        200: "#E5E5E5",
        300: "#D4D4D4",
        400: "#A3A3A3",
        500: "#737373",
        600: "#525252",
        700: "#404040",
        800: "#262626",
        900: "#171717",
        950: "#0A0A0A",
      },
      stone: {
        50: "#FAFAF9",
        100: "#F5F5F4",
        200: "#E7E5E4",
        300: "#D6D3D1",
        400: "#A8A29E",
        500: "#78716C",
        600: "#57534E",
        700: "#44403C",
        800: "#292524",
        900: "#1C1917",
        950: "#0C0A09",
      },
      red: {
        50: "#FEF2F2",
        100: "#FEE2E2",
        200: "#FECACA",
        300: "#FCA5A5",
        400: "#F87171",
        500: "#EF4444",
        600: "#DC2626",
        700: "#B91C1C",
        800: "#991B1B",
        900: "#7F1D1D",
        950: "#450A0A",
      },
      orange: {
        50: "#FFF7ED",
        100: "#FFEDD5",
        200: "#FED7AA",
        300: "#FDBA74",
        400: "#FB923C",
        500: "#F97316",
        600: "#EA580C",
        700: "#C2410C",
        800: "#9A3412",
        900: "#7C2D12",
        950: "#431407",
      },
      amber: {
        50: "#FFFBEB",
        100: "#FEF3C7",
        200: "#FDE68A",
        300: "#FCD34D",
        400: "#FBBF24",
        500: "#F59E0B",
        600: "#D97706",
        700: "#B45309",
        800: "#92400E",
        900: "#78350F",
        950: "#451A03",
      },
      yellow: {
        50: "#FEFCE8",
        100: "#FEF9C3",
        200: "#FEF08A",
        300: "#FDE047",
        400: "#FACC15",
        500: "#EAB308",
        600: "#CA8A04",
        700: "#A16207",
        800: "#854D0E",
        900: "#713F12",
        950: "#422006",
      },
      lime: {
        50: "#F7FEE7",
        100: "#ECFCCB",
        200: "#D9F99D",
        300: "#BEF264",
        400: "#A3E635",
        500: "#84CC16",
        600: "#65A30D",
        700: "#4D7C0F",
        800: "#3F6212",
        900: "#365314",
        950: "#1A2E05",
      },
      green: {
        50: "#F0FDF4",
        100: "#DCFCE7",
        200: "#BBF7D0",
        300: "#86EFAC",
        400: "#4ADE80",
        500: "#22C55E",
        600: "#16A34A",
        700: "#15803D",
        800: "#166534",
        900: "#14532D",
        950: "#052E16",
      },
      emerald: {
        50: "#ECFDF5",
        100: "#D1FAE5",
        200: "#A7F3D0",
        300: "#6EE7B7",
        400: "#34D399",
        500: "#10B981",
        600: "#059669",
        700: "#047857",
        800: "#065F46",
        900: "#064E3B",
        950: "#022C22",
      },
      teal: {
        50: "#F0FDFA",
        100: "#CCFBF1",
        200: "#99F6E4",
        300: "#5EEAD4",
        400: "#2DD4BF",
        500: "#14B8A6",
        600: "#0D9488",
        700: "#0F766E",
        800: "#115E59",
        900: "#134E4A",
        950: "#042F2E",
      },
      cyan: {
        50: "#ECFEFF",
        100: "#CFFAFE",
        200: "#A5F3FC",
        300: "#67E8F9",
        400: "#22D3EE",
        500: "#06B6D4",
        600: "#0891B2",
        700: "#0E7490",
        800: "#155E75",
        900: "#164E63",
        950: "#083344",
      },
      sky: {
        50: "#F0F9FF",
        100: "#E0F2FE",
        200: "#BAE6FD",
        300: "#7DD3FC",
        400: "#38BDF8",
        500: "#0EA5E9",
        600: "#0284C7",
        700: "#0369A1",
        800: "#075985",
        900: "#0C4A6E",
        950: "#082F49",
      },
      blue: {
        50: "#EFF6FF",
        100: "#DBEAFE",
        200: "#BFDBFE",
        300: "#93C5FD",
        400: "#60A5FA",
        500: "#3B82F6",
        600: "#2563EB",
        700: "#1D4ED8",
        800: "#1E40AF",
        900: "#1E3A8A",
        950: "#172554",
      },
      indigo: {
        50: "#EEF2FF",
        100: "#E0E7FF",
        200: "#C7D2FE",
        300: "#A5B4FC",
        400: "#818CF8",
        500: "#6366F1",
        600: "#4F46E5",
        700: "#4338CA",
        800: "#3730A3",
        900: "#312E81",
        950: "#1E1B4B",
      },
      violet: {
        50: "#F5F3FF",
        100: "#EDE9FE",
        200: "#DDD6FE",
        300: "#C4B5FD",
        400: "#A78BFA",
        500: "#8B5CF6",
        600: "#7C3AED",
        700: "#6D28D9",
        800: "#5B21B6",
        900: "#4C1D95",
        950: "#2E1065",
      },
      purple: {
        50: "#FAF5FF",
        100: "#F3E8FF",
        200: "#E9D5FF",
        300: "#D8B4FE",
        400: "#C084FC",
        500: "#A855F7",
        600: "#9333EA",
        700: "#7E22CE",
        800: "#6B21A8",
        900: "#581C87",
        950: "#3B0764",
      },
      fuchsia: {
        50: "#FDF4FF",
        100: "#FAE8FF",
        200: "#F5D0FE",
        300: "#F0ABFC",
        400: "#E879F9",
        500: "#D946EF",
        600: "#C026D3",
        700: "#A21CAF",
        800: "#86198F",
        900: "#701A75",
        950: "#4A044E",
      },
      pink: {
        50: "#FDF2F8",
        100: "#FCE7F3",
        200: "#FBCFE8",
        300: "#F9A8D4",
        400: "#F472B6",
        500: "#EC4899",
        600: "#DB2777",
        700: "#BE185D",
        800: "#9D174D",
        900: "#831843",
        950: "#500724",
      },
      rose: {
        50: "#FFF1F2",
        100: "#FFE4E6",
        200: "#FECDD3",
        300: "#FDA4AF",
        400: "#FB7185",
        500: "#F43F5E",
        600: "#E11D48",
        700: "#BE123C",
        800: "#9F1239",
        900: "#881337",
        950: "#4C0519",
      },
      lightBlue: {
        50: "#F0F9FF",
        100: "#E0F2FE",
        200: "#BAE6FD",
        300: "#7DD3FC",
        400: "#38BDF8",
        500: "#0EA5E9",
        600: "#0284C7",
        700: "#0369A1",
        800: "#075985",
        900: "#0C4A6E",
        950: "#082F49",
      },
      warmGray: {
        50: "#FAFAF9",
        100: "#F5F5F4",
        200: "#E7E5E4",
        300: "#D6D3D1",
        400: "#A8A29E",
        500: "#78716C",
        600: "#57534E",
        700: "#44403C",
        800: "#292524",
        900: "#1C1917",
        950: "#0C0A09",
      },
      trueGray: {
        50: "#FAFAFA",
        100: "#F5F5F5",
        200: "#E5E5E5",
        300: "#D4D4D4",
        400: "#A3A3A3",
        500: "#737373",
        600: "#525252",
        700: "#404040",
        800: "#262626",
        900: "#171717",
        950: "#0A0A0A",
      },
      coolGray: {
        50: "#F9FAFB",
        100: "#F3F4F6",
        200: "#E5E7EB",
        300: "#D1D5DB",
        400: "#9CA3AF",
        500: "#6B7280",
        600: "#4B5563",
        700: "#374151",
        800: "#1F2937",
        900: "#111827",
        950: "#030712",
      },
      blueGray: {
        50: "#F8FAFC",
        100: "#F1F5F9",
        200: "#E2E8F0",
        300: "#CBD5E1",
        400: "#94A3B8",
        500: "#64748B",
        600: "#475569",
        700: "#334155",
        800: "#1E293B",
        900: "#0F172A",
        950: "#020617",
      },
    },
    fontSize: {
      xs: [
        "0.625rem", // 10px
        {
          lineHeight: "1.2", // 12px/10px = 1.2
        },
      ],
      sm: [
        "0.75rem", // 12px
        {
          lineHeight: "1.333", // 16px/12px ≈ 1.333
        },
      ],
      base: [
        "0.875rem", // 14px
        {
          lineHeight: "1.429", // 20px/14px ≈ 1.429
        },
      ],
      lg: [
        "1rem", // 16px
        {
          lineHeight: "1.5", // 24px/16px = 1.5
        },
      ],
      xl: [
        "1.125rem", // 18px
        {
          lineHeight: "1.556", // 28px/18px ≈ 1.556
        },
      ],
      "2xl": [
        "1.25rem", // 20px
        {
          lineHeight: "1.4", // 28px/20px = 1.4
        },
      ],
      "3xl": [
        "1.5rem", // 24px
        {
          lineHeight: "1.333", // 32px/24px ≈ 1.333
        },
      ],
      "4xl": [
        "1.875rem", // 30px
        {
          lineHeight: "1.333", // 40px/30px ≈ 1.333
        },
      ],
      "5xl": [
        "2.25rem", // 36px
        {
          lineHeight: "1.333", // 48px/36px ≈ 1.333
        },
      ],
      "6xl": [
        "3rem", // 48px
        {
          lineHeight: "1.333", // 64px/48px ≈ 1.333
        },
      ],
      "7xl": [
        "3.75rem", // 60px
        {
          lineHeight: "1.333", // 80px/60px ≈ 1.333
        },
      ],
      "8xl": [
        "4.5rem", // 72px
        {
          lineHeight: "1.333", // 96px/72px ≈ 1.333
        },
      ],
      "9xl": [
        "6rem", // 96px
        {
          lineHeight: "1.333", // 128px/96px ≈ 1.333
        },
      ],
    },
  },
  variants: {
    extend: {
      translate: ["group-hover"],
    },
  },
  plugins: [
    require("tailwindcss-animate"),
    plugin(function ({ addUtilities }) {
      const headerFontSizes = {
        ".header-h5": {
          fontSize: "12px",
          lineHeight: "16px",
          fontWeight: "600",
        },
        ".header-h4": {
          fontSize: "14px",
          lineHeight: "20px",
          fontWeight: "600",
        },
        ".header-h3": {
          fontSize: "16px",
          lineHeight: "24px",
          fontWeight: "600",
        },
        ".header-h2": {
          fontSize: "18px",
          lineHeight: "28px",
          fontWeight: "600",
        },
        ".header-h1": {
          fontSize: "20px",
          lineHeight: "28px",
          fontWeight: "600",
        },
      };

      addUtilities(headerFontSizes, ["responsive"]);
    }),
    plugin(function ({ addUtilities }) {
      const iconSize = {
        ".icon-size-default": {
          width: "1em",
          height: "1em",
        },
      };

      addUtilities(iconSize, ["responsive"]);
    }),
  ],
};

module.exports = config;

tailwind config that imports base tailwind config

const baseConfig = require("path_to_file/tailwind.config");

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [baseConfig],
  darkMode: "class",
  content: [
    "./index.html",
    "./src/**/*.{jsx,tsx,scss}",
    "./stories/**/*.{jsx,tsx}",
  ],
  plugins: [
    require("@tailwindcss/container-queries"),
    function ({ addVariant }) {...},
  ],
  theme: {
    extend: {
      animation: {
        "ping-slow": "ping 2s cubic-bezier(0, 0, 0.2, 1) infinite",
        "typing-dot-bounce": "typing-dot-bounce 1.25s ease-out infinite",
      },
      keyframes: {
        "typing-dot-bounce": {
          "0%,40%": { transform: "translateY(0)" },
          "20%": { transform: "translateY(-0.25rem)" },
        },
      },
      colors: {
        shiki: {
          light: "var(--shiki-light)",
          "light-bg": "var(--shiki-light-bg)",
          dark: "var(--shiki-dark)",
          "dark-bg": "var(--shiki-dark-bg)",
        },
      },
    },
  },
};

index.scss

@config "path_to_file/tailwind.config.js";
@import "tailwindcss";

@layer base,
       tiptap,
       custom.components,
       custom.utilities,
       overrides;

@import "file_path" layer(tiptap);
@import "file_path" layer(custom.components);

@layer base {
  :root {
    overflow: hidden;
    @media (max-width: 768px) {
      overflow: hidden scroll;
    }
  }

  :where(*) {
    @apply outline-0;
  }

  :where(:focus) {
    @apply outline-0;
  }
}
/* rest of layers */

VS Code settings

{
  "workbench.colorTheme": "One Dark Pro Monokai Darker",
  "terminal.integrated.enableMultiLinePasteWarning": false,
  "explorer.confirmDelete": false,
  "python.linting.flake8Enabled": true,
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "python.terminal.activateEnvironment": false,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "files.insertFinalNewline": true,
  "[python]": {
    "editor.formatOnType": true
  },
  "[yaml]": {
    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
    "editor.formatOnSave": false
  },
  "dart.flutterSdkPath": "path_to_file/fvm/versions/3.13.8",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.referencesCodeLens.enabled": true,
  "javascript.referencesCodeLens.showOnAllFunctions": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "playwright.showTrace": true
}

workspace settings

{
  "tailwindCSS.experimental.configFile": "path_to_file/index.scss",
  "editor.quickSuggestions": {
    "strings": true
  }
}

Reproduction URL

Don't have one currently

Describe your issue

Recently upgraded tailwind v3 to v4, using a structure of index.scss as the entry point and importing my old tailwind.config files to implement styles, tailwind classnames and styles are working in code but tailwind intellisense is not working even after setting the tailwindCSS.experimental.configFile setting. Does tailwindcss-intellisense not work in this scenario? Do I need to convert everything from my config files into index.scss for it to work?

[thecrypticace]

I'll be a bit hard for me to figure out all the steps necessary without a reproduction but a few things jump out at me immediately:

1. IntelliSense for v4 intentionally does not work for anything other than plain CSS files. See my response here about why.

2. The order of the statements in the CSS file is incorrect. I would actually expect the build to fail in v4 with this file. Layer statements come first then imports then everything else.

So first, re-organize your CSS file to look like this:

@layer base,
       tiptap,
       custom.components,
       custom.utilities,
       overrides;

@import "tailwindcss";
@import "file_path" layer(tiptap);
@import "file_path" layer(custom.components);

@config "path_to_file/tailwind.config.js";

@layer base {
  :root {
    overflow: hidden;
    @media (max-width: 768px) {
      overflow: hidden scroll;
    }
  }

  :where(*) {
    @apply outline-0;
  }

  :where(:focus) {
    @apply outline-0;
  }
}
/* rest of layers */

3. You're declaring your own layers but not including the all the layers that tailwindcss itself does. This might produce unexpected results when building. I would split the imports into individual files and then add the layers to your explicit set.

I took a guess at where the layers should be and assumed you'd want to use the layers Tailwind CSS itself uses as a default:

@layer theme,
       base,
       tiptap,
       components,
       custom.components,
       custom.utilities,
       /* Note: Putting the utilities layer between the above two won't work the way you'd probably expect because of how nested layers work in CSS */
       utilities,
       overrides;

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/base" layer(theme);
@import "tailwindcss/utilities" layer(theme);

@import "file_path" layer(tiptap);
@import "file_path" layer(custom.components);

@config "path_to_file/tailwind.config.js";

@layer base {
  :root {
    overflow: hidden;
    @media (max-width: 768px) {
      overflow: hidden scroll;
    }
  }

  :where(*) {
    @apply outline-0;
  }

  :where(:focus) {
    @apply outline-0;
  }
}
/* rest of layers */

The last thing is if you open the command palette and run "Tailwind CSS: Show Output" you'll get some information that might help with debugging. If you still run into problems after fixing the above points I can try taking a look if I have those logs (or a reproduction — which would be preferable).

Gonna close this one as it's quite likely just related to sass + the imports thing but feel free to comment if you're still having issues and I'll take another look