头图

这可能是小程序使用 tailwindcss 开发的最佳方案

这可能是小程序使用 tailwindcss 开发的最佳方案

笔者对 tailwindcss 的理解还算比较到位,也写了不少的 preset/plugin 和许多的 postcss 插件。

最近这个月,我发布了 weapp-tailwindcss-webpack-plugin2.x 版本,与之前的版本相比,大大增强了我们开发者的开发体验,尤其是类jsx 框架相关的体验。

接下来,让我们快速开始吧!

快速开始

一.安装与配置 tailwindcss

1. npm安装 tailwindcss
# npm / yarn / pnpm 
npm install -D tailwindcss postcss autoprefixer
# 生成 tailwind.config.js 文件
npx tailwindcss init
2. 把 tailwindcss 注册进 postcss.config.js
// 创建 postcss.config.js
// 假如你使用的框架/工具不支持 postcss.config.js,则可以使用内联的写法
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
3. 配置 tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 这里给出了一份 uni-app /taro 通用示例,具体要根据你自己项目的目录进行配置
  // 注意,不在 content glob语法匹配的文件,不会生成工具类
  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  // ... other options
  corePlugins: {
    // 不需要 preflight,因为preflight主要是给 h5 的,小程序使用的独特的标签,导致preflight不起作用。
    // 如果你要同时开发小程序和 h5 端,你应该使用环境变量来控制它
    preflight: false
  }
}
4. 引入 tailwindcss

在你的项目入口引入 tailwindcss

比如 uni-appApp.vue

<style>
@tailwind base;
@tailwind utilities;
/* 使用 scss */
/* @import 'tailwindcss/base'; */
/* @import 'tailwindcss/utilities'; */
</style>

又或者 Taroapp.scss

@import 'tailwindcss/base';
@import 'tailwindcss/utilities';

然后在 app.ts 里引入

Q&A: 为什么没有引入 tailwindcss/components? 是因为里面默认存放的是 pc 端自适应相关的样式,对小程序环境来说没有用处。如果你有 @layer components 相关的工具类需要使用,可以引入。

二. 配置 remrpx

前面我们安装配置好了 tailwindcss,接下来一步便是配置 remrpx

为什么要配置这一步呢?

这是因为 tailwindcss 里面工具类的长度单位,默认都是 rem,比如:

.m-4{
  margin: 1rem;
}
.h-4{
  height: 1rem; 
}
/*......*/

这在 h5 环境下自适应良好。但小程序里面,我们大部分情况都是使用 rpx 这个单位来进行自适应,所以就需要把默认的 rem 单位转化成 rpx

配置tailwindcss单位转化

两种转化方式(二者选其一即可)

  1. 假如你想要把项目里,所有的 rem 都转化成 rpx,那么 postcss plugin: postcss-rem-to-responsive-pixel 适合你。
  2. 假如你想缩小一下范围,只把 tailwindcss 生成的工具类的单位,从 rem 转变为 rpx,那么 tailwindcss preset: tailwindcss-rem2px-preset 适合你。

推荐第一种转化方式,这会把项目里所有你编写的,或者引入的第三方控件里的 rem 单位,全部转化为 rpx,当然这个包也提供了各种配置项,帮助你进行更加细致的操作。

1. postcss-rem-to-responsive-pixel (推荐)

首先我们安装它:

npm i -D postcss-rem-to-responsive-pixel

安装好之后,把它注册进你的 postcss.config.js 即可:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-rem-to-responsive-pixel': {
      // 转化的单位,可以变成 px / rpx
      transformUnit: 'rpx',
      // 32 意味着 1rem = 32rpx
      rootValue: 32,
      // 默认所有属性都转化
      propList: ['*']
    },
  },
};
2. tailwindcss-rem2px-preset

同样我们安装它:

npm i -D tailwindcss-rem2px-preset

然后在 tailwind.config.js 中,注册这个预设:

// tailwind.config.js

module.exports = {
  presets: [
    require('tailwindcss-rem2px-preset').createPreset({
      // 32 意味着 1rem = 32rpx
      fontSize: 32,
      // 转化的单位,可以变成 px / rpx
      unit: 'rpx'
    })
  ],
  // ...
}

这样即可完成 tailwindcss 默认工具类的 remrpx 的配置了。

三. 安装本插件

# npm / yarn /pnpm
npm i -D weapp-tailwindcss-webpack-plugin
# 可以执行一下 patch 方法
npx weapp-tw patch

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

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

接下来我们就开始在不同的框架里注册了,这里我们以目前市面上主流的 tarouni-app 为例:

taro (all frameworks)

在使用Taro时,检查一下把 config/index 的配置项 compiler 设置为 'webpack5'

// config/index 文件中
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss-webpack-plugin')

{
  mini: {
    webpackChain(chain, webpack) {
      chain.merge({
        plugin: {
          install: {
            plugin: UnifiedWebpackPluginV5,
            args: [{
              appType: 'taro'
            }]
          }
        }
      })
    }
  }
}
uni-app (vue2/3)

在创建uni-app项目时,请选择uni-app alpha版本

这是因为目前默认创建的版本还是使用的 @vue/cli 4.x 的版本,它使用 webpack4postcss7,而 alpha 版本使用 @vue/cli 5.xwebpack5postcss8,这可以使用最新版本的 tailwindcss

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

更多 uni-app 模板详见 quickstart-cli

// 在 vue.config.js 里注册
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss-webpack-plugin')
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
const config = {
  // some option...
  configureWebpack: (config) => {
    config.plugins.push(
      new UnifiedWebpackPluginV5({
        appType: 'uni-app'
      })
    )
  }
  // other option...
}

module.exports = config
uni-app vite(vue3)

uni-app vue3/Vite版是目前 uni-app 的最新版本,使用 vite 进行打包和开发,同样我们可以按照以下方式进行注册:

// vite.config.[jt]s
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss-webpack-plugin/vite'
// uvwt() 要放在 uni 官方插件之后
const vitePlugins = [uni(),uvwt()]

export default defineConfig({
  plugins: vitePlugins,
  // 假如 postcss.config.js 不起作用,请使用内联 postcss Latset
  // css: {
  //   postcss: {
  //     plugins: postcssPlugins,
  //   },
  // },
});
更多的框架!

支持更多的框架类型,可以查看 文档地址

开始开发!

通过这三步,我们就完成了在小程序里使用 tailwindcss 的步骤了!

你可以立即启动项目,在你的模板文件,或者 js 文件里任意使用工具类, 它会实时的生成相应的 css class 并应用到 dom 上。

如果你在使用过程中遇到了问题,你可以前往 https://weapp-tw.icebreaker.top/ 进行检索,或者加入微信技术交流群,一起探讨前端技术!

12 声望
0 粉丝
0 条评论
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.7k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.2k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.7k评论 3

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
12 声望
0 粉丝
宣传栏