このサイトで使用しているテーマには Font Awesome のアイコンを使用しているのですが、Tailwind CSS と同時に有効化した際にスタイルが消えてしまったので対処法を残しておきます。

• 問題：本番で Font Awesome のスタイルが消える
• 原因：Tailwind CSS にパージされる
• 対処：Font Awesome のスタイルを直接読み込む
• 参考

問題：本番で Font Awesome のスタイルが消える

VuePress では.vuepress/enhanceApp.jsにて fontawesome-vue のパッケージを読み込むことで Font Awesome のアイコンを使用できます。

// .vuepress/enhanceApp.js

任意の Vue コンポーネント内で以下のように使用できて、

<!-- components/hoge.vue -->
<template>
  <faIcon :icon="flag" />
</template>

これが以下のような感じのsvgタグに展開されます。

生じた問題は、svgタグへの展開は行われるものの、svg-inline--faやfa-w-16などのクラスへのスタイルが当たっておらず、アイコンが親要素いっぱいまで拡大してしまうというものです。

また、ローカルの dev server での実行では問題ないものの、production build した場合に問題が発生していました。

原因：Tailwind CSS にパージされる

同時に Tailwind のライブラリを使用していたことが原因でした。

Tailwind は production build 時に使用していないクラスを purge する機能が組み込まれているのですが、どうやらクラスの使用有無の判断が Font Awesome のタグ展開より先のタイミングであり、そちらのスタイルはパージされてしまっていたようです。

対処：Font Awesome のスタイルを直接読み込む

Font Awesome の CSS を手動で読み込み、パージ対象外のフラグをつける という手法で対処しました。

まず、node_modules/@fontawesome/style.cssを VuePress の.vuepress/styles/ディレクトリへコピーします。後のため、拡張子を.stylに変更します（stylファイルには通常の CSS の形式でも書けるため問題はありません）。ここでは名前をfontawesome-core.stylとしました。

❯ cp node_modules/@fortawesome/fontawesome-svg-core/styles.css blog/.vuepress/theme/styles/fontawesome-core.styl

コピーしたファイルの先頭と末尾にignoreを追加します。

これを.vuepress/styles/index.stylから読み込みます。なお Tailwind CSS の初期化宣言よりも後にすると所望の動作をしませんでした。

@require './fontawesome-core'  

@tailwind base
@tailwind components
@tailwind utilities; /* styles... */

これでアイコンが表示されるようになりました。

これは Font Awesome のスタイルをパージ対象から外しているわけなので、当然ながら、副作用として、ビルド結果の CSS のサイズが大きくなります。
サイズを気にする場合、もとの CSS ファイル全体をコピーしてくるのではなく、使用しているクラスのみを抽出するべきですが、今回はそこまで神経質にならなくても良いかと考え、全体をコピーする手法を取りました。

参考

今回の対処の参考にしたサイト。

• Gridsome で Font Awesome を使えるようにする | K note (opens new window)

Font Awesome 公式。現在 v5 だが v6 が alpha として出ている。バージョンアップたのしみ。

• Font Awesome (opens new window)

Tailwind CSS 公式。今年中には v3 が出るらしい。バージョンアップたのしみ。

• Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. (opens new window)