Vite+Vue3 使用 Tailwind

刷了好几篇配置文章，其中都有一个步骤是在vite.config.ts中增加配置：

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

但是在vite.config中使用require会报错，试了几个方法都没解决，在这里记录下另一种配置方法。

安装Tailwind

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

创建配置文件

npx tailwindcss init

会生成一个文件tailwind.config.js，将其修改为：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

项目根目录创建postcss.config.js，内容为：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

将 Tailwind 指令添加到你的 CSS

创建一个css文件，例如在src/assets/css下创建tailwind.css，内容为

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

并将其在main.ts中引入

检查效果

以上就是所有的配置了，在组件中测试一下是否成功:

  <h1 class="text-3xl font-bold underline text-red-500">
    Hello world!
  </h1>

能看到这样的效果就表示已经成功了😺