TailwindCSS + ReactJS 개발환경설정

1. 의존성 모듈 설치

TailwindCSS, PostCSS, AutoPrefixer를 설치합니다.

npm install -D tailwindcss postcss autoprefixer

---

2. config.json 생성

npx tailwindcss init -p

---

3. 세부설정 (config.json)

1) content

TailwindCSS가 적용될 route를 알려주는 과정.

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

• ReactJS의 경우

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

• NextJS의 경우

  content: ["./pages/*/.{js,jsx,ts,tsx}"],

src에서 모든 폴더에서 모든 파일의 .{js, jsx, ts, tsx}확장자라는 의미.

NextJS와 같은 경우 pages 외에 components 폴더를 따로 관리한다면 아래와 같이 경로를 추가해준다.

/** @type {import('tailwindcss').Config} */

module.exports = {
    content: [
       "./pages/**/*.{js,jsx,ts,tsx}", 
       "./components/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

---

4. CSS파일 생성

globals.css(NextJS) 또는 index.css(ReactJS)

/* globals.css 또는 index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

ReactJS

//index.tsx 또는 index.jsx
import "./styles/index.css";

NextJS

//_app.tsx 또는 _app.jsx
import "../styles/globals.css";

---

5. 완료

className으로 Tailwind 적용.

ReactJS

//App.tsx
function App() {
  return <div className="bg-red-500">Home</div>;
}

export default App;

NextJS

//index.tsx
const Home: NextPage = () => {
    return (
        <div className="bg-red-500">
            <h1 className="text-blue-500">Home</h1>
        </div>
    );
};

---