확장 프로그램 설치 및 최적화 버전 문의
108
작성한 질문수 1
tailwindcss 공식 페이지는 v4.1로 되어 있는데 강의하신 버전은 v3.4.13 으로 되어 있네요
v 4.1버전과 설정 옵션들이 조금 달라서 문의 드립니다.
v 4.1 버전을 사용하고자 한다면 어떻게 설정을 해야 하는걸까요?
답변 2
0
안녕하세요 🙂
아래 가이드를 한번 확인해 보시겠어요?
Play CDN 사용하기
Play CDN을 사용하면 별도의 빌드 과정 없이 브라우저에서 바로 Tailwind를 사용해 볼 수 있습니다. Play CDN은 개발 목적으로만 설계되었으며, 실제 운영 환경에서는 사용할 수 없습니다.
01 HTML에 Play CDN 스크립트 추가하기
HTML 파일의 <head>에 Play CDN 스크립트 태그를 추가하고, Tailwind의 유틸리티 클래스를 사용하여 콘텐츠 스타일을 지정하기 시작하세요.
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
02 커스텀 CSS 추가해보기
type="text/tailwindcss"를 사용하여 Tailwind의 모든 CSS 기능을 지원하는 커스텀 CSS를 추가할 수 있습니다.
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
--color-clifford: #da373d;
}
</style>
</head>
<body>
<h1 class="text-3xl font-bold underline text-clifford">
Hello world!
</h1>
</body>
</html>
0
안녕하세요, 인프런 AI 인턴입니다. JiA님, TailwindCSS 버전 차이에 따른 설정 방법에 대해 문의 주셨군요.
TailwindCSS가 v3.4.13에서 v4.1로 업데이트되면서 설정 옵션들이 변경되었을 수 있습니다. 이를 해결하기 위해 v4.1의 설정 방법에 대해 안내드리겠습니다.
TailwindCSS 설치 및 초기화:
- 새로운 TailwindCSS v4.1를 설치하세요:
npm install -D tailwindcss@latest postcss autoprefixer
- 초기 설정 파일을 생성합니다:
npx tailwindcss init
- 새로운 TailwindCSS v4.1를 설치하세요:
tailwind.config.js 수정:
- v4.1에서는 일부 설정 옵션이나 구조가 변경되었을 수 있으므로, 공식 문서에서 업데이트된 설정 방법을 참고하여
tailwind.config.js파일을 수정하세요.
- 공식 문서에서는 새롭게 추가된 기능이나 변경된 설정 옵션들에 대한 설명을 제공하므로 이를 적극 활용하시길 추천드립니다. 공식 문서 링크: TailwindCSS 공식 문서
- v4.1에서는 일부 설정 옵션이나 구조가 변경되었을 수 있으므로, 공식 문서에서 업데이트된 설정 방법을 참고하여
새로운 기능 및 변경 사항 점검:
- 버전이 올라가면서 TailwindCSS에 새로운 유틸리티 클래스나 기능이 추가되었을 수 있습니다. 따라서 공식 문서의 업데이트 내역도 확인하여 새 기능을 프로젝트에 적용할지 여부를 결정하세요.
- 버전이 올라가면서 TailwindCSS에 새로운 유틸리티 클래스나 기능이 추가되었을 수 있습니다. 따라서 공식 문서의 업데이트 내역도 확인하여 새 기능을 프로젝트에 적용할지 여부를 결정하세요.
궁금하신 점이나 더 필요한 정보가 있으시면, 추가로 질문해 주세요. 지식공유자님께서도 추가적인 가이드를 제공해주실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
존재하지 않는 일기 url입력 시 alert이 두 번 떠요
0
16
1
useState 직접 구현 부분에서 질문이 있습니다.
1
20
1
학습을 하고 블로그에 정리를 해도 괜찮을까요?
1
23
1
교재(3쇄)와 강의 내용 문의
0
28
2
7강 도형+펜툴 중 막혔습니다ㅠㅠㅠ
0
26
2
안녕하세요! 작업 속도를 높여주는 단축키와 플러그인 강의는 없는걸까요?!
0
24
3
섹션2번 부분 강의 화면이 잘 못된것 같아서 문의합니다.
0
23
1
call stack 표현이 잘못표현된것이 아닌가요?
0
63
2
part3. spy 쪽 / part3,part4 강의자료
0
32
2
최종 코드
0
40
2
Open AI 결제
0
40
2
tailwindcss v4.1 에서의 script 사용에 대해 궁금한 점이 있습니다.
1
97
1
tailwindcss 와 ai tool
0
83
1
tailwindcss 4.1 docs에서는 container가 목록에서 안보이네요
0
83
2
quasar와 tailwind 조합에 관한 질문
0
105
1
실습에 사용되는 이미지
0
109
2
모바일 사이즈에 대해 질문있습니다.
0
85
1
nested 리스트일때 <ul> bullet 스타일 바꾸는 방법
0
209
2
via.placeholder.com 오류
0
845
2
빈 화면에서 tail 만 쳤을때 팝업도움말 나오게 하는 법 알려주세요.
0
125
2
tailwind.config.js 파일을 통해 다크 모드 설정시 적용이 되지 않습니다.
0
291
1
수강평 이벤트
0
143
2
font-weight가 왜 적용이 안될까요?
0
416
3
스니펫 관련질문
0
139
1