inflearn logo
강의

Course

Instructor

Storybooks and UI tests that can be applied directly to practice

Project environment setup before the lecture

테일윈드를 안쓰고 스타일 컴포넌트만 사용하는 환경에서는요?

Resolved

144

merrychristmas

1 asked

0

테일윈드를 안쓰고 스타일 컴포넌트만 사용하는 환경에서는요? 테일윈드로 환경셋팅을 하는게 맞을까요??

react typescript tailwindcss storybook ui-testing

Answer 2

0

jasonkang

안녕하세요!

저는 디자인 시스템은 css로만 하는게 좋다고 생각합니다. 그래야지 디펜던시를 줄일 수 있는 것 같아요. 공용으로 여기저기서 쓰고싶어서 만든건데 tailwind나 styled component를 활용해서 만들면, 락인되는 문제가 있을 것 같습니다.

강의에서 Tailwind를 사용하는 이유는, 강의중에 말씀 드리는 것처럼 실제 시스템이 아니라 강의이기 때문에 "tailwind도 이렇게 사용하면 좀 편해요~"라는걸 같이 알려드리고 싶어서 였습니다. 코드를 다 살펴보진 않았지만, 당근의 디자인 시스템도 CSS만 활용하시는 것 같아요~

https://github.com/daangn/seed-design/tree/dev/packages/react

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. 수안님.

테일윈드를 사용하지 않고 스타일 컴포넌트만 사용하는 환경에서는 테일윈드로 환경 설정을 굳이 할 필요는 없습니다. 스타일 컴포넌트는 CSS-in-JS 방식으로 스타일을 관리하며, 태그와 CSS 스타일을 하나의 파일 내에서 캡슐화하여 유지보수성을 높이는 데 유리한 도구입니다.

테일윈드는 유틸리티 클래스 기반의 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

[질문 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

tailwind css 코드 스플릿팅이 가능한가요?

0

279

1

StoryBook 관련 궁금 사항입니다.

1

260

1

type-error 해결 방법 질문

2

406

4