この記事では、Tailwind でプリセットを作成する完全な手順について詳しく説明します。
Tailwind で「プリセット」を作成するには?
追い風」 プリセット 」は、「tailwind.config.js」構成ファイルで指定されているのと同じ構成を指定する通常の構成オブジェクトとみなされます。 「プリセット」ファイルはデフォルトでは作成されませんが、以下の手順に従って作成できます。
ステップ 1: 「プリセット」ファイルを作成する
まず、「」を作成します。 プリセット.js 」ファイルを Tailwind プロジェクトに追加し、拡張機能、テーマのオーバーライド、プラグインの追加など、必要な構成オプションをすべて追加します。
// プリセットの例
モジュール。 輸出 = {
テーマ : {
色 : {
青 : {
ライト : 「#85d7ff」 、
デフォルト : 「#1fb6ff」 、
暗い : 「#009サドル」 、
} 、
ピンク : {
ライト : 「#ff7ce5」 、
デフォルト : 「#ff49db」 、
暗い : 「#ff16d1」 、
} 、
グレー : {
最も暗い : 「#1f2d3d」 、
暗い : '#3c4858' 、
デフォルト : '#c0cc内' 、
ライト : 「#e0e6ed」 、
最軽量 : 「#f9fafc」 、
}
} 、
フォントファミリー : {
それなし : [ 'グラフィック' 、 'サンセリフ' 】 、
} 、
プレス ' Ctrl+S 」をクリックして上記ファイルを保存します。
ステップ 2: 「tailwind.config.js」ファイルを編集する
次に、「」に移動します。 tailwind.config.js ” 構成ファイルで、テンプレート パスの名前を指定するだけでなく、” プリセット.js ” ファイルに” プリセット ” キーワード:
モジュール。 輸出 = {
コンテンツ : [
「./index.html」 、
「./src/**/*.{js,ts,jsx,tsx}」 、
】 、
プリセット : [
( 「プリセット.js」 )
】
}
プレス ' Ctrl+S 」をクリックしてファイルを保存します。
ステップ 3: アプリケーションを実行する
ここで、既存の「」を実行します。 高速プロジェクト 次のコマンドを入力して、開発サーバーで「」を実行します。
npm 実行開発 
最後に、「localhost」リンクをクリックして出力を表示します。
出力
ご覧のとおり、出力は「Tailwind CSS」スタイルを備えた vite プロジェクトを返します。
結論
Tailwind で、「」を作成します。 プリセット 」ファイルをプロジェクトに追加し、「」のすべての構成を指定します。 tailwind.config.js 」ファイルがその中にあります。その後、「preset」キーワードを使用して「tailwind.config.js」ファイル内の「preset.js」ファイルを指定します。新しく作成された「preset.js」ファイルは、「tailwind.config.js」ファイルと同じように、指定されたテンプレートにすべてのカスタム CSS を埋め込みます。この記事では、Tailwind でプリセットを作成する完全な手順を説明しました。