Tailwind CSS 설정 생성기
설치 없이 사용할 수 있는 무료 온라인 Tailwind CSS 설정 생성기. visual tailwind.config.js 파일 생성 기능 포함.
Tailwind 설정 생성기 소개
이 도구는 간단한 양식으로 바로 쓸 수 있는 Tailwind CSS 설정 파일을 만들어 JavaScript를 손으로 쓰지 않아도 되게 해줍니다. 클래스 접두사를 설정하고 important 플래그를 켜거나 끄고, Tailwind가 검사할 콘텐츠 경로를 나열합니다. 커스텀 색상 토큰과 글꼴 패밀리를 추가할 수 있고, 생성기가 이를 깔끔한 theme.extend 블록으로 조립합니다. 모두 하나의 tailwind.config.js로 합쳐져 프로젝트에 바로 복사할 수 있습니다.
사용 방법
1. 기본 탭에서 접두사, important 플래그, 콘텐츠 경로를 설정합니다 2. 색상 탭에서 각 커스텀 색상의 이름과 값을 추가합니다 3. 글꼴 탭에서 각 글꼴 패밀리와 쉼표로 구분된 스택을 추가합니다 4. 출력 탭을 열고 생성을 클릭합니다 5. 파일을 검토한 뒤 프로젝트에 복사합니다
최상의 결과를 위한 팁
콘텐츠 경로는 한 줄에 하나씩 적어 Tailwind가 올바른 파일을 검사해 클래스 이름을 수집하게 합니다. 커스텀 색상은 bg-primary나 text-brand 같은 유틸리티 클래스가 되고, 글꼴 항목은 font-sans나 선택한 이름이 됩니다. 빈 섹션은 자동으로 생략되어 색상이나 글꼴만 채워도 생성 파일이 깔끔합니다. 출력은 맨 위에 Tailwind 타입 힌트가 있는 최신 ESM 내보내기 형식입니다.
▶접두사 옵션은 무엇을 하나요?
▶important 플래그란 무엇인가요?
▶콘텐츠 경로는 어떻게 사용되나요?
▶글꼴 패밀리를 추가하려면?
▶출력 형식은 무엇인가요?
이 도구가 당신에게 도움이 되었다면, 저에게 커피 한 잔 사주세요.
제게 커피 한 잔 사주세요.