Next.jsでtailwindcssを使ってみた

はじめに

Next.jsのcssにtailwindcssが使われているのを結構見かけたので使ってみました。Next.js特有の設定とかは特にしていないのでReactでも多分変わらないと思います。

tailwindcssとは

迅速かつ簡単にデザインシステムを構築するためのユーティリティを提供するcssフレームワークです。
有名なものでbootstrapがありますが、個人的にbootstrapはスタイルの形がある程度スタイルが出来上がっているのに対し、tailwindcssは１から自由に作る印象です。

簡単な例

<h1className="bg-black text-red-500 p-5 m-5 text-center">hello world</h1>/* 
background-color: #000000;
--tw-text-opacity: 1;
color: rgba(239, 68, 68, var(--tw-text-opacity));
padding: 1.25rem;
margin: 1.25rem;
text-align: center;
*/

↑こんな感じにクラスネームに記述していきます。コメントと同じスタイルが当たっています。

拡張機能

この拡張機能が入力候補やシンタックスハイライトが聞いてとても便利なので迷わず入れましょう！
Tailwind CSS IntelliSense

導入

create-next-appなどでNext.jsのプロジェクトを作成したら、以下のコマンドでインストールします。

## npm
npm install tailwindcss@latest postcss@latest autoprefixer@latest
## yarn
yarn add tailwindcss@latest postcss@latest autoprefixer@latest

インストールが完了したら、以下のコマンドで設定ファイルを作成します。

npx tailwindcss init -p

すると、postcss.config.js、tailwind.config.jsが作成されると思います。

その後、一番上に当たるファイル（_app.tsxなど）にインポートするのですが、そのまま使う方法とカスタマイズする方法があるので紹介します。

そのまま使う

まず、下の例がそのまま使う方法です。

pages/_app.tsx

importReactfrom"react";import'tailwindcss/tailwind.css';import{AppProps}from"next/app";exportdefaultfunctionApp({Component,pageProps}:AppProps){return<Component{...pageProps}/>;}

カスタマイズする

そしてもう一つのカスタマイズする方法は別のCSSファイルを作って、インポートします。

styles/globals.css

@tailwindbase;@tailwindcomponents;@tailwindutilities;/* ベーススタイル設定 */@layerbase{html,body{@applyh-full;}}/* ユーティリティをまとめたコンポーネントスタイル作成 */@layercomponents{.btn-blue{@applypx-4py-2font-boldtext-whitebg-blue-500rounded;}}/* 独自のユーティリティ追加 */@layerutilities{.bg-custom-black{background-color:#282c34;}}

baseでタグなどのベースのスタイル、componentsでひとまとめにした汎用スタイル、utilitiesで新しいユーティリティの作成ができ、そのまま使えます。レスポンシブや疑似要素のユーティリティを作成する場合は、@variantsというのを使う必要があるみたいです。

@layerutilities{@variantsresponsive{.bg-custom-black{background-color:#282c34;}}@variantsresponsive{.bg-custom-smoke{background-color:#f6f6f6;}}}

このままだと@applyの後に赤線が出るので、vscodeの設定を書きます。

.vscode/settings.json

{"css.validate":false}

これでエラーが出なくなると思います。

作ったCSSファイルをインポートすれば使えるようになります。

pages/_app.tsx

importReactfrom"react";import'../styles/globals.css'import{AppProps}from"next/app";exportdefaultfunctionApp({Component,pageProps}:AppProps){return<Component{...pageProps}/>;}

疑似要素

下のようにhover時に反映させたかったら、hover:に続けて書きます。activeだったらactive:の後、focusだったらfocus:の後みたいな感じです。

<buttonclass="bg-purple-600 hover:bg-purple-700">
    PUSH
</button>

レスポンシブ

下の表のように範囲が分けられていて、疑似要素と同じような感じでxlサイズにしたいときはxl:に続けて記述する感じにします。

Breakpoint prefix Minimum width CSS
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }
ドキュメントより引用

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

<h1className="bg-black xl:bg-white">hello world</h1>

終わりに

ここまで読んでいただきありがとうございます、少しでも参考になったら嬉しいです！
具体的なスタイルの説明に関しては量がとても多く、ドキュメントがわかりやすいので興味があったら見てみてください。他にも設定ファイルで色々カスタマイズできると思います。
使い始めたばかりでまだ少し時間がかかってしまいますが、慣れるととても書きやすそうです！