taro-plugin-tailwind-weapp

Taro 中使用 tailwind

安装

$ npm i taro-plugin-tailwind-weapp --save

Or

$ yarn add taro-plugin-tailwind-weapp

使用

引入插件

请确保 Taro CLI 已升级至 Taro 3.1 及以上。

1. 创建一个 tailwind.css 文件

   @tailwind utilities;
   

2. 在 app.ts 中引入该样式文件

3. 修改项目 config/index.js 中的 plugins 配置为如下

const config = {
  ...
  plugins: [
    ...其余插件

    'taro-plugin-tailwind-weapp',
    // 或者使用include，只处理特定的文件
    ['taro-plugin-tailwind-weapp', {
      include: [/tailwind/],
    }]
  ]
  ...
}

4. 原则上，插件会在构建开始时自动创建配置文件，但是你也可以选择运行

   taro tailwind --init
   

   在项目根目录生成一个 tailwind.config.js 配置文件，也可以直接复制 我的配置文件

   参数

插件可以接受如下参数：

参考

本插件实现过程中参考了 taro-plugin-tailwind 和 tailwind-taro. 前者需要安装特定的 Windi CSS Intellisense，后者是一个postcss插件，而且强行去掉了所有的媒体查询功能。