Add diagnostic for @tailwind components / screens / variants

Author: thecrypticace

packages/tailwindcss-language-server/tests/diagnostics/diagnostics.test.js

@@ -320,6 +320,9 @@ withFixture('v4/basic', (c) => {
     code: `
       @tailwind base;
       @tailwind preflight;
+      @tailwind components;
+      @tailwind screens;
+      @tailwind variants;
     `,
     expected: [
       {
@@ -342,6 +345,36 @@ withFixture('v4/basic', (c) => {
         },
         severity: 1,
       },
+      {
+        code: 'invalidTailwindDirective',
+        message:
+          "'@tailwind components' is no longer available in v4. Use '@tailwind utilities' instead.",
+        range: {
+          start: { line: 3, character: 16 },
+          end: { line: 3, character: 26 },
+        },
+        severity: 1,
+      },
+      {
+        code: 'invalidTailwindDirective',
+        message:
+          "'@tailwind screens' is no longer available in v4. Use '@tailwind utilities' instead.",
+        range: {
+          start: { line: 4, character: 16 },
+          end: { line: 4, character: 23 },
+        },
+        severity: 1,
+      },
+      {
+        code: 'invalidTailwindDirective',
+        message:
+          "'@tailwind variants' is no longer available in v4. Use '@tailwind utilities' instead.",
+        range: {
+          start: { line: 5, character: 16 },
+          end: { line: 5, character: 24 },
+        },
+        severity: 1,
+      },
     ],
   })
 })

packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts

@@ -89,6 +89,14 @@ function validateLayerName(
       }
     }
 
+    // `@tailwind components | screens | variants` do not exist in v4
+    if (layerName === 'components' || layerName === 'screens' || layerName === 'variants') {
+      return {
+        message: `'@tailwind ${layerName}' is no longer available in v4. Use '@tailwind utilities' instead.`,
+        suggestions: [],
+      }
+    }
+
     let parts = layerName.split(/\s+/)
 
     // `@tailwind utilities source(…)` is valid