Skip to content

Bump to Tailwind CSS v4.1.1 #1294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Apr 2, 2025
+213 −162
Merged

Bump to Tailwind CSS v4.1.1 #1294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f8fa135
Bump to v4.1.1
thecrypticace Apr 1, 2025
963076e
Make sure new utilities can display color swatches
thecrypticace Apr 1, 2025
7057768
Disable color calculation for utilities that obviously wont have them
thecrypticace Apr 2, 2025
25dc632
Disable color swatches for mask utilities
thecrypticace Apr 2, 2025
a57c3c2
Add todos
thecrypticace Apr 2, 2025
07c0959
Update changelog
thecrypticace Apr 1, 2025
890bb32
Update changelog
thecrypticace Apr 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/tailwindcss-language-server/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
52 changes: 29 additions & 23 deletions packages/tailwindcss-language-server/src/project-locator.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
},
{
Expand All @@ -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"
}
}
`,
Expand All @@ -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',
],
Expand All @@ -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"
}
}
`,
Expand All @@ -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',
],
Expand All @@ -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"
}
}
`,
Expand Down Expand Up @@ -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"
}
}
`,
Expand All @@ -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}}',
],
},
],
Expand All @@ -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'],
},
])

Expand All @@ -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',
Expand All @@ -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'],
},
])

Expand All @@ -338,7 +344,7 @@ testLocator({
'package.json': json`
{
"dependencies": {
"tailwindcss": "^4.0.2"
"tailwindcss": "4.1.0"
}
}
`,
Expand Down Expand Up @@ -386,7 +392,7 @@ testLocator({
'package.json': json`
{
"dependencies": {
"tailwindcss": "4.0.6"
"tailwindcss": "4.1.0"
}
}
`,
Expand Down Expand Up @@ -415,7 +421,7 @@ testLocator({
},
expected: [
{
version: '4.0.6',
version: '4.1.0',
config: '/src/articles/articles.css',
content: [],
},
Expand Down
8 changes: 8 additions & 0 deletions packages/tailwindcss-language-server/src/util/v4/design-system.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = []
Expand Down
4 changes: 2 additions & 2 deletions packages/tailwindcss-language-server/tests/colors/colors.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ defineTest({

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

expect(c.project).toMatchObject({
tailwind: {
version: '4.0.6',
version: '4.1.1',
isDefaultVersion: true,
},
})
Expand Down
26 changes: 13 additions & 13 deletions packages/tailwindcss-language-server/tests/completions/completions.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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([
Expand Down Expand Up @@ -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' }),
Expand Down Expand Up @@ -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',
})
})
Expand Down Expand Up @@ -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)
},
})

Expand All @@ -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)
},
})

Expand All @@ -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)
},
})

Expand Down Expand Up @@ -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)
},
})

Expand Down Expand Up @@ -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)
},
})

Expand Down Expand Up @@ -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)
},
})
Loading