当前位置: 首页 > news >正文

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框架&#xff0c;和你知道的bootstrap&#xff0c;element ui&#xff0c;Antd&#xff0c;bulma。一样。将一些css样式封装好&#xff0c;用来加速我们开发的一个工具。 Tailwind解释 tailwind css 中文文档 2.Vue使用Tailwind配置 1. 新建vu…...

承接各种设计

小弟985研究生毕业&#xff0c;目前攻读读博士&#xff0c;可做各种设计&#xff0c;包括但不限于Matlab 电力电子/电气工程&#xff0c;matlab/simulink 电气专业仿真MATLAB 电气工程专业&#xff0c;matlab建模 电力电子&#xff0c;电气工程&#xff0c;电力系统&#xff0c…...

HTTP请求性能分析 - 简单

使用随手可得的工具&#xff0c;尽量少的前置要求&#xff0c;来完成任务。 0. 目录 1. 前言2. 分析工具2.1 基于Chrome DevTools 的Timing2.1.1 关于Network标签页下的Timing部分2.1.2 一些注意项 2.2 基于Curl 命令 3. 剩下的工作 1. 前言 对于业务开发选手而言&#xff0c;…...

腾讯云标准型CVM云服务器详细介绍

腾讯云CVM服务器标准型实例的各项性能参数平衡&#xff0c;标准型云服务器适用于大多数常规业务&#xff0c;例如&#xff1a;web网站及中间件等&#xff0c;常见的标准型云服务器有CVM标准型S5、S6、SA3、SR1、S5se等规格&#xff0c;腾讯云服务器网来详细说下云服务器CVM标准…...

基于DEM tif影像的插值平滑和tif纹理贴图构建方法

准备数据是一个10米分辨率的Tif影像&#xff0c;直接用于生成DEM会十分的不平滑。如下图所示&#xff0c;平滑前后的对比效果图差异&#xff1a; 基于ArcGIS的DEM平滑插值 等值线生成&#xff08;指定加密间距&#xff09; 平滑线&#xff08;指定平滑容差平滑等高线&#xff0…...

Redis_五种数据类型及操作命令

5.redis常用的五种数据类型 5.1 Redis String字符串 5.1.1 简介 String类型在redis中最常见的一种类型string类型是二制安全的&#xff0c;可以存放字符串、数值、json、图像数据value存储最大数据量是512M 5.1.2 常用命令 set < key>< value>&#xff1a;添加…...

Mac如何打开隐藏文件中Redis的配置文件redis.conf

Redis下载(通过⬇️博客下载的Redis默认路径为&#xff1a;/usr/local/etc) Redis下载 1.打开终端进入/usr文件夹 cd /usr 2.打开/local/文件夹 open local 3.找到redis.conf并打开,即可修改配置信息...

nginx+flask+uwsgi部署遇到的坑

文章目录 1.环境&#xff1a;2.uwsgi_conf.ini具体配置内容3.nginx 具体配置4.具体命令(注意使用pip3命令安装)5.服务异常排查 1.环境&#xff1a; centos8 uWSGI 2.0.22 gmssl 3.2.2 nginx version: nginx/1.18.0 项目目录&#xff1a; 2.uwsgi_conf.ini具体配置内容 [uws…...

vue实现pdf预览功能

背景&#xff1a;材料上传之后点击预览实现在浏览器上预览的效果 效果如下&#xff1a; 实现代码如下&#xff1a; //预览和下载操作 <el-table-column fixed"right" label"操作" width"210"><template #default"scope">…...

(原创)Flutter与Native页面互相跳转

前言 实际开发混合项目时&#xff0c;常常会有页面跳转的需求 如果是原生界面和flutter界面需要互相跳转 这种情况应该怎么处理呢&#xff1f; 今天这篇博客主要就来介绍下这个情况 其实想一下&#xff0c;这个问题可以拆成四个小的问题来分析&#xff1a; 1&#xff1a;原生界…...

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 非常适合精密电机控制&#xff0c;在这个项目中&#xff0c;我们将创建一个简单的电机控制程序&#xff0c;在此基础上可以构建更复杂的应用。 需要的硬件 Digilent Pmod HB3 介绍 我们可以用一个简单的 8 位微控制器来控制电机&#xff0c;输出一个简单的脉宽调制波形。然…...

STM32F429IGT6使用CubeMX配置IIC通信(AT2402芯片)

1、硬件电路 写地址&#xff1a;0xA0 读地址&#xff1a;0xA1 存储容量&#xff1a;256Byte 2、设置RCC&#xff0c;选择高速外部时钟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) 学习模板&#xff0c;更好的阅读 STL 源码&#xff0c;毕竟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;//创建空字符串&#xff0c;调用无参构造函数cout << "str1 " << s1 << endl;//什么都不输出const char* str "…...

SSH无法连接kali,拒绝密码

1&#xff0c;cd /etc/ssh 2,systemctl start ssh.server 3,vim /etc/ssh/sshd_config 将黄色文字改成这样 4&#xff0c;systemctl restart ssh 然后去连接就好了...

竞赛项目 深度学习的口罩佩戴检测 - opencv 卷积神经网络 机器视觉 深度学习

文章目录 0 简介1 课题背景&#x1f6a9; 2 口罩佩戴算法实现2.1 YOLO 模型概览2.2 YOLOv32.3 YOLO 口罩佩戴检测实现数据集 2.4 实现代码2.5 检测效果 3 口罩佩戴检测算法评价指标3.1 准确率&#xff08;Accuracy&#xff09;3.2 精确率(Precision)和召回率(Recall)3.3 平均精…...

redis 数据结构(一)

Redis 为什么那么快 redis是一种内存数据库&#xff0c;所有的操作都是在内存中进行的&#xff0c;还有一种重要原因是&#xff1a;它的数据结构的设计对数据进行增删查改操作很高效。 redis的数据结构是什么 redis数据结构是对redis键值对值的数据类型的底层的实现&#xff0c…...

【高频面试题】JVM篇

文章目录 一、JVM组成1.什么是程序计数器2.什么是Java堆&#xff1f;3.能不能介绍一下方法区(元空间&#xff09;4.你听过直接内存吗5.什么是虚拟机栈6.垃圾回收是否涉及栈内存&#xff1f;7.栈内存分配越大越好吗&#xff1f;8.方法内的局部变量是否线程安全&#xff1f;9.什么…...

LightOnOCR-2-1B与VSCode开发环境配置指南

LightOnOCR-2-1B与VSCode开发环境配置指南 1. 开发环境准备 在开始使用LightOnOCR-2-1B进行文档识别开发之前&#xff0c;我们需要先配置一个高效的VSCode开发环境。这个模型是一个10亿参数的端到端视觉语言模型&#xff0c;专门用于将PDF、扫描件和图像转换为结构化的文本内…...

nli-MiniLM2-L6-H768惊艳效果:支持‘跨语言标签’(English label + 中文文本)混合推理

nli-MiniLM2-L6-H768惊艳效果&#xff1a;支持跨语言标签&#xff08;English label 中文文本&#xff09;混合推理 1. 模型效果惊艳展示 nli-MiniLM2-L6-H768模型在零样本文本分类任务中展现出令人惊艳的效果&#xff0c;特别是其独特的跨语言标签混合推理能力。这个轻量级…...

AArch64系统指令集解析与性能优化实践

1. AArch64系统指令概述AArch64是ARMv8架构的64位执行状态&#xff0c;其系统指令集为操作系统和底层软件开发提供了丰富的硬件控制能力。作为ARM架构的重大革新&#xff0c;AArch64不仅扩展了寄存器位宽&#xff0c;更在内存管理、虚拟化支持和安全隔离等方面引入了全新机制。…...

华硕枪神8/8Plus 超竞版 G634J G614J G814J G814J 原厂Win11 22H2系统分享下载-宇程系统站

华硕枪神8/8Plus超竞版配备了一键恢复功能&#xff0c;可帮助用户在系统异常或更换硬盘后轻松恢复原厂Win11 22H2系统及隐藏恢复分区。支持包括G634JYR、G614JIR、G814JVR等在内的多款型号。通过使用原厂提供的工厂文件&#xff0c;用户能够确保系统恢复至出厂状态&#xff0c;…...

告别黑盒:手把手教你用AssetStudio查看并导出Unity打包后的游戏UI与图片素材

告别黑盒&#xff1a;手把手教你用AssetStudio查看并导出Unity打包后的游戏UI与图片素材 当你被一款游戏的精美UI设计所吸引时&#xff0c;是否好奇过这些视觉元素是如何实现的&#xff1f;作为UI设计师或独立开发者&#xff0c;学习逆向分析成熟作品的资源结构&#xff0c;是提…...

MyBatis RowBounds分页踩坑实录:一次线上OOM事故教会我的事

MyBatis分页陷阱&#xff1a;从RowBounds内存泄漏到高效分页实战 凌晨三点&#xff0c;手机突然响起刺耳的报警声。打开监控系统一看&#xff0c;某核心服务的堆内存曲线像坐了火箭一样直线上升&#xff0c;最终触发了OOM崩溃。经过彻夜排查&#xff0c;罪魁祸首竟是项目中一段…...

雷军15小时一镜到底测SU7续航跑1313公里,撕下了汽车评测行业的遮羞布

昨天我刷到雷军15小时直播测SU7续航的时候&#xff0c;第一反应是&#xff1a;太拼了&#xff0c;一个CEO连续坐15小时车&#xff0c;中间不停播、不切镜头&#xff0c;就为了测个真实续航。最后结果出来&#xff0c;CLTC标称1200公里的SU7 Max&#xff0c;跑了1313公里还剩5%电…...

04华夏之光永存:黄大年茶思屋榜文解法「第10期第4题」 AI运筹优化核心卡点:MIP求解器自学习双路径工程解法

华夏之光永存&#xff1a;黄大年茶思屋榜文解法「第10期第4题」 AI运筹优化核心卡点&#xff1a;MIP求解器自学习双路径工程解法 一、摘要 本题为该领域顶级技术难题&#xff0c;本文采用工程化可复现逻辑&#xff0c;提供两条标准化解题路径&#xff0c;全程符合工程师技术认知…...

别再只用ARIMA了!用Facebook Prophet和LSTM搞定电商销量预测(附Python代码)

电商销量预测实战&#xff1a;Prophet与LSTM混合模型全解析 当618大促的备货清单摆在桌上时&#xff0c;你是否还在用Excel手工调整预测数字&#xff1f;某国际美妆品牌的中国区经理最近发现&#xff0c;传统方法预测的销量与实际销售额误差高达37%&#xff0c;导致价值230万的…...

ViGEmBus虚拟游戏控制器驱动:终极安装与完整使用指南

ViGEmBus虚拟游戏控制器驱动&#xff1a;终极安装与完整使用指南 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 你是否曾经遇到过这样的烦恼&#xff1f;想…...