UniApp配置使用原子化tailwindcss

参考视频

创建项目

新建项目选择uniapp - vue版本这里我选择3 - 点击创建即可

创建完成后,如果是要编译到小程序的项目则可以先将项目运行到小程序打开了

初始化package.json

执行

npm init -y

安装和配置

安装

npm i -D tailwindcss postcss autoprefixer
# 安装完成后再初始化 tailwind.config.js 文件
npx tailwindcss init

配置

在项目目录下创建 shared.js,代码如下,为了保证后面这个方法可以复用

import path from 'path'const resolve = (p) => {return path.resolve(__dirname, p)
}module.exports = {resolve
}

在项目根目录下创建vite.config.js,用于注册引用tailwindcss,代码如下:

import {defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import {resolve
} from './shared.js'export default defineConfig({plugins: [uni()],css: {postcss: [require('tailwindcss')({config: resolve("./tailwind.config.js")}),require('autoprefixer')()]}
});

找到项目根目录下的 tailwind.config.js,这个在上面有初始化命令的,内容更改如下:

const {resolve
} = require('./shared.js')module.exports = {// 这里给出了一份 uni-app /taro 通用示例,具体要根据你自己项目的目录结构进行配置// 不在 content 包括的文件内,你编写的 class,是不会生成对应的css工具类的content: ['./public/index.html', './pages/**/*.{html,js,ts,jsx,tsx,vue}','./components/**/*.{html,js,ts,jsx,tsx,vue}'].map(resolve),// 其他配置项// ...corePlugins: {// 小程序不需要 preflight,因为这主要是给 h5 的,如果你要同时开发小程序和 h5 端,你应该使用环境变量来控制它preflight: false}
}

找到App.vue,配置tailwindcss全局生效

<script>export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}
</script><style>@tailwind base;@tailwind components;@tailwind utilities;
</style>

插件安装

npm i -D weapp-tailwindcss

安装完成后,在package.json里面配置如下命令

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

注册

找到根目录下的vite.config.js,内容如下:

import {defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import {resolve
} from './shared.js';
import {UnifiedViteWeappTailwindcssPlugin as uvwt
} from "weapp-tailwindcss/vite";export default defineConfig({plugins: [uni(), uvwt({// 由于 hbuilderx 会改变 process.cwd 所以这里必须传入当前目录的绝对路径// 上面参考视频没有这一个,但是不加的话会报错tailwindcssBasedir: __dirname})],css: {postcss: {plugins: [require('tailwindcss')({config: resolve("./tailwind.config.js")}),require('autoprefixer')()]}}
});

然后运行项目到浏览器或者小程序都是正常使用的了

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

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

相关文章

Oracle 与 达梦 数据库 对比

当尝试安装了达梦数据库后&#xff0c;发现达梦真的和Oracle数据库太像了&#xff0c;甚至很多语法都相同。 比如&#xff1a;Oracle登录数据库采用sqlplus&#xff0c;达梦采用disql。 比如查看数据视图&#xff1a;达梦和Oracle都有 v$instance、v$database、dba_users等&a…

【docker】12. Docker Volume(存储卷)

什么是存储卷? 存储卷就是将宿主机的本地文件系统中存在的某个目录直接与容器内部的文件系统上的某一目录建立绑定关系。这就意味着&#xff0c;当我们在容器中的这个目录下写入数据时&#xff0c;容器会将其内容直接写入到宿主机上与此容器建立了绑定关系的目录。 在宿主机上…

汽车总线协议分析-CAN总线

随着汽车工业的发展&#xff0c;汽车各系统的控制逐步向自动化和智能化转变&#xff0c;汽车电气系统变得日益复杂。许多车辆设计使用CAN、CAN-FD、LIN、FlexRay或SENT在电子控制单元(ECU)之间以及ECU与传感器&#xff0c;执行器和显示器之间进行通信。这些ECU之间的通信允许车…

前端性能优化(理念篇)

前端性能优化&#xff08;理念篇&#xff09; 前言 其实前端性能优化&#xff0c;按照我的理解&#xff0c;首先你公司的硬件条件跟其它资源跟的上&#xff0c;比如服务器资源&#xff0c;宽带怎么样&#xff0c;还有后端接口响应如何&#xff0c;这些资源都具备后&#xff0…

IIS部署程序https是访问出现403或ERR_HTTP2_PROTOCOL_ERROR

一、说明 在windows server 2016中的IIS程序池里部署一套系统&#xff0c;通过https访问站点&#xff0c;同时考虑到安全问题以及防攻击等行为&#xff0c;就用上了WAF云盾功能&#xff0c;能有效的抵挡部分攻击&#xff0c;加强网站的安全性和健壮性。 应用系统一直能够正常…

【深度学习】热力图绘制

热力图&#xff08;Heatmap&#xff09;是一种数据可视化方法&#xff0c;通过颜色来表示数据矩阵中的数值大小&#xff0c;以便更直观地展示数据的分布和模式。热力图在许多领域中都有应用&#xff0c;尤其在统计分析、机器学习、数据挖掘等领域&#xff0c;能够帮助我们快速识…

3.6 IP 数据报的发送与转发

欢迎大家订阅【计算机网络】学习专栏&#xff0c;开启你的计算机网络学习之旅&#xff01; 文章目录 前言1 主机发送 IP 数据报2 直接交付与间接交付3 路由器转发 IP 数据报4 习题分析 前言 在计算机网络中&#xff0c;数据传输的核心工作之一是通过 IP 协议将数据从源主机传递…

PH热榜 | 2024-12-13

1. AI Santa by Tavus 标语&#xff1a;随时随地&#xff0c;视频连线圣诞老人&#xff01; 介绍&#xff1a;准备好迎接AI圣诞老人了吗&#xff1f;塔武斯公司推出的这款神奇的节日体验&#xff0c;能让你实时用30多种语言与圣诞老人对话&#xff0c;看看自己今年是乖孩子还…

双击 Origin 文件后打开软件只有空白没有任何窗口、或者打开后加载失败解决办法

这其实是因为你的文件并没有在 Origin 中打开&#xff0c;可以在标题栏确认 如果这里显示为 UNTITLED&#xff0c;就说明文件还没有在 Origin 中打开。如果你遇到此类问题&#xff0c;我们建议尝试以下方法。 方法 1 设 Origin 为打开 .opj/opju 文件时的默认应用程序 右键单…

【电子通识】电流倒灌为什么需要注意?

电流倒灌是一个很常见的问题,以“IO电流倒灌”为关键词在百度上进行搜索,可以找到很多相关案例。 电流倒灌问题在5V电平的单片机时代几乎不会发生,主要是因为5V单片的IO耐压值高,单片机内部结构对IO保护设计很好。 到了3.3V单片机时代,这类问题有一定的偶发性,但…

奇怪的知识又增加了:ESP32下的Lisp编程=>ULisp--Lisp for microcontrollers

ESP32下有MicroPython&#xff0c;那么我就在想&#xff0c;有Lisp语言支持吗&#xff1f;答案是果然有&#xff01;有ULisp&#xff0c;专门为MCU设计的Lisp&#xff01; 网址&#xff1a;uLisp - Lisp for microcontrollers 介绍&#xff1a;用于微控制器的 Lisp 适用于 Ar…

【竞技宝】LOL:JDG官宣yagao离队

北京时间2024年12月13日,在英雄联盟S14全球总决赛结束之后,各大赛区都已经进入了休赛期,目前休赛期也快进入尾声,LPL大部分队伍都开始陆续官宣转会期的动向,其中JDG就在近期正式官宣中单选手yagao离队,而后者大概率将直接选择退役。 近日,JDG战队在官方微博上连续发布阵容变动消…

得物App奢侈品鉴别能力再获A级资质认证

11月20日&#xff0c;在中国出入境检验检疫协会举办的“2024高端消费品检验鉴定与市场可持续发展大会”上传出消息&#xff0c;得物App因“先鉴别、后发货”保障正品的突出表现以及较高的消费者认可度&#xff0c;被中国海关科学技术研究中心授予“奢侈品鉴别&#xff08;箱包类…

使用BMFont创建适用于Unity的艺术字

最近经常使用艺术字&#xff0c;虽然之前的工作经验我知道只需要修什么哪些就可以弄好艺术字的创建和间隔&#xff0c;所以打算做个总结&#xff0c;接下来分为以下几步&#xff08;其中会有补充&#xff0c;最后会有如何解决unity艺术字的字距问题&#xff09; 第1步 下载BMF…

websocket_asyncio

WebSocket 和 asyncio 指南 简介 本指南涵盖了使用 Python 中的 websockets 库进行 WebSocket 编程的基础知识&#xff0c;以及 asyncio 在异步非阻塞 I/O 中的作用。它提供了构建高效 WebSocket 服务端和客户端的知识&#xff0c;以及 asyncio 的特性和优势。 1. 什么是 WebS…

数据结构_树表的查找

平衡调整方法 四种类型的调整 LL型调整 RR型调整 LR型调整 RL型调整 // 以p为根的二叉排序树作右旋处理(LL void BST::rRotate(BiNode*& p) {BiNode* k p->lChild;p->lChild k->rChild;k->rChild p;p k; }// 以p为根的二叉排序树作左旋处理(RR void BST:…

51c~Pytorch~合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/11878447 一、PyTorch与torch-xla的桥接 文章从XLATensor开始的溯源、注册PyTorch库实现、从PyTorch调用到torch_xla三个方面来介绍PyTorch与torch-xla的桥接 XLA (Accelerated Linear Algebra)是一个开源的机器学习编…

TMS320C55x DSP芯片结构和CPU外围电路

第2章 DSP芯片结构和CPU外围电路 文章目录 第2章 DSP芯片结构和CPU外围电路TMS320C55x处理器的特点TMS320c55x CPU单元指令缓冲(Instruction Buffer Unit) I单元程序流程(Program Flow Unit) P单元地址数据(Address-data Flow Unit) A单元数据计算(Data Computation Unit) D单元…

实战攻防中针对JS路径的泄露和Webpack漏洞的初探

0x1前言 浅谈 这篇文章给师傅们分享下前段时间跟其他师傅学习和交流的Webpack相关漏洞&#xff0c;这个漏洞相对来说比较冷门&#xff0c;在web漏洞中不是那么的热度高&#xff0c;但是平常去挖掘和发现这个漏洞相对来说还是不难的。 后面要是有机会可以给师傅们分享下油猴的…

【人工智能基础08】卷积神经网络习题:卷积神经网络计算、图像填充、卷积的表达与设计

文章目录 1. 卷积核计算2. 卷积神经网络计算3. 卷积核关注的特征问题解答水平边缘检测与水平条纹检测45度条纹检测 4. 图像检测5. 卷积网络是特殊的全连接网络6. 输出矩阵的三种填充方法7. 卷积设计8.9 成像公式10. 卷积的计算次数11. 全连接层的计算 1. 卷积核计算 卷积操作过…