TailwindCSS使用并开启JIT(vue2)
前提vue2工程
安装
不要安装官网最新版,因为vue2还不支持
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
init 配置
npx tailwindcss init -p
这样根目录多了两个文件
tailwind.config.js和postcss.config.js
main.js 引入
import 'tailwindcss/tailwind.css'
重启项目npm run serve
这样基本上就开就可以用常规的那些类名来设置样式了,例如 m-20, p-200 ,text-200等。
开启JIT(解决 text-[ 16px] 、 bg-[#000000]等带中括号的自定义动态类名不生效问题,也就是官网说的任意值设置。
安装cross-env
npm install -D cross-env
修改tailwind.config.js
设置mode,和purge(文件的监控范围)
module.exports = {mode: 'jit',purge: ['./src/**/*.{vue,js,ts,html}'],darkMode: false, // or 'media' or 'class'theme: {extend: {},},plugins: [],
}
修改package.json的scripts指令
加入 cross-env TAILWIND_MODE=watch
"scripts": {"serve": "cross-env TAILWIND_MODE=watch vue-cli-service serve","build": "cross-env TAILWIND_MODE=build vue-cli-service build",
},
npm run serve
你可以拥有tailwindcss的所有功能了
相关文章:
TailwindCSS使用并开启JIT(vue2)
前提vue2工程 安装 不要安装官网最新版,因为vue2还不支持 npm install -D tailwindcssnpm:tailwindcss/postcss7-compat postcss^7 autoprefixer^9init 配置 npx tailwindcss init -p这样根目录多了两个文件 tailwind.config.js和postcss.config.js main.js 引…...
【CSS】伪类和伪元素
伪类 :hover:悬停active:激活focus:获取焦点:link:未访问(链接):checked:勾选(表单)first-child:第一个子元素nth-child():指定索引的子元素&…...
Dunham‘s sports EDI需求分析
Dunhams Sports,成立于1937年,是美国领先的运动用品零售商之一。公司总部位于密歇根州,致力于提供广泛的体育用品和户外装备。Dunhams Sports的使命是为顾客提供最优质的运动体验,他们以卓越的服务和品质,赢得了无数荣…...
如何在Linux将Spring Boot项目的Jar包注册为开机自启动系统服务
有时候我们需要将Spring Boot打包出来jar文件当做系统服务注册到系统中,本文教你如何操作 目录结构 以下是目录结构,jar文件是从maven package打包出来的,config/application.yml是原先在项目的resources文件夹里,外置出来方便适…...
LAMP项目部署实战
一、LAMP环境部署 1、回顾LAMP LAMP Linux Apache MySQL PHP Apache:主要用于接收用户的请求,处理业务逻辑,返回结果给客户端(浏览器) PHP:编程语言的一种,主要应用于Web开发。主要实现注…...
Tauri2 mobile development traps
时间点:2023/10/24。最近在倒腾移动端开发,不想学原生和 flutter,试了试 react-native,开发体验没有想象中的舒服,干脆直接上 tauri 2 吧,半年前就听说 tauri 2 支持移动端,到现在应该可堪小用。…...
使用Jenkins触发gitlab的webhook
满足条件: 首先手动构建可以完成构建 例如: 打开项目点击配置 在“Build Triggers”栏勾选,Build when a change is pushed to GitLab. GitLab webhook ;如下 复制URL链接,我的链接是:http://192.168.44…...
Vcenter 6.5 web 报错503解决办法
Vc web打不开就重启服务 service-control --stop --all service-control --start --all 单独启动xeb服务 service-control --start vpxd 参考 C: \Program Files\ VMware \vCenter Server \bin) service-control --list service-control --start xXx service-control -…...
计算机网络-计算机网络体系结构-应用层
目录 一、网络应用模型 客户/服务器模型(Client/Server) P2P模型(Peer-to-peer) 二、域名解析系统(DNS) 域名 域名服务器 解析过程 三、文件传输协议(FTP) FTP控制原理 四、电子邮件 组成结构 协议 SMTP MIME POP3 IMAP 五、万维网和HTTP协议 概述 HTTP 报…...
软考-网络安全漏洞防护技术原理与应用
本文为作者学习文章,按作者习惯写成,如有错误或需要追加内容请留言(不喜勿喷) 本文为追加文章,后期慢慢追加 by 2023年10月 网络安全漏洞概念 网络安全漏洞指的是网络系统或应用程序中存在的安全弱点,被…...
【自然语言处理】理解词向量、CBOW与Skip-Gram模型
文章目录 一、词向量基础知识1.1 One-hot表示1.2 Distributed表示 二、word2vec基础知识2.1 CBOW和Skip-gram 三、基于Hierarchical Softmax的 CBOW 模型和 Skip-gram 模型3.1 CBOW 模型3.2 Skip-gram 模型 参考资料 由于计算机不能直接对各种字符进行运算,为此需要…...
一致性哈希算法原理
文章目录 前言正文一、抛砖引玉,简单Hash算法的短板二、一致性Hash算法的基本概念2.1 一致性Hash算法本质也是取模2.2 便于理解的抽象,哈希环2.3 服务器如何映射到哈希环上2.4 对象如何映射到哈希环上,并关联到对应的机器 三、一致性Hash算法…...
回归预测 | MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入单输出回归预测
回归预测 | MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入单输出回归预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入…...
工厂干洗店洗鞋店系统,校园洗护小程序来了
洗鞋店小程序,干洗店软件,洗护行业小程序,上门取衣小程序,预约干洗小程序,校园干洗店小程序,工厂干洗店小程序,干洗店小程序开发,成品软件开发 洗衣工厂软件、功能强大! 包含以下主要功能: * 用户选择洗护用品&#x…...
计算机毕设 opencv 图像识别 指纹识别 - python
文章目录 0 前言1 课题背景2 效果展示3 具体实现3.1 图像对比过滤3.2 图像二值化3.3 图像侵蚀细化3.4 图像增强3.5 特征点检测 4 OpenCV5 最后 0 前言 🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升,传统的毕设题目缺少创新和亮点,往…...
简化通知基础设施:开源的消息通知服务 | 开源专题 No.41
novuhq/novu Stars: 22.9k License: MIT Novu 是一个开源的通知基础设施项目,它提供了统一的 API 来通过多个渠道发送通知,包括应用内、推送、电子邮件、短信和聊天。主要功能有: 为所有消息提供商 (应用内、电子邮件、短信、推送和聊天) 提…...
微信公众号排版写作
对话框添加菜单 05 一节课学会使用微信自动回复_哔哩哔哩_bilibili 一件扫图关注 一件扫描付款 公众号排版 10元付费 08 —长按二维码关注和收款_哔哩哔哩_bilibili 微信开店 09 一节课开设自己的微店_哔哩哔哩_bilibili 知乎软文,设置引流矩阵 20 —在知乎写…...
UE4/5 批量进行贴图Texture压缩、修改饱和度
该插件下载地址: 🍞正在为您运送作品详情https://mbd.pub/o/bread/ZZWYmpxw 适用于 UE4 4.25/4.26/4.27 UE5 以上版本 在Edit - Plugins中分别开启 插件 Python Editor Script Plugin 插件 Editor Scripting Utilites 如果会python代码,…...
mysql中limit和offset的用法详细介绍
有的时候我们在学习或者工作中会使用到SQL语句,那么介绍一下limit和offset的使用方法。 mysql里分页一般用limit来实现,例如: 1、select* from user limit 3 表示直接取前三条数据 2、select * from user limit 1,3; 表示取1后面的第2,3,…...
vivado简单仿真入门
打开软件 创建工程 create project 先next,保留工程路径,配置环境 配置芯片环境 本次芯片类型 xc7k325tffg900-2 创建之后完整的demo 编写仿真内容 timescale 1ns/1…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
