uniapp整合windicss

官方文档:https://weapp-tw.icebreaker.top/docs/quick-start/frameworks/hbuilderx

安装:

npm i -D tailwindcss postcss autoprefixer
# 初始化 tailwind.config.js 文件
npx tailwindcss initnpm i -D weapp-tailwindcss# 假如 tailwindcss 在 weapp-tailwindcss 之后安装,可以手动执行一下 patch 方法
# npx weapp-tw patch

然后把下列脚本,添加进你的 package.json 的 scripts 字段里:

 "scripts": {"postinstall": "weapp-tw patch"}

添加tailwind.config.js文件:

const path = require("path");const resolve = (p) => {return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {// 注意此处,一定要 `path.resolve` 一下, 传入绝对路径// 你要有其他目录,比如 components,也必须在这里,添加一下content: ["./index.html", "./pages/**/*.{html,js,ts,jsx,tsx,vue}"].map(resolve),// ...corePlugins: {// 跨多端可以 h5 开启,小程序关闭preflight: false,},
};

vite.config.js 中注册windicss

import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
// 注意: 打包成 h5 和 app 都不需要开启插件配置
const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app";
const WeappTailwindcssDisabled = isH5 || isApp;const resolve = (p) => {return path.resolve(__dirname, p);
};export default defineConfig({plugins: [uni(), uvwt({rem2rpx: true,disabled: WeappTailwindcssDisabled,// 由于 hbuilderx 会改变 process.cwd 所以这里必须传入当前目录的绝对路径tailwindcssBasedir: __dirname})],css: {postcss: {plugins: [require("tailwindcss")({// 注意此处,手动传入你 `tailwind.config.js` 的绝对路径config: resolve("./tailwind.config.js"),}),require("autoprefixer"),],},},
});

在app.vue的style中引入windicss

  @import 'tailwindcss/base';@import 'tailwindcss/utilities';

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

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

相关文章

Unity-OpenCV-Imgproc函数概览

OpenCV-Imgproc函数概览 函数名功能描述createLineSegmentDetector创建一个智能指针到 LineSegmentDetector 对象并初始化它。此算法用于检测图像中的线段。getGaussianKernel返回高斯滤波器的系数。这些系数用于平滑图像或进行高斯模糊。getDerivKernels返回计算图像空间导数的…

linux-性能优化命令

top 我们先来说说top命令用法,这个命令对于我们监控linux性能是至关重要的,我们先来看看展示结果。 top - 15:20:23 up 10 min, 2 users, load average: 0.39, 0.53, 0.35 Tasks: 217 total, 1 running, 216 sleeping, 0 stopped, 0 zombie %C…

如何实时更新module get到的cfg class句柄里面的值

接上篇csdn博客验证知识之在module里面get class里面的set参数-CSDN博客文章浏览阅读155次。验证知识之在module里面get class里面的set参数https://blog.csdn.net/pgl512228/article/details/141748039?spm1001.2014.3001.5501 我们是通过uvm_config_db去get到的class句柄&a…

Golang环境安装、配置详细

Windows下安装Go开发环境 点我下载 Windows配置Go环境变量 出现工具install失败时,切换其它代理 # 1. 七牛 CDN go env -w GOPROXYhttps://goproxy.cn,direct# 2. 阿里云 go env -w GOPROXYhttps://mirrors.aliyun.com/goproxy/,direct# 3. 官方 go env -w GOP…

复盘高质量Vision Pro沉浸式视频的制作流程与工具

在探索虚拟现实(VR)和增强现实(AR)技术的过程中,高质量的沉浸式体验是至关重要的。最近,国外开发者Dreamwieber在其作品中展示了如何使用一系列工具和技术,创造出令人震撼的Vision Pro沉浸式视频。本文将详细复盘Dreamwieber的工作流,希望能为从事相关领域的开发者们提…

Mybatis---代理设计模式(超详细)

Mybatis—代理设计模式 文章目录 Mybatis---代理设计模式一、什么是代理设计模式二、静态代理1、定义2、结构3、示例 三、动态代理1、定义2、newProxyInstance ()方法3、示例 四、CGLIB代理1、引入2、定义3、工作原理4、示例 一、什么是代理设计模式 首…

EmguCV学习笔记 C# 9.2 VideoWriter类

版权声明:本文为博主原创文章,转载请在显著位置标明本文出处以及作者网名,未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

『功能项目』Unity本地数据库读取进入游戏【29】

本章项目成果展示 打开上一篇28Unity连接读取本地数据库的项目, 本章要做的事情是通过读取本地数据库登录进入游戏场景 首先创建一个脚本文件夹: 新建脚本:MySqlAccess.cs 编写脚本:MySqlAccess.cs using UnityEngine; using MyS…

uniapp scroll-view滚动页面

页面滚动固定距离&#xff08;scrollTop&#xff09; <template><view><button click"Test">测试</button><scroll-view style"height: 100px;" :scroll-top"scrollTop" scroll-y"true" class"scrol…

FME教程:通过更新读模块,解决FME读取shapefile数据,提示意外输入,“在转换中,某些读取的要素与工作空间的要素类不匹配……”的问题

目录 一、问题情况 二、解决方法 一、问题情况 在使用制作好的FME模板读取shapefile数据时&#xff0c;有时候会遇到弹窗提示意外输入&#xff0c;模板无法运行&#xff0c;在日志信息中警示“在转换中&#xff0c;某些读取的要素与工作空间的要素类不匹配。可能由于读模块的…

鸿蒙轻内核M核源码分析系列十三 消息队列Queue

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 轻内核M核源码分析系列一 数据结构-双向循环链表 轻内核M核源码分析系列二 数据结构-任务就绪队列 鸿蒙轻内核M核源码分析系列三 数据结构-任务排序链表 轻…

Unity TMP (TextMeshPro) 更新中文字符集

TMP更新中文字符集 1 字符集缺失说明2 字体的字符表2.1 字符表更新模式&#xff1a;动态2.2 字符表更新模式&#xff1a;静态 3 更新字符集步骤3.1 打开纹理更新面板3.1 导入文本文件3.3 关于警告处理 4 修改TMP默认字体设置 1 字符集缺失说明 使用TMP显示中文需要用到中文字体…

数据预处理与协同过滤推荐算法——从数据清洗到个性化电影推荐

推荐系统在现代应用中占据了重要地位&#xff0c;尤其在电影、音乐等个性化内容推荐中广泛使用。本文将介绍如何使用数据预处理、特征工程以及多种推荐算法&#xff08;包括协同过滤、基于内容的推荐、混合推荐等&#xff09;来实现电影推荐系统。通过Pandas、Scikit-learn、Te…

如何编写Linux PCI设备驱动器 之一

如何编写Linux PCI设备驱动器 之一 PCI寻址PCI驱动器使用的APIpci_register_driver()pci_driver结构pci_device_id结构 如何查找PCI设备存取PCI配置空间读配置空间APIs写配置空间APIswhere的常量值共用部分类型0类型1 PCI总线通过使用比ISA更高的时钟速率来实现更好的性能&…

etcdctl defrag 剔除、添加etcd节点

零、准备工作 find / -name etcdctl cp /var/lib/containerd/io.containerd.snapshotter.v1.overlayfs/snapshots/12/fs/usr/local/bin/etcdctl /usr/local/bin/etcdctlalias ec"etcdctl --endpointshttps://127.0.0.1:2379 --cacert /etc/kubernetes/pki/etcd/ca.crt --…

【2024】MySQL库表基本操作

目录 登录数据库创建数据库直接创建数据库使用IF NOT EXISTS方式创建查看数据库信息删除数据库 数据表操作创建数据表增加新字段插入数据删除数据表 登录数据库 首先登录到数据库&#xff1a;输入用户名和密码登录到数据库内部 [rootlocalhost ~]# mysql -uroot -p Enter pas…

Locksupport凭证的底层原理

LockSupport的凭证&#xff08;通常称为“许可”或“permit”&#xff09;的底层原理主要涉及到Java的Unsafe类以及系统级的线程同步机制。LockSupport是Java 6&#xff08;JSR166-JUC&#xff09;引入的一个类&#xff0c;提供了基本的线程同步原语&#xff0c;其核心功能是通…

如何利用ChatGPT提升学术论文讨论部分的撰写质量和效率

大家好,感谢关注。我是七哥,一个在高校里不务正业,折腾学术科研AI实操的学术人。关于使用ChatGPT等AI学术科研的相关问题可以和作者七哥(yida985)交流,多多交流,相互成就,共同进步,为大家带来最酷最有效的智能AI学术科研写作攻略。经过数月爆肝,终于完成学术AI使用教…

利用正则表达式从字符串中提取浮点数

在 Python 中&#xff0c;使用正则表达式可以非常方便地从字符串中提取浮点数。Python 的 re 模块提供了正则表达式支持。下面是如何使用正则表达式提取浮点数的示例。 1、问题背景 在开发过程中&#xff0c;有时候我们需要从字符串中提取浮点数&#xff0c;例如从 HTML 代码中…

网关功能介绍

在微服务架构中&#xff0c;网关&#xff08;API Gateway&#xff09;扮演着至关重要的角色&#xff0c;它作为客户端和微服务之间的中介&#xff0c;负责路由、过滤、认证、限流等职责。以下是一些常见的网关实现&#xff1a; Spring Cloud Gateway&#xff1a; Spring Cloud …