Let small program development into ` tailwind jit ` era

让小程序开发进入 tailwind jit 时代!

把 tailwindcss JIT 思想带入小程序开发吧！

I wrote one a few months ago tailwindcss-miniprogram-preset 预设,But this default plan,Maneuverability is very small,也不能兼容 tailwindcss v2/v3 的 Just in time 引擎,At the same time, there are certain variations in the spelling.

So I devised another plan,并最终实现了 weapp-tailwindcss-webpack-plugin.相比原先 preset or postcss 方案,This scheme has many advantages:

• 为 jit设计,兼容 v2/v3 2个版本的 jit 引擎
• Developers do not need to memorize any writing variants,Bring the original flavor tailwindcss 开发体验
• 兼容基于 webpack v4/v5 A multi-terminal development framework for small programs,简单易用

Then we will show a basis uni-app 的 demo Come and experience this program quickly.

最佳实践

前置准备: vscode,vscode-tailwindcss,nodejs lts,微信开发者工具

1.通过vue-cli命令行创建工程

See this section uni-app快速上手

2.安装 npm 包

由于目前 uni-app 内置的 webpack 版本为 4 , postcss 版本为 7

我们需要安装 tailwindcss 的 postcss7-compat 版本:

yarn add -D weapp-tailwindcss-webpack-plugin postcss-rem-to-responsive-pixel [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

postcss-rem-to-responsive-pixel is written by the author postcss 插件,支持 rem -> rpx,同时支持 postcss7 和 postcss8,Configuration see here

3. 初始化 tailwind.config.js 和 postcss.config.js

Just add some configuration to the initialization file:

// tailwind.config.js 基础配置,无需任何preset
// https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app/tailwind.config.js
/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
    
  mode: 'jit',
  purge: {
    
    content: ['./src/**/*.{vue,js,ts,jsx,tsx,wxml}']
  },
  corePlugins: {
    
    preflight: false
  }
}

// postcss.config.js 参考示例
// https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app/postcss.config.js
const path = require('path')
module.exports = {
    
  parser: require('postcss-comment'),
  plugins: [
    require('postcss-import')({
    
      resolve(id, basedir, importOptions) {
    
        if (id.startsWith('[email protected]/')) {
    
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
    
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
    
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    }),
    require('autoprefixer')({
    
      remove: process.env.UNI_PLATFORM !== 'h5'
    }),
    // #region 添加的部分开始
    // tailwindcss for postcss7
    require('tailwindcss')({
     config: './tailwind.config.js' }),
    // rem 转 rpx
    require('postcss-rem-to-responsive-pixel/postcss7')({
    
      rootValue: 32,
      propList: ['*'],
      transformUnit: 'rpx'
    }),
    // #endregion 添加的部分结束
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}

4. 设置环境变量

添加 .env 设置 TAILWIND_MODE

# https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app/.env
# jit 模式 HMR
TAILWIND_MODE=watch

这是为了兼容 tailwindcss v2 的 HMR 方案,如果你是用的是 tailwindcss v3 就不需要了.

5. 在 src/App.vue 中引用:

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  //...
})
</script>

<style lang="scss">
/*每个页面公共css */
// scss 需要安装 yarn add -D sass [email protected]^10
// 小程序需要 'base' 来注入变量,但不需要 html preflight
// @tailwind base;
// @tailwind utilities;
@import 'tailwindcss/base';
@import 'tailwindcss/utilities';
</style>

6. 在根目录下添加 vue.config.js

// vue.config.js
const {
     UniAppWeappTailwindcssWebpackPluginV4 } = require('weapp-tailwindcss-webpack-plugin')

/** * @type {import('@vue/cli-service').ProjectOptions} */
const config = {
    
  //....
  configureWebpack: {
    
    plugins: [new UniAppWeappTailwindcssWebpackPluginV4()]
  }
  //....
}

module.exports = config

现在,您就可以在 uni-app 中使用 jit most of the features！

jit example

vue / wxml

<view :class="[flag?'bg-red-900':'bg-[#fafa00]']">bg-[#fafa00]</view>
<view :class="{
     'bg-[#098765]':flag===true}">bg-[#098765]</view>
<view class="p-[20px] -mt-2 mb-[-20px] ">p-[20px] -mt-2 mb-[-20px] margin的jit 不能这么写 -m-[20px]</view>
<view class="space-y-[1.6rem]">
  <view class="w-[300rpx] text-black text-opacity-[0.19]">w-[300rpx] text-black text-opacity-[0.19]</view>
  <view class="min-w-[300rpx] max-h-[100px] text-[20px] leading-[0.9]">min-w-[300rpx] max-h-[100px] text-[20px] leading-[0.9]</view>
  <view class="max-w-[300rpx] min-h-[100px] text-[#dddddd]">max-w-[300rpx] min-h-[100px] text-[#dddddd]</view>
  <view class="flex items-center justify-center h-[100px] w-[100px] rounded-[40px] bg-[#123456] bg-opacity-[0.54] text-[#ffffff]">Hello</view>
  <view class="border-[10px] border-[#098765] border-solid border-opacity-[0.44]">border-[10px] border-[#098765] border-solid border-opacity-[0.44]</view>
  <view class="grid grid-cols-3 divide-x-[10px] divide-[#010101] divide-solid">
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </view>
</view>

or @apply

<template><view class="hello">world</view></template>
<style lang="scss">
.hello {
  @apply flex items-center justify-center h-[100px] w-[100px] rounded-[40px] bg-[#123456] bg-opacity-[0.54] text-[#ffffff] #{!important};
}
</style>

了解更多

上述只是一个简单的 hello world,想要了解更多,可以到 Github,欢迎 star/fork.

Bugs & Issues

If encountered during use Bugs 或者提出问题,欢迎提交到此处,The author will reproduce and modify it as soon as possible