🍃
【Dioxus】tailwindcss v4 でスタイリングを適用させる方法
結論
公式のinstallation通りに行ったところ成功しました。
-
npm install tailwindcss @tailwindcss/cliを実行する。 - imput.css に
@import "tailwindcss";とだけ書く。 -
npx @tailwindcss/cli -i ./input.css -o ./assets/tailwind.css --watchを実行する。 - 反映された！
環境
- MacBook Air M2 macOS Sequoia 15.3.1
- dioxus 0.6.0
- npm 11.1.0
やり方
以降は下記リンク先を参考に進めます。
ページを開いたら、「Tailwind CLI」タブを開きます。
下記コマンドでtailwindcss と @tailwindcss/cliをインストールします。
npm install tailwindcss @tailwindcss/cli
インストールできたら、tailwind.cssを開いて下記を記述します。
@import "tailwindcss";
npxコマンドを実行します。
この際、./src/input.cssと./src/output.cssは自分のプロジェクトにあわせて書き換えます。
output.cssは最終的に吐き出されるCSSのファイルになります。
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
例えばdioxusの場合、dx new プロジェクト名 で作成されたディレクトリなら下記の通り変更します。
-
input.cssはプロジェクトのルートに配置されているので、./src/input.cssから./input.cssへ -
output.cssはassets/tailwind.cssとしたいため、./src/output.cssからassets/tailwind.cssへ
最終的に実行するコマンドは下記になります。
npx @tailwindcss/cli -i ./input.css -o ./assets/tailwind.css --watch
参考文献
この記事を書いた背景
下記のように、tailwindcssのコマンドを実行しているにもかかわらずスタイル（この場合背景色のbg-cyan-500）が適用されない事象が発生していました。
先述した流れで正しく実行した後は、ちゃんと背景色が適用されました。
Discussion