[React] CSS Framework : TailWind CSS 사용하기

공식문서

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

 

 

1. VSCode 에서 TailWindCSS IntelliSense 설치

vscode extensions

2. 프로젝트에 TailWindCSS 다운로드 및 init

## 3가지 모듈 다운로드.  -D 옵션은 개발에서 사용한다는 의미. -development
npm install -D tailwindcss 
npx tailwindcss init

 

3. tailwind.config.js 작성

현재 자신의 프로젝트중 src폴더의 위치 파악한 뒤 아래와 같이 입력함

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

 

4. css 파일에 @tailwind 추가. (App.css)

//App.css
@tailwind base;
@tailwind components;
@tailwind utilities;

//code시작
...

 

이런 경고가 뜰 경우 VSCode에서 PostCSS Language Support 확장 프로그램 설치

 

 

5. 사용하기

App.js 에 다음과같이 underline 을 주고 실행 > 정상적으로 underline 적용되는 것을 확인.

  <h1 className="text-3xl font-bold underline">hello world!</h1>

hello world! 에 밑줄이 그어졌다.