关于小程序:wxajs-引入-tailwindcss

TailwindCSS 是我最近一段时间应用比拟多的 CSS 框架，相比于传统咱们习惯的前端框架，它的限度更少，你能够依据本人的须要来编写款式。如果你配置了革除没用到的 CSS，TailwindCSS 的体积甚至能够远小于其余框架。

也因为下面的这些因素，我也自然而然的会抉择将其放在小程序中来应用。而因为我应用的是 wxa.js，所以这里也是一个对应的 wxa.js 的教程。

装置

1. 装置 TailiwndCSS 到你的我的项目中

因为 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. 移除默认的浏览器主动增加的 prefix

因为不同浏览器在不同的款式上可能有所不同，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 文件特地小，从而管制小程序款式的大小。