Bump to Tailwind CSS v4.1.1 (#1294)

Author: thecrypticace

packages/tailwindcss-language-server/package.json

@@ -40,7 +40,7 @@
     "@tailwindcss/forms": "0.5.3",
     "@tailwindcss/language-service": "workspace:*",
     "@tailwindcss/line-clamp": "0.4.2",
-    "@tailwindcss/oxide": "^4.0.15",
+    "@tailwindcss/oxide": "^4.1.0",
     "@tailwindcss/typography": "0.5.7",
     "@types/braces": "3.0.1",
     "@types/color-name": "^1.1.3",
@@ -84,7 +84,7 @@
     "rimraf": "3.0.2",
     "stack-trace": "0.0.10",
     "tailwindcss": "3.4.17",
-    "tailwindcss-v4": "npm:tailwindcss@4.0.6",
+    "tailwindcss-v4": "npm:tailwindcss@4.1.1",
     "tsconfck": "^3.1.4",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.3.3",

packages/tailwindcss-language-server/src/project-locator.test.ts

@@ -123,6 +123,7 @@ testFixture('v4/workspaces', [
       '{URL}/packages/admin/**',
       '{URL}/packages/admin/app.css',
       '{URL}/packages/admin/package.json',
+      '{URL}/packages/admin/tw.css',
     ],
   },
   {
@@ -147,8 +148,8 @@ testLocator({
     'package.json': json`
       {
         "dependencies": {
-          "tailwindcss": "^4.0.15",
-          "@tailwindcss/oxide": "^4.0.15"
+          "tailwindcss": "4.1.0",
+          "@tailwindcss/oxide": "4.1.0"
         }
       }
     `,
@@ -164,7 +165,7 @@ testLocator({
       content: [
         '/*',
         '/package.json',
-        '/src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
+        '/src/**/*.{aspx,astro,cjs,css,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,json,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
         '/src/components/example.html',
         '/src/index.html',
       ],
@@ -178,8 +179,8 @@ testLocator({
     'package.json': json`
       {
         "dependencies": {
-          "tailwindcss": "^4.0.15",
-          "@tailwindcss/oxide": "^4.0.15"
+          "tailwindcss": "4.1.0",
+          "@tailwindcss/oxide": "4.1.0"
         }
       }
     `,
@@ -197,7 +198,7 @@ testLocator({
       content: [
         '/*',
         '/package.json',
-        '/src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
+        '/src/**/*.{aspx,astro,cjs,css,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,json,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
         '/src/components/example.html',
         '/src/index.html',
       ],
@@ -211,8 +212,8 @@ testLocator({
     'package.json': json`
       {
         "dependencies": {
-          "tailwindcss": "^4.0.15",
-          "@tailwindcss/oxide": "^4.0.15"
+          "tailwindcss": "4.1.0",
+          "@tailwindcss/oxide": "4.1.0"
         }
       }
     `,
@@ -245,36 +246,40 @@ testLocator({
       content: [
         '/*',
         '/admin/foo.bin',
-        '/admin/{**/*.bin,**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}}',
+        '/admin/tw.css',
+        '/admin/ui.css',
+        '/admin/{**/*.bin,**/*.{aspx,astro,bin,cjs,css,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,json,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}}',
         '/package.json',
         '/shared.html',
-        '/web/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
+        '/web/**/*.{aspx,astro,bin,cjs,css,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,json,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
+        '/web/app.css',
       ],
     },
     {
       config: '/web/app.css',
       content: [
         '/*',
-        '/admin/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
+        '/admin/**/*.{aspx,astro,bin,cjs,css,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,json,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
+        '/admin/app.css',
+        '/admin/tw.css',
+        '/admin/ui.css',
         '/package.json',
         '/shared.html',
         '/web/bar.bin',
-        '/web/{**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue},*.bin}',
+        '/web/{**/*.{aspx,astro,bin,cjs,css,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,json,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue},*.bin}',
       ],
     },
   ],
 })
 
 testLocator({
-  // TODO: Enable once v4.1 is released
-  options: { skip: true },
   name: 'automatic content detection with negative custom sources',
   fs: {
     'package.json': json`
       {
         "dependencies": {
-          "tailwindcss": "0.0.0-insiders.3e53e25",
-          "@tailwindcss/oxide": "0.0.0-insiders.3e53e25"
+          "tailwindcss": "4.1.0",
+          "@tailwindcss/oxide": "4.1.0"
         }
       }
     `,
@@ -293,7 +298,7 @@ testLocator({
         '/*',
         '/package.json',
         '/src/index.html',
-        '/src/{**/*.html,**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,json,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}}',
+        '/src/{**/*.html,**/*.{aspx,astro,cjs,css,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,json,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}}',
       ],
     },
   ],
@@ -303,7 +308,7 @@ testFixture('v4/missing-files', [
   //
   {
     config: 'app.css',
-    content: ['{URL}/*', '{URL}/package.json'],
+    content: ['{URL}/*', '{URL}/i-exist.css', '{URL}/package.json'],
   },
 ])
 
@@ -314,7 +319,8 @@ testFixture('v4/path-mappings', [
     content: [
       '{URL}/*',
       '{URL}/package.json',
-      '{URL}/src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
+      '{URL}/src/**/*.{aspx,astro,cjs,css,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,json,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
+      '{URL}/src/a/file.css',
       '{URL}/src/a/my-config.ts',
       '{URL}/src/a/my-plugin.ts',
       '{URL}/tsconfig.json',
@@ -326,7 +332,7 @@ testFixture('v4/invalid-import-order', [
   //
   {
     config: 'tailwind.css',
-    content: ['{URL}/*', '{URL}/package.json'],
+    content: ['{URL}/*', '{URL}/a.css', '{URL}/b.css', '{URL}/package.json'],
   },
 ])
 
@@ -338,7 +344,7 @@ testLocator({
     'package.json': json`
       {
         "dependencies": {
-          "tailwindcss": "^4.0.2"
+          "tailwindcss": "4.1.0"
         }
       }
     `,
@@ -386,7 +392,7 @@ testLocator({
     'package.json': json`
       {
         "dependencies": {
-          "tailwindcss": "4.0.6"
+          "tailwindcss": "4.1.0"
         }
       }
     `,
@@ -415,7 +421,7 @@ testLocator({
   },
   expected: [
     {
-      version: '4.0.6',
+      version: '4.1.0',
       config: '/src/articles/articles.css',
       content: [],
     },

packages/tailwindcss-language-server/src/util/v4/design-system.ts

@@ -219,6 +219,14 @@ export async function loadDesignSystem(
   Object.assign(design, {
     dependencies: () => dependencies,
 
+    // TODOs:
+    //
+    // 1. Remove PostCSS parsing — its roughly 60% of the processing time
+    // ex: compiling 19k classes take 650ms and 400ms of that is PostCSS
+    //
+    // - Replace `candidatesToCss` with a `candidatesToAst` API
+    // First step would be to convert to a PostCSS AST by transforming the nodes directly
+    // Then it would be to drop the PostCSS AST representation entirely in all v4 code paths
     compile(classes: string[]): (postcss.Root | null)[] {
       let css = design.candidatesToCss(classes)
       let errors: any[] = []

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

@@ -334,7 +334,7 @@ defineTest({
 
     expect(c.project).toMatchObject({
       tailwind: {
-        version: '4.0.6',
+        version: '4.1.1',
         isDefaultVersion: true,
       },
     })
@@ -373,7 +373,7 @@ defineTest({
 
     expect(c.project).toMatchObject({
       tailwind: {
-        version: '4.0.6',
+        version: '4.1.1',
         isDefaultVersion: true,
       },
     })

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

@@ -313,8 +313,8 @@ withFixture('v4/basic', (c) => {
     let result = await completion({ lang, text, position, settings })
     let textEdit = expect.objectContaining({ range: { start: position, end: position } })
 
-    expect(result.items.length).toBe(13172)
-    expect(result.items.filter((item) => item.label.endsWith(':')).length).toBe(317)
+    expect(result.items.length).toBe(19283)
+    expect(result.items.filter((item) => item.label.endsWith(':')).length).toBe(346)
     expect(result).toEqual({
       isIncomplete: false,
       items: expect.arrayContaining([
@@ -488,7 +488,7 @@ withFixture('v4/basic', (c) => {
     })
 
     // Make sure `@slot` is NOT suggested by default
-    expect(result.items.length).toBe(7)
+    expect(result.items.length).toBe(8)
     expect(result.items).not.toEqual(
       expect.arrayContaining([
         expect.objectContaining({ kind: 14, label: '@slot', sortText: '-0000000' }),
@@ -627,7 +627,7 @@ withFixture('v4/basic', (c) => {
 
     expect(resolved).toEqual({
       ...item,
-      detail: 'background-color: oklch(0.637 0.237 25.331);',
+      detail: 'background-color: oklch(63.7% 0.237 25.331);',
       documentation: '#fb2c36',
     })
   })
@@ -692,7 +692,7 @@ defineTest({
     //                       ^
     let completion = await document.completions({ line: 0, character: 23 })
 
-    expect(completion?.items.length).toBe(12289)
+    expect(completion?.items.length).toBe(19236)
   },
 })
 
@@ -714,7 +714,7 @@ defineTest({
     //                      ^
     let completion = await document.completions({ line: 0, character: 22 })
 
-    expect(completion?.items.length).toBe(12289)
+    expect(completion?.items.length).toBe(19236)
   },
 })
 
@@ -736,7 +736,7 @@ defineTest({
     //                               ^
     let completion = await document.completions({ line: 0, character: 31 })
 
-    expect(completion?.items.length).toBe(12289)
+    expect(completion?.items.length).toBe(19236)
   },
 })
 
@@ -765,7 +765,7 @@ defineTest({
     //                    ^
     let completion = await document.completions({ line: 0, character: 20 })
 
-    expect(completion?.items.length).toBe(12289)
+    expect(completion?.items.length).toBe(19236)
   },
 })
 
@@ -796,7 +796,7 @@ defineTest({
     //                      ^
     let completion = await document.completions({ line: 1, character: 22 })
 
-    expect(completion?.items.length).toBe(12289)
+    expect(completion?.items.length).toBe(19236)
   },
 })
 
@@ -886,24 +886,24 @@ defineTest({
     //             ^
     let completionA = await document.completions({ line: 0, character: 13 })
 
-    expect(completionA?.items.length).toBe(12289)
+    expect(completionA?.items.length).toBe(19236)
 
     //   return <Test className={cn("")} />;
     //                              ^
     let completionB = await document.completions({ line: 3, character: 30 })
 
-    expect(completionB?.items.length).toBe(12289)
+    expect(completionB?.items.length).toBe(19236)
 
     //   return <Test className={cn("")} />;
     //                              ^
     let completionC = await document.completions({ line: 7, character: 30 })
 
-    expect(completionC?.items.length).toBe(12289)
+    expect(completionC?.items.length).toBe(19236)
 
     // let y = cva("");
     //             ^
     let completionD = await document.completions({ line: 10, character: 13 })
 
-    expect(completionD?.items.length).toBe(12289)
+    expect(completionD?.items.length).toBe(19236)
   },
 })