GatsbyJSで作ったブログにTailwindCSSを適用してみる

はじめに

TailwindCSSが流行っていると聞いたので、学習のためにもGatsbyJSで作ったこのブログに適用してみました。

TailwindCSSとは

CSSフレームワークの一つです。Bootstrapなどのフレームワークと異なり、コンポーネントは準備されておらず、「Utility first」というアプローチでスタイルを作っていくことが大きな特徴です。

Utility firstとは？

公式サイトを見てみると、「自分でクラスを考えないで、TailwindCSSが用意したシンプルなユーティリティクラスを使ってスタイルをデザインしていこう」と書いてあります。もう少し間単にすると、CSSは使わないでHTMLに直接TailwindCSSが用意したクラスを適用させていく設計手法のことです。実際にTailwindCSSのコードを見てみましょう。

<!-- 公式ドキュメントから引用 -->
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

CSSを勉強したことがある人なら、class名が長くて見辛い書き方だ思うのではないでしょうか。通常のCSSではclass名を見ただけでコンポーネントの意味が分かるようになっているのが普通だと思いますが、TailwindCSSでは複数のclassが付いていて、何のコンポーネントか分かり辛いです。一体このような記法にはどういったメリットがあるのでしょうか。

TailwindCSSの良い点

HTMLに直接書き込むので、例えばボタンのテキストカラーを変えたいとき、他のclassのデザインに影響を与えることがなく、誤って他の文字色を変更してしまうミスが起こり辛くなります。通常のCSSではカスタマイズする際にユーザー定義のclassを作る必要があるので管理が煩雑になりがちですが、TailwindCSSでは基本HTMLに直接書き込むため管理の必要がなくなります。

インラインスタイルと何が違うのか

HTMLに直接スタイルを当てていくのはインラインスタイルのようですが

• 埋め込まれた値は magic number化してしまう
• メディアクエリーが使えない
• 擬似クラスが使えない

と以上の理由からインラインスタイルは悪手になります。

なぜTailwindCSSが流行ったのか

ReactやVue.jsなどコンポーネントベースのフレームワークが主流になり、CSSでコンポーネントの管理をする必要がなくなったことが大きな理由です。HTMLに直接書くと、同じコンポーネントを使い回すときに何回もコピペが必要になりますが、HTMLのコンポーネントごと管理すれば、CSSファイルでコンポーネントの管理をする必要がなくなります。

導入方法

GatsbyJSにTailwindCSSを導入する方法をご紹介します。TailwindCSSの公式に記載がある通り、PostCSSプラグインとしてインストールすることを推奨していますので、その通りに導入していきます。

TailwindCSSをインストールする

npm install tailwindcss

TailwindとPostCSSのコンフィグファイルを作る

npx tailwindcss init　-p

これによってtailwind.config.jsとpostcss.config.jsファイルが作成されます。そして以下のように喜記述してパスを通します。

module.exports = {
    content: ['./src/**/*.{js,jsx,ts,tsx}'], //変更箇所
    theme: {
      extend: {},
    },
    plugins: [],
}

// postcss.config.js
module.exports = () => ({
    plugins: [require("tailwindcss")],
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    tailwindcss: {},
    autoprefixer: {},
  })

CSSにTailwindCSSを適用させる

@import 'tailwindcss/base'
@import 'tailwindcss/components'
@import 'tailwindcss/utilities'

これでTailwindCSSが利用できるようになりました。参考になれば幸いです。

おまけ

TailwindCSSはHTMLに直接書きCSSファイルでコンポーネントの管理をしないと書きましたが、TailwindCSSでコンポーネントを作ることも可能です。場合によりますが、コンポーネントclassよりも小さい粒度については以下のようにコンポーネントとして纏めてしまう方が保守性が高くなるかもしれません。

@import 'tailwindcss/base'
@import 'tailwindcss/components'
@import 'tailwindcss/utilities'

.btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}