tailwind 커스텀하기 (v3.0 config가 아닌 v4.0 방법)

Taiwilwind v4.0 (CSS-first)

Tailwind가 v4로 버전이 업데이트 되면서 몇가지 몇가지 바뀐 것들이 있다.

공부하면서 안되는것중에 하나가 npx tailwindcss init 설치가 안됐다.

 

이유를 찾아보니 다음과 같다.

 

Tailwind 가 v4.0 이 되면서 config 파일이 필요가 없어졌다.

(v3.0 일 때는 필수)

 

하지만 나는 작업하면서 기존의 tailwind 커스텀을 필요로 했다.

v3.0 일 때는 npx tailwindcss init -p 를 터미널에 입력하면 됐지만,

v4.0 면 설치도 안된다.

 

기존의 v3.0 은 config 가 필요했으며 이런식으로 config를 작성하고 루트경로에 두면 적용이 됐을 것이다.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,jsx}"],
  theme: {
    extend: {},
    screens: {
      xm: "320px", // 작은 모바일 기기
      sm: "640px", // 좀 더 큰 모바일
      md: "768px", // 태블릿
      lg: "1024px", // 랩탑
      xl: "1280px", // 데스크탑
      "2xl": "1536px", // 더 큰 데스크탑
    },
  },
  plugins: [],
};

 

 

v4.0 는 다르다. 어떤 점이 달를까?

v4.0에서는 CSS에서 직접 설정하며 CSS-first 접근 방식이 도입되었다.

config파일 대신에 CSS파일에서 스타일을 직접 정의하고 관리하는 방식이다.

 

tailwind v4.0은 ./src/index.css 에 작성해줄 것이 있다.

@import "tailwindcss";
@theme {
  --breakpoint-xm: 320px;
}

 

--breakpoint-xm -> breakpoint는 ~부터 이며 xm은 내가 커스텀한 이름이다.

320px를 추가한 이유는 tailwind가 에서 미리 설정된 sm(화면 크기)는 최소 640px부터 시작해서

더 작은 모바일 화면인 320px도 추가하고 싶었다.

 

위에 처럼 세팅을 한 후 컴포넌트로 가져와보자.

const Logo = () => {
  return <div className="xm:mx-[30px] lg:mx-0">...</div>
}

export default Logo

 

 

위와 같이 DOM과 class를 작성하면 최소화면 320px 부터 margin이 x축 양쪽으로 30px씩 적용된 것을 확인 할 수 있다.

lg는 tailwind 기본 반응형 사이즈로 1024px을 의미한다.

 

위에 코드를 보면 화면이 320px부터는 margin이 적용되며 1024px는 margin을 0으로 적용되는 예제 코드이다.

 

이제 다시 작업해보러 가보자.. 진작 구글링 해볼걸 챗지피티에게 의존하다가 시간이 많이 날아갔다.