【Next.js＋TailwindCSS】Next.jsにTailwindCSSを導入しtailwind.config.jsでカスタマイズする

はじめに

TailwindCSSでコーディング時に同じ記述を何度も記述してしまい、汚くなってしまったので、繰り返し使用するクラスの作り方や使用したい色を設定する方法の一部をまとめました。

分かること

• バックグラウンドにしたい画像の定義
• 使いまわしたい色の定義
• <h1>タグや<p>タグ等、タグの基本スタイルを登録する
• クラス名を設定して装飾する

環境

• Next.js：11.0.2
• Tailwind CSS：2.2.15
• React：17.0.2

Tailwind CSS について

Next.jsでtailwind.cssのプロジェクトを作成されていない方はNext.jsにTailwindCSSを導入する方法の通りに進めると作成できます。

【参考】

Tailwind CSSとは？

TailwindCSSやNext.jsについての説明はこちらの記事に簡単にまとめましたので、良ければご覧ください。

tailwind.config.jsとは？

Tailwind CSSの設定用ファイル。パフォーマンスの最適化や、カスタマイズが簡単に行えます。

tailwind.config.js

※「tailwind.config.jsの作成」から「必要に応じてスタイルを反映させる設定」まではNext.jsにTailwindCSSを導入する方法に含まれている内容です。

tailwind.config.jsの作成

初期化しtailwind.config.js作成を行う

# npm
npx tailwindcss init -p

# yarn
yarn tailwindcss init -p

パフォーマンス最適化の設定

【purge】
ビルド生成時の未使用のスタイルを除外し、パフォーマンスの最適化を行う。
例は、pagesとcomponentsディレクトリ内を対象範囲とする。

taiwind.config.js

module.exports = {
  //追記
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'

必要に応じてスタイルを反映させる設定

【mode】
JIT(just-in-time)modeを適用して必要に応じてスタイルを反映するため、カスタマイズが容易になる。

taiwind.config.js

module.exports = {
  //追記
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'

バックグラウンドで使用する画像の定義

以下の例は'about','future','skills'という名前で3つ背景画像を定義。
画像はpublicフォルダにimagesフォルダを作成し、そこへ格納しています。
※　最初わかりやすいように'bg-about'という名前で登録しましたが、その場合、うまく動きませんでした。

Main.jsx

//背景画像className指定例：bg-〇〇
<section id="about" className="bg-about bg-cover py-14 text-center">

</section>

汎用的に使えるように色を設定する

何度も使用したい色のコードを定義し、簡単に設定できるようにする。
classNameの指定の仕方は文字・背景等の色指定と同じです。

ベーススタイルの設定 (style.css)

繰り返し使用するスタイルの設定。
同じパターンの使い回しを何度も記述するのは、見づらく大変なので、これを使用することで、だいぶスッキリとした印象です。
※　style.cssに記述しています。

その他　参考サイト一覧

• Trailwind　CSSの導入
• ベーススタイルを追加する
• コンポーネントの抽出
• Configuration
• Using with Preprocessors
• Functions & Directives

まとめ

初め、とりあえずただひたすらに記述していったため、コードがわかりにくくなってしまいました。
一通り簡単に記述してから、ベーススタイルの設定等を行い、修正したためもっと早い段階で理解できていたら効率よくプログラミングができていたと思います。

同じような方のお役に少しでも立てたら嬉しいです！
次からはもう少し、効率よくきれいに書けるようになってる気がします...!!