Akiyama Yusuke

2019年の1月からフロントエンドエンジニアになりました。 Next.js, TypeScript, Tailwindcss, Storybook, Firebaseが好きです。 エンジニアで気軽に話せる仲間増やしたい！！

Akiyama Yusuke

2019年の1月からフロントエンドエンジニアになりました。 Next.js, TypeScript, Tailwindcss, Storybook, Firebaseが好きです。 エンジニアで気軽に話せる仲間増やしたい！！

Tailwindcssでボタンを作ってみました。

以下のTailwindcssの公式のサンプルを参考にして作ってみました。 Tailwindcssのボタンのサンプルコードボタンを参考にしましたがフォントサイズを少し下げて、ホバー時にボックスシャドウを効かせたり調整してみました。 また、2つ目のアローが動くサンプルは、「group-hover」を使いたかったのですがCDNの方では使えないようだったのでCSSで自分で追加してみました。必要な箇所だけCSSで追加してみても良いかもしれないですね。

Akiyama Yus…

    • TailwindcssでMaterialUI風カードデザイン作りました 🎉

      Tailwindcssとは、ユーティリティファーストのCSSフレームワークです。 ユーティリティファーストなのでCSS設計など関係ないので、さまざまなCSS設計の戦争に参加しなくても良い画期的な方法だと個人的にはおもいます！ サンプルのコンポーネントを作ってみました！コンポーネントフレームワークの「Material UI」のカードのデザインを参考にカードデザインを作ってみました！ Codepenで作っておいたので簡単に動作確認&コピペできるかと思います。Tailwind

      Akiyama Yus…

      • 「TailwindUI」購入してみました。

        「TailwindUI」とは「Tailwindcss」というユーティリティファーストのCSSフレームワークのコンポーネント集です。 「Tailwindcss」とはHTML/React/Vueなどで使えるユーティリティファーストのCSSフレームワークです。 CSSフレームワークというと「Bootstrap」や「Bluma」などがあり コンポーネントのフレームワークだと「MaterialUI」や「Vuetify」が有名ですね。 「Tailwindcss」は他のCSSフレーム

        Akiyama Yus…