react 프로젝트에 tailwind css 적용 (create-react-app 안씀)

대부분 공식 문서를 참고 하여 진행을 하였는데 알아 보기 쉽게 정리해 두려 한다.
참고 : https://tailwindcss.com/docs/guides/create-react-app

1. tailwindcss 설치

npm install -D tailwindcss postcss autoprefixer

2. postcss-loader설치
-Webpack이 PostCSS를 지원 할 수 있게 해주는 로더

npm install -D postcss-loader

3. tailwind.config.js 생성 후 아래 내용 추가

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. postcss.config.js 생성 후 아래 내용 추가

module.exports = {
  plugins: {
    tailwindcss: { config: "./tailwind.config.js" },
    autoprefixer: {},
  },
};

5. webpack.config.js에 postcss-loader 모듈 맨뒤에 추가

 module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [{ loader: "file-loader" }],
      },
    ],
  },

6. src 폴더 하위에 index.css 생성 후 아래 내용 추가 (파일명을 자유롭게 생성 해도 됩니다.)

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

7. src/index.js에 index.css 파일 import

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store";

// tailwindCss 적용
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
 <React.StrictMode>
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>
 </React.StrictMode>
);

8. tailwind 적용 확인하기

<div className="bg-blue-500"> Tailwind Css 적용 테스트 </div>