suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Standardthema und 1 zusätzliches Tailwind-Thema

<p>Ich wurde gebeten, einem bestehenden Projekt, das derzeit Tailwind verwendet, ein neues Theme hinzuzufügen. </p> <p>Das neue Theme wird nur wirksam, wenn „theme-name“ im Body-Tag-Klassenattribut vorhanden ist.</p> <p>现有的tailwind.config.js是这样的:</p> <pre class="brush:php;toolbar:false;">const defaultTheme = require('tailwindcss/defaultTheme'); var farben = { grau: { STANDARD: '#868692', 50: '#F9FAFB', 100: '#F5F5FA', 200: '#E9E9EE', 300: '#D1D5DB', 400: '#9CA3AF', 500: '#868692', 600: '#667085', 700: '#504F4F', 800: '#2D3047', 900: '#111827' }, primär: { STANDARD: '#009BF5', 50: '#DBF2FF', 100: '#E5F6FE', 200: '#8FD6FF', 300: '#5CC3FF', 400: '#29B0FF', 500: '#009BF5', 600: '#0078BD', 700: '#005485', 800: '#00314D', 900: '#000D15', Kontrast: '#FFFFFF' }, sekundär: { STANDARD: '#744FC6', 50: '#EFEFBF9', 100: '#E2DAF3', 200: '#C6B7E8', 300: '#AB94DC', 400: '#8F72D1', 500: '#744FC6', 600: '#5936A7', 700: '#42287C', 800: '#2C1B52', 900: '#150D28', Kontrast: '#FFFFFF' }, Erfolg: { STANDARD: '#14CC76', 50: '#B7F8D9', 100: '#A2F6CF', 200: '#78F2B9', 300: '#4EEEA3', 400: '#24EA8D', 500: '#14CC76', 600: '#10A761', 700: '#0D824B', 800: '#095D36', 900: '#053720', Kontrast: '#FFFFFF' }, Fehler: { STANDARD: '#FC446F', 50: '#FFF9FA', 100: '#FFE5EB', 200: '#FEBCCC', 300: '#FD94AD', 400: '#FD6C8E', 500: '#FC446F', 600: '#FB0D44', 700: '#CD0332', 800: '#950225', 900: '#5E0217', Kontrast: '#FFFFFF' }, Warnung: { STANDARD: '#FD8204', 50: '#FEDDBA', 100: '#FEF8EF', 200: '#FEBE7D', 300: '#FEAA55', 400: '#FD962C', 500: '#FD8204', 600: '#D66D02', 700: '#AE5901', 800: '#864401', 900: '#5D2F01', Kontrast: '#FFFFFF' } }; farben.ui = { Text: farben.gray['800'], textDim: farben.gray['500'], Grenze: farben.gray['200'], borderDim: farben.gray['100'], borderDark: farben.gray['500'], bg: '#FFFFFF', bgDim: farben.gray['100'], bgDimmer: farben.gray['50'] }; /**@type {import("tailwindcss").Config}*/ module.exports = { Inhalt: ['./src/**/*.{js,jsx,ts,tsx}'], corePlugins: { preflight: false // Zum Ersetzen durch eine andere, die einige Probleme mit Tailwind-Preflight-Klassen löst }, Thema: { verlängern: { Farben: Farben, Textfarbe: { Standard: farben.ui.text, dim: farben.ui.textDim }, Hintergrundfarbe: { Standard: farben.ui.bg, dimmen: farben.ui.bgDim, Dimmer: farben.ui.bgDimmer }, Randfarbe: { Standard: farben.ui.border, dim: farben.ui.borderDim, dunkel: farben.ui.borderDark }, borderRadius: { Karte: '0.625rem' }, Box Schatten: { lg: '0 0 16px 8px rgba(0, 0, 0, 0,02)' }, Schriftgröße: { '2xs': '0.625rem', '3,5xl': '2rem' }, Schriftfamilie: { sans: ['Poppins', ...defaultTheme.fontFamily.sans], // TODO: Gibson-Schriftart installieren Mono: [ 'canada-type-gibson, serifenlos', ...defaultTheme.fontFamily.mono ] // serif: ['icomoon, sans-serif', ...defaultTheme.fontFamily.serif] }, zIndex: { Dropdown: 1000, Modal: 9000 }, TransitionProperty: { Position: 'Breite, Höhe, links, oben' }, TransitionTimingFunction: { 'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)' } } }, Plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')] };</pre> <p>...Nur die Farben haben sich in diesem neuen Add-on-Theme geändert. </p> <p>Kann mir jemand in die richtige Richtung zeigen, wie ich das einrichten kann? Ich habe bereits „Themenname“ in meinem Body-Tag-Klassenattribut. </p> <p>Vielen Dank für Ihre Anleitung, Gramm...</p>
P粉285587590P粉285587590451 Tage vor469

Antworte allen(1)Ich werde antworten

  • 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)'
                }
              }
            }
          ]
        })
      ]
    };

    Antwort
    0
  • StornierenAntwort