Tailwind CSS は「 クリア 」 浮動要素の隣にある特定の要素の動作を制御するユーティリティ。たとえば、「clear-left」および「clear-right」ユーティリティ クラスを使用すると、開発者は、指定した要素をコンテナ内の任意の left-floated または right-floated 要素の下に移動させることができます。ただし、場合によっては、ユーザーが特定の要素に適用されているクリアを無効にして、フローティング要素の隣に表示できるようにしたい場合があります。このような状況では、「clear-none」ユーティリティを利用して要素のデフォルト値を定義できます。
この記事では、Tailwind CSS で適用されているすべてのクリアを無効にする手順を例に説明します。
Tailwind で適用されたすべてのクリアを無効にする方法は?
Tailwind で適用されたすべてのクリアを無効にするには、HTML ファイルを作成し、「 クリアなし 」ユーティリティ クラスを HTML プログラム内の目的の要素に含めます。このユーティリティは、特定の要素に適用されている「クリア」をリセットし、デフォルト値を定義します。
構文
< エレメント クラス = 「クリアなし」 > ... エレメント >
例
この例では、「」を使用します。 クリアなし ”ユーティリティと” 」要素を使用して、適用されたクリアをリセットし、左側と右側にフローティングできるようにします。
< 体 >
< ディビジョン クラス = 「h-96 mx-10 p-8 bg-sky-500」 >
< 画像 送信元 = 'tailwindcss_img.png' クラス = 「float-left p-3 w-28 h-24」 すべての = '画像' />
< 画像 送信元 = 'tailwindcss_img.png' クラス = 「フロート右 p-3」 すべての = '画像' />
< p クラス = 「クリアなし」 > Tailwind CSS が提供するのは、 'クリア' 要素の周りのコンテンツのラッピングを制御するユーティリティ。
この例では、要素に適用されたすべてのクリアを無効にする方法を示します。特定の要素に適用されたクリアをリセットするには、 「クリアなし」 ユーティリティが使われます。 p >
ディビジョン >
体 >
ここ：
- 「 フロート左 」クラスは、
要素をコンテナの左側にフローティングします。
- 「 右フロート 」クラスは、
要素をコンテナの右側にフローティングします。
- 「 クリアなし ” クラスは、
要素に適用されたクリアを無効にし、要素を両側でフロートできるようにします。
出力
上記の Web ページでは、コンテンツがコンテナの両側に浮いていることがわかります。これは、適用されたすべてのクリアが指定された要素から無効になったことを示します。
結論
Tailwind で適用されたすべてのクリアを無効にするには、「 クリアなし 」ユーティリティ クラスを HTML プログラム内の目的の要素に含めます。このユーティリティは、特定の要素に適用されているクリアをリセットし、デフォルト値を指定します。確認するには、Web ページに移動して変更を表示します。この記事では、Tailwind CSS で適用されたすべてのクリアを無効にする例を示しました。