Tailwind CSS 導入

Tailwind CSS 🎐

ここ最近、といっても1,2年くらいでしょうか？ Tailwind CSS というワードを Qiita やら はてなブックマーク やらで目にすることがちらほら。

気になってはいたものの、なんとなく高度な CSS の知識がないと使いこなせないかもなぁ...と敬遠していたのですが、やはり使ってみないことには実力はつかないのかと思い、腹をくくって導入を試みたのでした。

Tailwind CSS とは、ユーティリティファーストの CSS フレームワーク です。ちなみに自分のCSSフレームワーク歴は Bootstrap ならちょっと使ったことがあるくらい...。

ひとまず使いながら勉強していけば良いか...と言い聞かせて進めていくことにします。

Next.js プロジェクトに追加する 💫

yarn コマンドで Tailwind CSS をインストールしていきます（npm の方は略）

$ yarn add -D tailwindcss postcss autoprefixer

次に設定ファイルを作成しましょう。

$ yarn tailwindcss init -p

続いて tailwind.config.js を編集します。content のプロパティを以下のように設定。

tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

あとは ./styles/globals.css に以下を付け足します。

@tailwind base;
@tailwind components;
@tailwind utilities;

これで使えるようになりました 🎉

Tailwind CSS 変換 🔨

global.css ファイル以外に定義した CSS をすべて Tailwind CSS に変換しました。

例えば以下の CSS だと

.headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1rem 0;
}

次のように変換されます

<h2 className={utileStyles.headingLg}>Blog</h2>

 ↓

<h2 className="text-2xl leading-loose my-4 font-bold">Blog</h2>

当てるスタイルが増えると要素の可読性が低くなって微妙かな？とも思いながら作業していたのですが、どんなスタイルが当たってるかは一目瞭然なのでコンポーネントが細かく分割されてきたときに効果を発揮しそうな予感がしてます。

Tailwind CSS 変換の詳細は以下です。

• →　設定ファイルがこの記事の内容と異なっているのですが、バージョンの古い情報を元に変更してしまった部分です...この記事の設定方法のほうが最新です。

global.css に定義している CSS は、h1 タグなどが Tailwind のスタイルにならないように残しました。この辺もどっかうまく設定して CSS のコード自体を無くせるのだと思うのですが、それはまた今度で...