TailWindCss vue-cli 构建

664 阅读1分钟

用vue-cli 创建vue项目

vue create myproject

#进入myproject文件夹

cd myproject

postcss 7兼容性构建

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

创建配置文件

npx tailwindcss init -p

-p 表示同时生成postcss.config.js

包含Tailwind到css中

创建 src/styles.css

/*./src/styles.css*/
@tailwind base;
@tailwind component;
@tailwind utilties;

生成css

package.json中添加构建命令

"scripts": {
  "tailwindbuild": "postcss src/styles.css -o dist/tailwind.css"
},

引入构建后的tailwind.css

// mian.js
import '../dist/tailwind.css'