Tailwind Css

한 달 인턴으로 나갔을 때 계시던 개발자 분이 알려주신 tailwind css. css는 참 종류가 많구나 라고 느껴졌다. 새로운 기술을 발견하면 내가 이 기술을 써야하는 이유와 쓰지 않아야 하는 이유를 알아야 한다는 걸 느껴서 한 번 어떤 장단점이 있는지 알아보려고 글을 남긴다.

📌 장점

• className을 고민하지 않아도 된다.
• 쉽게 반응형 페이지를 구현할 수 있도록 지원한다.
• 공식문서에 설명이 잘 되어있어, 쉽게 터득할 수 있다.
• 직관적이다.

📌 단점

• 가독성이 떨어진다.

📌 설치방법

• 새로운 React 프로젝트를 생성하여 시작한다.

npx create-react-app my-project
cd my-project

• npm을 통해 설치 tailwindcss한 다음 init 명령을 실행하여 파일을 생성한다.

npm install -D tailwindcss
npx tailwindcss init

• 파일의 모든 템플릿 파일에 대한 경로를 추가한다.

// tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• css 에 tailwind의 각 레이어에 대한 지시문 파일을 추가한다.

//index.css

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

• npm start

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}