Pokemon Card Flip - 3.프로젝트 셋업 + tailwindcss 설치

npx create-react-app my-app --template typescript

CRA + Typescipt로 리액트 프로젝트 생성

 

git 레포지토리 생성후 프로젝트 연결

 

npm install -D tailwindcss

 

Tailwind 설치

 

npx tailwindcss init

 

tailwind init 명령어를 통해 tailwind.config.js 파일을 생성

 

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

 tailwind.config.js에 템플릿 파일 경로 추가

 

 

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

index.css 파일 맨윗줄   Tailwind의 레이어에 대한 @tailwind 지시문을 추가

 

 

 

import "./App.css";

const App = () => {
  return <h1 className='text-3xl font-bold underline'>Hello world!</h1>;
};

export default App;

 

 

tailwind가 잘 적용된 모습