デフォルトのテーマと 1 つの追加の Tailwind テーマ

Question

現在 Tailwind を使用している既存のプロジェクトに新しいテーマを 1 つ追加するように依頼されました。

新しいテーマは、body タグのクラス属性に「テーマ名」が存在する場合にのみ有効になります。

あるtailwind.config.jsは次のとおりです：

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

...この新しいアドオン テーマでは色のみが変更されています。

誰かがこれを設定するための正しい方向を教えてくれませんか? bodyタグのクラス属性にはすでに「テーマ名」が含まれています。

ご指導ありがとうございます。 グラム...

Answer 1

わかりました。tailwindcss-themer を見つけました。うまくいきました。

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

constdefaultTheme = require('tailwindcss/defaultTheme');

リーリー