TailwindCSS 설치 & 사용법

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

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

 

장점

• bundle 사이즈가 작다.
• css 사용을 위한 네이밍을 하지 않아도 된다.
• 작성해야 하는 코드의 길이가 확연하게 짧아진다.
• 반응형 스타일링을 적용하기 용이하다.

단점

• html 코드가 장황하고 복잡하다고 느껴집니다.
• 익히려면 시간이 오래 걸린다.

 

패키지 설치

Installation - Tailwind CSS

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

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

 

tailwind.config.js 파일에 Tailwind CSS를 사용할 모든 템플릿 파일에 대한 경로를 추가한다.

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

 

글로벌 CSS 파일에 @tailwind 지시어들을 추가한다.

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

 

CLI 도구를 실행하여 템플릿 파일에서 클래스를 검색하고 CSS를 빌드 하도록 실행한다.

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 CSS IntelliSense

Tailwind 자동완성

Tailwind CSS IntelliSense - Visual Studio Marketplace

 

적용 안될 때

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

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

 

• Headwind

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

Headwind - Visual Studio Marketplace