Tailwind CSS 在 Vue 2 & Vanilla（html，css，javascript） 中的簡單使用方法

---- Vue 2.x

1. 創建一個VUE項目

2. 安裝Tailwind CSS 

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

3.創建配置文件

　　npx tailwindcss init -p

　　這將會在您的項目根目錄創建一個最小化的 tailwind.config.js 文件   以及   postcss.config.js

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

    module.exports = {

       plugins: {

       tailwindcss: {},

       autoprefixer: {}

    }

 　　兩者可以不設置

4. 在main.js 中引入 Tailwind CSS

　　import "tailwindcss/tailwind.css"

 

---- Vanilla

 

1.  npm init  --啟動

2.  npm install -D tailwindcss postcss-cli autoprefixer   --安裝 postcss-cli 、autoprefixer

3.  npx tailwindcss init -p   創建配置文件

4.. 新建css文件夾 style.css  內寫

　　@tailwind base； 

　　@tailwind compontents;

　　@tailwind utilities;

5. 將 package.json 里面的 script 

　　新增 　　"watch":"postcss css/style.css -o dist/style.css --watch"

6. dist文件夾下新增 index.html  引入導出的style.css

這樣 項目中的 Tailwind CSS 代碼就可以正常使用了~