Taro-plugin-tailwind is a plugin introduced in the documentation for taro-plugin-tailwind

The installation

$ npm i taro-plugin-tailwind --save-dev
$ # 或使用 yarn
$ yarn add -D taro-plugin-tailwind
Copy the code

use

The introduction of the plugin

Please ensure that the Taro CLI has been upgraded to the latest version of Taro 3 and that the taro-plugin-Tailwind version is v1.1.0 or later.

Modify the plugins in project config/index.js as follows:

const config = { /// ... Plugins: [/ /... the rest of the plugin 'taro - plugin - tailwind,], / / /... /// you can also pass in a specific argument: plugins: ['taro-plugin-tailwind', {// https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts#L10 }] ], };Copy the code

Generate configuration

Taro Tailwind –init generates the necessary configuration files:

$taro tailwind --init "//" $taro tailwind --init "// $taro tailwind --init" // $taro tailwind --init "// $taro tailwind --init" // $taro tailwind --init "// $taro tailwind --init" //Copy the code

TIP: One will be generated in the project root directory after execution.taro-plugin-tailwindThe tailwind folder, which contains tailwind configurations for each environment, will only be valid if the configuration is modified. I’m going to generate another onetailwind.configTailwind is a tailwind plugin for vscode, but it doesn’t have any effect.

Introduce windi.css in the project entry file (e.g. Main.js/app.tsx) :

import 'windi.css';
Copy the code

The problem

So far, you can use Tailwind in Taro. There was a problem, however, that Tailwind’s atomic classes were mobile first, and the style unit used was REM, which was not very friendly for precise UI design, and some of the styles were not usable in applets.

So we need to make some changes to the initial configuration. Here are some configuration changes for wechat applets:

weapp.config.js

const range = (size) = >
  Object.fromEntries(
    [...Array(size).keys()]
      .slice(1)
      .map((i) = > [`${i}_${size}`.`${(i / size) * 100}% `]));const generateSpacing = (num) = > {
  return new Array(num).fill(1).reduce(
    (cur, next, index) = > ({ ...cur, [index]: `${index * 2 }rpx`}, {}); };module.exports = {
  prefixer: false.separator: "_".compile: false.globalUtility: false.darkMode: "media".important: true.corePlugins: {
    space: false.divideStyle: false.divideWidth: false.divideColor: false.divideOpacity: false.Wx applet does not support the wildcard character (*) involved
    ringWidth: false.ringColor: false.ringOpacity: false.ringOffsetWidth: false.ringOffsetColor: false.Wx applet does not support web browser functions
    appearance: false.cursor: false.outline: false.placeholderColor: false.pointerEvents: false.stroke: false.tableLayout: false.userSelect: false,},theme: {
    extend: {
      colors: {
        green: {
          theme: "#27AE60",},blue: {
          theme: "#2F80ED",},gray: {
          "desc-50": "#E0E0E0"."desc-100": "#BDBDBD"."desc-200": "# 828282",}}},spacing: {
      ...generateSpacing(201),},fontSize: (theme) = > theme("spacing"),
    borderWidth: (theme) = > theme("spacing"),
    lineHeight: (theme) = > theme("spacing"),
    translate: (theme) = > theme("spacing"),
    inset: (theme) = > theme("spacing"),
    borderRadius: (theme) = > theme("spacing"),
    width: (theme) = > ({
      auto: "auto".full: "100%".screen: "100vw". Object.assign(... [2.3.4.5.6.12].map(range)), ... theme("spacing"),}),height: (theme) = > ({
      auto: "auto".full: "100%".screen: "100vh". Object.assign(... [2.3.4.5.6.12].map(range)), ... theme("spacing"),}),maxHeight: {
      full: "100%".screen: "100vh",}}};Copy the code

In addition, after 1.1.x, it uses windCSS internally, so it supports the syntax like W-10px and BG-hEX-333. However, since WXSS does not support translation characters, syntax like W -[12px] and BG -[#333] are not supported.