The style does not take effect when using the markdown extension plugin with tailwindcss

[ajiho]

Describe the bug

I have written a markdown it plugin, and the code is as follows

export default defineConfig({
  title: "My Awesome Project",
  markdown: {
    config: (md) => {
      md.block.ruler.before(
        "paragraph",
        "myplugin",
        function (state, startLine, endLine) {
          var ch,
            token,
            pos = state.bMarks[startLine] + state.tShift[startLine],
            max = state.eMarks[startLine];
          ch = state.src.charCodeAt(pos);

          if (ch !== 0x40 /*@*/ || pos >= max) {
            return false;
          }

          let text = state.src.substring(pos, max);
          let rg = /^@\s(.*)/;
          let match = text.match(rg);

          if (match && match.length) {
            let result = match[1];

            // Create the opening token for the h1 tag
            token = state.push("heading_open", "h1", 1);
            token.markup = "@";
            token.map = [startLine, state.line];
            // Add class to the h1 tag
            token.attrs = [["class", "bg-red-300"]];

            // Create the inline content inside the h1 tag
            token = state.push("inline", "", 0);
            token.content = result;
            token.map = [startLine, state.line];
            token.children = [];

            // Create the closing token for the h1 tag
            token = state.push("heading_close", "h1", -1);
            token.markup = "@";

            state.line = startLine + 1;
            return true;
          }
        }
      );
    },
  },
  });

It's just a simple syntax parse(This is not the main point, it is just a simple plugin written to illustrate the issue)

Enter the following content in the markdown file

@ header  ->   <h1 class="bg-red-300">header</h1>  

I have followed the tailwindcss guideInstallation

Then start the development server

npm run docs:dev

But its'. bg-red-300 'style did not take effect

But when I continued to input an HTML fragment carrying 'bg-red-300' in markdown, it took effect

When I deleted the HTML fragment carrying 'bg-red-300' and restarted the development server, it had no effect again

refer to:
https://github.com/ajiho/vitepress-tailwindcss-markdown-it

This problem has been bothering me for a long time, can you help me?

Reproduction

refer to

Expected behavior

After the parse plugin of markdown it renders, the tailwindcss style should take effect immediately

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-4720HQ CPU @ 2.60GHz
    Memory: 1.36 GB / 7.91 GB
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.86)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    vitepress: ^1.5.0 => 1.5.0

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

tailwind works by scanning the source. In your contents property in tw config you probably will have md/vue files. But that class is not in those files, so the corresponding CSS is not generated. You'll need to safelist it - https://tailwindcss.com/docs/content-configuration#safelisting-classes

Edit - You can also try adding mjs extension to contents. It should work. If it doesn't, probably directories starting with dot are ignored by glob. You can specify something like .vitepress/**/*.mjs. Also, postcss and tw config should be inside your vitepress root to be discovered (docs directory in your repo).

In tailwind v4, you can register its vite plugin but you'll need move its scan plugin after vitepress. Not tricky stuff, but not trivial either:

export default defineConfig({
  vite: {
    plugins: [
      tailwindcss() as any,
      {
        name: 'vp-tw-order-fix',
        configResolved(c) {
          movePlugin(
            c.plugins as any,
            '@tailwindcss/vite:scan',
            'after',
            'vitepress'
          )
        },
      },
    ],
  },
})

function movePlugin(
  plugins: { name: string }[],
  pluginAName: string,
  order: 'before' | 'after',
  pluginBName: string
) {
  const pluginBIndex = plugins.findIndex((p) => p.name === pluginBName)
  if (pluginBIndex === -1) return

  const pluginAIndex = plugins.findIndex((p) => p.name === pluginAName)
  if (pluginAIndex === -1) return

  if (order === 'before' && pluginAIndex > pluginBIndex) {
    const pluginA = plugins.splice(pluginAIndex, 1)[0]
    plugins.splice(pluginBIndex, 0, pluginA)
  }

  if (order === 'after' && pluginAIndex < pluginBIndex) {
    const pluginA = plugins.splice(pluginAIndex, 1)[0]
    plugins.splice(pluginBIndex, 0, pluginA)
  }
}

[ajiho]

@brc-dd Thank you very much for taking the time to investigate this matter multiple times. You have been a great help to me

If I move the PostCSS and TW configurations to the docs directory of my GitHub repository and start the development server, the console will display the following warning

I think the original position was correct, there's no need to move it

I tried to register the point directory in the content attribute of the TW configuration file, and the style started to take effect

As the issue has been resolved, I have decided to close it