기본 테마 및 추가 Tailwind 테마 1개

Question

현재 Tailwind를 사용하고 있는 기존 프로젝트에 새 테마 1개를 추가하라는 요청을 받았습니다.

새 테마는 body 태그 클래스 속성에 "theme-name"이 있는 경우에만 적용됩니다.

유익한 tailwind.config.js是这样的：

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: '#FEDDBA',
    100: '#FEF8EF',
    200: '#FEBE7D',
    300: '#FEAA55',
    400: '#FD962C',
    500: '#FD8204',
    600: '#D66D02',
    700: '#AE5901',
    800: '#864401',
    900: '#5D2F01',
    대비: '#FFFFFF'
  }
};
colors.ui = {
  텍스트: colors.gray['800'],
  textDim: colors.gray['500'],
  테두리: colors.gray['200'],
  borderDim: colors.gray['100'],
  borderDark: 색상.회색['500'],
  bg: '#FFFFFF',
  bgDim: colors.gray['100'],
  bgDimmer: colors.gray['50']
};

/**@type {import("tailwindcss").Config}*/
모듈.수출 = {
  내용: ['./src/**/*.{js,jsx,ts,tsx}'],
  코어플러그인: {
    preflight: false // tailwind preflight 클래스의 일부 문제를 해결하는 다른 것으로 교체
  },
  주제: {
    연장하다: {
      색상: 색상,
      텍스트 색상: {
        기본값: 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
        ]
        // serif: ['icomoon, sans-serif', ...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

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

으아악