【CSS】Vue2使用TailwindCSS方法及相关问题

一.安装

1.npm安装TailwindCSS

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2.创建配置文件

npx tailwindcss init

3.创建postcss.config.js文件

// postcss.config.js
module.exports = {plugins: {tailwindcss: {},autoprefixer: {},}
}

4.创建tailwindcss文件

     在 assets 文件夹下创建 tailwendcss.css文件

@tailwind base;
@tailwind components;
@tailwind utilities;

5.在main.js中引入

import '@/assets/tailwindcss.css'

6.VS Code搜索并安装插件:Tailwind CSS IntelliSense

二.问题&解决方案

1.使用px代替默认的rem单位

tailwind.config.js文件中,将配置修改为以下内容

module.exports = {purge: {enabled: false,content: ['./src/**/*.{js,jsx,ts,tsx}'],},content: [],theme: {spacing: Array.from({ length: 1000 }).reduce((map, _, index) => {map[index] = `${index}px`;return map;}, {}),extend: {},},plugins: [],
};

2.页面中部分svg占一行/位置错误

对全局svg样式添加inline

svg {display: inline-block !important;
}

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

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

相关文章

git的下载与安装

下载 首先,打开您的浏览器,并输入Git的官方网站地址 点击图标进行下载 下载页面会列出不同操作系统和平台的Git安装包。根据您的操作系统(Windows、macOS、Linux等)和位数(32位或64位),选择适…

vue使用element-ui 实现自定义分页

可以通过插槽实现自定义的分页。在layout里面进行配置。 全部代码 export default { name:Cuspage, props:{total:Number, }, data(){return {currentPage:1,pageSize:10,} } methods: {setslot (h) {return(<div class"cusPage"›<span on-click{this.toBe…

E4-R升级固件方法 RockChip 3562

芯片&#xff1a;RockChip 3562 开发板 先安装驱动&#xff1a;DriverAssitant_v5.1.1 下载工具&#xff1a;RKDevTool_v3.13_for_window 烧录完整的update.img固件 1.选择update.img 2.关机下&#xff0c;同时Update和Power进入maskrom模式。界面会显示设备 3.点击升级 …

avue-crud顶部操作按钮插槽;avue-crud列数据插槽;avue-crud行操作按钮插槽

1.avue-crud顶部操作按钮插槽&#xff1b; <template slot"menuLeft" slot-scope"{ size }"><div class"left"><div class"btn"><el-button type"primary" size"small" click"onBatchR…

新能源汽车小三电系统

小三电系统 新能源电动汽车的"小三电"系统&#xff0c;一般指车载充电机(OBC)、车载 DC/DC 变换器&#xff0c;和高压直流配电盒(PDU)。一辆纯电动汽车一般配备一台OBC 和一台车载 DC/DC 变换器。OBC将外部输入的交流电转化为直流电输出给电池&#xff0c;DC/DC衔接…

zabbix配置

1 下载zabbix 1 配置yum源 rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release- 5.0-1.el7.noarch.rpm yum clean all yum makecache fast 完成后会出现zabbix.repo文件 2安装zabbix服务 yum -y install zabbix-server-mysql zabbix-web-mysql z…

使用stream流合并多个List(根据实体类特定属性合并)

开发情景 现有多个List集合,其中都是一样的实体类,这里我想根据实体类的特定属性将它们合并在一起,形成一个最终的List集合。 这里主要用到了Stream流的flatMap方法与reduce方法。 flatMap:可以将多个Stream流合并在一起,形成一个Stream流。 reduce:可以将Stram流中的元…

初级爬虫实战——哥伦比亚大学新闻

文章目录 发现宝藏一、 目标二、简单分析网页1. 寻找所有新闻2. 分析模块、版面和文章 三、爬取新闻1. 爬取模块2. 爬取版面3. 爬取文章 四、完整代码五、效果展示 发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不…

力扣经典题:删除字符使字符串变好

char* makeFancyString(char* s) {int sizestrlen(s);char*arr(char*)malloc(sizeof(char)*size1);if(size<3){return s;}arr[0]s[0];arr[1]s[1];int p2;for(int j2;j<size;j){if(s[j]!s[j-1]||s[j]!s[j-2]){arr[p]s[j];p;}}arr[p]\0;return arr; } 此代码的细节很多&am…

大模型训练准备工作

一、目录 1 大模型训练需要多少算力&#xff1f; 2. 大模型训练需要多少显存&#xff1f; 3. 大模型需要多少数据量训练&#xff1f; 4. 训练时间估计 5. epoch 选择经验 6. 浮点计算性能测试 二、实现 1 大模型训练需要多少算力&#xff1f; 训练总算力&#xff08;Flops&…

python知识点总结(三)

python知识点总结三 1、有一个文件file.txt大小约为10G&#xff0c;但是内存只有4G&#xff0c;如果在只修改get_lines 函数而其他代码保持不变的情况下&#xff0c;应该如何实现? 需要考虑的问题都有那些?2、交换2个变量的值3、回调函数4、Python-遍历列表时删除元素的正确做…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:TextPicker)

滑动选择文本内容的组件。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 TextPicker(options?: {range: string[] | string[][] | Resource | TextPickerRangeContent[] | Te…

深度解读:如何解决Image-to-Video模型视频生成模糊的问题?

Diffusion Models视频生成-博客汇总 前言&#xff1a;目前Image-to-Video的视频生成模型&#xff0c;图片一般会经过VAE Encoder和Image precessor&#xff0c;导致图片中的信息会受到较大损失&#xff0c;生成的视频在细节信息上与输入的图片有较大的出入。这篇博客结合最新的…

怎么在电脑上记录每日事项,并在桌面上显示便签记事本?

作为一名教师兼班主任&#xff0c;我每天的工作繁忙且多样。从早晨的课程准备&#xff0c;到课间的学生辅导&#xff0c;再到课后的作业批改和家长沟通&#xff0c;每一项工作都需要我细心且有条理地完成。在这样的工作节奏下&#xff0c;如何高效管理每日事项&#xff0c;确保…

python for循环打印字符串、指定区间范围数字以及打印区间数字内的奇数和偶数

1.一串字符&#xff0c;循环打印&#xff1a; 源码&#xff1a; strings"Python" n0 print("字符长度为&#xff1a;"str(len(strings))) for a in strings: nn1 print ("第"str(n)"位是&#xff1a;"a)打印结果&#xff1a…

【PyTorch】成功解决TypeError: iteration over a 0-d tensor

【PyTorch】成功解决TypeError: iteration over a 0-d tensor &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到您…

【Java IO流】缓冲流和对象流的解析和应用实例

目录 前言 一、缓冲流 四种方式拷贝文件的用时对比 二、对象流 1. 使用对象流写入对象到本地文件 2. 使用对象流读取对象数据 总结 前言 【File文件管理及IO流&#xff08;基本流&#xff09;】http://t.csdnimg.cn/uG5Ff 该篇博客中&#xff0c;介绍了学习高级流需要的…

字节跳动后端工程师实习生笔试题-c++

字节跳动后端工程师实习生笔试题链接 笔试题 1. 最大映射2. 木棒拼图3. 魔法权值4. 或与加 1. 最大映射 有 n 个字符串&#xff0c;每个字符串都是由 A-J 的大写字符构成。现在你将每个字符映射为一个 0-9 的数字&#xff0c;不同字符映射为不同的数字。这样每个字符串就可以看…

金航标和萨科微总经理宋仕强说,中国还有一个优势就是有全世界最大的半导体消费市场

金航标和萨科微总经理宋仕强说&#xff0c;中国还有一个优势就是有全世界最大的半导体消费市场&#xff0c;有超过1万亿人民币的规模&#xff0c;全球占比34%&#xff0c;领先美国&#xff08;27%&#xff09;&#xff0c;更大幅领先欧洲和日韩&#xff0c;金航标电子是在的中国…

【C语言】字符分类函数与字符转换函数

1. 字符分类函数 C语言中有⼀系列的函数是专门做字符分类的&#xff0c;也就是⼀个字符是属于什么类型的字符的。 这些函数的使用都需要包含⼀个头文件是 ctype.h 这些函数的使用方法非常类似&#xff0c;我们就讲解⼀个函数的事情&#xff1a; int islower ( int c ); islow…