VuePress2如何支持Tailwind CSS

• 一、安装方法
  • 第一步：安装tailwindcss相关依赖
  • 第二步：初始化tailwind的配置
  • 第三步：在 VuePress 的样式文件中新增 Tailwind 配置
  • 第四步：修改VuePress的配置文件以支持Tailwind CSS
• 二、使用Tailwind CSS
• 三、参考

注：本文章的部分内容经腾讯混元润色

一、安装方法

第一步：安装tailwindcss相关依赖

首先，确保你已经安装了Node.js和npm。然后，在项目根目录下运行以下命令以安装Tailwind CSS及其相关依赖：

npm install -D tailwindcss postcss autoprefixer

第二步：初始化tailwind的配置

首先执行命令初始化Tailwind CSS的配置文件：

npx tailwindcss init -p

执行完成后，会生成一个tailwind.config.js的文件，修改内容如下：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./**/*.md",
    "./.vuepress/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

第三步：在 VuePress 的样式文件中新增 Tailwind 配置

打开 .vuepress/styles/index.scss 文件，复制以下内容导入Tailwind CSS。

请注意，导入base样式可能会导致 VuePress 的默认样式被覆盖，最好不要导入

/* @tailwind base; */
@tailwind components;
@tailwind utilities;

第四步：修改VuePress的配置文件以支持Tailwind CSS

在.vuepress/config.js文件中，使用viteBundler并配置viteOptions.css.postcss.plugins以包含 Autoprefixer和Tailwind CSS插件：

export default defineUserConfig({
  /* **其他已存在的配置，不要动** */
  bundler: viteBundler({
    viteOptions: {
      css: {
        postcss: {
          plugins: [
            autoprefixer(),
            tailwindcss()
          ]
        }
      }
    }
  }),
}

现在，你已经成功地在 VuePress 2 项目中集成了 Tailwind CSS。

二、使用Tailwind CSS

VuePress默认支持在md代码中编写vue代码，因此你可以直接在md文档中使用tailwindcss的样式，也可以新建自定义vue组件来使用tailwindcss。

以下是一个直接在md文档中使用tailwindcss的示例：

<div class="w-full h-5 bg-green-200 flex justify-center text-gray-400">
  HelloWorld
</div>

效果为：

HelloWorld

三、参考

Vuepress 2 and Tailwind CSS