tailwind css 설치하기

2024/04/24

안녕하세요 lika-7 입니다

이번시간에는 react 환경상 tailwind css 설치 방법 과 개념을 설명하겠습니다.

tailwind란

• tailwind css는 부트스트랩 같은 CSS 프레임워크를 쉽개 개발할수 있게 해주는 저수준 프레임워크입니다
  • 그렇기에 css 컴포넌트를 제공하지 않습니다
    • btn btn-primary 같은 것을 지원하지 않는다는 이야기 입니다
  • 컴포넌트는 tailwind css의 플러그인을 사용하면됩니다
    • daiyui를 많이 사용합니다

모듈 설치

yarn add -D postcss autoprefixer tailwindcss

1. css를 작성할 때 -webkit, -moz, -ms 등으로 대표되는 벤더 접두사를 이용해 브라우저 호환성 문제에 대응합니다
   • tailwind css 같은 postcss 기반을 사용한다면 autoprefixer를 이용하여 벤더 접두사 문제를 해결하면 됩니다
     • autoprefixer를 이용하면 자동으로 벤더 접두사가 붙은 CSS를 생성해줍니다
     • autoprefixer는 PostCSS와 함께 설치해야 합니다

구성 파일 생성

npx tailwindcss init -p

• 위 명령어를 입력하면 아래의 파일들이 생성해 줍니다

//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

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

daisyui 설치

yarn add -D daisyui

• 위와 같이 입력하여 tailwind css플러그인 설치 

yarn add -D @tailwindcss/line-clamp

• tailwind css 3.3부터는 기본으로 포함되니 설치하지 않아도 됩니다

구성 파일 수정

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/line-clamp"), require("daisyui")],
};

• content 항목을 수정하여 build할 때 사용하지 않는 기능은 제거하기 위해 구성 파일을 수정합니다
• plugins를 수정하여 설치한 line-clamp와 daisyui를 추가합니다

tailwind css 기능 반영

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

• index.css에 위 3줄을 추가하여 tailwind css를 사용한다고 알립니다

위와 같이 설정하여 tailwind를 사용하기 위한 기본 설정을 완료합니다