[React] Webpack 프로젝트 + Tailwind

항상 MUI만 사용해왔던지라 tailwindcss는 처음 사용해보는데,

앞으로도 많이 사용할 것 같아 초기 설치단계부터 적용까지 정리해두면 좋을 것 같다.

Tailwindcss 설치

tailwind와 필요한 의존성을 모두 설치한다.

yarn add -D tailwindcss postcss autoprefixer

Tailwindcss 설정

npx tailwindcss init -p

이를 실행하면 자동으로 postcss.config.js와 tailwind.config.js 파일이 생성된다.

postcss.config.js는 그대로 두고, tailwind.config.js 파일을 아래와 같이 수정한다.

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

src 내의 모든 파일에서 tailwind를 사용할 수 있도록 한 것이다.

tailwind.css 파일

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

index.tsx 파일

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// css 파일을 불러온다.
import "./tailwind.css";

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

webpack.config.js 수정

postcss-loader 추가하기 위해 webpack.config.js 내에 rules를 추가한다.

{
    test: /\.css?$/,
    exclude: [],
    use: ["style-loader", "css-loader", "postcss-loader"],
},

Tailwind 적용하기

className안에 tailwindcss 문법을 적용하면

import React from 'react';

const App = () => {
  return (
    <>
      <div className='bg-red-500'> TailWind CSS 적용 TEST </div>
      <div className='bg-red-300'> 성공! </div>
    </>
  );
};

export default App;

성공!!

 

사실 다 적용하고도 Tailwind 적용이 안돼서 여기저기 많이 뒤적였는데, 뭐가 문제인지는 아직 모르지만 tailwind 관련 의존성 모두 삭제하고 처음부터 다시 하니 되더라..

 

https://goo-gy.github.io/2022-01-09-tailwind

[React] Webpack 프로젝트에 Tailwind 적용하기 - googy-blog