[튜토리얼] React에서 Tailwind 설치

Tailwind

https://tailwindcss.com/docs/guides/create-react-app 에 친절하게 설명이 되어있다.

1. React-app 생성 (생략가능)

npx create-react-app my-project
cd my-project

2. npm install -D tailwindcss 를 사용하여 tailwindcss 설치

3. npx tailwindcss init 을 사용하여 src내에 "tailwind.config.js"를 생성

4. "tailwind.config.js" 에서 content 부분 추가 or 입력

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 프로젝트내에 "index.css" 에 붙여넣기

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

6. npm run start

7. 적용해보기

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