
vue3 + vite项目中集成tailwindcss
style.css中加入。6 启动项目查看效果。
·
1 安装依赖
npm install -D tailwindcss postcss autoprefixer
2 生成配置
npx tailwindcss init -p
3 修改配置 tailwind.config.js
改成如下
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {}
},
plugins: []
}
4 添加css
style.css中加入
@tailwind base;
@tailwind components;
@tailwind utilities;
5 示例
<template>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</template>
6 启动项目查看效果
博主开发了一个浏览器aweb123.com
更多推荐
所有评论(0)