この記事では、Tailwind CSS の静的ユーティリティを使用する方法を説明します。
Tailwind で静的ユーティリティを使用するにはどうすればよいですか?
Tailwind で静的ユーティリティを使用するには、「 addUtilities() 「tailwind.config.js」ファイル内の「」関数を使用して、必要な静的ユーティリティを構成します。次に、HTML プログラムで静的ユーティリティを使用し、HTML Web ページを表示するときに静的ユーティリティが適切に動作することを確認します。
次の手順を見てみましょう。
ステップ 1: 「tailwind.config.js」ファイルで静的ユーティリティを構成する
「」を開きます tailwind.config.js 」ファイルを作成し、「 プラグイン ' セクション。次に、「」を使用します。 addUtilities() 」機能を使用して、必要な静的ユーティリティを設定します。たとえば、次の静的ユーティリティを構成しました。
const プラグイン = require('tailwindcss/plugin')
module.exports = {
コンテンツ: ['./index.html']、
プラグイン: [
プラグイン(関数({ addUtilities }) {
addUtilities({
'.content-auto': {
'コンテンツの可視性': '自動',
}、
'.content-hidden': {
'content-visibility': '非表示',
}、
'.bg-coral': {
背景：「サンゴ」
}、
'.skew-5deg': {
変換: 'skewY(-5deg)',
}、
})
})
】
};
ここ：
- ” addUtilities() 」関数は、ユーティリティ クラスとそれに対応するスタイルを含むオブジェクトを提供することにより、カスタム静的ユーティリティを登録します。
- ” .content-auto 」ユーティリティ クラスは、content-visibility プロパティを auto に設定します。
- ” .content-hidden 」ユーティリティ クラスは、content-visibility プロパティを hidden に設定します。
- ” .bg-coral 」ユーティリティ クラスは背景にサンゴの色を設定します。
- ” .skew-5deg 」ユーティリティ クラスは、transform プロパティを skewY(-5deg) に設定します。
ステップ 2: HTML プログラムで静的ユーティリティを使用する
次に、HTML プログラムで必要な静的ユーティリティを使用します。
< ディビジョン クラス = 「h-screen bg-コーラル」 >
< p クラス = 「コンテンツ自動」 >こんにちは< / p >
< p クラス = 「コンテンツ非表示」 >ようこそ< / p >
< p クラス = 「スキュー-5度」 >テキストを変換< / p >
< / ディビジョン >
< / 体 >
ステップ 3: 出力を確認する
最後に、HTML プログラムを実行して、静的ユーティリティが適切に動作していることを確認します。
上記の出力は、静的ユーティリティが定義に従って適切に動作していることを示しています。
結論
Tailwind で静的ユーティリティを使用するには、「 addUtilities() 「tailwind.config.js」ファイル内の「」関数を使用して、必要な静的ユーティリティを構成します。 「addUtilities()」関数は、HTML プログラムに直接適用できるユーティリティ クラスを追加します。この記事では、Tailwind CSS で静的ユーティリティを使用する方法を説明しました。