아주 쉽게 React + Typescript + TailwindCSS 세팅하기

목적: React + Typescript를 설치하고 TailwindCSS 세팅하기

React + Typescript + TailwindCSS 세팅을 쉽게 하기 위해서 순서대로 진행하면 됩니다.

 

React app with Typescript 설치하기

npx create-react-app 앱이름 --template typescript

 

TailwindCSS 설치하기

npm install -D tailwindcss postcss autoprefixer

 

TailwindCSS config 파일 만들어주기

npx tailwindcss init -p

 

생성된 tailwind.config.js의 content에 아래 내용 추가하기

content: ['./src/**/*.{js,jsx,ts,tsx}'],

 

src/index.css파일의 맨 위에 아래 코드 추가하기

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

 

TailwindCSS가 잘 작동하는지 확인하기

import './App.css';

function App() {
  return (
    <div className="text-5xl text-green-600">
      App
    </div>
  );
}

export default App;

 

npm start