[TailwindCSS] 적용하기

# Tailwind CSS는?

부트스트랩과 비슷하게
flex pt-4 text-center rotate-90 이런식으로
마크업에서 클래스 명을 바꾸는 것만으로 CSS를 적용할 수 있도록 보조하는 프레임워크 입니다.

 

1. Tailwind CSS설치하기

npm install -D tailwindcss@latest
npx tailwindcss init

 

tailwindcssnpm을 통해 설치 하고 tailwind.config.js 파일을 생성합니다.

 

 

2. 템플릿 경로 구성

tailwind.config.js

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

 

전체 템플릿 파일의 경로를 파일에 추가

 

 

3. CSS에 tailwind 지침 추가  (react 기준)

`@tailwind` Tailwind의 각 레이어에 대한 지침을 파일에 추가합니다.  `./src/index.css`

 

index.css

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

 

 

4. 적용 및 시작

npm run start