このリポジトリ でやったこと。 やろうとしたこと tailwind.css は Utility First と銘打った CSS フレームワークで、コンポーネント化を前提としたモダンフレームワークと相性がいいです。今回は next.js の amp-mode で tailwind を使おうとしてみました。 Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs 問題 前提として、 amp には inline css の容量制限があり、75kb を超えると AMP と認識されなくなります。 tailwind はビルドして使うのが前提のフレームワークですが、全部入りの tailwind.min.css は 1.3 M あります。これでは到底、75 kb に収まりません。 AMP の CSS
![next.js の amp モードで tailwind.css を purgecss と合わせて使う](https://cdn-ak-scissors.b.st-hatena.com/image/square/2018392cacf103baba316cf9890c0e7568c873c8/height=288;version=1;width=512/https%3A%2F%2Fmizchi.dev%2Fogp%2Fnext-amp-tailwind-postcss.png)