wxa.js 引入 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 文件特別小，從而控制小程序樣式的大小。