현재 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 태그 클래스 속성에 이미 "테마 이름"이 있습니다.

안내해 주셔서 감사합니다. 그램...