tailwind 기초 셋팅

여기서 초기세팅할 때 공식문서가서 하자.

https://tailwindcss.com/docs/installation

1. tailwind 초기세팅

 

처음 위와 같은 방식으로 세팅한다.

1. npm install -D tailwindcss

노트 패키지 매니저로 tailwindcss 패키지를 설치하는 것이다.

 

2. npx tailwindcss init

이는 tailwindcss로 초기화

위와 같이 파일 경로에 이러하게 생긴다.

 

2. 초기 경로 설정

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

위 코드를 tailwind.config.js 파일에 넣어둔다.

 

3. 파일 구성

그리고 파일을 만들어야 하는데, 아래와 같이 최상위 폴더에서 scr 파일 그 아래 style안에 input.css를 만든다. 

그리고 그 input.css로 아래와 같은 코드 입력

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

이는 사용할 때 이 모듈들을 사용할 수 있도록 하는것이다.

 

그리고 src 파일에 index.html 파일을 만든다.

위와 같이 index.html 파일을 만들어서 아래 코드 입력

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

원래라면 content: ["./src/**/*.{html,js}"], 이부분인데, 현재로서는 js를 사용하지 않아서 삭제한 상태이다.

 

이 코드를 입력했다면, 터미널에 아래와 같이 입력한다.

여기서 -i 는 input / -o 는 output 이다. 그래서 파일명과 파일경로에 맡게 입력하면 된다. 

input 파일과, output의 파일 이름은 변경이 가능하다.

npx tailwindcss -i ./src/styles/input.css -o ./src/styles/output.css

위와 같읕 코드를 입력하는데, 이 역시도 파일경로가 달라서 파일경로에 맞게 입력한다.

 

이를 입력하게 되면 아래 output.css 가 생긴다.

그래서 output 파일을 들어가보면 아래와 같이 생기는데, 테일윈드의 시작이다!!

여기서 input과 output의 이름은 변경이 가능하다.

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.font-bold {
  font-weight: 700;
}

.underline {
  text-decoration-line: underline;
}