Next.jsでTailwind CSSを使用する方法
Next.js のプロジェクトを作成する
ディレクトリを作成し、ターミナルでnpx create-next-app app_nameを実行します。
ターミナル
$ npx create-next-app app_name
すると以下のようにファイルなどが作成されます。
Tailwind CSSの設定をする
Tailwind CSSをインストールする
まずTailwind CSSをインストールします。
ターミナルで以下のコマンドを実行します。
ターミナル
$ npm install -D tailwindcss postcss autoprefixer
設定ファイルを生成する
次にtailwind.config.jsとpostcss.config.jsを生成するためにnpx tailwindcss init -pを実行します。
ターミナル
$ npx tailwindcss init -p
tailwind.config.jsとpostcss.config.jsが生成されました。
tailwind.config.jsを編集する
tailwind.config.js内容を変更します。
以下のように追記します。
tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
global.cssを編集する
次に./styles/globals.cssを編集します。
./styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
以上で設定が完了しました。
Tailwind CSSを使用する
以下のチートシートを確認ながらindex.jsを以下のように編集します。
index.js
import Head from 'next/head'
const Home = () => {
return (
// チートシートを見ながらclassNameに記述する
<div className="min-h-screen py-0 px-2 flex flex-col justify-center items-center">
<Head>
<title>Sample App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<h1 className="text-8xl text-purple-600">
Hello sample-app!!
</h1>
</div>
)
}
export default Home
Tailwind CSSが使用できていることが確認できました。