[Tailwind CSS] 2. tailwind CSS 세팅 & 실행 예제 (github repo 생성)

 

tailwind CSS 로고

요약

  1. Tailwind CSS 설치방법

- CDN / Framework Guide (Next.js)

- etc..

  2. github repo 연동

- Next.js App 생성 

- 로컬 저장소 → 원격저장소 remote push

 

  3. Tailwind CSS 동작 예시

상세
  1. Tailwind CSS 설치방법

Tailwind 공식문서 > Installation

Tailwind CSS를 내 프로젝트에 적용해보는 방법은 공식문서에 다양하게 제공된다.

 

(1) Play CDN (가장 간단)

- 가장 간단하게는 CDN으로 HTML 파일 내에 <script> 를 추가해 사용하는 방법이 있다.

 

(2) (나의 경우) Framework Guides > Next.js

 

 

적용하고자 하는 Framework에 따라서, Guide가 제공되니 참고하면 된다.

  2. github repo 연동 (Next.js App 생성)
[참고] [Github] 프로젝트 생성 (로컬 저장소에서 원격저장소 Push)

 

로컬에서 Next.js App을 생성하고, 원격저장소로의 Push를 통해 remote하는 과정은 위 게시글을 참고하면 된다.

 

  3. Tailwind CSS 동작 예시

 

Tailwind CSS 4를 사용하면 언어 서버가 지시어가 있는 CSS 파일을 찾습니다 @import "tailwindcss".

→ /app/global.css 에서 찾을 수 있음

 

(Tailwind CSS 3을 사용하면 언어 서버가 tailwind.config.js 파일을 찾습니다 .)

 

export default function Home() {
  return (
    <>
      <div className='text-3xl font-bold text-red-300'>
        <p>Hello World!</p>
      </div>
    </>
  );
}