Tema lalai dan 1 tema Tailwind tambahan

Question

Saya telah diminta untuk menambah 1 tema baharu pada projek sedia ada yang sedang menggunakan Tailwind.

Tema baharu hanya akan berkuat kuasa jika "nama-tema" wujud dalam atribut kelas teg badan.

现有的tailwind.config.js是这样的：

const defaultTheme = require('tailwindcss/defaultTheme');

warna var = {
  kelabu: {
    LALAI: '#868692',
    50: '#F9FAFB',
    100: '#F5F5FA',
    200: '#E9E9EE',
    300: '#D1D5DB',
    400: '#9CA3AF',
    500: '#868692',
    600: '#667085',
    700: '#504F4F',
    800: '#2D3047',
    900: '#111827'
  },
  utama: {
    LALAI: '#009BF5',
    50: '#DBF2FF',
    100: '#E5F6FE',
    200: '#8FD6FF',
    300: '#5CC3FF',
    400: '#29B0FF',
    500: '#009BF5',
    600: '#0078BD',
    700: '#005485',
    800: '#00314D',
    900: '#000D15',
    kontras: '#FFFFFF'
  },
  menengah: {
    LALAI: '#744FC6',
    50: '#EFEBF9',
    100: '#E2DAF3',
    200: '#C6B7E8',
    300: '#AB94DC',
    400: '#8F72D1',
    500: '#744FC6',
    600: '#5936A7',
    700: '#42287C',
    800: '#2C1B52',
    900: '#150D28',
    kontras: '#FFFFFF'
  },
  kejayaan: {
    LALAI: '#14CC76',
    50: '#B7F8D9',
    100: '#A2F6CF',
    200: '#78F2B9',
    300: '#4EEEA3',
    400: '#24EA8D',
    500: '#14CC76',
    600: '#10A761',
    700: '#0D824B',
    800: '#095D36',
    900: '#053720',
    kontras: '#FFFFFF'
  },
  ralat: {
    LALAI: '#FC446F',
    50: '#FFF9FA',
    100: '#FFE5EB',
    200: '#FEBCCC',
    300: '#FD94AD',
    400: '#FD6C8E',
    500: '#FC446F',
    600: '#FB0D44',
    700: '#CD0332',
    800: '#950225',
    900: '#5E0217',
    kontras: '#FFFFFF'
  },
  amaran: {
    LALAI: '#FD8204',
    50: '#FEDDBA',
    100: '#FEF8EF',
    200: '#FEBE7D',
    300: '#FEAA55',
    400: '#FD962C',
    500: '#FD8204',
    600: '#D66D02',
    700: '#AE5901',
    800: '#864401',
    900: '#5D2F01',
    kontras: '#FFFFFF'
  }
};
colors.ui = {
  teks: colors.gray['800'],
  textDim: colors.gray['500'],
  sempadan: warna. kelabu['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 = {
  kandungan: ['./src/**/*.{js,jsx,ts,tsx}'],
  corePlugins: {
    preflight: false // Untuk menggantikan dengan yang lain yang menyelesaikan beberapa isu dengan kelas tailwind preflight
  },
  tema: {
    lanjutkan: {
      warna: warna,
      Warna teks: {
        lalai: colors.ui.text,
        malap: colors.ui.textDim
      },
      warna latar belakang: {
        lalai: colors.ui.bg,
        malap: colors.ui.bgDim,
        dimmer: colors.ui.bgDimmer
      },
      Warna sempadan: {
        lalai: colors.ui.border,
        malap: colors.ui.borderDim,
        gelap: colors.ui.borderDark
      },
      sempadanRadius: {
        kad: '0.625rem'
      },
      boxShadow: {
        lg: '0 0 16px 8px rgba(0, 0, 0, 0.02)'
      },
      Saiz huruf: {
        '2xs': '0.625rem',
        '3.5xl': '2rem'
      },
      fontFamily: {
        tanpa: ['Poppins', ...defaultTheme.fontFamily.sans],
        // TODO: Pasang fon Gibson
        mono: [
          'canada-type-gibson, sans-serif',
          ...defaultTheme.fontFamily.mono
        ]
        // serif: ['icomoon, sans-serif', ...defaultTheme.fontFamily.serif]
      },
      zIndex: {
        lungsur turun: 1000,
        Modal: 9000
      },
      transitionProperty: {
        kedudukan: 'lebar, tinggi, kiri, atas'
      },
      transitionTimingFunction: {
        'luar belakang': 'kubik-bezier(0.34, 1.56, 0.64, 1)'
      }
    }
  },
  pemalam: [require('@tailwindcss/forms'), require('@tailwindcss/typography')]
};

...Hanya warna telah berubah dalam tema tambahan baharu ini.

Bolehkah sesiapa menunjukkan saya ke arah yang betul untuk menyediakannya? Saya sudah mempunyai "nama tema" dalam atribut kelas tag badan saya.

Terima kasih atas bimbingan anda, Gram...

Answer 1

Baiklah, saya menjumpai tailwindcss-themer dan ia berkesan.

https://github.com/RyanClementsHax/tailwindcss-themer

const defaultTheme = memerlukan('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)'
            }
          }
        }
      ]
    })
  ]
};