共计 4216 个字符,预计需要花费 11 分钟才能阅读完成。
让小程序开发进入 tailwind jit
时代!
把
tailwindcss JIT
思维带入小程序开发吧!
笔者几个月前写了一个 tailwindcss-miniprogram-preset 预设,可是这个预设计划,可操作性十分的小,也不能兼容 tailwindcss v2/v3
的 Just in time
引擎,同时在写法上也有肯定的变体。
于是笔者又设计了一个计划,并最终实现了 weapp-tailwindcss-webpack-plugin
。相比原先 preset
or postcss
计划,这个计划有很多的劣势:
- 为
jit
设计,兼容v2/v3
2 个版本的jit
引擎 - 开发者不须要额定记忆任何的写法变体,带来原汁原味的
tailwindcss
开发体验 - 兼容基于
webpack v4/v5
的小程序多端开发框架,简略易用
那么接下来就来展现一个基于 uni-app
的 demo 来疾速体验这个计划吧。
最佳实际
前置筹备: vscode
,vscode-tailwindcss
,nodejs lts
, 微信开发者工具
1. 通过 vue-cli 命令行创立工程
此局部内容见 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 tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
postcss-rem-to-responsive-pixel 是一个由笔者撰写的 postcss 插件,反对
rem
->rpx
,同时反对postcss7
和postcss8
,配置见此
3. 初始化 tailwind.config.js
和 postcss.config.js
只须要在初始化的文件内退出一些配置:
// 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('~@/')) {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 sass-loader@^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
的大部分个性了!
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
如果在应用过程中遇到 Bugs 或者提出问题,欢送提交到此处,笔者会尽快复现并批改