在移动端使用 Tailwind CSS (uniapp)

目录

总览

[Why weapp-tailwindcss?](#Why weapp-tailwindcss?)

[1. 安装](#1. 安装)

[2. 配置 vite.config.ts](#2. 配置 vite.config.ts)

[3. 添加样式](#3. 添加样式)


总览

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

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

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

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

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

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

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

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

Why weapp-tailwindcss?

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

1. 安装

复制代码
pnpm add -D tailwindcss @tailwindcss/postcss weapp-tailwindcss

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

复制代码
 "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

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

相关推荐
青皮桔20 分钟前
CSS实现百分比水柱图
前端·css
影子信息26 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月27 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201831 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿32 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说2 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6663 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端