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

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')()]}}
});

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

相关文章:

UniApp配置使用原子化tailwindcss

参考视频 创建项目 新建项目选择uniapp - vue版本这里我选择3 - 点击创建即可 创建完成后&#xff0c;如果是要编译到小程序的项目则可以先将项目运行到小程序打开了 初始化package.json 执行 npm init -y安装和配置 安装 npm i -D tailwindcss postcss autoprefixer # 安…...

02. Docker:安装和操作

目录 一、Docker的安装方式 1、实验环境准备 1.1 关闭防火墙 1.2 可以访问网络 1.3 配置yum源 2、yum安装docker 2.1 安装docker服务 2.2 配置镜像加速 2.3 启动docker服务 3、二进制安装docker 3.1 下载或上传安装包并解压 3.2 配置使用systemctl管理 3.3 配置镜像…...

【MySQL中多表查询和函数】

目录 1.多表查询 1.1 外键 1.2 链接查询 2.MySQL函数 内置函数简介 数值函数 字符串函数 时间日期函数 条件判断操作 开窗函数 1.多表查询 本质&#xff1a;把多个表通过主外键关联关系链接&#xff08;join&#xff09;合并成一个大表&#xff0c;在去单表查询操作…...

加速科技精彩亮相ICCAD 2024

12月11日—12日 &#xff0c;中国集成电路设计业的年度盛会——ICCAD 2024在上海世博馆隆重举行。本次活动以“智慧上海&#xff0c;芯动世界”为主旨&#xff0c;汇聚了众多业界精英&#xff0c;共同探讨集成电路产业的未来。作为半导体测试行业领军企业&#xff0c;加速科技携…...

免费下载 | 2024算网融合技术与产业白皮书

《2024算网融合技术与产业白皮书&#xff08;2023年&#xff09;》的核心内容概括如下&#xff1a; 算网融合发展概述&#xff1a; 各国细化算网战略&#xff0c;指引行业应用创新升级。 算网融合市场快速增长&#xff0c;算力互联成为投资新热点。 算网融合产业模式逐渐成型…...

Ubuntu系统下部署大语言模型:Ollama和OpenWebUI实现各大模型的人工智能自由

之前在window下安装过 Ollama和OpenWebUI搭建本地的人工智能web项目(可以看我之前写的文章),无奈电脑硬件配置太低,用qwen32b就很卡,卡出PPT了,于是又找了一台机器安装linux系统,在linux系统下测试一下速度能否可以快一些。 系统硬件介绍 Ubuntu 22.04.4 LTS CPU: i5…...

基于Mybatis,MybatisPlus实现数据库查询分页功能

基于Mybatis&#xff0c;MybatisPlus实现数据库查询分页功能 目录 基于Mybatis&#xff0c;MybatisPlus实现数据库查询分页功能使用Mybatis插件实现分页数据库准备分页插件配置和使用常用数据&#xff1a; 使用MybatisPlus插件实现分页数据库准备分页插件配置和使用自定义分页查…...

【razor】echo搭配relay功能分析

echo 要搭配relay 实现作者说relay在linux上跑,可以模拟丢包、延迟目前没看到如何模拟。relay监听9200,有俩作用 echopeer1 发relay,replay 把peer1的包给peer2 ,实现p2p能力。 接收端:采集后发送发给relay的 接收端的地址就是自己,的地址就是本地的9200,因此是让relay接…...

技术文档的定义和规范,以及技术文档模板参考

技术文档是指用于记录、传达和共享技术信息的文档&#xff0c;通常涵盖系统设计、开发过程、用户指南、维护手册等内容。技术文档的质量直接影响到项目的可维护性、可扩展性和团队的协作效率。以下是技术文档的定义和一些规范&#xff1a; 一、定义 技术文档是用于描述产品、系…...

基于windows环境使用nvm安装多版本nodejs

目录 前言 一、卸载node 二、nvm是什么&#xff1f; 三、nvm安装 1.官网下载 nvm 包 2. 安装nvm-setup.exe 3. 配置路径和下载镜像 4. 检查安装是否完成 四、 使用nvm安装node 五、修改npm默认镜像源为淘宝镜像 六、环境变量配置 1. 新建目录 2. 设置环境变量 七…...

力扣9. 回文数

给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数 是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 例如&#xff0c;121 是回文&#xff0c;而…...

C#—BitArray点阵列

C#—BitArray点阵列 在 C# 中&#xff0c;BitArray 类用来管理一个紧凑型的位值数组&#xff0c;数组中的值均为布尔类型&#xff0c;其中 true&#xff08;1&#xff09;表示此位为开启&#xff0c;false&#xff08;0&#xff09;表示此位为关闭。 当需要存储位&#xff08…...

国产自主可控新征程:华为原生鸿蒙系统与鲲鹏认证

华为于今年10月22日在深圳正式发布了其原生鸿蒙系统HarmonyOS NEXT。这是我国首个实现全栈自研的操作系统&#xff0c;标志着中国在操作系统领域取得了突破性进展。HarmonyOS NEXT 5.0的发布&#xff0c;使得鸿蒙操作系统成为继苹果iOS和安卓系统之后的全球第三大移动操作系统&…...

esxi8 虚拟机使用ubuntu22模板后 没有ip配置文件,只有ipv6链接正常使用

esxi8 虚拟机使用模板后 没有ip配置文件&#xff0c;只有ipv6链接正常使用&#xff0c;/etc/NetworkManager/system-connections配置下没有配置文件 只有/etc/netplan/有文件 sudo ip addr add 192.168.1.9/24 dev ens35 # 临时设置ip&#xff0c; 接口名ens35 sudo vi /et…...

【Qualcomm】IPQ5018查看连接终端RSSI、SNR、NF方法

IPQ5018 简介 IPQ5018 是高通(Qualcomm)公司推出的一款面向网络设备的系统级芯片(SoC)。它通常用于路由器、接入点和其他网络设备中,提供高性能的无线网络连接。以下是关于 IPQ5018 的一些关键特性和功能: 关键特性 高性能处理器 IPQ5018 集成了多核 CPU,通常是 ARM …...

【构建工具】现代开发的重要角色

你可能有所听闻构建工具&#xff0c;但是不知道是干什么的&#xff0c;或者是开发中用到了&#xff0c;大概会使用&#xff0c;但是想理解一下具体的工作原理等&#xff0c;那么我将分享一下我对其的理解。【 我将分为两篇来讲解】。 当我们谈到构建工具时&#xff0c;可以把它…...

【Linux系统】—— 初识 shell 与 Linux 中的用户

【Linux系统】—— 初识shell 与 Linux 中的用户 1 Xshell 运行原理1.1 命令行的组成1.2 外壳程序 2 Linux中的用户2.1 两种用户2.2 创建普通用户2.3 用户切换2.3.1 普通->超级2.3.2 超级->普通 3 指令的短暂提权3.1 为什么要提权3.2 sudo 指令3.3 人人都能提权吗 1 Xshe…...

二维码数据集,使用yolov,voc,coco标注,3044张各种二维码原始图片(未图像增强)

二维码数据集&#xff0c;使用yolov&#xff0c;voc&#xff0c;coco标注&#xff0c;3044张各种二维码原始图片&#xff08;未图像增强&#xff09; 数据集分割 训练组70&#xff05; 2132图片 有效集20&#xff05; 607图片 测试集10&#xff05; 305图…...

Vue指令

创建项目&#xff1a; vue init webpack 项目名称 element-ui npm i element-ui -saxios npm i axios1.1.3 -S vuex npm i vuex3.6.2 -S vuex持久化 npm i -S vuex-persistedstate4.1.0代理模版 proxyTable: {/api: {target: http://localhost:8081/,changeOrigin: true,pathRe…...

数据保护策略:如何保障重要信息的安全

一、什么是数据安全&#xff1f; 数据安全是保护数字信息免遭盗窃、未经授权的访问和恶意修改的过程。这是一个持续的过程&#xff0c;负责监督信息的收集、存储和传输。 机密性&#xff1a;保护数据免遭未授权方访问。 完整性&#xff1a;保护数据免遭未经授权的修改、损坏…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...