tailwind css 코드 스플릿팅이 가능한가요?
tailwind를 실제로 product에 적용해본 경험이 없어서 질문드립니다.
공통된 스타일은 global.css
로그인 페이지 스타일은 login.css
회원가입 페이지를 스타일을 signup.css로
@layout components를 나눠서 작성했을때 코드 스플릿팅이 되나요?
제대로 테스트를 못해봤지만 login.css 작성한 @layout components 클래스를 signup에서 쓰려면 써지는것 같더라구요 안썻을때 빌드시 코드 스플릿이 되는지 궁금합니다.
jit 모드 라는게 있던데 프로젝트가 엄청 커졌을때 해당 기능으로 페이지 별로 어느정도 최적화가 되는지 궁금합니다.
Answer 1
0
안녕하세요 지인님! 답변을 드리자면,
TailwindCSS는 Code Splitting을 지원하지 않습니다.
Tailwind CSS 자체는 유틸리티 퍼스트 CSS 프레임워크로, 스타일을 직접적으로 코드 스플리팅하지 않습니다. 즉, Tailwind 자체의 유틸리티 클래스들은 JavaScript 모듈처럼 자동으로 분리되지 않습니다.
그래서 사용하지 않는다고 해도 코드 스플리팅은 되지 않습니다.
사용하지 않는 css를 제거하고 싶다면, PurgeCSS를 활용하시면 됩니다
JIT모드는 저는 preview에 있어서 사용해본적은 없는데, 검색해본 결과로 답변을 드리자면
사용자가 작성한 HTML에서 필요한 클래스만 즉시 생성하여 사용한다고 하니 필요한 스타일만 포함되도록 최적화하여 번들 크기를 줄일 수 있을 것 같고.
프로덕션 모드에서 JIT는 사용하지 않는 CSS를 자동으로 제거하기 때문에, 페이지별로 필요한 스타일만 포함하게 될 것 같아요. 결과적으로 매우 큰 프로젝트에서도 CSS 번들 크기를 효과적으로 줄일 수 있습니다.
다만 "어느정도"에 대한 답변은 케바케일것 같아서 시도해봐야 알 것 같습니다
최적화는 프로젝트 규모가 커졌을 때 진행해야 의미가 있어서, 진행하시는 프로젝트 초반이라면 크게 신경 안쓰시는게 좋을 것 같고(한다고 해도 지금은 효과가 미비할거에요), 나중에 규모가 커진다면 한번 적용해 보시는 것이 좋을 것 같습니다
스토리북에 대해서
0
57
1
Storybook 10에서 argTypes에 action 설정 시
0
74
1
storybook setup
0
86
2
실무 적용 관련해서 질문이 있습니다!
0
63
2
storybook 프로젝트 세팅 중 궁금한 점이 있습니다.
0
133
2
스토리북 테스트에 대한 질문
0
101
2
tailwind 4.x 버전 변경된 CSS 추출(?) 커맨드
1
207
2
스토리북 테마에 대해 질문 드립니다.
0
158
2
테일윈드를 안쓰고 스타일 컴포넌트만 사용하는 환경에서는요?
0
144
2
[질문 x 공유용] tailwind v4.0 으로 강의랑 다를 때 (import 다름, tailwind.config.js 없어짐 등)
6
484
2
react-toastify 를 storybook에 출력 시키기
0
181
1
react에서 modal & portal 사용시 에는 어떻게 작성해야될까요
0
374
3
tsconfig
0
180
1
vite 초기설정
0
344
2
스토리 내 args에서 에러가 발생합니다.
0
208
2
Nextjs에서 tailwind를 사용할 때
0
278
2
제공해주시는 Figma 색상 코드가 강의와 달라 글 남깁니다!
0
141
2
Visual Test
1
127
1
NavigationBar 배경색
0
129
1
defaultValue 질문 드립니다!
0
123
1
svg를 public 말고 src>assets안에 넣는다면 import를 어떻게해야하나요?
1
265
2
index.tsx 빌드 오류
0
371
2
StoryBook 관련 궁금 사항입니다.
1
260
1
type-error 해결 방법 질문
2
406
4