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

在移动端使用 Tailwind CSS (uniapp)

目录

总览

Why weapp-tailwindcss?

1. 安装

2. 配置 vite.config.ts 

3. 添加样式


总览

简介 | weapp-tailwindcss 把tailwindcss带给小程序开发者们

由于小程序运行时,本身有自己的一套 独特的 技术规范标准。这导致你无法使用 web 开发中的很多的特性,

你也无法 直接 使用像 tailwindcss 这种原子化 css 生成器来提升你的开发效率。

而 weapp-tailwindcss 就能让你,在小程序开发中使用 tailwindcss 大部分 特性。

它支持目前上所有使用 webpack 和 vite 的主流多端小程序框架和使用 webpack / gulp 的原生小程序打包方式。

你可以很容易在各个框架,或原生开发中集成 tailwindcss

现在,就让我们开始使用吧!

从本质上讲,它是一个字符串转义器。它负责把 tailwindcss 中,所采集的类名,以及生成的结果,转化成小程序中可以接受的方式。

Why weapp-tailwindcss?

  • ✅ 自动处理所有文件:以微信小程序为例,不但可以处理和转义 wxml / wxss,还能处理 js 和 wxs 产物
  • ✅ 支持最原生的小程序开发,也支持许多框架如 taro , uni-app , mpx , rax 等等..
  • ✅ 提供多种使用方式,方便项目集成:包括 webpack / vite / gulp 插件和直接的 nodejs api
  • ✅ 生态好,解决方案丰富,提供大量现成模板,可以利用许多 tailwindcss 现有的生态来构建小程序。
  • ✅ 高效的解析和缓存机制,热更新响应时间快
  • ✅ 贴合 tailwindcss 的设计思路,智能提示友好

 

1. 安装

pnpm add -D tailwindcss @tailwindcss/postcss weapp-tailwindcss

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

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

这是为了给 tailwindcss@4 打上支持 rpx 单位的补丁,否则它会把 rpx 认为是一种颜色

 

2. 配置 vite.config.ts 

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import tailwindcss from '@tailwindcss/postcss'export default defineConfig({plugins: [uni(),UnifiedViteWeappTailwindcssPlugin({rem2rpx: true,})],css: {postcss: {plugins: [tailwindcss()]}}
});

3. 添加样式

单独创建一个 main.css 文件,并引入 weapp-tailwindcss/css

这是为了 IDE 智能提示, 目前 Vscode tailwindcss 插件不会扫描 vue 文件里引入的样式。

@import "weapp-tailwindcss/css";
@source not "dist";

在项目目录下的 App.vue 中,添加以下内容:

<style src="./main.css"></style>

 

接着直接运行 npm run dev:mp-weixin

微信开发者工具导入这个项目,即可看到效果

http://www.dtcms.com/a/265044.html

相关文章:

  • 在项目架构时,如何选择打包构建工具?
  • Nginx、Spring Cloud Gateway 与 Higress 的应用场景及核心区别
  • Linux基本命令篇 —— alias命令
  • AI专业化应用加速落地,安全治理挑战同步凸显
  • 车载软件架构 -- SOA服务分层设计原则
  • 数学建模_非线性规划
  • 时钟(6.25-26)
  • pppoe宽带连接-系列命令调用
  • 使用Process Monitor定位benchstat工具执行过程
  • Almalinux_10.0下MySQL的多表操作与函数使用
  • 智慧城市的安全密码:商用密码如何守护万物互联?
  • 鸿蒙自定义相机的拍照页面
  • 荧光原位杂交(FISH)-实验操作-011
  • LeetCode[617]合并二叉树
  • 从SEO到GEO:AI时代的品牌大模型种草与数字营销重构
  • 【记录】基于 C++ 和 Winsock 的简单 TCP 通信实现
  • 健康医疗类Agent推荐有哪些
  • 下载公开的dahiti全球水位数据
  • 通过异步解决超时问题-使用 Spring 的 @Async 实现异步调用
  • Python毕业设计230—基于python+爬虫+vue的豆瓣影视数据可视化系统(源代码+数据库+15000字论文+开题+答辩ppt)
  • 构建灵活的监控系统:多表存储与动态告警规则设计实践
  • 智能防御原理和架构
  • dial tcp 10.1.68.88:3306: connect: cannot assign requested address
  • 中心化钱包安全方案
  • 跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议​​
  • Kotlin Data包含ByteArray类型
  • Dify 工作流全栈解析:从零构建你的 AI 应用流程引擎
  • 如何看待RWA赛道
  • 前端代码优化规范及实践指南
  • leetcode TOP 100 1. 两数之和