Tailwind CSS

Tailwind CSSは、Next.jsと非常に相性の良いユーティリティファーストなCSSフレームワークです。

Tailwindのインストール

Tailwind CSSパッケージをインストールし、initコマンドを実行してtailwind.config.jsファイルとpostcss.config.jsファイルの両方を生成します。

ターミナル

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tailwindの設定

Tailwind構成ファイル内で、Tailwindクラス名を使用するファイルのパスを追加します

tailwind.config.ts

import type { Config } from 'tailwindcss'
 
const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
export default config

postcss.config.jsを変更する必要はありません。

スタイルのインポート

Tailwindが生成されたスタイルをアプリケーションのグローバルスタイルシートに注入するために使用するTailwind CSSディレクティブを追加します。例:

app/globals.css

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

ルートレイアウト（app/layout.tsx）内で、globals.cssスタイルシートをインポートして、アプリケーションのすべてのルートにスタイルを適用します。

app/layout.tsx

import type { Metadata } from 'next'
 
// These styles apply to every route in the application
import './globals.css'
 
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

クラスの使用

Tailwind CSSをインストールし、グローバルスタイルを追加したら、アプリケーションでTailwindのユーティリティクラスを使用できます。

app/page.tsx

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

Turbopackでの使用

Next.js 13.1以降、Tailwind CSSとPostCSSはTurbopackでサポートされています。

お役に立ちましたか？