TailwindCSS 4.0

Tailwind CSS 4.0이 출시되며 기존보다 성능적으로 많이 발전하였고, 특히 빌드속도가 빨라졌다. 원래는 styled-components를 선호했지만, 이번 기회에 tailwindCSS와 더 많이 친해져보고자 하는데, margin이나 padding이 제대로 적용이 되지 않는 문제점이 있어 초기 설정의 변경점에 대해 다뤄보고자 한다.

스타일 초기화 설정 확인

Tailwind CSS 4.0에서는 스타일 초기화(reset) 설정이 변경되었다. 내 경우엔 기존에 사용하던 초기화 스타일이 새로운 버전과 충돌하여 마진이 제대로 적용되지 않았는데 다음과 같이 index.css 파일을 수정해주었다.

기존 설정

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

* {
    margin: 0;
    padding: 0;
}

4.0 버전 설정

@import "tailwindcss";
@layer base {
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    background: #0d1017;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

}

기존 import해줄 것들이 하나로 묶였고, 초기화 스타일의 경우 @layer base내부에 정의해야 한다.

Vite에서의 config 설정

기존에는 tailwind.config의 설정을 통해 템플릿 파일의 경로를 설정해주었지만, 이제는 vite.config를 통해 tailwindcss 플러그인을 추가해주는 방식으로 변경되었다.

이전 버전

tailwind.config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4.0

vite.config

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

bg-opacity 유틸리티 제거

추가로 bg-opacity 유틸리티가 제거되어 기존과 다른 방식인 bg-black/50과 같은 형식으로 배경색과 투명도를 함께 지정하는 방식을 사용한다.

이전 버전

<div class="bg-black bg-opacity-50 p-4">
    배경이 반투명한 박스입니다.
</div>

4.0

<div class="bg-black/50 p-4">
    배경이 반투명한 박스입니다.
</div>