0. React-Tailwind 초기 세팅

React 새로운 파일 만들기

1. 터미널 npx create-react-app 폴더명

2. public에서 index.html 빼고 파일 지우기

3. src에서 App.js, index.js, index.css 빼고 지우기

 

Tailwind 설치하기

• 'Get started' 클릭

• 'Create React App' 클릭

터미널 :

1. cd 폴더명

2. npm install -D tailwind

3. npx tailwind init

 

<tailwind.config.js>

4. content: ["./src/**/*.{js,jsx,ts,tsx}",] 삽입

index.css

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

5. <index.css>에 해당 코드 넣기

App.js

6. 해당 코드 삽입

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

index.js

import reportWebVitals from './reportWebVitals';

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

7. 삭제하기

8. npm start