이 문서에서는 Tailwind에서 사전 설정을 만드는 전체 절차를 자세히 설명합니다.
Tailwind에서 '사전 설정'을 만드는 방법은 무엇입니까?
순풍 ' 프리셋 '는 'tailwind.config.js' 구성 파일에 지정된 것과 동일한 구성을 지정하는 일반 구성 개체로 간주됩니다. '사전 설정' 파일은 기본적으로 생성되지 않지만 다음 단계에 따라 생성할 수 있습니다.
1단계: '사전 설정' 파일 만들기
먼저 ' 프리셋.js ” 파일을 Tailwind 프로젝트에 추가하고 확장, 테마 재정의, 플러그인 추가 등과 같은 원하는 모든 구성 옵션을 추가합니다.
// 사전 설정 예
기준 치수. 수출 = {
주제 : {
그림 물감 : {
파란색 : {
빛 : '#85d7ff' ,
기본 : '#1fb6ff' ,
어두운 : '#009 안장' ,
} ,
분홍색 : {
빛 : '#ff7ce5' ,
기본 : '#ff49db' ,
어두운 : '#ff16d1' ,
} ,
회색 : {
가장 어두운 : '#1f2d3d' ,
어두운 : '#3c4858' ,
기본 : '#c0cc에서' ,
빛 : '#e0e6ed' ,
가장 가벼운 : '#f9fafc' ,
}
} ,
fontFamily : {
없이 : [ '그래픽' , '산세 리프' ] ,
} ,
누르다 ' Ctrl+S ”를 선택하여 위의 파일을 저장합니다.
2단계: 'tailwind.config.js' 파일 편집
다음으로 ' tailwind.config.js ” 구성 파일에서 템플릿 경로의 이름을 지정하고 “ 프리셋.js ' 파일을 ' 프리셋 ”키워드:
기준 치수. 수출 = {
콘텐츠 : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
프리셋 : [
( 'preset.js' )
]
}
누르다 ' Ctrl+S ” 파일을 저장합니다.
3단계: 애플리케이션 실행
이제 기존 ' 빠른 프로젝트 ” 다음 명령을 입력하여 개발 서버에서:
npm 실행 개발 
마지막으로 'localhost' 링크를 클릭하여 출력을 표시합니다.
산출
표시된 대로 출력은 'Tailwind CSS' 스타일이 적용된 vite 프로젝트를 반환합니다.
결론
Tailwind에서 ' 프리셋 ” 파일을 만들고 “의 모든 구성을 지정합니다. tailwind.config.js ”파일을 넣습니다. 그런 다음 'preset' 키워드의 도움으로 'tailwind.config.js' 파일에 'preset.js' 파일을 지정합니다. 새로 생성된 'preset.js' 파일은 'tailwind.config.js' 파일과 동일한 지정된 템플릿에 모든 사용자 지정 CSS를 포함합니다. 이 문서에서는 Tailwind에서 사전 설정을 만드는 전체 절차를 설명했습니다.