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模仿ElementUI的form表单的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要为大家介绍了vue项目实现搜索内容变红色显示，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
electron-vite工具打包后如何通过内置配置文件动态修改接口地址
使用electron-vite 工具开发项目打包完后每次要改接口地址都要重新打包,对于多环境切换或者频繁变更接口地址就显得麻烦,这篇文章主要介绍了electron-vite工具打包后通过内置配置文件动态修改接口地址实现方法,需要的朋友可以参考下2024-05-05
vue3.0中使用Element-Plus中Select下的filter-method属性代码示例
这篇文章主要给大家介绍了关于vue3.0中使用Element-Plus中Select下的filter-method属性的相关资料,Filter-method用法是指从一组数据中选择满足条件的项,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue实现鼠标移过出现下拉二级菜单功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了在Vue中使用防抖与节流,及this指向的问题,具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
在开发中我们处理数据时会遇到数据更新了,但视图并没有更新,这种情况往往是数据嵌套层数过多导致的问题,下面这篇文章主要给大家介绍了关于vue开发中数据更新但视图不刷新的解决方法,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了微信小程序使用uni-app一键获取用户信息,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue输入框使用模糊搜索功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了vue项目打包发布后接口报405错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论