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

uniapp+vite+cli模板引入tailwindcss

news 来源：原创 2025/6/24 5:27:14

目前vite+cli方式用的都是官方提供的模板，vite版本还是4.14版本，较旧，而tailwindcss已经有了4版本，实际发现引入最新版会报错，因而继续使用3.3.5版本
pnpm install tailwindcss@3.3.5 @uni-helper/vite-plugin-uni-tailwind -D
@uni-helper/vite-plugin-uni-tailwind是让小程序也支持tailwindcss的插件

tailwind.config.ts

module.exports = {content: ['index.html', './src/**/*.{html,js,ts,vue}'],theme: {extend: {},},plugins: [],
}

postcss.config.ts

module.exports = {plugins: {tailwindcss: {},autoprefixer: {},},
}

vite.config.ts

import tailwindcss from 'tailwindcss'
import uniTailwind from '@uni-helper/vite-plugin-uni-tailwind'  plugins: [uniTailwind()],css: {postcss: {plugins: [...cssPlugins, tailwindcss],ignore: ['node_modules/**', // 忽略 node_modules 目录下的所有文件],},},

tailwind.css

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

main.ts

import '@/static/css/tailwind.css'

某.vue文件中测试

<view class="title-box pt-1">{{ $t('活跃交易者的新黎明') }}</view>

起作用了，但是px-1, 默认的单位是rem，现在我需要改成和当前项目一样，非小程序单位是vw，小程序是rpx

tailwind.config.ts
module.exports = {content: ['index.html', './src/**/*.{html,js,ts,vue}'],theme: {extend: {},spacing: {// 影响：padding、margin、width、height0: '0px',1: '10px',2: '20px',3: '30px',4: '40px',5: '50px',6: '60px',7: '70px',8: '80px',9: '90px',10: '10px',},},plugins: [],
}
目前还有点问题，就是例如text-[10px]没有被postcss插件转换成vw

解决：tailwind插件要作为postcss第一个插件才行，之前放反了位置
plugins: [uniTailwind()],css: {postcss: {plugins: [tailwindcss, ...cssPlugins],ignore: ['node_modules/**', // 忽略 node_modules 目录下的所有文件],},},
综上，问题全部解决，可满足基本行内样式开发需要

uniapp+vite+cli模板引入tailwindcss

目前vitecli方式用的都是官方提供的模板，vite版本还是4.14版本，较旧，而tailwindcss已经有了4版本，实际发现引入最新版会报错，因而继续使用3.3.5版本 pnpm install tailwindcss3.3.5 uni-helper/vite-plugin-uni-tail…...

编程日记 2025/6/24 5:27:14

【使用 C# 获取 USB 设备信息及进行通信】

文章目录使用 C\# 获取 USB 设备信息及进行通信为什么需要获取 USB 设备信息？方法一：使用 C\# 库 (推荐)1. HidSharp2. LibUsbDotNet 方法二：直接调用 Windows API (P/Invoke)理解设备通信协议 (用于数据交换)总结使用 C# 获取 USB 设备信息…...

编程日记 2025/6/24 16:11:43

Spring Cloud探索之旅：从零搭建微服务雏形 (Eureka, LoadBalancer 与 OpenFeign实战)

引言大家好！近期，我踏上了一段深入学习Spring Cloud构建微服务应用的旅程。我从项目初始化开始，逐步搭建了一个具备服务注册与发现、客户端负载均衡以及声明式服务调用功能的基础微服务系统。本文旨在记录这一阶段的核心学习内容与实践成果…...

编程日记 2025/6/23 9:53:59

四维时空数据安全传输新框架：压缩感知与几何驱动跳频

四维时空数据安全传输新框架：压缩感知与几何驱动跳频 1. 引言 1.1 研究背景随着三维感知技术（如激光雷达、超宽带定位）与动态数据流（如无人机集群、工业物联网）的快速发展，四维时空数据（三维…...

编程日记 2025/6/23 11:29:52

CSS相关知识补充

:root伪类 css自定义变量和var()引用自定义变量 https://developer.mozilla.org/zh-CN/docs/Web/CSS/var 在 SCSS 中，变量的声明和使用是用 $ 符号，比如： $primary-color: #ff5722;.button {color: $primary-color; }SCSS 里没有 var() 这…...

编程日记 2025/6/23 16:44:11

DeepSeek 赋能物联网：从连接到智能的跨越之路

目录一、引言：物联网新时代的开启二、DeepSeek 技术揭秘2.1 DeepSeek 是什么2.2 DeepSeek 技术优势三、DeepSeek 与物联网的融合之基3.1 物联网发展现状与挑战3.2 DeepSeek 带来的变革性突破四、DeepSeek 在物联网的多元应用场景4.1 智慧电力：开启能源…...

编程日记 2025/5/31 7:38:49

谷歌量子计算机：开启计算新纪元

量子计算的黎明原始尺寸更换图片在科技迅猛发展的时代，量子计算作为前沿领域，正逐渐崭露头角，吸引着全球无数科研人员与科技巨头的目光。它宛如一把开启未来科技大门的钥匙，为解决诸多复杂难题提供了前所未有的可…...

编程日记 2025/6/22 23:50:50

桃芯ingchips——windows HID键盘例程无法同时连接两个，但是安卓手机可以的问题

目录环境现象原理及解决办法环境 PC：windows11 安卓：Android14 例程使用的是HID Keyboard，板子使用的是91870CQ的开发板，DB870CC1A 现象连接安卓手机时并不会出现该现象，两个开发板都可以当做键盘给手机发按…...

编程日记 2025/6/22 7:29:42

AMC8 -- 2009年真题解析（中文解析）

Problem 1 Answer: E 中文解析： Bridget最后有4个，给了Cassie3个， 则给Cassie之前有7个。在此之前给了一半的苹果给Ann， 那么在给Anna之前，他有7*214个苹果。因此答案是E。 Problem 2 Answer: D 中文解析&#xff1…...

编程日记 2025/6/21 1:41:13

深入解析CountDownLatch的设计原理与实现机制

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取一、概述 CountDownLatch是Java并发包（java.util.concurrent）中用于协调多线程同步的核心工具类，其设计目标是允许一个或…...

编程日记 2025/6/23 14:52:37

缓存的相关内容

缓存是一种介于数据永久存储介质与数据应用之间数据临时的存储介质实用化保存可以有效地减少低俗数据读取的次数 (例如磁盘IO), 提高系统性能缓存不仅可以用于提高永久性存储介质的数据读取效率，还可以提供临时的数据存储空间 spring boot中提供了缓存技术, 方便…...

编程日记 2025/6/21 1:29:12

JVM方法区核心技术解析：从方法区到执行引擎

方法区方法区的内部结构在经典方法区设计中，主要存储以下核心数据内容： 一、类型信息方法区维护的类型信息包含以下要素： 类全称标识类名称（含完整包路径）直接父类的完全限定名（包含完整包路径&am…...

编程日记 2025/6/23 23:44:29

AIbase推出全球MCP Server集合平台收录超12万个MCP服务器客户端

2025年，AI领域迎来了一项重要的技术进展——MCP（Model Context Protocol，模型上下文协议）的广泛应用。全球MCP Server集合平台AIbase(https://mcp.aibase.cn/)应运而生，为AI开发者提供了一站式的MCP服务器和客户端整合…...

编程日记 2025/6/22 6:29:30

Python训练打卡Day22

复习日： 1.标准化数据（聚类前通常需要标准化） scaler StandardScaler() X_scaled scaler.fit_transform(X) StandardScaler() ：这部分代码调用了 StandardScaler 类的构造函数。在Python中，当你在类名后面加上括号…...

编程日记 2025/6/21 18:30:56

【ALINX 实战笔记】FPGA 大神 Adam Taylor 使用 ChipScope 调试 AMD Versal 设计

本篇文章来自 FPGA 大神、Ardiuvo & Hackster.IO 知名博主 Adam Taylor。在这里感谢 Adam Taylor 对 ALINX 产品的关注与使用。为了让文章更易阅读，我们在原文的基础上作了一些灵活的调整。原文链接已贴在文章底部，欢迎大家在评论区友好互动。在上篇…...

编程日记 2025/6/19 21:37:49

【数据结构入门训练DAY-35】棋盘问题

本次训练聚焦于使用深度优先搜索（DFS）算法解决棋盘上的棋子摆放问题。题目要求在一个可能不规则的nn棋盘上摆放k个棋子，且任意两个棋子不能位于同一行或同一列。输入包括棋盘大小n和棋子数k，以及棋盘的形状（用#表示可放…...

编程日记 2025/6/21 14:34:56

张提示词优化（相似计算模式）深度学习中的损失函数优化技巧

失函数的解释损失函数代码解析 loss = -F.log_softmax(logits[...

编程日记 2025/5/31 9:17:37

Elasticsearch 常用语法手册

🧰 Elasticsearch 常用语法手册 📚 目录索引操作文档操作查询操作聚合查询健康与状态查看常见问题与注意事项 🔹 索引操作查询全部索引 GET _search创建索引 PUT /es_db创建索引并设置分片数和副本数 PUT /es_db {"settings&quo…...

编程日记 2025/6/24 13:50:14

华宇TAS应用中间件与亿信华辰多款软件产品完成兼容互认证

近日，华宇TAS应用中间件与亿信华辰多款产品成功通过兼容互认证测试，双方产品在功能协同、性能优化及高可用性等维度实现全面适配，将为用户提供更加稳定、高效、安全的国产化解决方案。此次认证也标志着华宇在国产化生态适配领域再添重要里程…...

编程日记 2025/6/20 14:14:39

AI大模型从0到1记录学习numpy pandas day24

第 1 章环境搭建 1.1 Anaconda 1.1.1 什么是Anaconda Anaconda官网地址：https://www.anaconda.com/ 简单来说，Anaconda Python 包和环境管理器（Conda） 常用库集成工具。它适合那些需要快速搭建数据科学或机器学习开发环境的用…...

编程日记 2025/6/23 17:14:52

开源GPU架构RISC-V VCIX的深度学习潜力测试：从RTL仿真到MNIST实战

点击 “AladdinEdu，同学们用得起的【H卡】算力平台”，H卡级别算力，按量计费，灵活弹性，顶级配置，学生专属优惠。一、开篇：AI芯片架构演变的三重挑战 （引述TPUv4采用RISC-V的行业案…...

编程日记 2025/6/23 13:50:39

VirtualiSurg使用SenseGlove触觉手套开发XR手术培训体验

虚拟现实和虚拟现实触觉作为一个领先的培训平台，VirtualiSurg自2017年以来一直利用扩展现实(XR)和触觉技术，为全球医疗保健行业提供个性化的数据驱动学习解决方案。它们使医疗专业人员能够协作学习和培训，提高他们的技能，让他们…...

编程日记 2025/6/4 7:39:02

AbstractErrorController简介-笔记

1. AbstractErrorController简介 org.springframework.boot.autoconfigure.web.servlet.error.AbstractErrorController 是 Spring Boot 提供的一个用于处理 HTTP 错误（如 404、500 等）的抽象类，用于自定义错误响应的逻辑。它是 Spring Boot…...

编程日记 2025/6/23 0:12:52

next.js实现项目搭建

一、创建 Next.js 项目的步骤 1、安装 npx create-next-applatest # 或 yarn create next-app # 或 pnpm create next-app 按照交互式提示配置你的项目： 输入项目名称选择是否使用 TypeScript 选择是否启用 ESLint 选择是否启用 Tailwind CSS 选择是否使用 s…...

编程日记 2025/6/3 22:36:00

概述下载地址： https://github.com/camry/mysqldiff/ 编译安装 git clone https://github.com/camry/mysqldiff.git go env -w GOPROXYhttps://goproxy.cn,direct go env -w GOPRIVATE*.corp.example.com go build .\mysqldiff.go执行对比 ./mysqldiff --sourc…...

编程日记 2025/6/24 11:24:27

git工具使用详细教程-------命令行和图形化工具

下载 git下载地址：https://git-scm.com/downloads TortoiseGit（图形化工具）下载地址：https://tortoisegit.org/download/ 认识git结构工作区：存放代码的地方暂存区：临时存储，将工作区的代码…...

编程日记 2025/6/22 19:21:56

失控的产品

大部分程序员很难有机会做一个新的产品，绝大多时候去一家新公司也都是在旧产品上修修补补。笔者还是很幸运得到了开发新品的机会，从2023年开始做，中间经历了许多磕磕碰碰。有的小伙伴从中离开，偶尔又加入1~2个人，但…...

编程日记 2025/6/23 20:51:58

区块链blog1__合作与信任

🍂我们的世界 🌿不是孤立的，而是网络化的如果是单独孤立的系统，无需共识，而我们的社会是网络结构，即结点间不是孤立的 🌿网络化的原因而目前并未发现这样的理想孤立系统，即现实中…...

编程日记 2025/6/21 1:41:13

ES常识9：如何实现同义词映射(搜索)

在 Elasticsearch（ES）中实现同义词映射（如“美丽”和“漂亮”），核心是通过同义词过滤器（Synonym Token Filter） 在分词阶段将同义词扩展或替换为统一词项，从而让搜索时输入任意一个…...

编程日记 2025/6/19 23:11:17

aws 实践创建policy + Role

今天Cyber 通过image 来创建EC2 的时候，要添加policy, 虽然是administrator 的role, 参考Cyber 提供的link: Imageshttps://docs.cyberark.com/pam-self-hosted/14.2/en/content/pas%20cloud/images.htm#Bring 1 Step1:...

编程日记 2025/5/30 20:12:43

兰亭妙微B端UI设计：融合多元风格，点亮品牌魅力

在B端产品市场，独特的品牌形象是企业脱颖而出的关键。兰亭妙微专注于B端UI设计，通过融合多元风格，为企业点亮品牌魅力，助力品牌价值提升。兰亭妙微主创团队源自清华，历经多年沉淀，积累了丰富的设计经验。…...

编程日记 2025/6/4 17:19:16

高项-逻辑数据模型

逻辑数据模型的核心理解 1. 定义与特点逻辑数据模型（Logical Data Model, LDM）： 是一种抽象的数据结构设计，用于描述业务实体（如客户、订单）及其关系（如“客户下单”）&#xff0c…...

编程日记 2025/6/22 6:59:11

Aquatone安装与使用

前言:aquatone工具获取网页截图,在资产收集的时候，对于网站可以起到快速浏览 michenriksen/aquatone: A Tool for Domain Flyovershttps://github.com/michenriksen/aquatone 任务一安装chromium sudo apt install chromiumchromium -h 任务二下载aquatone Relea…...

编程日记 2025/6/22 23:02:04

解读RTOS 第八篇 · 内核源码解读：以 FreeRTOS 为例

1. 引言 FreeRTOS 作为最流行的嵌入式实时操作系统之一，其内核源码简洁且功能完善。通过剖析其关键模块（任务管理、调度器、队列、内存管理和移植层），不仅能够更深入地理解 RTOS 的运行机制，还能掌握根据项目需求进行内核定制与优化的能力。本章将带你以 FreeRTOS 10.x 版…...

编程日记 2025/6/22 21:58:17

6、登录功能后端开发

6、登录功能后端开发 https://xiaoxueblog.com/ai/%E7%99%BB%E5%BD%95%E5%8A%9F%E8%83%BD%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91.html 1、新建用户表SQL脚本 -- CREATE DATABASE aicloud CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;-- 创建用户表 drop table if exi…...

编程日记 2025/6/2 4:28:16

「彻底卸载 Quay 容器仓库」：干净移除服务、镜像与配置的全流程指南

文章目录 🧹 第一步：停止并禁用 systemd 服务🚮 第二步：移除 Podman 容器与相关资源1. 删除 quay-app 容器2. 删除镜像（如果你想彻底清理）3. 删除挂载卷（比如 SQLite 存储） &#x1…...

编程日记 2025/6/24 13:45:55

C++从入门到实战（十五）String（上）介绍STL与String的关系，为什么有string类，String有什么用

C从入门到实战（十五）String（上） 前言一、STL与String的关系1. STL 是什么？2. String 是什么？3. String 与 STL 的关系二、为什么有string类，有什么用1. 为什么需要 string 类？2. st…...

编程日记 2025/6/23 22:57:38

【Python 正则表达式】

Python 正则表达式通过 re 模块实现模式匹配，是文本处理的核心工具。以下是系统化指南，包含语法详解和实战案例： 一、正则基础语法 1. 元字符速查表符号含义示例匹配结果.任意字符（除换行符）r"a.c"“abc”…...

编程日记 2025/6/20 5:43:06

【MySQL】第四弹——表的CRUD进阶(二)数据库设计

文章目录 🌟范式🌟表的设计💫第一范式 1NF🪐反例🪐正例 💫第二范式 2NF🪐反例🪐正例 💫第三范式 3NF🪐反例🪐正例 💫表的设计方法&…...

编程日记 2025/6/23 10:35:36

Unity基础学习（十五）核心系统——音效系统

目录一、关于音频文件的导入相关二、音频源组件Audio Source 三、Audio Listener的介绍四、关于播放音乐的方式五、麦克风输入相关 Microphone 类方法与属性总览 1. Start 方法 2. End 方法 3. IsRecording 方法 4. GetPosition 方法 5. devic…...

编程日记 2025/6/3 12:57:55

计算机视觉----常见卷积汇总

普通卷积普通卷积大家应该都比较熟悉了，如果不熟悉的话，可以参考我之前的博客，或者去网上自行百度。这里主要想补充两个知识点。一：卷积核参数量怎么算？ 二：如何高效的并行运算卷积滑窗？ …...

编程日记 2025/6/22 16:45:11

【人工智能-agent】--Dify+Mysql+Echarts搭建了一个能“听懂”人话的数据可视化助手！

Echarts官网：https://echarts.apache.org/zh/index.html ECharts 是一个由百度团队开发的、基于 JavaScript 的开源可视化图表库，它提供了丰富的图表类型和强大的交互功能，能够帮助开发者轻松创建专业级的数据可视化应用。核心特点丰富的图…...

编程日记 2025/6/1 3:33:22

【专栏启动】开篇：为什么是 Django + Vue3？测试平台的技术选型与架构蓝图

【专栏启动】开篇：为什么是 Django Vue3？测试平台的技术选型与架构蓝图前言一、为什么是 Django Vue3？二、测试平台的架构设计蓝图三、测试平台模块功能概述结语前言一个高效、稳定、易用的测试平台，不仅能够帮助团队提升测…...

编程日记 2025/6/19 18:34:39

Rust 学习笔记：关于 Vector 的练习题

Rust 学习笔记：关于 Vector 的练习题 Rust 学习笔记：关于 Vector 的练习题哪个调用会报错？以下代码能否通过编译？若能，输出是？以下代码能否通过编译？若能，输出是？以下代码…...

编程日记 2025/6/4 12:34:06

Modbus TCP转Profinet网关：数字化工厂异构网络融合的核心枢纽

在现代工业生产中，随着智能制造和工业互联网的不断发展，数字化工厂成为了制造业升级的重要方向。数字化工厂的核心在于实现设备、数据和人的互联互通，而这其中，通信协议扮演着至关重要的角色。今天，我们就来探讨开疆智…...

编程日记 2025/6/20 22:46:25

精益数据分析（62/126）：从客户访谈评分到市场规模估算——移情阶段的实战进阶

精益数据分析（62/126）：从客户访谈评分到市场规模估算——移情阶段的实战进阶在创业的移情阶段，科学评估用户需求与市场潜力是决定产品方向的关键。今天，我们结合Cloud9 IDE的实战经验与《精益数据分析》的方法论&…...

编程日记 2025/6/22 18:47:41

各类开发教程资料推荐，Java / python /golang /js等

更多资源在文末👇👇👇👇👇👇👇👇👇 1. 入门首选（易学且应用广） Python 特点：语法简洁、易读，社区资源丰富。用途&#…...

编程日记 2025/6/22 21:45:13

现代健康养生小贴士

在忙碌的现代生活中，掌握一些简单实用的健康养生技巧，能轻松为身体 “充电”，提升生活质量。以下从饮食、运动、作息等方面，为你带来科学易执行的养生建议。一、饮食：吃对食物，为健康加分早餐要吃好&am…...

编程日记 2025/6/21 18:14:59

每日一道leetcode（新学数据结构版）

208. 实现 Trie (前缀树) - 力扣（LeetCode） 题目 Trie（发音类似 "try"）或者说前缀树是一种树形数据结构，用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景，例如自动…...

编程日记 2025/6/24 1:40:32

ChromaDB 向量库优化技巧实战

chroma 一步步使用安装 # 安装chromadb pip install chromadb,sentence_transformers# 不启动服务会出现sock.connect(sa)TimeoutError: timed out chroma run服务启动后，您将看到类似以下输出： 建立连接部署完成后，需要建立与Chroma服…...

编程日记 2025/6/23 14:05:43

相关文章：