デフォルトのテーマと 1 つの追加の Tailwind テーマ
<p>現在 Tailwind を使用している既存のプロジェクトに新しいテーマを 1 つ追加するように依頼されました。 </p>
<p>新しいテーマは、body タグのクラス属性に「テーマ名」が存在する場合にのみ有効になります。</p>
<p>あるtailwind.config.jsは次のとおりです：</p>
<pre class="brush:php;toolbar:false;">constdefaultTheme = require('tailwindcss/defaultTheme');
var 色 = {
グレー： {
デフォルト: '#868692'、
50: '#F9FAFB'、
100: '#F5F5FA'、
200: '#E9E9EE'、
300: '#D1D5DB',
400: '#9CA3AF',
500: '#868692',
600: '#667085',
700: '#504F4F'、
800: '#2D3047',
900: '#111827'
}、
主要な： {
デフォルト: '#009BF5'、
50: '#DBF2FF'、
100: '#E5F6FE',
200: '#8FD6FF'、
300: '#5CC3FF',
400: '#29B0FF',
500: '#009BF5'、
600: '#0078BD'、
700: '#005485',
800: '#00314D',
900: '#000D15',
コントラスト: '#FFFFFF'
}、
セカンダリ: {
デフォルト: '#744FC6'、
50: '#EFEBF9'、
100: '#E2DAF3'、
200: '#C6B7E8'、
300: '#AB94DC'、
400: '#8F72D1'、
500: '#744FC6'、
600: '#5936A7'、
700: '#42287C'、
800: '#2C1B52'、
900: '#150D28'、
コントラスト: '#FFFFFF'
}、
成功： {
デフォルト: '#14CC76'、
50: '#B7F8D9'、
100: '#A2F6CF'、
200: '#78F2B9'、
300: '#4EEEA3'、
400: '#24EA8D'、
500: '#14CC76'、
600: '#10A761'、
700: '#0D824B',
800: '#095D36'、
900: '#053720',
コントラスト: '#FFFFFF'
}、
エラー： {
デフォルト: '#FC446F'、
50: '#FFF9FA'、
100: '#FFE5EB',
200: '#FEBCCC',
300: '#FD94AD'、
400: '#FD6C8E'、
500: '#FC446F'、
600: '#FB0D44'、
700: '#CD0332',
800: '#950225',
900: '#5E0217',
コントラスト: '#FFFFFF'
}、
警告： {
デフォルト: '#FD8204'、
50: '#FEDDBA'、
100: '#FEF8EF',
200: '#FEBE7D'、
300: '#FEAA55',
400: '#FD962C'、
500: '#FD8204'、
600: '#D66D02'、
700: '#AE5901',
800: '#864401',
900: '#5D2F01',
コントラスト: '#FFFFFF'
}
};
color.ui = {
テキスト：colors.gray['800']、
textDim:colors.gray['500'],
ボーダー：colors.gray['200']、
borderDim: Colors.gray['100'],
borderDark: Colors.gray['500'],
bg: '#FFFFFF',
bgDim: Colors.gray['100'],
bgDimmer: Colors.gray['50']
};
/**@type {import("tailwindcss").Config}*/
module.exports = {
コンテンツ: ['./src/**/*.{js,jsx,ts,tsx}'],
コアプラグイン: {
preflight: false // tailwind プリフライト クラスの問題を解決する別のクラスに置き換える
}、
テーマ： {
伸ばす： {
色: 色、
テキストの色： {
デフォルト：colors.ui.text、
ディム：colors.ui.textDim
}、
背景色: {
デフォルト：colors.ui.bg、
ディム：colors.ui.bgDim、
ディマー:colors.ui.bgDimmer
}、
ボーダの色： {
デフォルト：colors.ui.border、
ディム：colors.ui.borderDim、
ダーク: Colors.ui.borderDark
}、
境界半径: {
カード:「0.625レム」
}、
ボックスシャドウ: {
lg: '0 0 16px 8px rgba(0, 0, 0, 0.02)'
}、
フォントサイズ： {
'2xs': '0.625rem',
'3.5xl': '2レム'
}、
フォントファミリー： {
sans: ['ポピンズ', ...defaultTheme.fontFamily.sans],
// TODO: Gibson フォントをインストールする
単核症： [
'カナダタイプギブソン、サンセリフ',
...defaultTheme.fontFamily.mono
】
// セリフ: ['icomoon, サンセリフ', ...defaultTheme.fontFamily.serif]
}、
zインデックス: {
ドロップダウン: 1000、
モーダル: 9000
}、
遷移プロパティ: {
位置: '幅、高さ、左、上'
}、
遷移タイミング関数: {
'アウトバック': '立方体ベジェ(0.34, 1.56, 0.64, 1)'
}
}
}、
プラグイン: [require('@tailwindcss/forms'), require('@tailwindcss/typography')]
};</pre>
<p>...この新しいアドオン テーマでは色のみが変更されています。 </p>
<p>誰かがこれを設定するための正しい方向を教えてくれませんか? bodyタグのクラス属性にはすでに「テーマ名」が含まれています。 </p>
<p>ご指導ありがとうございます。
グラム...</p>
