tailwindCSS 시작하기

홈페이지 리뉴얼을 진행하면서 tailwindCSS 를 이용해서 UI 를 구현하게 되어 정리정리

tailwindCSS 의 장점

• 프로젝트의 생산성을 높이고 개발 속도를 단축시킬 수 있다.
• 코드를 재사용하기 쉽다. 클래스를 활용하여 스타일링이 가능하다.
• 전체적인 디자인 시스템을 구성하면서도 일관성 있는 디자인을 유지할 수 있어 디자인 시스템 구축에 용이하다.
• 커스터마이징이 용이하다. 필요한 경우에만 스타일을 추가하거나 제거할 수 있으며, 모듈화된 CSS를 사용하여 적용 범위를 제한할 수 있다.
• 반응형 디자인을 지원한다. 기기의 화면 크기에 따라 자동으로 레이아웃이 조정된다.

tailwindCSS 의 단점

• 생각보다 러닝커브가 있다.
• 클래스명이 복잡해진다.(html 파일이 커진다)

설치하기

1. tailwind 설치

npm install -D tailwindcss postcss autoprefixer

2. tailwind 설정 파일 생성

npx tailwindcss init -p

3. 템플릿 경로 구성(tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. tailwind 적용(global.css)

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

5. 앱 실행

npm run dev

6. 예시

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

💡 tailwindCSS 를 설치하고 className 을 작성해도 적용이 안되서 뭐가 문젠지 한참 찾았는데 VSC 를 껐다가 키니까 잘 적용됐다.. 혹시 특별히 잘못된 부분을 찾을 수 없을때는 껐다 켜보기.. 꼬옥..
💡 tailwind intellisense 추천추천