Typescript + Tailwind 지원으로 React 앱 만들기

소개

안녕하세요! 여기서는 Typescript와 Tailwind를 모두 사용하여 React 앱을 설정하는 방법을 설명하려고 합니다.

Typescript로 React 앱 만들기

이 부분은 정말 간단합니다. create-react-app 명령에 템플릿 옵션을 추가하기만 하면 됩니다.
자유롭게 "앱"을 다른 것으로 바꾸십시오.

일단 디렉토리에 간단한 cd를 설치했습니다.

npx create-react-app app --template typescript

cd app

순풍 추가

마지막으로 순풍을 추가해야 합니다. 먼저 필요한 모듈을 설치해야 합니다.

npm install -D tailwindcss postcss autoprefixer 

다음으로 다음 명령을 통해 쉽게 수행할 수 있는 구성 파일을 만들어야 합니다.

npx tailwindcss init -p

다음으로 생성된 "tailwind.config.js"파일을 열고 "content"에 다음을 추가합니다.

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

다음으로 "src/index.css"파일에 Tailwind 지시문을 추가하고 파일 맨 위에 다음을 추가해야 합니다.

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

작동하는지 확인 중

이제 Typescript와 Tailwind를 설정했으므로 작동하는지 확인해야 합니다.
"src/App.tsx"를 열고 다음과 같이 변경합니다.

import React from 'react';
import './App.css';

function App() {
  return (
    <h1 className="text-3xl font-bold underline text-red-600">
      Simple React Typescript Tailwind Sample
    </h1>
  );  
}

export default App;

완료, 이제 응용 프로그램을 시작합시다.

npm start

브라우저가 자동으로 열리고 색인 페이지가 표시됩니다. 모든 것이 정상이면 헤더는 굵고 밑줄이 그어진 빨간색이어야 합니다. 😀

이 예제의 소스는 다음에서 찾을 수 있습니다.
https://github.com/ethand91/react-typescript-tailwind


내가 일하는 것처럼? 다양한 주제에 대해 포스팅하고 있으니 더 보고 싶으시면 좋아요와 팔로우 부탁드립니다.
또한 저는 커피를 좋아합니다.