[#. React] React+Typescript+Tailwind CSS 프로젝트 초기 세팅하기

 

 

 

 

Tailwind CSS는 마크업에서 직접 모든 디자인을 구축하도록 구성할 수 있고 flex, pt-4, text-center와 같은 클래스를 사용하는 프레임워크다

 

 

Tailwind CSS에서 정해놓은 클래스명을 사용해서 HTML 코드 내에서 쉽게 CSS를 작성할 수 있다

 

 

 

장점

• Utility-First의 편리함과 빠른 개발
• 자유롭고 쉬운 커스텀

 

단점

• 초반에 파악하기 위한 시간 필요
• HTML와 CSS 코드 혼재(가독성)

 

 

$ yarn create react-app [프로젝트명] --template=typescript
$ yarn add -D tailwindcss postcss autoprefixer postcss-cli npm-run-all

 

-D 옵션 => 패키지를 개발 종속성으로 추가

 

 

 

 

📁src

• 📁styles 생성
  • 📄tailwind.css 생성

 

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

 

 

 

 

📄postcss.config.js 생성

 

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

 

 

 

📄tailwind.config.js 생성

 

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
}

 

 

 

📄index.tsx

 

import './index.css';	// 삭제
import './styles/app.css';	// 추가

 

 

 

📄App.tsx

 

import './App.css';	// 삭제

 

 

 

📄App.css 삭제

📄App.test.tsx 삭제

 

 

 

📄package.json 수정

 

scripts 영역을 수정한다

 

  "scripts": {
    "build:css": "postcss src/styles/tailwind.css -o src/styles/app.css",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/app.css --watch",
    "react-scripts:start": "sleep 5 && react-scripts start",
    "start": "run-p watch:css react-scripts:start",
    "build": "run-s build:css react-scripts:build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

 

 

 

$ yarn start

 

 

📁styles/📄app.css 파일이 생성되었을 것이고

 

 

 

📄App.tsx 수정

 

<header className="App-header bg-red-700">	// b-red-700 추가

 

웹 화면에서 아래와 같이 배경색이 바뀌고

REACT 로고가 잘 뜬다면 제대로 세팅한 거다!