2024.09.05
wordpressでtailwind cssを使用しよう！
まず前提条件として、以下のものを実行していることを想定しています。
ホットリロードを実行しています。
LocalByFlyWheelのWordPressをBrowserSyncでホットリロードをしよう！！
wpにtailwindを取り入れたい場合は参考にしていただけますと幸いです。
弊社では基本的にtailwindは使用していませんでした。しかし、tailwind cssで書かれたソースコードをwpに流用する必要がある案件があったためwpにtailwindに取り入れました。
問題点としては、buildしたcssファイルがgit管理した際にコンフリクトを引き起こしてしまうことです。
解決方法としては、各開発者のブランチを作成して、そのブランチではbuildしたcssファイルの出力場所であるdistファイルはgitignoreで無視していました。
そしてデプロイ作業時にmainに各作業をマージして、buildすることでコンフリクトを回避していました。私が紹介する方法ですと複数開発者での開発ですと何かしらの解決策が必要になってきますがご了承ください。
package.json にライブラリを追加しよう
dependenciesとscriptsに以下を追加してください。
"dependencies": {
....既存パッケージ
"tailwindcss": "^3.0.0",
"postcss": "^8.0.0",
"autoprefixer": "^10.0.0"
},
"scripts": {
....既存処理
"build": "npx tailwindcss -i ./src/tailwind.css -o ./dist/style.css --watch"
}その後、npm install をしてtailwindcss、postcss、autoprefixerをインストールしてください。
Tailwind CSSの設定ファイルの作成
npx tailwindcss init をして設定ファイルを作成しましょう。
tailwind.config.jsを以下のように編集しましょう。マークアップを書くファイルに適応されるようにcontentを編集してください。
module.exports = {
content: ["./**/*.php"],
theme: {
extend: {},
},
plugins: [],
}
CSSファイルの作成してCSSのビルドをする
以下のファイルを共通cssに読み込んでください
@tailwind base;
@tailwind components;
@tailwind utilities;その後ターミナルでCSSのビルドをしてください。ビルド後は自動的にクラスの変更後に再ビルドが走るようになっています。
npm run buildWordPressテーマにCSSを読み込む
functions.phpでビルドしたファイルを読み込みましょう
function enqueue_tailwindcss() {
wp_enqueue_style('tailwindcss', get_template_directory_uri() . '/dist/style.css', array(), null);
}
add_action('wp_enqueue_scripts', 'enqueue_tailwindcss');ホットリロードをの設定を変更しよう
bs-config.jsの内容にdistを読み込むように設定を追加しましょう。これでビルド後のファイルもホットリロードされるはずです。
module.exports = {
proxy: "cocoworks.local",
files: [
//既存の処理
"dist/**/*.css",
],
};以上で完了です！お疲れ様でした！
少し設定は面倒ですが、やはりtailwindcssは便利で命名する手間が省けるのは楽だなと感じてます！
tailwindcssで開発されたものをwpに移したいケースは稀だと思いますが、単純にtailwindcssを愛用している方や試してみたい方、私のようにtailwindcssで書かれたコードを流用したい方などは参考になれば幸いです。
最後にはなりますが、web開発やウェブ制作についてお困り事がありましたら、お気軽にご相談ください。
ブログカテゴリー
