vue3 tailwindcss的使用教程
更新时间：2023年08月22日 14:12:53 作者：逆风优雅
Tailwind是由Adam Wathan领导的TailwindLabs开发的 CSS 框架，这篇文章主要介绍了vue3 tailwindcss的使用,需要的朋友可以参考下
Tailwind CSS
Tailwind是由Adam Wathan领导的TailwindLabs开发的 CSS 框架。
实用类
Tailwind 附带了大量实用类。将它们组合起来并调整样式是使用 Tailwind 进行样式设置的一大特点。实用类以相当小的单元准备，因此大多数样式都可以通过仅组合实用类来实现。
| Tailwind 实用类 | 用 CSS 写 |
|---|---|
| text-red-50 | color: rgb(254 226 226) |
| text-red-100 | color: rgb(254 202 202) |
| text-red-200 | color: rgb(252 165 165) |
| text-red-300 | color: rgb(254 226 226) |
| text-red-400 | color: rgb(248 113 113) |
| text-red-500 | color: rgb(239 68 68) |
| text-red-600 | color: rgb(220 38 38) |
| text-red-700 | color: rgb(185 28 28) |
| text-red-800 | color: rgb(153 27 27) |
| text-red-900 | color: rgb(127 29 29) |
有这么多的类，你可能会认为很难记住这些类，但正如你在上面看到的，text-red-50 Tailwind 的实用类名称是这样命名的，这样你就可以很容易地想象要应用的样式。
vue3 tailwindcss的使用
首先安装依赖：
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest npm i -D unocss
然后vite.config.ts中 引入
import Unocss from 'unocss/vite'
export default defineConfig({
plugins: [
Unocss(),
],
})终端执行：
npx tailwindcss init -p
会在项目根目录下面生成两个文件
tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}完成以上步骤就可以在标签中直接使用 tailwind 提供的相关类名了。
VScode 安装插件 Tailwind CSS IntelliSense 会有代码提示
到此这篇关于vue3 tailwindcss的使用的文章就介绍到这了,更多相关vue3 tailwindcss使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家分享一篇vue中动态绑定表单元素的属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
Vue作为一款流行的前端框架,提供了一种数据驱动的方式来实现目录树,本文主要介绍了vue 目录树的展开与关闭的实现,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
今天小编就为大家分享一篇对Vue.js之事件的绑定(v-on: 或者 @ )详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）
这篇文章主要介绍了vue vantUI实现文件（图片、文档、视频、音频）上传（多文件），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了Vue批量图片显示时遇到的路径被解析问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
今天小编就为大家分享一篇vue element table 表格请求后台排序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要介绍了Vue显示图片的几种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
本篇文章主要介绍了详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
关于iview按需引用后使用this.$Modal报错的解决
这篇文章主要介绍了关于iview按需引用后使用this.$Modal报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家介绍了vue修饰符v-model及.sync原理及使用区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论