【2024年】WordPressにTailwind CSSを入れる方法

今回はCSSのフレームワークとして絶大の人気を誇っているTailwindをWordpressに導入する方法を手順付きで紹介します！

この記事は、2023年に作成されましたが、2024年も有効であることを確認しております。

以下の手順を行うときは充分な注意をして行ってください！データ損失などの責任は一切負いかねます。

前提：Node.jsが必要

Tailwindを使用するにはサーバーにNode.jsとパッケージマネージャーのnpm（yarnでも可）が必要です。

以前の記事でXserverにNode.jsをインストールする方法を解説したのでこちらを参照してください。

今回は、Node.jsとnpmがインストールされているという前提で作業を進めていきます。

Tailwind CSSをインストール

まずは、npmを使ってインストールしますが、もしpackage.jsonがない場合は初期化しておきます。package.jsonが入っている場合は不要です。

npm init -y

package.jsonが作成されているのを確認したら、Tailwind CSS をインストールします。

npm i tailwindcss --save-dev

インストールできたら、初期化をしていきましょう。

npx tailwindcss init

tailwind.config.jsというファイルが作成されたかと思います。

全ての.phpのファイルにtailwindのマークダウンを適用したいので、tailwind.config.jsのファイルを編集します。

module.exports = {
  content: ["./**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
} 

その後、package.jsonなどが含まれているディレクトリの中にtailwind.cssというファイルを作成してください。そして、次のようなコードを入れます。

/*　style.cssの内容を上にペーストしてください　*/

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

ここで注意！

style.cssの内容も使用したい場合は、必ずその内容も全てペーストするようにしてください。そうでないと、style.cssがこの後上書きされるので、使用できなくなります。

最後に、style.cssにtailwindの内容を上書きすれば完成です。

npx tailwindcss -i ./tailwind.css -o ./style.css --watch

–watchコマンドにすると、ファイルを保存する度にtailwind.css・style.cssの内容が変わるので、ほぼリアルタイムでHTMLに記述したtailwindのコードが反映されるようになります。（見た目が変わらない場合はForce Reloadするのをお忘れなく！）

CSSのテーマファイルに変更が必要な場合は、tailwind.cssに入力するようにしてください。

意外に簡単にTailwind CSSが使えるようになる

いかがでしたでしょうか。Tailwind CSSは使いこなすことができれば非常に便利なフレームワークなので、ぜひサイトデザインに役立てて見てくださいね。