wxa.js 引入 tailwindcss

TailwindCSS 是我最近一段时间使用比较多的 CSS 框架，相比于传统咱们习惯的前端框架，它的限制更少，你能够根据本身的须要来编写样式。若是你配置了清除没用到的 CSS，TailwindCSS 的体积甚至能够远小于其余框架。 css

也由于上面的这些因素，我也天然而然的会选择将其放在小程序中来使用。而因为我使用的是 wxa.js ，因此这里也是一个对应的 wxa.js 的教程。前端

安装

1. 安装 TailiwndCSS 到你的项目中json

因为 Taildwind 默认推荐使用的是 PostCSS，但其须要的是 PostCSS 7 或者 8 ，但 WXA.js 提供的 PostCSS 插件使用的是 6 ，因此这里我就选择不将其做为 PostCSS 插件来安装。小程序

在 WXA 项目根目录中执行以下命令，会在你的项目根目录中生成一个 tailwindcss.config.js，它会做为后续你的项目配置的配置文件。微信小程序

npx tailwindcss-cli@latest init

随后，在你的项目根目录建立一个 tailwind.css 文件，并在其中加入以下代码，这个文件做为你后续样式基础文件。浏览器

@tailwind base;
@tailwind components;
@tailwind utilities;

添加完成后，你就能够执行以下命令，来生成一个默认的 tailwindcss 样式文件。前端框架

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./src/tailwind.css

生成的效果以下，能够看到，未任何处理的状况下，整个 CSS 文件足足有 3.81 MB，不过不用担忧，咱们能够清除其中的样式。微信

若是你但愿后续不输入这个命令，能够将其添加到你的项目的 package.json 中。

2. 移除默认的浏览器自动添加的 prefixapp

因为不一样浏览器在不一样的样式上可能有所不一样，tailwindcss 会在生成的时候帮助咱们生成一些特定的前缀。但小程序不涉及到浏览器的兼容性问题，因此咱们能够关闭 taildwindcss 的 autoprefixer。框架

将刚刚的生成命令中加入 --no-autoprefixer 的参数，就能够生成不含 prefix 的 CSS 文件

npx tailwindcss-cli@latest build  --no-autoprefixer  ./src/tailwind.css -o ./src/tailwind.css

能够看到，去除 prefix 后，咱们的文件缩小至 3.46MB。

3. 移除不用的样式

tailwindcss 提供了根据页面结构分析使用样式的功能，从而能够实如今构建生产版本之时，移除没有使用的样式，从而能够达到缩小样式的目的。

在项目中的配置 purge 属性，就能够实现 tailwindcss 自动分析 wxa 文件，从而移除没有用到的样式。

module.exports = {
    purge: ['./src/**/*.wxa'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
        screens: [],
    },
    variants: {
        extend: {},
    }
}

配置了 purge 属性后，能够看到，样式文件锐减到 9.93KB (由于我使用的样式不多）

4. 在 wxa.js 中引入

修改生成文件的命令，使生成的文件的后缀为 wxsss，从而能够继续使用微信小程序的 @import 语法。

npx tailwindcss-cli@latest build --no-autoprefixer  -o ./src/tailwind.wxss

从新生成样式文件后，只须要在 app.wxa 文件中的 style 块中加入以下引入代码，在项目中引入 tailwindcss。

由于 tailwindcss 只生成一个样式文件，所以，只须要在 app.wxa 中引入，便可确保全部页面均可以正常使用 tailwindcss

@import "./tailwind.wxss"

优化

实际上，taildwindcss 的体积还能够进一步优化，你能够彻底移除掉那些你没有用到的属性，从而让你的 css 文件特别小，从而控制小程序样式的大小。