TailwindCSS and Vitepress

[danielmoessner]

How can I enable Tailwindcss in Vitepress?

I've tried that #62 but it didn't work for me. I'm using the latest version of vitepress 0.22.3.

My config looks like this:

import { defineConfig } from 'vitepress';


export default defineConfig({
    ...
    themeConfig: {
        sidebar: [
            {
                text: 'Components',
                collapsable: true,
                children: [
                    { text: 'ButtonNormal', link: '/components/button-normal' },
                    { text: 'CircleLoader', link: '/components/circle-loader' }
                ]
            }
        ]
    },
    theme: './theme/index.js',
})

and my theme/index.js looks like this:

import '../styles/index.postcss'

import DefaultTheme from "vitepress/dist/client/theme-default";
export default { ...DefaultTheme };

with index.postcss being like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

I've got my custom components working but they use tailwindcss and I can't get the styling to work.

[CodyBontecou]

https://github.com/ky-is/vitepress-starter-tailwind is a good starter repo showcasing how to get this working.

[ndom91]

Reviving this issue as the linked example doesn't seem to work with the latest VitePress / Vite3 dependencies.

I've copied almost exactly the same setup as in ky-is/vitepress-starter-tailwind, except for that the DefaultTheme is now imported from vitepress/theme instead of the longer path used in the old(er) version.

• [email protected]
• [email protected]
• [email protected]
• [email protected]

[brc-dd]

Have a look at this one: https://stackblitz.com/edit/vite-uujwcv You can customize .postcssrc there according to your need. Also, VitePress now plays well with TailwindCSS's dark mode classes. If you face some conflicts between the styles of VP and those added by Tailwind, then consider using layout: page, or you can use this workaround: #199 (comment)

[ndom91]

That worked! Simply adding the .postcssrc.json with the tailwind plugin (and postcss-preset-env). Seemed to do the trick!

{
  "plugins": {
    "tailwindcss": {},
    "postcss-preset-env": {
      "autoprefixer": { "flexbox": "no-2009" },
      "features": { "custom-properties": false },
      "stage": 3
    }
  }
}

[keqing77]

Thanks, it works perfectly

[indirectlylit]

Tailwind currently ignores all dot folders: tailwindlabs/tailwindcss#8712