前端历练(一)Tailwind 配置
配置
1. main.ts
import { createApp } from 'vue'
import App from './App.vue'
import '../src/input.css'
createApp(App).mount('#app')
2. input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
3.编译出output.css
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
4. index.html
<!DOCTYPE html >
<html lang='en'><head><title>Vue App</title><meta charset = 'UTF-8'/><link href="./output.css" rel="stylesheet">\*和样式有关*\</head><body ><div id="app">\*用来载*\</div><script type="module" src="/src/main.ts"></script>\*和配置有关*\</body>
</html>
注意事项
- 安装版本不一定要最新,不然可能冲突
- postcss.config.js 可以不用