tailwind

tailwind 설치

• npm과 yarn 중에 하고싶은 것이나 결정한 것으로 선택

1. 패키지 설치

npm install tailwindcss postcss autoprefixer
yarn add tailwindcss postcss autoprefixer

2. tailwind 설정 파일 생성

• 이 명령은 'tailwind.config.js' 파일을 생성한다.
• 이 파일을 통해 Tailwind를 사용자 정의 가능

npx tailwindcss init

3. PostCSS 설정

• postcss.config.js' 파일을 프로젝트 루트에 생성하고 아래 내용 추가

   module.exports = {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   }

4. tailwind 디렉티브를 포함하는 CSS 파일 생성

• 예를 들어 'src/index.css'에 다음 Tailwind 디렉티브를 추가

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

5. CSS 파일을 프로젝트에 포함

import './index.css';

tailwind 사용

function App() {
  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
      <div>
        <div className="text-xl font-medium text-black">이것은 제목</div>
        <p className="text-gray-500">여기는 내용 출력하는 부분</p>
      </div>
    </div>
  );
}

export default App;

• 주로 className에 css로 적용하고 싶은 이름을 쓰면 적용이 됨.

• 적용하고 싶은 css부분은 직접 검색해서 보는 것이 더 빠름

주소 : https://tailwindcss.com/docs/installation

장점

1. 유틸리티-퍼스트 접근법

• Tailwind는 유틸리티 클래스를 제공하여 빠르고 유연한 디자인을 가능하게 함
• 개발 속도를 향상시키고 커스텀 CSS 작성을 줄여줌

2. 반응형 디자인 지원

• 클래스에 반응형 변형을 쉽게 추가할 수 있어, 다양한 화면 크기에 대응하는 디자인을 손쉽게 구현가능

3. 사용자 정의와 확장성

• 'tailwind.config.js'를 통해 Tailwind를 쉽게 사용자 정의하고 확장할 수 있어, 프로젝트의 특정 요구사항에 맞출 수 있음

4. 컨시스턴트한 디자인 시스템

• 일관된 디자인 시스템을 유지하기 쉬워, UI의 일관성을 유지 가능

단점

1. 학습 필요

• 유틸리티-퍼스트 방식은 전통적인 CSS 작성 방법과 다르기 때문에 새로운 학습이 필요할 수 있음

2. 가독성 문제

• HTML 파일 내에 많은 클래스가 사용될 경우, 가독성이 떨어질 수 있음

3. 초기 설정 시간

• 프로젝트 시작 시 Tailwind의 초기 설정과 사용자 정의가 필요한데, 시간이 소요될 가능성이 높음

4. 과도한 클래스 사용

• 때때로 매우 구체적인 디자인을 구현하기 위해 과도한 양의 유틸리티 클래스를 사용해야 할 수 있음

5. 프로젝트 크기

• 사용하지 않는 스타일을 제거하지 않으면 최종 CSS 파일 크기가 커질 수 있음

적절한 경우

1. 빠른 프로토타이핑 필요:

• 빠른 프로토타이핑과 빠른 디자인 변경을 가능함
• 새로운 클래스를 작성하는 대신 기존 클래스를 조합하여 빠르게 UI를 구성할 수 있음

2. 커스텀 디자인 시스템 구축

• Tailwind는 매우 커스터마이징이 용이하므로, 고유한 디자인 시스템이나 테마를 개발하는 데 좋음
• 'tailwind.config.js'를 통해 색상, 폰트, 간격 등을 쉽게 조정할 수 있음

3. 반응형 웹 디자인

• 다양한 화면 크기에 맞춰 쉽게 조정할 수 있는 유틸리티 클래스를 제공하기 때문에, 반응형 웹 디자인을 구현하는 데 적합함

4. 일관된 UI 유지

• 프로젝트 전반에 걸쳐 일관된 스타일을 유지해야 하는 경우, Tailwind의 일관된 유틸리티 클래스를 사용하면 쉽게 가능함

5. 팀 프로젝트

• 팀 내에서 스타일링 방식을 통일하고, 코드의 일관성을 유지하기 위한 경우에 적합
• Tailwind를 사용하면 모든 팀원이 동일한 유틸리티 클래스를 사용하여 스타일링할 수 있음

적절하지 않는 경우

1. 전통적인 CSS에 익숙한 팀

• tailwind의 사용방식은 전통적인 CSS 작성 방식과 매우 다르므로, 팀원들이 새로운 방식에 적응하는 데 시간이 걸릴 수 있음

2. 작은 프로젝트나 간단한 웹 페이지

• 매우 간단한 프로젝트의 경우, Tailwind CSS의 강력한 기능과 유연성이 과도하게 느껴질 수 있으며, 기본 CSS가 더 적합할 수 있음

3. 완전한 제어를 원하는 디자이너

• Tailwind는 유틸리티 클래스에 의존하기 때문에, 완전한 제어를 원하는 디자이너에게는 제한적일 수 있음

오늘의 한줄평 : 이번에는 styled-components보다 새로운 css라이브러리를 사용해보기 위해 공부해보았다. css는 잘 알고 있어서 유용하게 쓸 수 있을 것 같다.