Vue中使用Tailwind css
1.什么是Tailwind
就是一个CSS框架,和你知道的bootstrap,element ui,Antd,bulma。一样。将一些css样式封装好,用来加速我们开发的一个工具。
Tailwind解释
tailwind css 中文文档
2.Vue使用Tailwind配置
1. 新建vue项目
2. 在终端输入以下语句:
npm install -D tailwindcss postcss autoprefixer

3. 等待安装后,输入命令初始化tailwind和postcss配置文件
npx tailwindcss init -p

4. 打开vue项目,在src目录下新建一个css文件:index.css,在文件中写入:
@tailwind base;@tailwind components;@tailwind utilities;

5. 在Main.js中引入index.css文件:
import './index.css'

6. 打开vue项目中刚刚配置新建的tailwind.config.js,更改配置Purge:[ ],写入如下代码:
module.exports = {purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}' //包含了src文件夹下所有的vue,js等等文件],content: [],theme: {extend: {},},plugins: [],
}
7. 在App.vue中输入如下代码测试是否配置成功,如图显示文字加大加粗即为配置成功:
<p class=" text-2xl font-bold">Hello Tailwind!</p>

安装中遇到的问题:
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8. Migratio

1、先删除已安装的npm包 yarn npm 按需选择
yarn remove tailwindcss postcss autoprefixernpm uninstall tailwindcss postcss autoprefixer
2、再重新安装 yarn npm 按需选择
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
相关文章:
Vue中使用Tailwind css
1.什么是Tailwind 就是一个CSS框架,和你知道的bootstrap,element ui,Antd,bulma。一样。将一些css样式封装好,用来加速我们开发的一个工具。 Tailwind解释 tailwind css 中文文档 2.Vue使用Tailwind配置 1. 新建vu…...
承接各种设计
小弟985研究生毕业,目前攻读读博士,可做各种设计,包括但不限于Matlab 电力电子/电气工程,matlab/simulink 电气专业仿真MATLAB 电气工程专业,matlab建模 电力电子,电气工程,电力系统,…...
HTTP请求性能分析 - 简单
使用随手可得的工具,尽量少的前置要求,来完成任务。 0. 目录 1. 前言2. 分析工具2.1 基于Chrome DevTools 的Timing2.1.1 关于Network标签页下的Timing部分2.1.2 一些注意项 2.2 基于Curl 命令 3. 剩下的工作 1. 前言 对于业务开发选手而言,…...
腾讯云标准型CVM云服务器详细介绍
腾讯云CVM服务器标准型实例的各项性能参数平衡,标准型云服务器适用于大多数常规业务,例如:web网站及中间件等,常见的标准型云服务器有CVM标准型S5、S6、SA3、SR1、S5se等规格,腾讯云服务器网来详细说下云服务器CVM标准…...
基于DEM tif影像的插值平滑和tif纹理贴图构建方法
准备数据是一个10米分辨率的Tif影像,直接用于生成DEM会十分的不平滑。如下图所示,平滑前后的对比效果图差异: 基于ArcGIS的DEM平滑插值 等值线生成(指定加密间距) 平滑线(指定平滑容差平滑等高线࿰…...
Redis_五种数据类型及操作命令
5.redis常用的五种数据类型 5.1 Redis String字符串 5.1.1 简介 String类型在redis中最常见的一种类型string类型是二制安全的,可以存放字符串、数值、json、图像数据value存储最大数据量是512M 5.1.2 常用命令 set < key>< value>:添加…...
Mac如何打开隐藏文件中Redis的配置文件redis.conf
Redis下载(通过⬇️博客下载的Redis默认路径为:/usr/local/etc) Redis下载 1.打开终端进入/usr文件夹 cd /usr 2.打开/local/文件夹 open local 3.找到redis.conf并打开,即可修改配置信息...
nginx+flask+uwsgi部署遇到的坑
文章目录 1.环境:2.uwsgi_conf.ini具体配置内容3.nginx 具体配置4.具体命令(注意使用pip3命令安装)5.服务异常排查 1.环境: centos8 uWSGI 2.0.22 gmssl 3.2.2 nginx version: nginx/1.18.0 项目目录: 2.uwsgi_conf.ini具体配置内容 [uws…...
vue实现pdf预览功能
背景:材料上传之后点击预览实现在浏览器上预览的效果 效果如下: 实现代码如下: //预览和下载操作 <el-table-column fixed"right" label"操作" width"210"><template #default"scope">…...
(原创)Flutter与Native页面互相跳转
前言 实际开发混合项目时,常常会有页面跳转的需求 如果是原生界面和flutter界面需要互相跳转 这种情况应该怎么处理呢? 今天这篇博客主要就来介绍下这个情况 其实想一下,这个问题可以拆成四个小的问题来分析: 1:原生界…...
web集群学习--基于CentOS构建LVS-DR集群、配置nginx负载均衡
基于CentOS构建LVS-DR集群 环境准备 主机名 ip地址 node1 192.168.1.140 client node2 192.168.1.141 LVS node3 192.168.1.142 RS1 node4 192.168.1.143 RS2配置 1.关闭防火墙和SELinux [rootclient~]# systemctl stop firewalld [rootclient~]# systemctl disabl…...
基于 FPGA 的电机控制
FPGA 非常适合精密电机控制,在这个项目中,我们将创建一个简单的电机控制程序,在此基础上可以构建更复杂的应用。 需要的硬件 Digilent Pmod HB3 介绍 我们可以用一个简单的 8 位微控制器来控制电机,输出一个简单的脉宽调制波形。然…...
STM32F429IGT6使用CubeMX配置IIC通信(AT2402芯片)
1、硬件电路 写地址:0xA0 读地址:0xA1 存储容量:256Byte 2、设置RCC,选择高速外部时钟HSE,时钟设置为180MHz 3、配置IIC 4、生成工程配置 5、部分代码 #define IIC_WRITE_ADDR 0xA0 // IIC写地址 #define IIC_READ_ADDR 0xA1 …...
JS逆向系列之猿人学爬虫第14题-备而后动-勿使有变
文章目录 题目地址参数分析参考jspython 调用往期逆向文章推荐题目地址 https://match.yuanrenxue.cn/match/14题目难度标的是困难,主要难在js混淆部分。 参数分析 初始抓包有无限debugger反调试,可以直接hook 函数构造器过掉无限debugger Function.prototype.__construc…...
学cpp看的那点书
C C Primer 语言基础学习 C Templates The Complete Guide (2nd Edition) 学习模板,更好的阅读 STL 源码,毕竟C 标准库大部分是模板。 The C Standard Library 全称 The C Standard Library A Tutorial and Reference Second Edition简单的了解标…...
【C++】常用容器-string容器
1.string基本概念 2.string构造函数 #include <iostream> using namespace std;//string容器 void test01() {string s1;//创建空字符串,调用无参构造函数cout << "str1 " << s1 << endl;//什么都不输出const char* str "…...
SSH无法连接kali,拒绝密码
1,cd /etc/ssh 2,systemctl start ssh.server 3,vim /etc/ssh/sshd_config 将黄色文字改成这样 4,systemctl restart ssh 然后去连接就好了...
竞赛项目 深度学习的口罩佩戴检测 - opencv 卷积神经网络 机器视觉 深度学习
文章目录 0 简介1 课题背景🚩 2 口罩佩戴算法实现2.1 YOLO 模型概览2.2 YOLOv32.3 YOLO 口罩佩戴检测实现数据集 2.4 实现代码2.5 检测效果 3 口罩佩戴检测算法评价指标3.1 准确率(Accuracy)3.2 精确率(Precision)和召回率(Recall)3.3 平均精…...
redis 数据结构(一)
Redis 为什么那么快 redis是一种内存数据库,所有的操作都是在内存中进行的,还有一种重要原因是:它的数据结构的设计对数据进行增删查改操作很高效。 redis的数据结构是什么 redis数据结构是对redis键值对值的数据类型的底层的实现,…...
【高频面试题】JVM篇
文章目录 一、JVM组成1.什么是程序计数器2.什么是Java堆?3.能不能介绍一下方法区(元空间)4.你听过直接内存吗5.什么是虚拟机栈6.垃圾回收是否涉及栈内存?7.栈内存分配越大越好吗?8.方法内的局部变量是否线程安全?9.什么…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
