[CSS] 리액트 스타일링 방식 3

Tailwind CSS 방식의 스타일링

• css 작성 없이, 클래스를 추가하는 것만으로도 스타일링 가능.
  • HTML에서 모든 디자인을 구축 가능.
• 단독 유틸리티 퍼스트 CSS 라이브러리 = Tailwind CSS

---

Tailwind CSS

• 공식 홈페이지 존재 → 설치 및 사용법 안내

  Tailwind CSS Official Site

• 올바른 프레임워크에 맞게 설치하기 - [vite용]

  

    npm install tailwindcss @tailwindcss/vite    
  

  

• 플러그인 설정 - vite.config.js(ts) [vite용]

    import tailwindcss from '@tailwindcss/vite';
    export default defineConfig({
      plugins: [
        tailwindcss(),
      ],
    })
  

• 자세한 과정

  1. css 폴더 하위에 tailwind.css를 작성하여,
     tailwindcss 패키지 불러오기

      @import "tailwindcss";
     

     + @tailwindcss 경고 밑줄 없애기
     [설정] - [css rule 입력] - Unknown At Rules: ignore로 변경

     

  2. 구조적으로 css를 적용하기 위해, 다음 호출 과정을 거침.
     • index.css에서 tailwind.css 불러오기
     • main.tsx에서 index.css 불러오기

  3. App.tsx에서 클래스명에 스타일 적용.

      export default function App() {
        return (
          <>
            <h1 className="text-3xl font-bold underline">
      	    Hello world!
            </h1>
          </>
        );
      }
     

---

Tailwind CSS 특징

Utility-First CSS: 스타일을 적용하기위한 속성과 값이 클래스 단위로 분리하여 나뉨.

• 재사용성: 각 클래스가 독립적이고 재사용 가능하므로,
  필요할 때마다 적절한 클래스를 조합해서 사용 가능.
• 코드 양 감소: HTML 파일에서 직접 클래스를 조합하여 스타일을 지정하므로
  별도의 스타일 시트를 유지할 필요가 없음.
• 빠른 개발: 미리 정의된 유틸리티 클래스를 바로 사용할 수 있어,
  스타일을 빠르게 적용 가능.

Tailwind CSS 클래스명

1. 속성이 항상 앞에 제시되어 있음.
2. 속성에 대한 값은 하이픈(-)으로 엮어서 제시됨.
3. 사용자 원하는 값을 제시할 수 있는 커스텀 클래스도 가능.

Tailwind CSS 사용

동향에 따라, Tailwind CSS 쓰는 것은 바람직.

CSS 방식 동향 비교

1. 원하는 스타일시트를 공식 문서에 찾아서 적용.
2. 웬만하면, 커스텀 클래스를 사용하여, 유연하게 적용.

---

Tailwind 기본 스타일

Tailwind Preflight

tailwindcss, Preflight - Base styles

• Tailwind의 가장 근간이 되는 기본 스타일
• 어느 브라우저에서 열든 일관적으로 보이도록 하는 스타일

---

1. 모든 HTML 요소에 적용된 margin, padding 모두 제거
2. 모든 HTML 요소에 적용된 box-sizing 속성을 border-box로 설정

3. 모든 HTML 요소의 테두리 스타일이 재설정

    border: 0 solid;
   

   이 재설정으로 border로만 클래스를 추가하면,
   현재 색상을 사용하는 1px의 단색 테두리가 추가될 수 있음.

4. <h1>, <h2>, <h3>와 같은 제목 요소에 적용된 기본 스타일 제거
5. <ul>, <ol>와 같은 목록 요소에 적용된 기본 스타일 제거
6. <img>, <video>와 같은 멀티미디어 요소의 display 속성을 block으로 설정
7. <img>, <video>와 같은 멀티미디어 요소가
   부모 요소를 삐져나갈 수 없도록 너비를 제한

---

Preflight 확장

• 하지만, 제목 요소와 같은 경우에는 스타일 제거를 원하지 않을 수 있음.
• 이와 같은 경우에는 Preflight를 확장시킬 수 있음!

• 다음과 같이 tailwindcss에, 기본 스타일을 확장.

    @layer base {
      h1 {
        font-size: var(--text-2xl);
      }
      h2 {
        font-size: var(--text-xl);
      }
      h3 {
        font-size: var(--text-lg);
      }
      a {
        color: var(--color-blue-600);
        text-decoration-line: underline;
      }
    }
  

---

Tailwind 사용자 정의

tailwindcss, Adding custom styles - Core concepts

컴포넌트 클래스 추가

• 자주 사용하는 CSS를 모아, 클래스를 추가할 수 있음.

    @layer components {
      .새로운클래스명 {
      @apply ...tailwind의 유틸리티 모음...;
      }
    }
      
    @layer components {
      .새로운클래스명 {
        ...css 속성과 값 모음...;
      }
    }
  

---

유틸리티 추가

• Tailwind에서 제공하는 유틸리티 외에도 사용자 지정 유틸리티를 추가할 수 있음.

    @utility 새유틸리티명 {
      content-visibility: auto;
    }
  

  위와 같이 지정하면, HTML에서도 유틸리티 사용 가능

  • 또한, hover, focus 와 같은 변형도 적용 가능.

---

Tailwind 색깔

tailwindcss, Colors - Core concepts

• Tailwind에서 제공하는 기본 색상

    <div className="bg-sky-400"></div>    
  

  

---

Tailwind를 위해

Tailwind CSS IntelliSense

• Tailwind CSS IntelliSense의 익스텐션을 추가하면, 개발 환경을 향상 시킴.

  

• 1) 자동완성 기능: 유틸리티 클래스 작성을 위한 제안 제공

  

  bg 입력시 다음과 같이 자동완성을 위한 목록 등장

• 2) 호버 미리보기: 클래스의 전체 CSS 표시

  

  포인터를 하면, 해당 적용 값을 확인 가능

• 3) Linting: CSS와 마크업 모두에서 오류와 잠재적 버그를 강조 표시

---

Prettier for Tailwind CSS

• 해당 플러그인을 추가하면, 권장하는 순서에 따라 클래스를 정렬함.

  

• prettier-plugin-tailwindcss 개발 패키지로 설치.

    npm install -D prettier prettier-plugin-tailwindcss
  

• .prettierrc 설정 파일을 만들어, 다음 내용 추가

    {
      "plugins": ["prettier-plugin-tailwindcss"],
      // 플러그인 추가
      "tailwindStylesheet": "./src/css/index.css"
      // tailwind 스타일시트 경로 지정
    }
  

• 클래스 정렬 전과 후 비교

  

---

tailwind-merge

• tailwind를 쉽게 사용할 수 있도록 도와주는 패키지

  npm, tailwind-merge

• 매개변수로 전달된 클래스명을 합쳐줌

• 합칠 때, 역할이 중복되는 클래스는 제거

  

  적용 전

  

  적용 후(중복 제거)

• 사용을 위한 설치

    npm i tailwind-merge
  

• 사용: 패키지를 불러오고, twMerge()에 콤마(,)로 구분하여 작성

    import { twMerge } from "tailwind-merge";
      
    export default function App() {
      return (
        <>
          <h1 className={twMerge("text-3xl", "text-9xl")}>
            Hello world!
          </h1>
        </>
      );
    }
  

---