Tailwind CSS 설치&기본 세팅

 

Tailwind CSS란 ?

사용자(개발자)가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크(CSS 프레임워크)다.

 

 

Utility-First란 ?

미리 세팅된 유틸리티 클래스를 활용해 HTML 코드 내에서 CSS를 적용시키는 것

 

 

Tailwind CSS 설치 방법

사용 언어별 추천 설치 방법이 있다.

아래 공식 사이트 참고.

https://tailwindcss.com/docs/installation/framework-guides

 

우리는 vite를 사용하기 때문에 먼저 react를 설치해 주고,

Tailwind CSS를 설치해 준다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p 

 

설치 후에 세팅이 필요하다.

 

먼저 tailwind.config.js에서 간단한 설정이 필요하다.

/** @type {import('tailwindcss').Config} */

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

 

여기서 content 부분에 이 코드를 넣어주면 된다.

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

 

 

그다음에 index.css에서 이 코드를 넣어준다.

@tailwind base;
@tailwind components;
@tailwind utilities;

 

초기 세팅은 끝났다.

 

이제 Tailwind CSS 공식 문서를 보면서 필요한 Classname을 가져다 사용하면 된다.