Next.js + Tailwind CSS : 導入及び使い方

Next.js

代表的なCSSのフレームワークとして、BootstrapやBulma,　MUIなどが挙げられますが、最近では、Tailwind CSSを導入するプロジェクトも増えている印象を受けます。

そこで、Next.jsの環境へTailwind CSSを導入する方法と使い方について、サンプルコードを用いながら解説していきます。

  1. Tailwind CSSを活用するメリット
  2. Next.js : 環境構築
  3. Tailwind CSSを導入
  4. Tailwind CSSを用いてテーブルをデザイン
  5. まとめ

Tailwind CSSを活用するメリット

  1. class名を考える必要がない (準備されているclassを記述するだけでデザインを反映させることが可能)
  2. 準備された各種classを組み合わせて、デザインをすることが出来るため、独自性の高いサイトを制作できる
  3. メディアクエリについてもclassが用意されているため、レスポンシブ時のデザインも直感的に設定可能
  4. スタイルの変更はHTML上で完結する
  5. 上記の4点の特徴があることにより、開発速度の向上を目指せる

 

Next.js : 環境構築

Next.js 環境構築

Tailwind CSSを導入

続いて、Tailwind CSSを導入していきましょう。

Tailwind CSS
  • 1
    インストール

    アプリケーションフォルダであるnext-tailwindに移動していることを確認したうえで、以下のコマンドを実行しましょう。このコマンドのみで、Next.js環境にtailwindを導入することが可能です。

    npm i -D tailwindcss postcss autoprefixer

    tailwindcss_導入_コマンド実行

  • 2
    Tailwind CSSを初期化

    インストールが無事に完了したら、Tailwind CSSの初期化を行います。

    npx tailwindcss init -p

    Nextjs-tailwindcss_init

    すると、Tailwind CSSとPostCSSの設定ファイルが作成されます。

  • 3
    tailwind.config.jsを編集

    編集前

    tailwind css_編集前

    content内に以下のコードを追加します。

    "./app/**/*.{js,ts,jsx,tsx,mdx}", 
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",

// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",

    編集後

    tailwind CSS_編集後

  • 4
    global.cssの編集

    Tailwind CSSを使用するための最後の仕上げです。

    stylesフォルダ直下にあるglobal.css内のCSSをすべて削除したうえで、

    styles/global.css

    以下のコードを追加しましょう。

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

tailwind.config.jsとglobal.cssの編集が完了したら、Tailwind CSSの導入&設定は、終了です。

 

Tailwind CSSを用いてテーブルをデザイン

最後にTailwind CSSの使い方について、ご紹介します。HTMLでテーブルを作成し、Tailwind CSSでスタイルを設定してみましょう。

Tailwind CSSでスタイルを設定
  • 1
    編集するファイルを確認

    編集するファイルは、pagesフォルダ直下のindex.tsxなります。(TypeScriptではなくJavaScriptを使用されている場合は、拡張子が変わります。)

    pages/index.ts

  • 2
    HTMLを記述

    index.tsxを開き、既存のコードをすべて削除します。

    続いて、以下のコードを追加しましょう。

    export default function Home() {
  return (
  <>
    <div>
      <h1>Table</h1>
      <table>
        <thead>
          <tr>
            <th>果物</th>
            <th>野菜</th>
            <th>肉</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>りんご</td>
            <td>きゅうり</td>
            <td>鶏肉</td>
          </tr>
          <tr>
            <td>ぶどう</td>
            <td>なす</td>
            <td>豚肉</td>
          </tr>
          <tr>
            <td>みかん</td>
            <td>とまと</td>
            <td>牛肉</td>
          </tr>
        </tbody>
       </table>
      </div>
     </>
    )
}

    現時点でローカルサーバーを起動し、結果を確認すると、下記のようになります。

    tailwindcss_default_reset

  • 3
    スタイルの設定

    export default function Home() {　
  return (
  <>
    <div className="min-h-screen flex-col flex justify-center items-center">
      <h1 className="text-4xl mb-5">Table</h1>
      <table className="border-collapse border border-slate-400">
        <thead>
          <tr>
            <th　className="border border-slate-500 px-4 py-2 bg-slate-100 font-bold">果物</th>
            <th className="border border-slate-500 px-4 py-2 bg-slate-100 font-bold">野菜</th>
            <th className="border border-slate-500 px-4 py-2 bg-slate-100 font-bold">肉</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border border-slate-500 px-4 py-2">りんご</td>
            <td className="border border-slate-500 px-4 py-2">きゅうり</td>
            <td className="border border-slate-500 px-4 py-2">鶏肉</td>
          </tr>
          <tr>
            <td className="border border-slate-500 px-4 py-2">ぶどう</td>
            <td className="border border-slate-500 px-4 py-2">なす</td>
            <td className="border border-slate-500 px-4 py-2">豚肉</td>
          </tr>
          <tr>
            <td className="border border-slate-500 px-4 py-2">みかん</td>
            <td className="border border-slate-500 px-4 py-2">とまと</td>
            <td className="border border-slate-500 px-4 py-2">牛肉</td>
          </tr>
        </tbody>
       </table>
      </div>
     </>
    )
}

    html内にclassNameを記述し、TailwindCSSで用意されているclassを設定しています。

    再度、サーバーを起動してみるとスタイルがしっかりと反映されていることが確認出来ます。

    tailwindcss_style_html

ここまでの流れのみですと、class名の意味が分からないため、やっていることがいまいちピンとこないかと思います。

そこで、class名と反映されるCSSをセットでまとめているチートシートが存在しますので、こちらを確認しながらどういったCSSが反映されているのか確認してみてください。

Tailwind CSS Cheat Sheet
Find quickly all the class names and CSS properties with this interactive cheat sheet. The only Tailwind CheatSheet you will ever need!
tailwindcomponents.com

tailwind_class_チートシート

まとめ

本記事では、Next.jsの環境へTailwind CSSを導入する流れと使い方についてご紹介していきました。予め用意されたclassを組み合わせて、独自性のあるデザインを作るためには、CSSに関する知識やそれなりの技術力が求められますが、その反面メリットも多いため、今後も多くの現場で活躍するCSSフレームワークであると思います。

今回は、Windows環境で作業をしましたが、Macの場合でもTailwind CSSを導入する上での作業内容は変わりません。

 

コメント

タイトルとURLをコピーしました