原生小程序开发如何使用 tailwindcss

原生小程序开发如何使用 tailwindcss

  • [原生小程序开发如何使用 tailwindcss](#原生小程序开发如何使用 tailwindcss "#%E5%8E%9F%E7%94%9F%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-tailwindcss")
    • 前言
    • [什么是 weapp-tailwindcss ?](#什么是 weapp-tailwindcss ? "#%E4%BB%80%E4%B9%88%E6%98%AF-weapp-tailwindcss-")
    • [0. 准备环境以及小程序项目](#0. 准备环境以及小程序项目 "#0-%E5%87%86%E5%A4%87%E7%8E%AF%E5%A2%83%E4%BB%A5%E5%8F%8A%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A1%B9%E7%9B%AE")
    • [1. 安装与配置 tailwindcss](#1. 安装与配置 tailwindcss "#1-%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE-tailwindcss")
      • [0. 使用包管理器安装 tailwindcss](#0. 使用包管理器安装 tailwindcss "#0-%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8%E5%AE%89%E8%A3%85-tailwindcss")
      • [1. 在项目目录下创建 postcss.config.js 并注册 tailwindcss](#1. 在项目目录下创建 postcss.config.js 并注册 tailwindcss "#1-%E5%9C%A8%E9%A1%B9%E7%9B%AE%E7%9B%AE%E5%BD%95%E4%B8%8B%E5%88%9B%E5%BB%BA-postcssconfigjs-%E5%B9%B6%E6%B3%A8%E5%86%8C-tailwindcss")
      • [2. 配置 tailwind.config.js](#2. 配置 tailwind.config.js "#2-%E9%85%8D%E7%BD%AE-tailwindconfigjs")
      • [3. 引入 tailwindcss](#3. 引入 tailwindcss "#3-%E5%BC%95%E5%85%A5-tailwindcss")
    • [2. 安装这个插件并运行](#2. 安装这个插件并运行 "#2-%E5%AE%89%E8%A3%85%E8%BF%99%E4%B8%AA%E6%8F%92%E4%BB%B6%E5%B9%B6%E8%BF%90%E8%A1%8C")
    • 想要了解更多

前言

很荣幸从 weapp-tailwindcss3.2.0 版本开始

已经可以支持 微信开发者工具,直接创建的 小程序项目了 (包括 skyline 引擎)

什么是 weapp-tailwindcss ?

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

你也无法 直接 使用像 tailwindcss 这种原子化 css 生成工具,来大幅加快你的开发速度。

weapp-tailwindcss 就能让你,在小程序开发中使用 tailwindcss 里的大部分 特性,加快开发小程序整体的效率。

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

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

0. 准备环境以及小程序项目

首先,你需要准备 nodejs 环境,nodejs官方下载地址

请确保你安装的 nodejs 版本 >=16.6.0。目前低于 16 的长期维护版本(偶数版本) 都已经结束了生命周期,建议安装 nodejsLTS(目前是20) 版本,

然后,你可以使用 微信开发者工具 创建一个小程序项目, 原生 js/ts 或者 skylinejs/ts 项目皆可。

这样我们的前置准备工作就完成了!

1. 安装与配置 tailwindcss

这里我们以最基础的 小程序 js 项目为例,进行操作

0. 使用包管理器安装 tailwindcss

首先,假如你项目目录下,没有 package.json 文件, 你需要执行命令,或者手动创建一下:

运行 npm init -y 命令,快速创建一个 package.json 文件在你的项目下

然后执行:

bash 复制代码
# 使用你喜欢的任意 npm / yarn / pnpm 
npm install -D tailwindcss postcss
# 初始化 tailwind.config.js 文件
npx tailwindcss init

这样 tailwindcss 就被安装到你项目本地了

1. 在项目目录下创建 postcss.config.js 并注册 tailwindcss

内容如下:

js 复制代码
module.exports = {
  plugins: {
    tailwindcss: {},
  }
}

这个文件和 tailwind.config.js 平级

2. 配置 tailwind.config.js

tailwind.config.jstailwindcss 的配置文件,我们可以在里面配置 tailwindcss 的各种行为。

这里给出了一份 微信小程序 通用示例,具体要根据你自己项目的目录结构进行配置

js 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 假如你使用 ts 开发,则需要在下方的 glob 表达式中,把 ts 后缀配置进去 
  content: ['**/*.{js,wxml}', '!node_modules/**', '!dist/**'],
  corePlugins: {
    // 小程序不需要 preflight,因为这主要是给 h5 的,如果你要同时开发小程序和 h5 端,你应该使用环境变量来控制它
    preflight: false
  }
}

3. 引入 tailwindcss

在你的小程序项目入口 app.wxss 文件中,引入 tailwindcss 使它在小程序全局生效

css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

接下来,赶紧进入下一步,安装 weapp-tailwindcss 并运行吧!

2. 安装这个插件并运行

安装插件

在项目目录下,执行:

bash 复制代码
# npm / yarn /pnpm
npm i -D weapp-tailwindcss @weapp-tailwindcss/cli

这样 weapp-tailwindcsscli 工具就被安装在你的本地了

执行初始化命令

在命令行中运行

sh 复制代码
npx weapp-tw init

对现有的原生小程序项目,进行 weapp-tailwindcss 的初始化

执行后,会发现主要有三个文件改动,CLI 主要做了 3 件事情:

  • 创建 weapp-tw.config.js 文件,这个是 @weapp-tailwindcss/cli 的配置文件
  • 修改 package.json, 添加 devbuild 开发和构建脚本, 和 postinstall 脚本
  • 修改 project.config.json 内容,来适配构建产物

开始运行

使用 npm run dev 进入开发模式, 此时是有热更新的,主要用于开发

使用 npm run build 进行构建

构建产物默认都在 dist 目录

然后打开微信开发者工具,直接导入这个目录,即可预览效果!

想要了解更多

当然这个解决方案,其实不止限于微信开发者工具这个平台,也可以通过配置,适配更多的平台。

假如你想了解更多,欢迎访问 weapp-tw.icebreaker.top

或在 weapp-tailwindcss/discussions 中,与我们进行讨论,发表你的建议和意见。

PR is also Welcome!

相关推荐
百万蹄蹄向前冲1 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5812 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路2 小时前
GeoTools 读取影像元数据
前端
ssshooter3 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
你的人类朋友3 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
Jerry3 小时前
Jetpack Compose 中的状态
前端
dae bal4 小时前
关于RSA和AES加密
前端·vue.js
柳杉4 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog4 小时前
低端设备加载webp ANR
前端·算法
LKAI.5 小时前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi