vite+vue3.0 使用tailwindcss

 参考资料: 安装 - TailwindCSS中文文档 | TailwindCSS中文网

npm install -D tailwindcss

npm install postcss

npm install autoprefixer

npx tailwindcss init -p

 生成/src/tailwind.config.js和/src/postcss.config.js配置文件

vite+vue3.0 使用tailwindcss_第1张图片

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

vite+vue3.0 使用tailwindcss_第2张图片

新建/src/resources/tailwind.css文件;在文件中添加:

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

在/src/main.ts中进行引用

import "./resources/tailwind.css";

 在vue文件中使用






在VScode编辑器中添加扩展

vite+vue3.0 使用tailwindcss_第3张图片 vite+vue3.0 使用tailwindcss_第4张图片

你可能感兴趣的:(vue.js,前端,tailwindcss)