기본 테마 및 추가 Tailwind 테마 1개
<p>현재 Tailwind를 사용하고 있는 기존 프로젝트에 새 테마 1개를 추가하라는 요청을 받았습니다. </p>
<p>새 테마는 body 태그 클래스 속성에 "theme-name"이 있는 경우에만 적용됩니다.</p>
<p>유익한 tailwind.config.js是这样的：</p>
<pre class="brush:php;toolbar:false;">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')]
};</pre>
<p>...이 새로운 추가 기능 테마에서는 색상만 변경되었습니다. </p>
<p>이 설정에 대한 올바른 방향을 알려줄 수 있는 사람이 있나요? 내 body 태그 클래스 속성에 이미 "테마 이름"이 있습니다. </p>
<p>안내해 주셔서 감사합니다.
그램...</p>
