IntelliSense doesn't work when loading a configuration with require

[shellwhale]

What version of VS Code are you using? v1.85.1 What version of Tailwind CSS IntelliSense are you using? v0.10.5 What version of Tailwind CSS are you using? v3.3.6 What package manager are you using? pnpm What operating system are you using? Windows 10

Tailwind config located in packages/configs/tailwind.config.js

import { fontFamily } from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
const config = {
  darkMode: ['class'],
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/@whalewave/**/*.{vue,js,ts,jsx,tsx,svelte}'
  ],
  safelist: ['dark'],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px'
      }
    },
    extend: {
      colors: {
        border: 'hsl(var(--border) / <alpha-value>)',
        input: 'hsl(var(--input) / <alpha-value>)',
        ring: 'hsl(var(--ring) / <alpha-value>)',
        background: 'hsl(var(--background) / <alpha-value>)',
        foreground: 'hsl(var(--foreground) / <alpha-value>)',
        primary: {
          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
        },
        muted: {
          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
        },
        accent: {
          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
        },
        popover: {
          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
        },
        card: {
          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
          foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
        }
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)'
      },
      fontFamily: {
        sans: [...fontFamily.sans]
      }
    }
  }
};

export default config;

Tailwind config located in packages/ui/tailwind.config.js

module.exports = require('../configs/tailwind/tailwind.config');

The IntelliSense doesn't work when acquiring a tailwind configuration using the require() function. The IntelliSense works correctly if the former configuration file listed above is used plainly (without using module.exports = require('../configs/tailwind/tailwind.config');

[thecrypticace]

I'm not able to reproduce this behavior — but I suspect if you change the file to this it'll probably work:

import config from '../configs/tailwind/tailwind.config'
export default config

Do you have a reproduction you can share?

[thecrypticace]

Closing due to inactivity. If you're able to provide a reproduction though please do and I'll take a look.