Tailwind.cssのインストール

公式サイトのドキュメントを参考に、Tailwindcssを構築していきます。

手順①

content: [“./src/**/*.{html,js}”]

こちらはテンプレートのパスの設定に関する記述です。「src」ディレクトリ内の全てのhtmlとjsファイルを対象するといった内容になります。しかし、今回「src」ディレクトリは作成せず、さらにphpファイルも対象に加えたいので、以下の設定を行います。

content: [“*.{php,html,js}”]

この設定を行いました。それ以外の部分は、ドキュメントに従って進めています。

scriptsコマンド

手順②

node.jsを実行するためのコマンドを追加します。

npx tailwindcss -i ./src/input.css -o ./dist/output.css –watch

上記のドキュメントのコマンドを以下のように変更します。

npx tailwindcss -i ./input.css -o ./dist/output.css –watch

こちらを「dev」コマンドに登録します。

コマンドを同時に実行する方法

手順③

BrowserSyncの起動コマンドと、先程設定したtailwindcssのコマンドを同時に実行する必要があります。そのため、コマンドを&で連結して実行します。

package.json

"start": "npm run watch & npm run dev"

コマンドを実行すると、すぐに「dist」ディレクトリが作成されたのを確認できました。
さらに、テストとして「index.php」を作成し、Tailwind CSSのクラスを記述してみたところ、「output.css」に正しく出力されているのが確認できました。
このスタイルをページに適用することで、Tailwind CSSを使用できるようになります。