CRA tailwindcss 적용하기

create react app 으로 시작한 리액트 프로젝트에 간단하게
tailwind css 를 적용하기 위하여 작성한다.

구글링을 하였을 때, 다양한 방법들이 있었지만 간단하고 빠르게 cra 프로젝트에 적용할 수 있는 방법을 공유한다.

npm install tailwindcss postcss autoprefixer

npx tailwind init

tailwind.config.js

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

module.exports = {
  purge: [
    './src/**/*.{js,jsx,ts,tsx}',
    
  ],
  darkMode: false, // or 'media' or 'class'
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  
  variants:{
    extends:{}
  },
  plugins: [],
}

루트에 postcss.config.js 생성

const tailwindcss = require("tailwindcss");
module.exports = {
  plugins: [tailwindcss("./tailwind.js"), require("autoprefixer")],
};

src/styles/tailwind.css 생성
해당 css 파일은 다른 경로여도 무관하다.

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

해당 css 파일을 최상단 js파일에서 import 해올 것.
나의 프로젝트를 예로 들면,
index.js 파일에서 import 하였다.

import React from "react";
import ReactDOM from "react-dom";
import "./styles/tailwind.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

해당 import 까지 작성 후
package.json에 스크립트 생성

"tailwind": {
    "build": [
      "npx tailwindcss-cli@latest build -i ./src/styles/tailwind.css -o ./src/styles/styles.css"
    ]
  }

이제 프로젝트에 tailwind를 적용할 수 있다.