Tailwindcssのプリフライトが効かない

更新日:2022/10/02

Tailwindcssには「プリフライト」という機能があります。デフォルトの見た目をいったんまっさらにしてからスタイルをあてることで、環境依存による見た目のばらつきがなくなるものです。


Preflight | Tailwindcss
https://tailwindcss.com/docs/preflight

HonKitのデフォルトテーマ(元はGitBookのテーマの仕組み)はCSSを自力で書かずともいい感じに見た目が整うよう設計されていて、後から追加したTailwindcssのプリフライトでまっさらにできない部分があるようです。


<!-- pやulにマージンがついてしまう -->
<p class="m-0"></p>

<!-- サイドバーに付与されたクラスの見た目が打ち消せない -->
<ul class="summary">
  <li class="chapter active">
    <a href="..."></a>
  </li>
</ul>

解決策1)npmで公開されたテーマを使う

HonKitのドキュメントにテーマはプラグインとして公開されているとあるため、テーマの変更がおそらく正攻法です。


Publish a theme | HonKit
https://honkit.netlify.app/themes/

GitBookのために作られた gitbook-plugin-honkit-plugin- に置き換えれば動作するとの情報もあり、何なら自分でテーマを作ってプラグインとして公開すれば完全にカスタムできそうです。


ちょっと使って試してみるにはハードルが高かったのでこの方法はあきらめましたが、がっつりサイト構築するにはプラグインが良さそうに思います。

解決策2)Tailwindcssで上書きする

はがゆいところをTailwindcssで上書きする方法です。ゴリ押し感が強いですが、サイドバーの見た目など一部だけ書き換えるにはてっとり早いです。


今回はこの方法を使いました。

tailwind.css
@layer base {
  p {
    @apply m-0 !important;
  }
  .book-summary ul.summary li.header {
    @apply font-semibold text-gray-600;
  }
}

results matching ""

    No results matching ""