微信小程序使用tailwindcss

第一次尝试成功，可以使用部分基础类属性

1、新建一个项目目录，再在目录里新建小程序项目。

2、整个项目使用vscode打开，npm init 初始化npm。

3、安装tailwind、postcss autoprefixer

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

4、创建自定义配置文件

npx tailwindcss init

5、配置模板路径

// tailwind.config.js
module.exports = {
　　content: ["./miniprogram/**/*.{wxml,js}"],
　　theme: {
　　　　extend: {},
　　},
　　plugins: [],
　　corePlugins: {
　　　　preflight: false
　　}
}

6、根目录创建tailwind.css文件

/* 前两项用不到，注释掉*/
/*
@tailwind base;
@tailwind components;
*/
@tailwind utilities;

7、执行命令生成 css

npx tailwindcss --no-autoprefixer -i ./tailwind.css -o ./miniprogram/tailwind.wxss --watch

--no-autoprefixer：不需要生成各浏览器内核前缀

/* app.wxss */
@import './tailwind.wxss'

8、新建 postcss.config.js 文件，注册：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

9、配置 rem 转 rpx

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: ['*']
    },
  },
};

安装 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-miniprogram-preset

npm i -D tailwindcss-miniprogram-preset

配置 tailwind.config.js

// tailwind.config.js

const {
  defaultPreset,
  createPreset
} = require('tailwindcss-miniprogram-preset')

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
        defaultPreset,
         // ... 
    ]
}

然后就可以对 / 和 . 做rename处理

form	to	sample
/	-div-	w-1/4 -> w-1-div-4
.	-dot-	w-1.5 -> w-1-dot-5

 

 

 

 

暂不支持 [ ]
暂不支持 '*, ::before, ::after'
暂不支持 hover: focus:
暂不支持 :not

 

---

如果开发时，HMR 热更新不起作用，可以更改 purge 选项

也可以直接用自定义的 purge 选项, 覆盖当前 preset

// tailwind.config.js
const { defaultPreset } = require('tailwindcss-miniprogram-preset')

/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */

module.exports = {
  purge: defaultPreset.purge.content,
  presets: [defaultPreset]
}

 

---

 

有个插件 weapp-tailwindcss-webpack-plugin 可以实现，但是文档还看不明白，我研究会了再来更新。