新しいクールな Tailwind CSS プロパティ

アクセシビリティにも配慮して進化しているところが大好きです

バージョン 3 以降の Tailwind CSS の新機能から始めましょう。バージョン 3.4 が最新なので遅れる可能性があります。

私たちのほとんどは、通常、必要な場合または必須になる場合を除き、リポジトリ内のパッケージを更新しません?

その気持ちは理解できます。だからこそ、少なくとも私は、新しいリポジトリを作成するときは必ずパッケージをアップグレードするだけだと考えています?

本題に戻りますが、私は過去 4 年間 Tailwind CSS を使用しており、とても気に入っています。私たちのほとんどは、部分 CSS やコア CSS のスタイリングに関しては、tailwind CSS を書いても優れたフロントエンド開発者にはなれないという議論を起こすかもしれません。

時間の経過とともに、tailwind CSS は単純な CSS の記述に関連したいくつかの問題を引き起こすことを経験してきましたが、それは主に構文に関連しており、要素のスタイル設定やアニメーションの追加という中心的な概念は依然として同じです。

単なる構文の違い

CSS in JSX
transform: “”, 

Tailwind CSS
transform:transition-all, 

基本を理解すれば、構文に大きな違いはありません。

アニメーションを記述する場合は JSX での CSS を好み、シンプルなスタイルを設定する場合は Tailwind を使用します。そのため、ほとんどのリポジトリには開発者が好みの構文で記述できる柔軟性が備わっています。

Tailwind CSS の新機能またはクールな点は何ですか?

Tailwind の開発者は、アクセシビリティとアニメーションにも熱心に取り組んでいます。

開発者は、単純な CSS や GSAP や Framer-motion などの他のアニメーション ライブラリと同様に、Tailwind CSS を使用して複雑なアニメーションを作成することについて懸念を表明しています。

分ける

https://tailwindcss.com/docs/divide-style

ほとんどの場合、列の間にディバイダーを追加したいと思います。これは、Divider プロパティが内部で行うことです。分割の外観が必要なフレックス順序で配置された要素に境界線の幅を追加します。

線形勾配

https://tailwindcss.com/docs/background-image#linear-gradients

スクリーンリーダー

https://tailwindcss.com/docs/screen-readers

キャレットのスタイル

https://tailwindcss.com/docs/caret-color

スナップコントロール

https://tailwindcss.com/docs/scroll-snap-type

サイズ変更

https://tailwindcss.com/docs/resize

外観

https://tailwindcss.com/docs/Appearance?source=post_page-----eeea98808df1

アクセントカラー

https://tailwindcss.com/docs/accent-color

今日はここまでです。また次回お会いしましょう

お気軽にフォローして購読してください!!

シュリー

以上が新しいクールな Tailwind CSS プロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。