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를 적용할 수 있다.