出来上がったものはこちらです
https://github.com/8bitTD/password_dioxus
なぜこの記事を書こうと思ったのか
前からTailwind CSSが気になっていて、ツールを作るついでに使ってみました。
今回はTailwind CSSを初めて使った感想の記事になります。
Tailwind CSSとは
このへんに詳しい説明が乗っておりますが、簡単に言うとclass部分にスペース区切りで決められた文字を入力して、イケてる見た目にする機能です。
Tailwind CSSを使ってみて良いと思ったところ
やはり短く書けるのがすごく良いなと思いました。
paddingやmarginを p-4 や m-4 みたいに書けて、慣れるとすぐわかるのが良かったです。
また、横幅の1/3のwidthにしたい場合は、 w-1/3 みたいに直感的に書けて便利でした。
あと、ウィンドウの真ん中に表示したい場合は上の方に h-screen flex justify-center items-center と書くだけで良くてここも良かった点です。
Tailwind CSSを使ってみて良くないと思ったところ
個人的に色の指定が面倒に感じました。
bg-black や text-blue-500 など色設定はわかるのですが、ライトモードとダークモード対応でパーツごとにclassに書き込むのが苦痛でした。
自分の場合はそんなに凝った色設定は必要ないので、色は別のCSSファイルでコンポーネントごとに一括管理したほうが良さそうな気がしました。
また、アニメーションもあまり直感的に設定できなくて苦労しました。
特にボタンを押すと文字をアニメーションをさせた後に消すというものは、dioxusの変数で別途管理したほうが簡単な気がしました。
結論
Tailwind CSSは色とアニメーション以外の見た目の箇所に使うといい感じでした！
参考にさせていただいたサイト
https://tailwindcss.com/
https://www.tohoho-web.com/ex/tailwind.html
https://qiita.com/Masahiro111/items/f7d6ad8280ae92717f0f