`<link rel="stylesheet" href="tailwindcss" />` not works #16937

zanminkian · 2025-03-01T13:12:56Z

zanminkian
Mar 1, 2025

What version of Tailwind CSS are you using?

v4.0.9

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.2.0

What version of Node.js are you using?

v22.14.0

What browser are you using?

Chrome

What operating system are you using?

Ubuntu

Reproduction URL

https://github.com/zanminkian/react-boilerplate/tree/tw-link-issue

Describe your issue

I have an index.html:

<!doctype html>
<html>
  <head>
    <title>react-boilerplate</title>
    <link rel="stylesheet" href="tailwindcss" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

After building by vite, the style not works. But if I change <link rel="stylesheet" href="tailwindcss" /> to <link rel="stylesheet" href="tailwindcss/index.css" />, it works.

Reproduced steps

git clone git@github.com:zanminkian/react-boilerplate.git
cd react-boilerplate && git checkout tw-link-issue && pnpm i && pnpm build

There are no css files in dist folder. ☹️

wongjn · 2025-03-01T13:19:47Z

wongjn
Mar 1, 2025
Collaborator

I would postulate that the Vite HTML parser doesn't understand the href value of tailwindcss, hence why it doesn't work. Consider integrating Tailwind via the installation instructions for Vite to avoid these problems:

3. Import Tailwind CSS

Add an @import to your CSS file that imports Tailwind CSS.
@import "tailwindcss";

5. Start using Tailwind in your HTML

Make sure your compiled CSS is included in the <head> (your framework might handle this for you), then start using Tailwind’s utility classes to style your content.
 <!doctype html>
 <html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="/src/styles.css" rel="stylesheet">
 </head>
 <body>
+  <h1 class="text-3xl font-bold underline">
+    Hello world!
+  </h1>
 </body>
</html>

So you could create a src/styles.css file with:

@import "tailwindcss";

And have that linked in your index.html:

 <head>
   <title>react-boilerplate</title>
-  <link rel="stylesheet" href="tailwindcss/index.css" />
+  <link rel="stylesheet" href="/src/styles.css" />
 </head>
 <body>

0 replies

zanminkian · 2025-03-01T13:26:58Z

zanminkian
Mar 1, 2025
Author

Thanks. I prefer <link rel="stylesheet" href="tailwindcss/index.css" /> than <link rel="stylesheet" href="/src/styles.css" /> in my simple projects, as it's cleaner.

If <link rel="stylesheet" href="tailwindcss" /> works will be better.

0 replies

wongjn · 2025-03-01T13:47:43Z

wongjn
Mar 1, 2025
Collaborator

I'm not sure if Tailwind can do anything about this, but from looking at the Vite code, it processes HTML nodes for asset inclusion:

// For asset references in index.html, also generate an import
// statement for each - this will be handled by the asset plugin
const assetAttributes = getNodeAssetAttributes(node)
for (const attr of assetAttributes) {

And we can see the test for getNodeAssetAttributes() for an idea of what <link rel="stylesheet" href="tailwindcss" /> would return:

test('handles link with allowed rel', () => {
  const node = getNode('<link rel="stylesheet" href="style.css">')
  const attrs = getNodeAssetAttributes(node)
  expect(attrs).toHaveLength(1)
  expect(attrs[0]).toHaveProperty('type', 'src')
  expect(attrs[0]).toHaveProperty('key', 'href')
  expect(attrs[0]).toHaveProperty('value', 'style.css')
  expect(attrs[0].attributes).toEqual({
    rel: 'stylesheet',
    href: 'style.css',
  })
})

Thus, <link rel="stylesheet" href="tailwindcss" /> would be parsed as:

assetAttributes = [
  {
    type: 'src',
    key: 'href',
    value: 'tailwindcss',
    attributes: {
      rel: 'stylesheet',
      href: 'tailwindcss',
    },
  }
]

We skip through to the relevant conditional which then leads us to this significant conditional:

if (
  node.nodeName === 'link' &&
  isCSSRequest(url) &&
  // should not be converted if following attributes are present (#6748)
   !('media' in attr.attributes || 'disabled' in attr.attributes)
) {

Specifically, the isCSSRequest(url) part, which is defined as:

export const isCSSRequest = (request: string): boolean =>
  CSS_LANGS_RE.test(request)

CSS_LANGS_RE is:

export const CSS_LANGS_RE =
  /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/

And thus, for Vite to load a <link rel="stylesheet"> as a CSS asset file, the href value needs to end in .css, .less, .sass, etc. tailwindcss does not, hence why you need to use tailwindcss/index.css. I would perhaps consider this issue not to be under Tailwind's remit to get it to work in your desired way (all the more since you can use the slightly longer tailwindcss/index.css), but I leave the final word to the maintainers.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`<link rel="stylesheet" href="tailwindcss" />` not works #16937

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments

{{title}}

3. Import Tailwind CSS

5. Start using Tailwind in your HTML

{{title}}

{{title}}

Select a reply

<link rel="stylesheet" href="tailwindcss" /> not works #16937

zanminkian Mar 1, 2025

Replies: 4 comments

wongjn Mar 1, 2025 Collaborator

3. Import Tailwind CSS

5. Start using Tailwind in your HTML

zanminkian Mar 1, 2025 Author

wongjn Mar 1, 2025 Collaborator

`<link rel="stylesheet" href="tailwindcss" />` not works #16937

zanminkian
Mar 1, 2025

wongjn
Mar 1, 2025
Collaborator

zanminkian
Mar 1, 2025
Author

wongjn
Mar 1, 2025
Collaborator