︙

Tailwind CSS

Examples

Tailwind CSS と一緒に

Tailwind CSS は、ユーティリティ最優先の CSS フレームワークで、特に Next.js と非常によく機能します。

Installing Tailwind

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

Terminal

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

Configuring Tailwind

tailwind.config.jsの中に、Tailwind CSS クラス名を使用するファイルに paths を追加します:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  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: [],
}

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

Importing Styles

アプリケーションの Global stylesheet に、たとえば、Tailwind が生成したスタイルを注入するために使用するTailwind CSS ディレクティブを追加します：

styles/globals.css

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

カスタム app ファイル (pages/_app.js)の中で、globals.cssスタイルシートを import して、アプリケーションのすべての route に styles を適用します。

pages/_app.tsx

// These styles apply to every route in the application
import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

pages/_app.js

// These styles apply to every route in the application
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Using Classes

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

pages/index.tsx

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

pages/index.js

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

Usage with Turbopack

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