react js프로젝트에 tailwind 설치하기

react js프로젝트에 tailwind 설치하기

 

 

 

[작성자의 다른 글 보러가기: 'Tailwind가 그래서 뭔데?']

 

 

---

1. 타입스크립트가 적용된 리액트 프로젝트 셋팅하기

나는 create-react-app 을 사용해서 프로젝트를 셋팅할거다. create-react-app 홈페이지에 나와있는

아래의 명령어를 실행한다. 

 

 

 

 

2. tailwind css 설치하고 적용하기

tailwind css 공식 홈페이지에 나온대로 명령어를 실행한다. 

 

 

 

 

3. 아래 명령어를 실행하면 tailwind.config.js 랑 postcss.config.js 파일이 생긴다.

 

 

 

 

4.tailwind.config.js 를 아래처럼 작성한다.

 

module.exports = {

  content: [

    "./src/**/*.{js,jsx,ts,tsx}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

 

 

 

5.  리액트 프로젝트의 'src' 폴더 내의 index.css 파일 맨 위에 아래 3줄을 추가하고 저장한다.

@tailwind base;

@tailwind components;

@tailwind utilities;

 

---

 

 

 tailwind css 사용하기

  App.tsx 파일의 App 컴포넌트를 아래처럼 작성하고 npm run start 해보면 tailwind css가 적용된 것을 볼 수 있다. 

 

import './App.css';

export default function App() {

  return (

    <h1 className="text-3xl font-bold underline">

      Hello world!

    </h1>

  )

}

 

**     <h1 className="text-3xl font-bold underline">

이 부분에 부연설명을 해드리자면

텍스트크기는 3xl로 // 

폰트는 bold체로 //

underline은 밑줄 쫙!!

 

요런 의미임을 참조해주세요.