搜尋

首頁  >  問答  >  主體

預設主題和 1 個附加 Tailwind 主題

<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>
P粉285587590P粉285587590493 天前500

全部回覆(1)我來回復

  • P粉738046172

    P粉7380461722023-09-05 00:15:13

    好的，我找到了 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)'
            }
          }
        }
      ]
    })
  ]
};

    回覆
    0
  • 取消回覆