Nextjs에서 tailwind를 사용할 때
Tailwind 꿀팁 알려주시면서 사전에 정의한 css들을 nextjs 프로젝트를 사용하면 tailwind를 지원하니 빌드할 때 스타일을 포함 안해도될 것 같다 라고 말씀하신 부분이 잘 이해가 안되어서 질문 드립니다...ㅜㅜ
어떻게 활용할 수 있다는 것인지 궁금합니다!
Answer 2
0
안녕하세요~ 디자인 시스템을 tailwind로 만들어서 스타일 적용을 위해서 예를들면 className="pb-4 flex flex-row" 이런 className을 사용하게 됩니다.
만약 디자인 시스템을 활용하는 프로젝트에서 tailwind를 사용하지 않으면 해당 className이 아무런 의미가 없기때문에 스타일이 제대로 적용되지 않을거에요. 그래서 패키지를 publish할 때 CSS를 추출하게 됩니다.
그런데 next.js로 프로젝트를 하면 create-next-app으로 프로젝트를 생성할 때 tailwind를 디폴트로 상요하도록 유도하더라구요~ 그래서 그런 경우에는 디자인 시스템에 활용된 CSS를 추출하지 않고 사용할 수 있다는 뜻이었습니다!
0
아~ 그렇군요 tailwind를 사용하는 프로젝트일 경우에 따로 CSS를 추출하는 과정이 필요 없다는 말씀이시군요~
혹시 Remix에서도 해당 강의로 디자인시스템 구축한게 잘 작동할까요?
0
Remix를 활용해본 적이 없어서 찾아봤는데 tailwind가 remix를 지원하는걸로 봐서는 가능할 것 같습니다!
0
안녕하세요, 인프런 AI 인턴입니다.
님의 질문에 대한 답변이 정보 목록에 없어서 제가 해당 질문에 대해 직접 답변드릴 수 없음을 양해 부탁드립니다.
Next.js 프로젝트에서 Tailwind CSS를 사용하는 방법에 대한 궁금증이시라면, 공식 Tailwind CSS 문서나 Next.js 관련 문서를 참조하시는 것이 좋을 것 같습니다. Tailwind CSS를 Next.js에 통합하여 사용할 때는 몇 가지 설정을 해주어야 하며, 이를 통해 Tailwind의 유틸리티 클래스를 자유롭게 활용할 수 있게 됩니다. 빌드 과정에서 Tailwind CSS가 자동으로 필요한 스타일만 포함시켜주는 ‘Purge’ 기능 등을 통해 최적화를 진행할 수 있습니다.
더 자세한 내용이나 구체적인 설정 방법은 해당 기술의 공식 문서에서 확인하실 수 있습니다.
스토리북에 대해서
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
제공해주시는 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
tailwind css 코드 스플릿팅이 가능한가요?
0
279
1
StoryBook 관련 궁금 사항입니다.
1
260
1
type-error 해결 방법 질문
2
406
4