2023年モダンCSSの最新トレンド in tailwindcss

2023-04-16

a year ago

開発環境

こちらのウェビナーの内容の一部をtailwind版で紹介します。

Findyさんのウェビナーにはちょこちょこ参加させていただいています。

色々なテーマで定期的に開催されているので、情報収集にはおすすめです。

この記事では4/13に行われた「鹿野さんに聞く！2023年モダンCSSの最新トレンド」の中で紹介されていたテクニックの3つを厳選して、tailwind 版で紹介します。

<p className='bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent'>
  グラデーションテキスト
</p>

サンプルでは緑→青にグラデーションをかけています。

他の色の設定などは公式を参照してみてください。

<div className='h-20 bg-white bg-opacity-5 backdrop-blur' />

こちらの要素を画像などの上に配置するとぼやけた状態で背景が透過しているのが確認できます。

cssでできるとは・・

公式にサンプルがありますのでこちら参考にしてください。

紹介した3つのテクニックは使用したことがなかったですが、できること自体知りませんでした。

改めてCSSは奥が深いなと感じたので、継続してキャッチアップしていくことが大事ですね。