首页 > 其他分享 >Vue 中使用 tailwindcss

Vue 中使用 tailwindcss

时间:2022-12-06 10:22:11浏览次数:69  
标签:vue tailwind js Vue tailwindcss 使用 config

Vue2 中使用 tailwindcss

npm i tailwindcss@3 postcss@8 autoprefixer@10 -D
npx tailwindcss init -p
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
// 最后在 main.js 引入,注意样式要在 element-ui 的前面,不然会覆盖它的样式

Vue3 中使用:

https://www.tailwindcss.cn/docs/guides/vue-3-vite

区别是:Vue2 和 Vue3 中的tailwind.config.js文件内容不同

标签:vue,tailwind,js,Vue,tailwindcss,使用,config
From: https://www.cnblogs.com/zhumenglong/p/16954455.html

相关文章

  • 使用DevExpress WPF主题设计器轻松创建Office 2019绿色主题(一)
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专......
  • java抽象类的定义和使用
    1.抽象类的规则●抽象类不可以被实例化,也就是不能被new,会出现编译错误。抽象类如果想实例化可以通过非抽象子类的方式去实现。●抽象类中不一定有抽象方法,但有抽象方......
  • 浏览器DevTools使用技巧
    我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。本文作者:正则作为一名前端开发人员,平......
  • Android(Lollipop/5.0) Material Design(三) 使用Material主题
    官网地址:https://developer.android.com/intl/zh-tw/training/material/theme.html新的Material主题提供了:系统Widgets可设置它们的调色板系统Widgets的触摸反馈动画Activit......
  • C++入门(一)----Visual C++ 6.0和Visual Studio 2019 的安装与使用
    VisualC++6.0的安装与使用VisualStudio2019的安装与使用下载链接:​​​https://visualstudio.microsoft.com/zh-hans/free-developer-offers/​​​VisualStudio201......
  • Android开源框架Universal-Image-Loader基本介绍和使用
    相信大家平时做Android应用的时候,多少会接触到异步加载图片,或者加载大量图片的问题,这个开源框架就是用来做这些工作的。该项目存在于Github上面​​https://github.com/nost......
  • Android Widget 小部件(二) 使用configure
    在添加Widget之前需要做一些处理操作,可以使用 配置活动在​​上一篇​​的实现基础上,加上配置活动(configure=activity)。这时添加Widget时,会先打开一个Activity,进行配置操......
  • Java使用LinkedList模拟一个堆栈或者队列数据结构
    用Java模拟一个堆栈或者队列数据结构。首先得明白堆栈和队列的数据结构:堆栈:先进后出队列:先进先出LinkedList中刚好有addFirst()和addLast()方法。1.publicclassStac......
  • java 如何正确使用接口返回对象Result
    1.Result的使用Result的使用,是java项目中开发接口的必备,它经常被我们用作接口的返回对象,方便前端或者其他程序的远程调用后处理业务。它一般包括以下几个属性:code:一般......
  • vue 本地运行和打包部署后页面布局效果不一致的原因
    原因:style没有添加上;同一个盒子多次添加style(或者说和本地添加的style的顺序反了)解决方式:第一个原因:main.js文件中import引入文件先后顺序问题importVuefrom'v......