[TIL] 2023.05.04 Tailwind와 함께 프로젝트 시작!

Today I Learned

프로젝트 기초 세팅 및 UI 구현 시작
Programmers 문제 풀기

Tailwind

너무 궁금했던 Tailwind를 드디어 사용해 봤다! 오늘 처음으로 사용해 보는 건데 생각보다 어렵지는 않다. 그런데 아직 익숙해지지 않아서 그런지 계속 tailwind-cheat-sheet에서 검색하면서 코드 짜느라 시간이 조금 소요됐다. 그리고 아직은 Tailwind의 장점을 잘 모르겠다.

무엇보다도 모두 똑같이 생긴 div에 className만 적어서 구분하려니 이 div가 어떤 부분인지를 잘 모르겠다. 컴포넌트명 고민하느라 귀찮긴 했지만 직관적인 이름으로 한눈에 어떤 분인지 파악 가능했던 styled-components가 잠시 그립기도 했다 ㅠㅠ

그래도 아직 첫날이니까 Tailwind와 친해질 시간이 많이 남았다. 많은 사람들이 Tailwind를 사용한는 이유를 나도 빨리 직접 경험해보고 싶다!

Tailwind CSS IntelliSense Extension

Tailwind를 사용할 때 필수로 설치해야 하는 VSC Extension! Tailwind의 className을 자동완성해 주는 기능을 가지고 있다.

공식 문서 https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code

Tailwind 파일 최적화하기

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  ...
}

tailwind.config.js 파일에 다음과 같은 속성을 추가하면 빌드 시 사용되지 않는 클래스를 제거해서 파일 크기를 최적화해 준다길래 추가했다.

Tailwind에서 커스텀 컬러 설정하기

// tailwind.config.js
theme: {
      colors: {
        grayFont: '#c6c9d8',
        footerBg: '#00010c',
      },
    },
  },

Tailwind에서 기본 제공하는 컬러 외에 원하는 컬러가 있다면 이 또한 tailwind.config.js 파일에 추가해서 사용하면 된다.

<p className="text-grayrFont">text</p>

tailwind.config.js 파일에 추가한 컬러를 실제 사용할 때는 이렇게 간단하게! 따로 등록한 컬러도 Tailwind CSS IntelliSense에서 자동완성 기능을 제공해 준다.

공식 문서 https://tailwindcss.com/docs/customizing-colors

Tailwind 반응형 적용하기

<div className="max-w-[1260px] max-lg:max-w-[720px] max-sm:max-w-[540px]">

만약 width에 따라 div의 width를 다르게 설정하고 싶다면 앞에 수식어를 붙여주면 된다.

상단의 코드를 해석해 보자면

기본적으로 div의 max-width를 1260px로 설정
min-width: 1024px인 경우 div의 max-width를 720px로 설정
min-width: 640px인 경우 div의 max-width를 540px로 설정

공식 문서 https://tailwindcss.com/docs/responsive-design

Tailwind & Next.js에서 폰트 적용하기

// globals.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

body {
  font-family: Poppins, sans-serif;
}

프로젝트 전체에 기본 폰트를 설정해주고 싶을 때 globals.css 파일에 폰트를 import 하면 되는데 이때 주의할 점은 폰트 import가 @tailwind base; @tailwind components; @tailwind utilities; 상단에 위치해야 한다는 점이다! 이거 때문에 왜 폰트 적용이 안 되는 건지 한참 헤맸다 ㅠㅠ

참고 링크

https://wonny.space/writing/dev/hello-tailwind-css

https://www.zodaland.com/tip/66

마지막으로 하루 만에 Tailwind에 적응하게 도와준 친절한 Cheat Sheet 링크를 남기며 오늘의 Tailwind 공부를 마무리한다 ㅎㅎ

https://nerdcave.com/tailwind-cheat-sheet

Next/Image에서 width 100% 설정하기

이미지를 부모 요소의 width 100%를 차지하도록 수정하고 싶었는데 Next.js에서 제공하는 Image 컴포넌트를 사용하다 보니 속성을 어떻게 주어야 할지 몰라서 검색을 해 봤다.

<Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />

처음에는 layout fill 속성을 적용해 봤는데 13 버전에서 이 속성이 사라진 것인지 더 이상 사용하지 않는 속성이라는 경고 메시지가 떠서 실패했다.

<Image
    src={v.img}
    alt="Blog Images"
    quality={100}
    style={{ width: '100%'}}
/>

결과적으로 해결책은 간단한 거였는데 그냥 Image 컴포넌트 자체에 style 속성을 지정해서 width를 작성하면 되는 거였다. 🥲

회고

드디어 본격적인 프로젝트 시작! 오랜만에 VSC 켜서 코드 작성하고 push 하고 pull 하는 게 즐겁다 ㅎㅎ 근데 아무래도 첫날이라서 기초적인 세팅하는 데 많이 헤매긴 했다. 그래도 생각보다 진도가 쭉쭉 나가고 있는 중!

저작자표시