tailwindをnextjsで使ってみる[Typescript]

今回はnextjsのプロジェクトにUIのデザインをいい感じにしてくれるtailwindを導入する方法を記述します。

tailwindを使うとclassに特定のclassを記述することで文字色などのレイアウトを変更できます。そのためcssを記述する必要がなくなるため、便利です

参照）https://tailwindcss.com/docs/guides/nextjs

インストールと設定ファイルの作成

まずはtailwindのインストールをします。nextjsで利用する場合は、postcss、autoprefixerも必要になります

npm install -D tailwindcss postcss autoprefixer

インストールが完了するとプロジェクトのルートディレクトリ直下にtailwind.config.jsを新規作成します。
tailwind.config.jsにはとりあえず、nextjsがデフォルトでtsxファイルを作成するpagesディレクトリにtailwindが利用できるように設定ファイルを下記のように記述します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

これでpages直下のtsxファイルにtailwindが使えるようになりました
ちなみにcontentに追加したディレクトリのファイルに対してtailwindを適応できます。
そのためcomponentsフォルダにtailwindを使いたい場合は「./components/**/*.{js,ts,jsx,tsx}」をcontentに追加します

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

次にglobals.cssがプロジェクトルート/styles直下にあるのでそこに下記を追加
※tailwindのチュートリアルにある記述を追加するとvscodeではwarningが出るのでこちらを利用

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

プロジェクトルート/pages/indexx.tsxを下記のように編集します

export default function Home() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}

起動して確認

yarn devコマンドを実行すると下記のようにHello Worldの文字がアンダーラインが引かれているのを確認できたら成功です

tailwindではアンダーラインの他にも文字色を変更する場合にはclassNameにtext-blue-900を追加すると文字色がカラーコードで#1e3a8aになります（文字色についてはこちら）

このようにtailwindを使うと簡単にレイアウトを定義できるのでとても便利です。その他にもたくさん便利な設定があるので下記を参考にしてください

参照)https://tailwindcss.com/