Tailwind でバックグラウンド クリップでブレークポイントとメディア クエリを使用する方法

Tailwind Debakkuguraundo Kurippudeburekupointotomedia Kueriwo Shi Yongsuru Fang Fa



Web ページにさまざまなセクションを作成するときに、プログラマーがコンテンツを蓄積するために背景をクリップしたり変更したりする必要があるシナリオが発生する可能性があります。この方法は、追加されたコンテンツを効果的に管理したり、さまざまなページ セクションのスタイルを設定したりするのに役立ちます。

このブログでは、次の中心的な概念について詳しく説明します。

Tailwind でバックグラウンド クリップを使用してブレークポイントとメディア クエリを使用/活用する方法は?

” bg-クリップ-{キーワード} 」ユーティリティは、要素の背景の境界ボックスを設定するために使用されます。このユーティリティは、「 パディングボックス '、' ボーダーボックス '、' コンテンツボックス '、 そして ' テキストボックス ”。





例 1: Tailwind で背景クリップを使用してブレークポイントを適用する

この例では、適用された「」を介して背景クリップにブレークポイントを適用します。 bg-クリップ-{キーワード} 「」を備えたユーティリティ MD ” つまり、中型の画面と” LG 」つまり、大画面クラス:




< html >
< 頭 >
< メタ 文字コード = 「utf-8」 >
< メタ 名前 = 「ビューポート」 コンテンツ = 'width=デバイス幅、初期スケール=1' >
< 脚本 送信元 = 「https://cdn.tailwindcss.com」 >< / 脚本 >
< / 頭 >
< 体 >
< テキストエリア クラス = 「bg-clip-border p-6 bg- yellow-500 border-4 border-red-500 border-dashed md:bg-clip-text lg:bg-clip-padding」 > これはTailwind CSSです < / テキストエリア >
< / 体 >
< / html >

これらのコード行によると、次のようになります。



  • まず、Tailwind 機能を使用するための CDN パスを指定します。
  • 次に、「」を含む「