# TailwindCss 加入 Vue-CLI (Vue2安裝)

#### 第一步
postcss 8不支援Vue 2，所以要裝postcss 7的版本

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

#### 第二步

在根目錄下新生成一個tailwind.config.js的空白文件

npx tailwindcss init

在tailwind.config.js中貼上：

content: ["./src/**/*.{html,js}"],
// 或
content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ]

#### 第三步
在根目錄下新生成postcss.config.js的空白文件，並貼上：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

#### 第四步

在main.js加入import tailwind.css

import "tailwindcss/tailwind.css"

＊在node_modules裡，可以找到tailwindcss的資料夾
tailwindcss的第一層有tailwind.css
檔案裡面是

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

#### 最後啟動專案

npm run dev
或
yarn serve