Tailwind 1장 - Tailwind css

TailWind

• Tailwind는 HTML 안에서 CSS 스타일을 만들 수 있게 해주는 프레임 워크이다.
• Next.js를 사용할 때 서버 컴포넌트를 만들어야 한다면 styled-components는 적합하지 않다.
• styled-components는 런타임에서 실행되어 스타일 요소를 DOM에 주입하는 방식으로 클라이언트 컴포넌트에서 동작하기 떄문에 서버 컴포넌트에서 사용하기 어렵다.
• 반면 Tailwind는 빌드 시에 스타일링 되기 떄문에 서버 사이드 렌더링 환경에서도 문제없이 사용할 수 있으며, 모든 클래스명이 작성되는 것이 아닌 사용하는 클래스명만 빌드 시 작성된다는 장점도 있다.
• 참고자료 1
• 참고자료 2
• Next.js 공식에서도 나와있는 module, tailwind, sass 중 tailwind에 관한 글이다.

사용방법

1. tailwind 에는 미리 정해져 있는 클래스명을 사용하거나 커스텀 하여 쉽게 사용할 수 있지만 초반에 러닝 커브가 높기 떄문에 클래스명을 자동으로 완성해주는 익스텐션을 사용하는 것이 좋다. => Tailwind CSS IntelliSense 설치

2. global.css 파일에 직접 클래스명을 지정하여 커스텀하거나(.nav {text-bold bg-black...}), config 파일에 커스텀하여 사용할 수 있다.

   // tailwind.confing.js
   module.exports = {
     mode: "jit",
     content: [
       "./src/app/*.{js,ts,jsx,tsx,mdx}",
       "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
     ], // tailwind 사용할 파일 확장자 설정
     theme: {
       extend: {
         screens: {
           sm: { max: "640px" },
           md: { min: "641px", max: "1024px" },
         }, // 화면 사이즈 재정의
         colors: {
           custom: "#......",
         },
       },
     },
   };
   
   // example.tsx
   return <div className="text-custom"></div>;
   

3. 공식 문서를 뒤져가며 클래스명을 지정하다보니 꽤나 손에 익고 쉽다…