[v4] Tailwind CSS 4 ignores .vitepress directory and files

[Vectrex]

What version of Tailwind CSS are you using?

4.0.1

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

vite

What version of Node.js are you using?

22.13.1

What browser are you using?

Firefox

What operating system are you using?

Ubuntu 24.04.1

Describe your issue

With Tailwind 3.4.x I can incorporate Tailwind classes in my Vitepress markdown files. My tailwind.config.js looks like this

export default {
    content: [
        './src/**/*.{vue,js,html}',
        './docs/**/*.md',
        './index.html'
    ],
    theme: { ... }

One of the markdown files contains a

<div class="bg-amber-900">

and Vite delivers a stylesheet containing

.bg-amber-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(120 53 15 / var(--tw-bg-opacity, 1));
}

When switching to Tailwind 4 the config file is gone.
Since the .vitepress directory and all its contents is not in a .gitignore all the markdown files should be parsed.

The CSS now looks like this

@import 'tailwindcss';
@theme { ... }

but the resulting CSS provided by Vite does not contain a .bg-amber-900 class.

Adding

@source './docs/**/*.md';

doesn't change anything - the resulting CSS provided by Vite does not contain a .bg-amber-900 class.

package.json

"dependencies": {
    "tailwindcss": "^4.0.1",
    "vite": "^6.0.11",
    "@tailwindcss/vite": "^4.0.1",
    "vitepress": "^1.6.3"
    ...
  },

vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
 ...
  plugins: [
      tailwindcss(),
  ],
})

Expected behavior:

Tailwind 4.0 should also generate stylesheets containing classes used in Vitepress markdown files.

[RobinMalfait]

Hey!

Can you add a minimal reproduction GitHub repo so we can take a look?

[Vectrex]

Maybe it already helps to link the "real thing".

https://github.com/Vectrex/vxVue

The outcome can be seen here

https://vectrex.github.io/vxVue/accordion.html

where for example the GUI elements are not styled.
Checking out tag 1.1.x provides the Tailwind 3.x setup.

[Kocal]

Hi, I'm also facing the same issue. Maybe it is because the dot in .vitepress path?

[Vectrex]

Seems to be more of a @tailwindcss/vite or vite issue, since replacing the Tailwind plugin for vite with the @tailwindcss/postcss alternative (and setting up postcss) will search through subdirectories and containing files even without a @source directive and generate the according classes.

[Vectrex]

Seems to be the culprit.
Replacing the vite plugin with its postcss pendant does the trick.

See Vectrex/vxVue@fa881cb

[Kocal]

Yeah I've also seen elysiajs/documentation@52bdfdd#diff-05ed1c7f99e45b485708115502a1e0f28c8547e9a9a29c1b8664f79103cf7873 do the same

[philipp-spiess]

@Vectrex I tried running your repo but I really don't know how to see the error here, there's too much going on here. What's missing the styles here? (I checked out the commit before your fix of changing to the postcss plugin, 817e799507bcd92b2f1a2691ff4e6225a141fd60):

If you could recreate this in a minimal setup with only the essential files it would help a ton, not sure how we can help otherwise.

[Vectrex]

The problem is visible once you run docs:dev or docs:build with docs:preview. All styles used in the vitepress markdown files are being ignored. (The sample page above always worked.)

[Vectrex]

I've added a simple repo outlining the issue:

https://github.com/Vectrex/tailwind4-test

The initial commit uses the tailwindcss/vite the second commit replaces it with tailwindcss/postcss. In both cases I would expect, that dist/assets/index-*.css should contain a text-amber-500 class since it gets used in docs/test.md5

However, only the postcss version generates this class.

Adding a @source 'docs/**/*.md5 however did create this class even with the vite plugin, though I couldn't observe this with my initial issue.

[philipp-spiess]

Oh, I think I got it.

So first of all it is expected that you have to add @source in this case for the Vite plugin since it will otherwise never process your .md as it's not part of the Vite build. This is different in postcss and will change in our Vite plugin too (#16631) but this is definitely expected behavior right now.

I was looking through your initial bug report again and you mentioned you added:

@source './docs/**/*.md';

However, looking at the repo the CSS file is inside the /src/index.css folder and the docs folder is inside /docs. These sources are relative to the file they are defined in so I think you want this instead:

@source '../docs/**/*.md';

[Vectrex]

Cheers to Vienna... Perhaps
https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned
could be more explicit on this.

However, updating to the correct

@source '../docs/**/*.md';

and switching back to the Vite plugin and adding a <div id="bg-amber-900">Test</div> in getting-started.md still won't create a bg-amber-900 class in docs/.vitepress/dist/style*.css (or display this style in dev mode).
Anyway, since an update is just around the corner - can we close the issue altogether?

[philipp-spiess]

@Vectrex Yeah we updated the text recently and it now says 'relative to the stylesheet' but that wasn't there a couple of weeks ago for sure. Sorry about that!

Oh this does seem unexpected but I agree that with the changes that we've made to the Vite plugin this will just work out-of-the-box now. Feel free to reopen though if you have any more issues!