这可能是小程序应用 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 init2. 把 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.jsmodule.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.jsmodule.exports = { presets: [ require('tailwindcss-rem2px-preset').createPreset({ // 32 意味着 1rem = 32rpx fontSize: 32, // 转化的单位,能够变成 px / rpx unit: 'rpx' }) ], // ...}这样即可实现 tailwindcss 默认工具类的 rem 转 rpx 的配置了。
三. 装置本插件
# npm / yarn /pnpmnpm 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 = configuni-app vite(vue3)
uni-app vue3/Vite版是目前 uni-app 的最新版本，应用 vite 进行打包和开发，同样咱们能够依照以下形式进行注册：
// vite.config.[jt]simport { 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/ 进行检索，或者退出微信技术交换群，一起探讨前端技术！