Show warning when loading a config in v3 fails (#1191)

Closes #1124

When IntelliSense loads a config file in v3, if that loading fails, it
won't work _at all_ even if your project is an otherwise valid project.
There's also no indication to the user that this is the cause of
IntelliSense not working.

This PR does two things:
- Uses the default config if loading the user's config does not work so
you're likely to get IntelliSense for at least some utilities.
- Detects an issue when loading the config file and surfaces a warning
to the user


Now, when given this config file:
```js
import plugin from "i-do-not-exist";

/** @type {import('tailwindcss').Config} */
export default {
  content: ["index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "orange",
      },
    },
  },
  plugins: [plugin],
};
```

You'll see a warning like this:

<img width="572" alt="Screenshot 2025-02-11 at 15 24 03"
src="https://github.com/user-attachments/assets/2364b491-cd3d-448c-b453-37ef04c360ef"
/>

And IntelliSense will work for any default values (note how
`text-primary` doesn't show a color swatch):
<img width="655" alt="Screenshot 2025-02-11 at 15 28 12"
src="https://github.com/user-attachments/assets/2b683b36-31bc-4832-ad71-69cb30b3b5d4"
/>

Author: thecrypticace

packages/tailwindcss-language-server/src/projects.ts

@@ -19,7 +19,7 @@ import type {
 import { FileChangeType } from 'vscode-languageserver/node'
 import type { TextDocument } from 'vscode-languageserver-textdocument'
 import { URI } from 'vscode-uri'
-import { showError, SilentError } from './util/error'
+import { showError, showWarning, SilentError } from './util/error'
 import * as path from 'node:path'
 import * as fs from 'node:fs'
 import findUp from 'find-up'
@@ -838,6 +838,15 @@ export async function createProjectService(
         originalConfig = await loadConfig.module(state.configPath)
         originalConfig = originalConfig.default ?? originalConfig
         state.jit = true
+      } catch (err) {
+        // The user's config failed to load in v3 so we need to fallback
+        originalConfig = await resolveConfig.module({})
+        state.jit = true
+
+        // And warn the user
+        console.error(`Unable to load config file at: ${state.configPath}`)
+        console.error(err)
+        showWarning(connection, 'Tailwind CSS is unable to load your config file', err)
       } finally {
         hook.unhook()
       }

packages/tailwindcss-language-server/src/util/error.ts

@@ -32,6 +32,16 @@ export function showError(
   // }
 }
 
+export function showWarning(
+  connection: Connection,
+  message: string = 'Tailwind CSS',
+  err: any,
+): void {
+  connection.sendNotification('@/tailwindCSS/warn', {
+    message: formatError(message, err, false),
+  })
+}
+
 export function SilentError(message: string) {
   this.name = 'SilentError'
   this.message = message

packages/vscode-tailwindcss/CHANGELOG.md

@@ -10,6 +10,7 @@
 - Make sure custom regexes apply in Vue `<script>` blocks  ([#1177](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1177))
 - Fix suggestion of utilities with slashes in them in v4 ([#1182](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1182))
 - Assume 16px font size for `1rem` in media queries ([#1190](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1190))
+- Show warning when loading a config in v3 fails ([#1191](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1191))
 
 ## 0.14.3
 

packages/vscode-tailwindcss/src/extension.ts

@@ -532,6 +532,7 @@ export async function activate(context: ExtensionContext) {
     let client = new LanguageClient(CLIENT_ID, CLIENT_NAME, serverOptions, clientOptions)
 
     client.onNotification('@/tailwindCSS/error', showError)
+    client.onNotification('@/tailwindCSS/warn', showWarning)
     client.onNotification('@/tailwindCSS/clearColors', clearColors)
     client.onNotification('@/tailwindCSS/projectInitialized', updateActiveTextEditorContext)
     client.onNotification('@/tailwindCSS/projectReset', updateActiveTextEditorContext)
@@ -548,6 +549,12 @@ export async function activate(context: ExtensionContext) {
       commands.executeCommand('tailwindCSS.showOutput')
     }
 
+    async function showWarning({ message }: ErrorNotification) {
+      let action = await Window.showWarningMessage(message, 'Go to output')
+      if (action !== 'Go to output') return
+      commands.executeCommand('tailwindCSS.showOutput')
+    }
+
     interface DocumentSymbolsRequest {
       uri: string
     }