React(Next.js)でtailwindcssを使ってみよう(2日目) - とことんDevOps | 日本仮想化技術のDevOps技術情報メディア

こんにちは。この時期の流行りものに片足だけ突っ込んでいるような、いないようなアドベントカレンダーをやっています。
今年は、Reactを使ってフロントエンド開発をしている時間が長かったので復讐も兼ねてこれから始める方に役立つと嬉しいなと思いながら書いています。

2日目は、CSSライブラリの1つであるtailwindcssを使ってみましょう。これは1回目の記事で作成したプロジェクトでは最初からインストールされているので、インストールの手順は省略します。

tailwindcssとは

tailwindcssは、CSSライブラリの1つです。CSSライブラリとは、CSSを使ってWebページを作成する際によく使うようなスタイルをまとめたものです。tailwindcssは、CSSを書くのが苦手な人でも簡単にWebページを作成できるように設計されています。CSSを書くのが苦手な人でも簡単にWebページを作成できるように、tailwindcssではCSSを書く代わりにHTMLの属性にクラス名を指定することでスタイルを適用します。これにより、CSSを書く必要がなくなります。

tailwindcss.com

ボタンを表示してみる

ボタンを表示してみましょう。初期状態ではあれこれ不要なものがあるので、少しだけお掃除をしてからボタンを表示してみます。 app/page.tsxを開いてreturn ( ... )の中全て削除しましょう。

export default function Home() {
  return (
    // ここのコードを削除する
  )
}

次にapp/global.cssを開いて、bodyの中身を削除します。

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

/* ここより下を削除する */

削除が完了したらapp/page.tsxに戻り、次のコードを追加してください。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

class=" ... "の中にある書き方は、tailwindcssが用意しているクラス名です。これらを組み合わせることで、ボタンの見た目を変更できます。書き方に慣れるまでは使いにくいところもありますが、慣れてくると手軽に編集できるようになります。少しだけ書き方について解説すると例えば、bg-blue-500は背景色を指定します。末尾の500という数字はカラーパレット上で定義されている色の濃さを示す値です。数字が大きくなるほど濃くなります。

Before/Afterで比較するとこのような形です。(上が適用前、下が適用後)

入力フォームを表示してみる

次のコードを追加して入力フォームを表示してみましょう。

<input
  type="text"
  name="price"
  id="price"
  className="block w-full rounded-md border-0 p-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>

少しみにくいですが、上に入力フォームが表示されました。

まとめ

tailwindcssを使ってボタンと入力フォームを表示してみました。同じような形でCSSを適用しようとするともう少し複雑なことをする必要がありますが、tailwindcssを使うことで手軽にスタイルを適用できることがお分かりいただけたと思います。次回以降では色々なコンポーネントを組み合わせてよりそれっぽいものを作っていきます。