UnoCSSㅡNext.js 셋업

UnoCSS는 단일 CSS 속성을 클래스에 담아 스타일링의 재사용성을 높이는 atomic CSS 철학을 기반으로 하는 CSS 엔진이다. 빠른 빌드타임과 유연한 커스터마이징 기능이 특징이다.

 

앞으로 UnoCSS를 적극적으로 사용해보려고 해서, Next.js 프로젝트에 UnoCSS를 설치하는 방법을 직접 정리해봤다.

 

패키지 설치

pnpm add -D unocss @unocss/postcss

 

uno.config.ts 생성

프로젝트의 root 폴더에 uno.config.ts 파일을 생성해 아래 설정을 추가한다.

import { defineConfig, presetUno } from "unocss";

export default defineConfig({
  presets: [
    presetUno(),
  ],
});

 

postcss.config.js 생성

추가로 아래 코드가 들어간 postcss.config.js 파일도 root 폴더에 생성한다.

module.exports = {
  plugins: {
    "@unocss/postcss": {
      content: ["**/*.{html,js,ts,jsx,tsx}"],
    },
  },
};

 

처음엔 postcss.config.ts로 저장했다가 UnoCSS가 적용이 안되길래 한참을 헤맸었다.. 자바스크립트 파일 확장자로 생성해준다.

 

globals.css 파일 수정

globals.css 파일에 아래 코드를 추가해준다.

@import "@unocss/reset/tailwind.css";
@unocss all;

 

 

UnoCSS의 기본 preset에서 사용하는 클래스명은 Tailwind와 겹치는게 많아서 Tailwind 사용자라면 빠르게 적응할 수 있다. 공식 문서가 Tailwind만큼 상세하게 정리되어있지 않아서 아쉬울 따름이다.

 

기본 UnoCSS preset에서 사용하는 유틸리티 클래스들은 https://unocss.dev/interactive/에서 확인할 수 있다.