Zenn
Open2

Tailwind CSSの導入について

CSS
Next.js
React
Tailwind CSS
frontend
まさぴょんまさぴょん

Tailwind CSS ✖️ Next.js の導入

https://tailwindcss.com/docs/guides/nextjs

  1. 必要なパッケージのインストール
    Tailwind CSSを使用するには、tailwindcss、postcss、autoprefixerの3つのパッケージが必要です。以下のコマンドで開発依存関係としてインストールします。

    npm install -D tailwindcss postcss autoprefixer

    または

    yarn add -D tailwindcss postcss autoprefixer

    これらのパッケージが正しくインストールされているか確認してください。

  2. 設定ファイルの作成と設定
    Tailwind CSSを初期化し、設定ファイルを作成します。

    npx tailwindcss init -p

    これにより、tailwind.config.jsとpostcss.config.jsが生成されます。tailwind.config.jsのcontentセクションに、Tailwind CSSを適用するファイルパスを指定します。Next.jsのプロジェクト構造に応じて、以下のように設定します。

    module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

    プロジェクトのディレクトリ構造に合わせて、contentのパスを適切に設定してください。 citeturn0search1

  3. グローバルCSSファイルの設定
    globals.css（またはglobal.css）ファイルに、Tailwind CSSの基本スタイルをインポートします。

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

    このファイルを_app.jsまたは_app.tsxでインポートします。

    import '../styles/globals.css'

    これにより、Tailwind CSSのスタイルが全体に適用されます。 citeturn0search8

  4. 開発サーバーの再起動
    設定変更後、開発サーバーを再起動することで、設定が反映されます。

    npm run dev

    または

    yarn dev

  5. キャッシュのクリア
    ブラウザのキャッシュが原因でスタイルが反映されない場合があります。ブラウザのキャッシュをクリアしてからページを再読み込みしてください。

参考・引用

https://tailwindcss.com/docs/guides/nextjs

https://zenn.dev/seetsuko/articles/715dc345eb0288

https://qiita.com/Sicut_study/items/7147e47441557a43b0fe

まさぴょんまさぴょん

Tailwind CSSの初期セットアップについて

npx tailwindcss init -p は、Tailwind CSSの初期設定を行うためのコマンドです。このコマンドを実行すると、Tailwind CSSの設定ファイルである tailwind.config.js と、PostCSSの設定ファイルである postcss.config.js が自動的に生成されます。
これにより、Tailwind CSSをプロジェクトに簡単に統合し、カスタマイズするための準備が整います。

コマンドの詳細

  • npx: Node.jsのパッケージを実行するためのコマンドで、ローカルにインストールされていないパッケージも一時的に実行できます。

  • tailwindcss init: Tailwind CSSの設定ファイルを生成するコマンドです。これにより、デフォルトの設定が含まれた tailwind.config.js が作成されます。

  • -p: このオプションを追加することで、PostCSSの設定ファイルも同時に生成されます。PostCSSは、CSSを処理するためのツールで、Tailwind CSSのクラスを使用する際に必要です。

初期セットアップの手順

  1. プロジェクトの作成: 新しいプロジェクトフォルダを作成し、その中に移動します。

  2. Tailwind CSSのインストール: 以下のコマンドを実行して、Tailwind CSSをインストールします。

    npm install -D tailwindcss

  3. 設定ファイルの生成: 次に、以下のコマンドを実行して設定ファイルを生成します。

    npx tailwindcss init -p

  4. CSSファイルの作成: Tailwind CSSのクラスを使用するためのCSSファイルを作成し、以下のようにTailwindのディレクティブを追加します。

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

  5. ビルドプロセスの開始: Tailwind CSSを使用するために、ビルドプロセスを開始します。これにより、Tailwindのスタイルが適用されたCSSが生成されます。

このように、npx tailwindcss init -p コマンドを使用することで、Tailwind CSSの初期設定が簡単に行え、プロジェクトのスタイリングを迅速に開始することができます。