- 创建vite项目
yarn create vite
输入项目名称,选择Vue
选择Customize with create-vue
根据需求选一下
- 根据指令,cd到项目目录里面之后,执行
yarn
- 安装tailwind,
yarn add tailwindcss postcss autoprefixer
参考:https://tailwindcss.com/docs/guides/vite#vue
生成配置文件yarn tailwindcss init
重点来了:由于是typescript,所以需要将后缀js重命名为cjs。
编辑:tailwind.config.cjs
文件,输入以下内容:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
再编辑src/assets/main.css
替换成以下内容:
@tailwind base;
@tailwind components;
@tailwind utilities;
编辑src/App.vue,添加一行内容,并保存
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
- 启动
yarn dev
已生效(h1加了下划线)
评论 (0)