TailwindcssでMaterialUI風カードデザイン作りました 🎉
Tailwindcssとは、ユーティリティファーストのCSSフレームワークです。
ユーティリティファーストなのでCSS設計など関係ないので、さまざまなCSS設計の戦争に参加しなくても良い画期的な方法だと個人的にはおもいます！
サンプルのコンポーネントを作ってみました！
コンポーネントフレームワークの「Material UI」のカードのデザインを参考にカードデザインを作ってみました！
Codepenで作っておいたので簡単に動作確認&コピペできるかと思います。Tailwindcssに興味がある人の参考になればと思います！
できなかったところ
- 当然ですがripple efectの表現ができないのは残念ですね...。
- ボタンを押した後のアクションなどの指定をしたかったのですが設定ファイルに記述が必要でCDNでは無理そうでした。
→したがってフォーカス時の色を変えるような指定で対応してみました。
ひとこと
こまったときは、公式ドキュメントがしっかりしているので最初は調べること多いかもですが慣れると直感で大体わかるのでとても良いかと思います！
また他のコンポーネントにも挑戦してみようと思います😆
この記事が気に入ったらサポートをしてみませんか？