如何在 vue2/3 中使用 tailwind

如何在 vue 中使用 tailwind

vue3

使用 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS

vue2

1. 安装

根据项目中是否已经存在postcss 和 autoprefixer来选择

npm install -D tailwindcss 
或者
npm install -D tailwindcss postcss autoprefixer  

vscode装了插件后可能没有提示，解决方式如下

2. 生成配置文件

npx tailwindcss init -p

在 tailwind.config.js 配置文件中添加所有模板文件的路径。

这里的路径一定要写对！！！！

module.exports = {
  content: [
    "./src/components/**/*.{js,vue,ts}",
    "./src/views/**/*.{js,vue,ts}",
    "./src/App.vue"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3.postcss文件配置

postcss.config.js

module.exports = {
    plugins: {
      tailwindcss: "./tailwind.config.js",
      autoprefixer: {},
    }
  }

4.main.js 引入样式

import "tailwindcss/tailwind.css"