WordPress環境にTailwind CSSを導入する方法を解説

Tailwind CSS WordPress 環境構築

WordPress環境にTailwind CSSを導入する方法を解説

なやむくん
WordPressでTailwind CSSを使用したい…。
なやむさん
Tailwind CSSを使用するまでの手順を知りたい…。

などの疑問や悩みを解決してまいります。

前提条件

Tailwind CSSを使用するには以下がインストールされていることが前提条件となります。

前提条件

  • Node.js
  • npm

インストールされているかどうかは、以下のコマンドで確認ができます。

// Node.jsがインストールされているか確認
node -v
// v22.2.0

// npmがインストールされているか確認
npm -v
// 10.7.0

テーマディレクトリの準備

本記事では以下のディレクトリ構成で進めていきます。

tailwind-css-test // 自作テーマ
│  footer.php // フッター記述
│  functions.php // cssファイル読み込み記述
│  header.php // ヘッダー記述
│  index.php // コンテンツ記述
│  style.css // テーマ情報記述
│  
├─assets
│  └─css
│          style.css // 読み込み用css
│
└─src
        input.css // tailwind cssのディレクティブを記述

表示確認用としてindex.phpには最低限の記述だけしています。

<h1>Tailwind CSS Test</h1>
Tailwind CSS Test

プロジェクトの初期化

テーマのディレクトリに移動し、npmプロジェクトを初期化します。

npm init -y

コマンドを実行すると初期化処理が行われ、テーマディレクトリ内にpackage.jsonが作成されるので確認してください。

Tailwind CSSのインストール

以下のコマンドで、Tailwind CSSとPost CSS、Autoprefixerをインストールします。

npm install -D tailwindcss postcss autoprefixer

Post CSSとは

CSSファイルを解析し、プラグインを介してCSSを変換するツールです。
Tailwind自体がPostCSSプラグインであり、CSSをパージ（未使用のスタイルを削除）、最適化、生成する際にPostCSSを使用しています。

Autoprefixerとは

CSSにベンダープレフィックス（-webkit-など）を自動的に追加してくれる、Post CSSのプラグインです。

Tailwind CSSの設定ファイルを作成

以下のコマンドを入力してtailwind.config.jsを作成します。

npx tailwindcss init

作成したtailwind.config.jsを以下のように編集します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.php"], // PHPファイルを対象に含める
  theme: {
    extend: {},
  },
  plugins: [],
};

'./**/*.php' という記述は、Tailwind CSSの設定ファイル（tailwind.config.js）において、Tailwindがどのファイルをスキャンして使用されているクラスを検出するかを指定する記述です。

Tailwind CSSのCSSファイルを設定

src/input.cssに、以下のTailwind CSSの基本的な構成を記述します。

// Tailwind CSSの基本スタイルを読み込む
@tailwind base;

// Tailwind CSSが提供するコンポーネントスタイルを読み込む
@tailwind components;

// Tailwind CSSのユーティリティクラスを読み込む
@tailwind utilities;

Tailwind CSSをビルド

package.jsonを開き、scripts内に以下のコードを追加します。

{
  "scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./assets/css/style.css --watch"
  }
}

実行すると、Tailwind CSSがsrc/input.cssから指定されたスタイルを読み込み、最終的なCSSが/assets/css/style.cssに生成されます。

WordPressテーマにCSSを読み込む

最終的なCSSが/assets/css/style.cssに生成されるので、このファイルを読み込むためfunctions.phpに以下を記述します。

<?php
function my_theme_enqueue_styles()
{
  wp_enqueue_style('tailwindcss', get_template_directory_uri() . '/assets/css/style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

ビルドの実行

ビルドを行うには以下のコマンドを実行します。

npm run build

このコマンドを実行することで、Tailwindのスタイルをビルドし、assets/css/style.cssに出力されるようになります。

テンプレートでTailwind CSSを使用

それでは実際にTailwind CSSを使用して表示を確認してみましょう。

まずはスタイルを反映させるためにheader.phpとfooter.phpに最低限の記述をします。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_footer(); ?>
</body>

</html>

index.phpにTailwind CSSのユーティリティクラスを指定してみましょう。

// ヘッダー読み込み
<?php get_header(); ?>

// text-red-500クラスを指定して文字色を変更する
<h1 class="text-red-500">Tailwind CSS Test</h1>

// フッター読み込み
<?php get_footer(); ?>

今回はtext-red-500を指定してみます。文字の色が赤色に変更されればOKです。

赤文字のTailwind CSS Test

またtext-red-500クラスは、assets/css/style.cssの最後の行に自動生成されています。

自動生成されたコード

UIテンプレートを使用してみる

ネット上ではTailwind CSSを利用した無料UIテンプレートがたくさんあります。

今回はその中でTailblocksというTailwind CSS の無料UIテンプレートサイトを利用してヘッダー部分を作成してみます。

アクセスすると、左側のメニューから「HEADER」と記載があるUIコンポーネントの一番上のテンプレートを選択します。

選択したら「VIEW CODE」をクリックして表示されたコードをコピペしてheader.phpに貼り付けてみましょう。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

　// 以下追加コード
  <header class="text-gray-600 body-font">
    <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
      <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
        </svg>
        <span class="ml-3 text-xl">Tailblocks</span>
      </a>
      <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
        <a class="mr-5 hover:text-gray-900">First Link</a>
        <a class="mr-5 hover:text-gray-900">Second Link</a>
        <a class="mr-5 hover:text-gray-900">Third Link</a>
        <a class="mr-5 hover:text-gray-900">Fourth Link</a>
      </nav>
      <button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">Button
        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
          <path d="M5 12h14M12 5l7 7-7 7"></path>
        </svg>
      </button>
    </div>
  </header>

以下のように簡単にヘッダーコンポーネントを作成することができます。

UIテンプレートを使用した画像
みつた
他にもいろいろなテンプレートが用意されているのでぜひ試してみてください！

まとめ

本記事では、WordPress環境にTailwind CSSを導入する手順を解説しました。

Tailwind CSSを使用することでより効率的にサイト構築を行う事ができるようになるので、ぜひこの記事を参考にしながらTailwind CSSを導入して、開発効率を上げていただけると幸いです。

  • この記事を書いた人
  • 最新記事

みつた

完全未経験＆異業種から30歳の年でIT企業に転職。

Web系開発言語が好き。
どちらかというとバックエンドよりもフロントエンドが好き（現時点では…）

最近はサウナと観葉植物にハマっている。
野球が好きで一応投手。

-Tailwind CSS, WordPress, 環境構築