vue2项目启用tailwindcss - 开启class=“w-[190px] mr-[20px]“ - 修复tailwindcss无效的问题

效果图

步骤

  1. 停止编译"npm run dev"
  2. 安装依赖
    npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  3. 创建文件/src/assets/tailwindcss.css,写入内容:
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  4. main.js中引入
    import "./assets/tailwindcss.css"
  5. 根目录中执行
    npx tailwindcss init -p

    自动生成
    /postcss.config.js和/tailwind.config.js

  6. 启用"w-[190px]"格式,修改tailwind.config.js
    /** @type {import('tailwindcss').Config} */
    module.exports = {mode: "jit",purge: ['./public/**/*.html','./src/**/*.{js,jsx,ts,tsx,vue}',],content: ['./public/**/*.html','./src/**/*.{js,jsx,ts,tsx,vue}',],theme: {extend: {},},plugins: [],
    }

TailwindCSS类名大全

一文掌握 Tailwind CSS 基础 - IslandZzzz - 博客园一文掌握 Tailwind CSS 基础 工欲善其事,必先利其器 先推荐一些好用的工具: TailWind CSS 代码提示功能 vscode 插件:Tailwind CSS IntelliSense Tailwind CSS 速查网站:https://tailwind.muzhifan.top/ icon-default.png?t=O83Ahttps://www.cnblogs.com/ltfxy/p/18315143

  • 1 宽高
  • 2. size 正方形
  • 3. margin、padding、space 间距
  • 4. 边框、弧度
  • 5. 字体 大小 对齐方式 斜体加粗
  • 6. 颜色 透明 渐变
  • 7. 伪类 伪元素
  • 8. flex 与 grid 布局
  • 9. 定位 与 优先级
  • 10. transform 形变
  • 11. transition 过渡效果
  • 12. 动画
  • 13. 样式覆盖 样式拓展
  • 14. 样式复用 @layer @apply

参考

https://www.tailwindcss.cn/docs/installation/using-postcss
https://v2.tailwindcss.com/docs/just-in-time-mode
https://www.cnblogs.com/wqddmg/articles/16460976.html
https://juejin.cn/post/7296692047418048522
https://juejin.cn/post/7388891045819088922

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/60777.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习——AE、VAE

🌺历史文章列表🌺 机器学习——损失函数、代价函数、KL散度机器学习——特征工程、正则化、强化学习机器学习——常见算法汇总机器学习——感知机、MLP、SVM机器学习——KNN机器学习——贝叶斯机器学习——决策树机器学习——随机森林、Bagging、Boostin…

JVM这个工具的使用方法

JVM(Java虚拟机)是Java程序运行的基础环境,它提供了内存管理、线程管理和性能监控等功能。吃透JVM诊断方法,可以帮助开发者更有效地解决Java应用在运行时遇到的问题。以下是一些常见的JVM诊断方法: 使用JConsole: JCon…

【数字图像处理+MATLAB】基于 Sobel 算子计算图像梯度并进行边缘增强:使用 imgradientxy 函数

引言 在图像处理中,边缘通常是图像中像素强度变化最大的地方,这种变化可以通过计算图像的梯度来量化。梯度是一个向量,它的方向指向像素强度增加最快的方向,它的大小(或者说幅度)表示像素强度增加的速度。…

win32com库基于wps对Word文档的基础操作

win32com库基于wps对Word文档的基础操作 文章目录 win32com库基于wps对Word文档的基础操作新建/打开文档段落操作(Paragraph)字体设置(Font)图表操作(Shape) 参考链接: WAS API手册 新建/打开文档 import win32com import win32com.client as win32 # 启动WPS进程 word_obj …

建设展示型网站企业渠道用户递达

展示型网站的主要作用便是作为企业线上门户平台、信息承载形式、拓客咨询窗口、服务/产品宣传订购、其它内容/个人形式呈现等,网站发展多年,现在依然是企业线上发展的主要工具之一且有建设的必要性。 谈及整体价格,自制、定制开发、SAAS系统…

无桥Boost-PFC 双闭环控制MATLAB仿真

一、无桥Boost-PFC原理概述 无桥 Boost-PFC(Power Factor Correction,功率因数校正)的工作原理是通过特定的电路结构和控制策略,对输入电流进行校正,使其与输入电压同相位,从而提高电路的功率因数&#xf…

java访问华为网管软件iMaster NCE的北向接口时传递参数问题

上一篇文章介绍了利用《java访问华为网管软件iMaster NCE的北向接口》的一般性步骤,这里详细介绍其中一个读取性能数据的示例。原因是读取华为网管软件北向接口,完全找不到可供参考的例子。如果不需要传递什么参数,就能获取到结果&#xff0c…

深度学习之pytorch常见的学习率绘制

文章目录 0. Scope1. StepLR2. MultiStepLR3. ExponentialLR4. CosineAnnealingLR5. ReduceLROnPlateau6. CyclicLR7. OneCycleLR小结参考文献 https://blog.csdn.net/coldasice342/article/details/143435848 0. Scope 在深度学习中,学习率(Learning R…

【扩散——BFS】

题目 代码 #include <bits/stdc.h> using namespace std; const int t 2020, off 2020; #define x first #define y second typedef pair<int, int> PII; int dx[] {0, 0, 1, -1}, dy[] {-1, 1, 0, 0}; int dist[6080][6080]; // 0映射到2020&#xff0c;2020…

Linux软件包管理与Vim编辑器使用指南

目录 一、Linux软件包管理器yum 1.什么是软件包&#xff1f; 2.什么是软件包管理器&#xff1f; 3.查看软件包 4.安装软件 ​编辑 5.卸载软件 Linux开发工具&#xff1a; 二、Linux编辑器---vim 1.vim的基本概念 (1) 正常/普通模式&#xff08;Normal mode&#xff0…

R门 - rust第一课陈天 -内存知识学习笔记

内存 #mermaid-svg-1NFTUW33mcI2cBGB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-1NFTUW33mcI2cBGB .error-icon{fill:#552222;}#mermaid-svg-1NFTUW33mcI2cBGB .error-text{fill:#552222;stroke:#552222;}#merm…

数据结构--数组

一.线性和非线性 线性&#xff1a;除首尾外只有一个唯一的前驱和后继。eg&#xff1a;数组&#xff0c;链表等。 非线性&#xff1a;不是线性的就是非线性。 二.数组是什么&#xff1f; 数组是一个固定长度的存储相同数据类型的数据结构&#xff0c;数组中的元素被存储在一…

Vue的基础使用

一、为什么要学习Vue 1.前端必备技能 2.岗位多&#xff0c;绝大互联网公司都在使用Vue 3.提高开发效率 4.高薪必备技能&#xff08;Vue2Vue3&#xff09; 二、什么是Vue 概念&#xff1a;Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套 构建用户界面 的 渐进式 框架…

【C++进阶实战】扫雷小游戏

扫雷游戏 题目描述&#xff1a; 开发一个简单的扫雷游戏&#xff0c;支持以下功能&#xff1a; 初始化游戏板&#xff0c;随机放置地雷。用户选择一个格子进行挖掘。如果用户挖到地雷&#xff0c;游戏结束。如果用户挖到空格子&#xff0c;显示相邻的空格子。用户可以选择标记…

unity单例模式的不同声明(待完善

总结&#xff1a; 这段代码实现了一个泛型单例模式&#xff08;Singleton Pattern&#xff09;&#xff0c;用于确保某个类&#xff08;由泛型参数 T 指定&#xff09;在整个应用程序中只有一个实例&#xff0c;并且在第一次访问时才创建该实例。该模式保证了该实例的全局唯一…

SpringBoot后端解决跨域问题

1.全局方式 新建一个conifg配置类&#xff0c;内容如下&#xff1a; Configuration public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")//是否发送Cookie.allowCrede…

Java 基础知识

一.泛型编程 1. 泛型的概念和作用是什么&#xff1f; 概念&#xff1a;泛型&#xff08;Generics&#xff09;是在 JDK 5.0 引入的新特性&#xff0c;允许在定义类、接口和方法时使用类型参数。类型参数在使用时被具体的类型替换。作用&#xff1a; 类型安全性&#xff1a;避…

群控系统服务端开发模式-应用开发-前端登录接口开发

一、修改验证方法 1、修改验证器 loginRules: {username: [{required: true, trigger: blur, validator: validateUsername}],password: [{required: true, trigger: blur, validator: validatePassword}],captcha_code: [{required: true, trigger: blur, validator: validat…

stream学习

Stream流 定义 Steam流&#xff0c;用于操作集合或者数组中的数据&#xff0c;大量结合了Lamda表达式的语法风格&#xff0c;代码简洁。 重点&#xff1a; 流只能收集一次 ​ 获取Stream流 Stream流要与数据源建立连接。 1.list ​ 直接调用steam()即可 // list List<Stri…

Python 编程入门指南(一)

1. Python 简介 Python是一种广泛使用的高级编程语言,因其简洁的语法和强大的功能而备受欢迎。Python由Guido van Rossum于20世纪90年代初设计,旨在提供易于阅读和编写的代码,适合从初学者到专业开发者的各个水平。它是一种解释型语言,这意味着在编写和执行代码之间不需要…