Any idea on how to import css libraries? about vitepress HOT 6 CLOSED

Vite uses https://github.com/michael-ciniawsky/postcss-load-config so you can install Tailwind and add it to your postcss config's plugin list. It's working for me in Vitepress without any further tweaks!

from vitepress.

@neilmispelaar Sure, there's a few gotchas right now between Vite not supporting PostCSS 8 yet or being able to optimize certain dependencies.

https://github.com/ky-is/vitepress-starter-tailwind

Note that the order of import statements for vitepress/dist/client/theme-default and tailwind.postcss matters if you want to preserve VuePress's styles. I haven't really used the default theme, there might be a simpler way to import CSS if you aren't customizing it otherwise.

from vitepress.

Currently it doesn't seem like this is possible, but if you are okay with using the tailwind CDN it should be possible.

If you edit your config file in .vitepress/config.js then you add the following to import tailwind

module.exports = {
    head: [
        ['link', { rel: 'stylesheet', href='https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css' }]
    ]
};

I'm not sure how useful this will be for you if you are attempting to create a custom theme though.

from vitepress.

Thanks @jacobclevenger it was helpful. The project is under a heavy development, so let's hope this feature will become available at some point

from vitepress.

@ky-is
Would it be possible to share a code sample of how to get this to work?

I’ve tried integrating some code from the vite starter projects with tailwindcss working and sadly was getting errors when running the npm run docs:dev command.

from vitepress.

@ky-is

Thank you so much! This was immensely helpful!

For anyone else that stumbles on this issue in the future a couple of things in regards to TailwindCSS and vitepress:

1. Make sure to put TailwindCss in the package.json under devDependencies (not dependencies).

2. When you configure TailwindCSS, in the tailwind.config.js file you have to specify the hidden vitepress folders under the purge content list. If you just leave it as ./docs/**/*.vue nothing will be purged.

module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './docs/.vitepress/**/*.js',
      './docs/.vitepress/**/*.vue',
      './docs/.vitepress/**/*.ts',
    ],
    options: {
      safelist: ['html', 'body'],
    }
  }
}

3. At time of writing, somewhere in the project dependencies postCSS version 7 is being referenced, but TailwindCSS uses PostCSS version 8. This is why in your package.json you have to reference a version of TailwindCSS that is compatible with PostCSS version 7. Fun Bonus: If you use this compatible version of TailwindCSS then you can not use AutoPrefixer past version 9.

from vitepress.