咱们的组件需要方便的编写样式，可以基于Tailwind CSS编写样式。
之所以引入Tailwind CSS主要是为了提高编写样式的效率，另外融入这套体系之后，社区中一些已经存在的theme预设就能直接派上用场。另外我们引入sass，利用它增加样式的可维护性。
安装Sass + Tailwind CSS
sass前面装过了，这里安装tailwind及其需要的库：
yarn add -D tailwindcss postcss autoprefixer
配置Tailwind CSS
创建配置文件，执行：
npx tailwindcss init -p
在tailwind.config.cjs中添加content：
// tailwind.config.cjs
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
添加Tailwind指令到样式文件
创建styles/index.scss：
/* index.scss */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
导入css文件
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// 引入主样式文件
import './index.scss'
createApp(App).mount('#app')
测试
<template>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>
解决vue文件中class错误提示
我们发现编写的class会有错误提示，这个错误很容易解决，只需要给tsconfig.json添加一个types选项即可：
{
"commpilerOptions": {
"types": ["vite/client"]
}
}
class代码提示
大家可以安装Tailwind CSS IntelliSense这个插件获得代码智能提示信息
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79697.html
