Tailwind는 유틸리티 우선(Utility-First) css 프레임워크이다

Next.js 를 사용하면 install 시 Would you like to use Tailwind CSS? No / Yes tailwind 설치 여부를 물으며 Yes를 선택 시 자동으로 설치 된다. 하지만 그 위에도 설치 할 수 도 있기 때문에 장단점 부터설치, 사용법 까지 정리하고자 한다.

장점

단점

패키지 설치

// 패키지 설치
npm install -D tailwindcss

// tailwind.config.js 파일을 생성
npx tailwindcss init

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

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

끝!

사용법

className에 스타일 코드를 작성하면 된다.

export default function Test() {
  return (
    <div className="flex items-center justify-center w-40 h-12 bg-green-900 rounded-lg">
      <p className="font-bold text-lg !text-white">Hello</p>
    </div>
  );
}

tailwind 동적 적용 있을 경우 간편하게 사용

root 폴더에 libs 라는 파일을 생성 후 하위에 utils.ts 파일을 만들어 아래 코드를 작성한다.

export function cls(...classnames: string[]) {
  return classnames.join(" ");
}

추후에 동적으로 스타일을 다르게 적용할 경우 ${ } 활용 안 해도 된다.

import { cls } from "libs/utils";

<Link
   href="/blog"
   className={cls(router.pathname === "/" ? "text-point-color" : "")}
>
 About
</Link>

TailwindCSS extension

Tailwind 자동완성

적용 안될 때

settings에 들어가서 preference:Open User setting 이렇게 찾고 settings.json 파일 편집

"editor.quickSuggestions": {
"strings": true
},
"css.validate": false,
"editor.inlineSuggest.enabled": true

코드를 구문 분석하고 클래스 태그를 지정된 순서에 따라 다시 인쇄하여 일관된 클래스 순서를 적용