共计 4280 个字符,预计需要花费 11 分钟才能阅读完成。
这可能是小程序应用 tailwindcss 开发的最佳计划
-
这可能是小程序应用 tailwindcss 开发的最佳计划
-
疾速开始
-
一. 装置与配置 tailwindcss
- 1. npm 装置
tailwindcss
- 2. 把
tailwindcss
注册进postcss.config.js
- 3. 配置
tailwind.config.js
- 4. 引入
tailwindcss
- 1. npm 装置
-
二. 配置
rem
转rpx
- 为什么要配置这一步呢?
-
配置 tailwindcss 单位转化
- 1.
postcss-rem-to-responsive-pixel
(举荐) - 2.
tailwindcss-rem2px-preset
- 1.
-
三. 装置本插件
- taro (all frameworks)
- uni-app (vue2/3)
- uni-app vite(vue3)
- 更多的框架!
-
- 开始开发!
-
笔者对 tailwindcss
的了解还算比拟到位,也写了不少的 preset
/plugin
和许多的 postcss
插件。
最近这个月,我公布了 weapp-tailwindcss-webpack-plugin
的 2.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-app
的 App.vue
<style>
@tailwind base;
@tailwind utilities;
/* 应用 scss */
/* @import 'tailwindcss/base'; */
/* @import 'tailwindcss/utilities'; */
</style>
又或者 Taro
的 app.scss
@import 'tailwindcss/base';
@import 'tailwindcss/utilities';
而后在 app.ts
里引入
Q&A: 为什么没有引入
tailwindcss/components
? 是因为外面默认寄存的是 pc 端自适应相干的款式,对小程序环境来说没有用途。如果你有 @layer components 相干的工具类须要应用,能够引入。
二. 配置 rem
转 rpx
后面咱们装置配置好了 tailwindcss
,接下来一步便是配置 rem
转 rpx
为什么要配置这一步呢?
这是因为 tailwindcss
外面工具类的长度单位,默认都是 rem
,比方:
.m-4{margin: 1rem;}
.h-4{height: 1rem;}
/*......*/
这在 h5
环境下自适应良好。但小程序外面,咱们大部分状况都是应用 rpx
这个单位来进行自适应,所以就须要把默认的 rem
单位转化成 rpx
。
配置 tailwindcss 单位转化
两种转化形式 (二者选其一即可)
- 如果你想要把我的项目里,所有的
rem
都转化成rpx
,那么postcss plugin
: postcss-rem-to-responsive-pixel 适宜你。 - 如果你想放大一下范畴,只把
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
默认工具类的 rem
转 rpx
的配置了。
三. 装置本插件
# npm / yarn /pnpm
npm i -D weapp-tailwindcss-webpack-plugin
# 能够执行一下 patch 办法
npx weapp-tw patch
而后把下列脚本,增加进你的 package.json
的 scripts
字段里:
"scripts": {+ "postinstall": "weapp-tw patch"}
接下来咱们就开始在不同的框架里注册了,这里咱们以目前市面上支流的 taro
和 uni-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
的版本,它应用 webpack4
和 postcss7
,而 alpha
版本应用 @vue/cli 5.x
即 webpack5
和 postcss8
,这能够应用最新版本的 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/ 进行检索,或者退出微信技术交换群,一起探讨前端技术!