Skip to content
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.

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

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

Open
Vectrex opened this issue Jan 30, 2025 · 2 comments
Open

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

Vectrex opened this issue Jan 30, 2025 · 2 comments

Comments

@Vectrex
Copy link

Vectrex commented Jan 30, 2025

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
Copy link
Member

Hey!

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

@Vectrex
Copy link
Author

Vectrex commented Jan 30, 2025

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.

@Vectrex Vectrex changed the title Tailwind CSS 4 ignores .vitepress directory and files [v4] Tailwind CSS 4 ignores .vitepress directory and files Feb 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants