<p>我被要求為目前使用 Tailwind 的現有項目添加 1 個新主題。 </p>
<p>只有當 body 標籤類別屬性中存在「theme-name」時，新主題才會生效。</p>
<p>現有的tailwind.config.js是這樣的：</p>
const defaultTheme = require('tailwindcss/defaultTheme');
變數顏色= {
灰色的： {
預設值：'#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: '#FEDBA',
100: '#FEF8EF',
200: '#FEBE7D',
300: '#FEAA55',
400: '#FD962C',
500：'#FD8204'，
600: '#D66D02',
700: '#AE5901',
800: '#864401',
第900章：‘#5D2F01’
對比：'#FFFFFF'
}
};
色.ui = {
文本：colors.gray['800'],
textDim: 顏色.gray['500'],
邊框：colors.gray['200'],
borderDim: 顏色.gray['100'],
borderDark: 顏色.gray['500'],
背景：'#FFFFFF'，
bgDim: 顏色.gray['100'],
bgDimmer: 顏色.gray['50']
};
/**@type {import("tailwindcss").Config}*/
模組. 導出 = {
內容：['./src/**/*.{js,jsx,ts,tsx}'],
核心插件：{
preflight: false // 替換為解決順風預檢類別的一些問題的另一個
},
主題： {
延長： {
顏色： 顏色，
文字顏色：{
預設值：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.625rem”
},
盒子陰影：{
lg: '0 0 16px 8px rgba(0, 0, 0, 0.02)'
},
字體大小： {
'2xs': '0.625rem',
'3.5xl': '2rem'
},
字體系列： {
sans: ['Poppins', ...defaultTheme.fontFamily.sans],
// TODO: 安裝 Gibson 字體
單核白血球增多症: [
'加拿大型吉布森，無襯線'，
...defaultTheme.fontFamily.mono
]
// 襯線: ['icomoon, sans-serif', ...defaultTheme.fontFamily.serif]
},
z索引：{
下拉清單：1000，
模態：9000
},
過渡屬性：{
位置：'寬度，高度，左側，頂部'
},
過渡計時函數：{
'out-back': '三次貝塞爾曲線(0.34, 1.56, 0.64, 1)'
}
}
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')]
};</pre>
<p>...這個新的附加主題中只有顏色改變了。 </p>
<p>有人能給我指出正確的方向來設定這個嗎？我的 body 標籤類別屬性中已經有「主題名稱」。 </p>
<p>感謝您的指導，
克...</p> 
好的，我找到了 tailwindcss-themer，這成功了。
https://github.com/RyanClementsHax/tailwindcss-themer
const defaultTheme = require('tailwindcss/defaultTheme');
var colors = { gray: { DEFAULT: '#868692', 50: '#F9FAFB', 100: '#F5F5FA', 200: '#E9E9EE', 300: '#D1D5DB', 400: '#9CA3AF', 500: '#868692', 600: '#667085', 700: '#504F4F', 800: '#2D3047', 900: '#111827' }, primary: { DEFAULT: '#009BF5', 50: '#DBF2FF', 100: '#E5F6FE', 200: '#8FD6FF', 300: '#5CC3FF', 400: '#29B0FF', 500: '#009BF5', 600: '#0078BD', 700: '#005485', 800: '#00314D', 900: '#000D15', contrast: '#FFFFFF' }, secondary: { DEFAULT: '#744FC6', 50: '#EFEBF9', 100: '#E2DAF3', 200: '#C6B7E8', 300: '#AB94DC', 400: '#8F72D1', 500: '#744FC6', 600: '#5936A7', 700: '#42287C', 800: '#2C1B52', 900: '#150D28', contrast: '#FFFFFF' }, success: { DEFAULT: '#14CC76', 50: '#B7F8D9', 100: '#A2F6CF', 200: '#78F2B9', 300: '#4EEEA3', 400: '#24EA8D', 500: '#14CC76', 600: '#10A761', 700: '#0D824B', 800: '#095D36', 900: '#053720', contrast: '#FFFFFF' }, error: { DEFAULT: '#FC446F', 50: '#FFF9FA', 100: '#FFE5EB', 200: '#FEBCCC', 300: '#FD94AD', 400: '#FD6C8E', 500: '#FC446F', 600: '#FB0D44', 700: '#CD0332', 800: '#950225', 900: '#5E0217', contrast: '#FFFFFF' }, warning: { DEFAULT: '#FD8204', 50: '#FEDDBA', 100: '#FEF8EF', 200: '#FEBE7D', 300: '#FEAA55', 400: '#FD962C', 500: '#FD8204', 600: '#D66D02', 700: '#AE5901', 800: '#864401', 900: '#5D2F01', contrast: '#FFFFFF' }, info: { // used for alarts and status DEFAULT: '#009BF5', 50: '#DBF2FF', 100: '#E5F6FE', 200: '#8FD6FF', 300: '#5CC3FF', 400: '#29B0FF', 500: '#009BF5', 600: '#0078BD', 700: '#005485', 800: '#00314D', 900: '#000D15', contrast: '#FFFFFF' }, }; colors.ui = { text: colors.gray['800'], textDim: colors.gray['500'], border: colors.gray['200'], borderDim: colors.gray['100'], borderDark: colors.gray['500'], bg: '#FFFFFF', bgDim: colors.gray['100'], bgDimmer: colors.gray['50'] }; var colorsSB = { gray: { DEFAULT: '#868692', 50: '#F9FAFB', 100: '#F5F5FA', 200: '#E9E9EE', 300: '#D1D5DB', 400: '#9CA3AF', 500: '#868692', 600: '#667085', 700: '#504F4F', 800: '#2D3047', 900: '#111827' }, primary: { DEFAULT: '#F7941D', 50: '#FDEBDB', 100: '#FCE3CC', 200: '#F9C298', 300: '#F7AD64', 400: '#F69430', 500: '#F7941D', 600: '#F67900', 700: '#E06200', 800: '#C74A00', 900: '#A83100', contrast: '#FFFFFF' }, secondary: { DEFAULT: '#744FC6', 50: '#EFEBF9', 100: '#E2DAF3', 200: '#C6B7E8', 300: '#AB94DC', 400: '#8F72D1', 500: '#744FC6', 600: '#5936A7', 700: '#42287C', 800: '#2C1B52', 900: '#150D28', contrast: '#FFFFFF' }, success: { DEFAULT: '#14CC76', 50: '#B7F8D9', 100: '#A2F6CF', 200: '#78F2B9', 300: '#4EEEA3', 400: '#24EA8D', 500: '#14CC76', 600: '#10A761', 700: '#0D824B', 800: '#095D36', 900: '#053720', contrast: '#FFFFFF' }, error: { DEFAULT: '#FC446F', 50: '#FFF9FA', 100: '#FFE5EB', 200: '#FEBCCC', 300: '#FD94AD', 400: '#FD6C8E', 500: '#FC446F', 600: '#FB0D44', 700: '#CD0332', 800: '#950225', 900: '#5E0217', contrast: '#FFFFFF' }, warning: { DEFAULT: '#FD8204', 50: '#FEDDBA', 100: '#FEF8EF', 200: '#FEBE7D', 300: '#FEAA55', 400: '#FD962C', 500: '#FD8204', 600: '#D66D02', 700: '#AE5901', 800: '#864401', 900: '#5D2F01', contrast: '#FFFFFF' }, info: { // used for alarts and status DEFAULT: '#009BF5', 50: '#DBF2FF', 100: '#E5F6FE', 200: '#8FD6FF', 300: '#5CC3FF', 400: '#29B0FF', 500: '#009BF5', 600: '#0078BD', 700: '#005485', 800: '#00314D', 900: '#000D15', contrast: '#FFFFFF' }, }; colorsSB.ui = { text: colorsSB.gray['800'], textDim: colorsSB.gray['500'], border: colorsSB.gray['200'], borderDim: colorsSB.gray['100'], borderDark: colorsSB.gray['500'], bg: '#FFFFFF', bgDim: colorsSB.gray['100'], bgDimmer: colorsSB.gray['50'] }; /** @type {import("tailwindcss").Config} */ module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}'], corePlugins: { preflight: false // To replace with another that solves some issues with tailwind preflight classes }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('tailwindcss-themer')({ defaultTheme: { // put the default values of any config you want themed // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme extend: { colors: colors, textColor: { default: colors.ui.text, dim: colors.ui.textDim }, backgroundColor: { default: colors.ui.bg, dim: colors.ui.bgDim, dimmer: colors.ui.bgDimmer }, borderColor: { default: colors.ui.border, dim: colors.ui.borderDim, dark: colors.ui.borderDark }, borderRadius: { card: '0.625rem' }, boxShadow: { lg: '0 0 16px 8px rgba(0, 0, 0, 0.02)' }, fontSize: { '2xs': '0.625rem', '3.5xl': '2rem' }, fontFamily: { sans: ['Poppins', ...defaultTheme.fontFamily.sans], // TODO: Install Gibson font mono: [ 'canada-type-gibson, sans-serif', ...defaultTheme.fontFamily.mono ] // serif: ['icomoon, sans-serif', ...defaultTheme.fontFamily.serif] }, zIndex: { dropdown: 1000, modal: 9000 }, transitionProperty: { position: 'width,height,left,top' }, transitionTimingFunction: { 'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)' } } }, themes: [ { // name your theme anything that could be a valid css class name // remember what you named your theme because you will use it as a class to enable the theme name: 'additionalThemeName', // put any overrides your theme has here // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme extend: { colors: colorsSB, textColor: { default: colorsSB.ui.text, dim: colorsSB.ui.textDim }, backgroundColor: { default: colorsSB.ui.bg, dim: colorsSB.ui.bgDim, dimmer: colorsSB.ui.bgDimmer }, borderColor: { default: colorsSB.ui.border, dim: colorsSB.ui.borderDim, dark: colorsSB.ui.borderDark }, borderRadius: { card: '0.625rem' }, boxShadow: { lg: '0 0 16px 8px rgba(0, 0, 0, 0.02)' }, fontSize: { '2xs': '0.625rem', '3.5xl': '2rem' }, fontFamily: { sans: ['Poppins', ...defaultTheme.fontFamily.sans], // TODO: Install Gibson font mono: [ 'canada-type-gibson, sans-serif', ...defaultTheme.fontFamily.mono ] // serif: ['icomoon, sans-serif', ...defaultTheme.fontFamily.serif] }, zIndex: { dropdown: 1000, modal: 9000 }, transitionProperty: { position: 'width,height,left,top' }, transitionTimingFunction: { 'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)' } } } ] }) ] };