@import url("tailwindcss") is not worked, only @import 'tailwindcss'

[evgeniyworkbel]

What version of Tailwind CSS are you using?
v4.1

What build tool (or framework if it abstracts the build tool) are you using?
react@18.3, vite@5.3.1, @tailwindcss/vite@4.1.4

What version of Node.js are you using?
v20.14.0

What browser are you using?
Chrome 135.0.7049.96

What operating system are you using?
macOS

Reproduction URL
https://stackblitz.com/edit/tailwind-4-import-url-is-not-working?file=vite.config.ts

Describe your issue
Defining tw styles import @import url("tailwindcss") is not worked, only @import 'tailwindcss' working

[wongjn]

I think this might be by design, as per this test:

tailwindcss/packages/tailwindcss/src/at-import.test.ts

Lines 157 to 211 in 8feb6a7

	test('url() imports are passed-through', async () => {
	await expect(
	run(
	css`
	@import url('example.css');
	`,
	{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
	),
	).resolves.toMatchInlineSnapshot(`"@import url('example.css');"`)
	await expect(
	run(
	css`
	@import url('./example.css');
	`,
	{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
	),
	).resolves.toMatchInlineSnapshot(`"@import url('./example.css');"`)
	await expect(
	run(
	css`
	@import url('/example.css');
	`,
	{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
	),
	).resolves.toMatchInlineSnapshot(`"@import url('/example.css');"`)
	await expect(
	run(
	css`
	@import url(example.css);
	`,
	{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
	),
	).resolves.toMatchInlineSnapshot(`"@import url(example.css);"`)
	await expect(
	run(
	css`
	@import url(./example.css);
	`,
	{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
	),
	).resolves.toMatchInlineSnapshot(`"@import url(./example.css);"`)
	await expect(
	run(
	css`
	@import url(/example.css);
	`,
	{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
	),
	).resolves.toMatchInlineSnapshot(`"@import url(/example.css);"`)
	})

You'd use without url() to signal that Tailwind should handle the @import, and use url() when it should not.

[evgeniyworkbel]

I think this might be by design, as per this test:

tailwindcss/packages/tailwindcss/src/at-import.test.ts

Lines 157 to 211 in 8feb6a7

test('url() imports are passed-through', async () => {
await expect(
run(
css @import url('example.css'); ,
{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
),
).resolves.toMatchInlineSnapshot("@import url('example.css');")

await expect(
run(
css @import url('./example.css'); ,
{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
),
).resolves.toMatchInlineSnapshot("@import url('./example.css');")

await expect(
run(
css @import url('/example.css'); ,
{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
),
).resolves.toMatchInlineSnapshot("@import url('/example.css');")

await expect(
run(
css @import url(example.css); ,
{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
),
).resolves.toMatchInlineSnapshot("@import url(example.css);")

await expect(
run(
css @import url(./example.css); ,
{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
),
).resolves.toMatchInlineSnapshot("@import url(./example.css);")

await expect(
run(
css @import url(/example.css); ,
{ loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')), optimize: false },
),
).resolves.toMatchInlineSnapshot("@import url(/example.css);")
})
You'd use without url() to signal that Tailwind should handle the @import, and use url() when it should not.

I see.
Could you please add a note about it inside "Installation" section at website?
I think this is one of important thing because I got the bug after stylelint suggested me to fix import

[wongjn]

The documentation website is open source at https://github.com/tailwindlabs/tailwindcss.com so feel free to submit a PR there.