The tailwindcss cannot be activated

[recoluan]

This is my config:

// config.js
const { path } = require('@vuepress/shared-utils')

module.exports = {
  theme: path.resolve(__dirname, './theme'),
  postcss: {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer')
    ],
  },
}

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

<!-- Layout.vue -->
<template>
  <div class="italic">123</div>
</template>

<style lang="scss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

[meteorlxy]

Are you using v1 config in v2? postcss is moved to bundlerConfig if you are using webpack:

// .vuepress/config.ts
import { defineUserConfig } from 'vuepress';
import type { WebpackBundlerOptions } from '@vuepress/bundler-webpack';
import type { DefaultThemeOptions } from '@vuepress/theme-default';
import { path } from '@vuepress/utils';

export default defineUserConfig<DefaultThemeOptions, WebpackBundlerOptions>({
  bundlerConfig: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
}

[recoluan]

Thanks, I ignored the bundlerConfig.

[selected-pixel-jameson]

I'm having an issue using Tailwind and setting the purge configuration.
Within my tailwind.config.js file if I have the following I'm able to run yarn docs:build and the tailwind CSS will be applied.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

However, if I include purge settings.

module.exports = {
  purge: [
     './src/**/*.html',
     './src/**/*.js',
   ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

When I run a build and load the site the Tailwindcss is not applied.

I'm app importing the tailwindcss into the /docs/.vuepress/styles/index.scss file and extending the default theme via the instructions provided in the documentation.

[yzx9]

should I have to import tailwind to each component?

@Benbinbin It is a feasible way, but too troublesome, you can easily import the tailwindcss at once in clientAppEnhance

1. Configure your clientAppEnhance

import { defineClientAppEnhance } from "@vuepress/client"

// Tailwind CSS
import "tailwindcss/tailwind.css"

export default defineClientAppEnhance((ctx) => {
  // Your enhance code
})

2. Activating clientAppEnhence in your config/theme/plugin

// .vuepress/config.ts
import { defineUserConfig } from "@vuepress/cli"
import { path } from "@vuepress/utils"
import type { ThemeOptions } from "your-theme"

export default defineUserConfig<ThemeOptions>({
  clientAppEnhanceFiles: path.resolve(__dirname, "clientAppEnhance.ts"),
})

[Benbinbin]

How about use the vite as bundler?

postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },

use this code as config can't work

[meteorlxy]

It's for webpack. Vite has different options. Please check out the docs

[yzx9]

Actually I also tried activate tailwindcss with following config when using vite as bundler, and got an error getProcessedPlugins is not a function , hmmm... not sure where the bug came from.

bundlerConfig: {
    viteOptions: {
      css: {
        postcss: {
          plugins: [require("tailwindcss")],
        },
      },
    },
  },

[axtg]

Which for Vuepress 2 works like so:

const { viteBundler } = require('vuepress')

...

bundler: viteBundler({
        viteOptions: {
            css: {
                postcss: {
                    plugins: [
                        require('tailwindcss'),
                        require('autoprefixer')
                    ]
                }
            },
        }
    }),

[Benbinbin]

@meteorlxy @nsznsznjsz Thanks a lot
I use default theme and Vite as bundler, it works for me by applying following setting:

1. install Tailwindcss and create your configuration files

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

2. set postcss config for Vite in .vuepress/config.js

module.exports = {
  // ...
  bundlerConfig: {
    // vite 打包工具的选项
    viteOptions: {
      css: {
        postcss: {
            plugins: [
              require('tailwindcss'),
              require('autoprefixer')
            ]
        }
      },
    }
  },
  // ...
}

3. include Tailwind in .vuepress/styles/index.scss

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

[junelsolis]

I've spent hours trying to get Tailwind 2 and Vite bundler to work with a custom theme. The viteOptions finally solved it for me. 💯