아주 빠르게 CRA 없이 React에 Tailwind CSS를 얹어보자!

Tailwind CSS + React (without CRA)

보통 개인 프로젝트를 한다면 Create-React-App(CRA) 또는 Vite 등을 통해 React를 세팅한 후에 Tailwind CSS를 쉽게 세팅할 수 있습니다. 하지만 현업에서 실무를 하고 있을 때는 CRA를 사용하지 않고 Webpack 등으로 일일이 설정해서 React(리액트)를 연결했을 가능성이 큽니다.

 

저희 회사는 기존 코드가 Angular(앵귤러)로 되어 있는데요. 앞으로 새로운 프로젝트를 진행할 때, 리액트로 옮겨가기로 했기 때문에 이 앵귤러 코드 속에 리액트를 연결해야 했습니다. (그때만 생각하면 아찔합니다)

 

어쨌든 이 이야기는 나중에 하기로 하고, 기본적인 Webpack(웹팩), Babel(바벨) 등의 세팅을 마치고 리액트를 잘 연결했다고 가정하에 즉 CRA 없이 Tailwind CSS를 얹는 방법에 대해 아주아주 빠르게, 핵심만 알아보도록 하겠습니다. (Tailwind CSS 사용법이나 특징 등에 대해서는 나중에 따로 다뤄보는 시간을 가져보도록 하겠습니다)

 

Package 설치

npm i -D tailwindcss

npm i -D postcss postcss-loader

npm i -D autoprefixer

위의 패키지를 설치해주시면 됩니다.

 

Tailwind CSS는 말 그대로 우리가 얹으려고 하는 그 Tailwind CSS이고요.

PostCSS는 쉽게 말해서 특수한 PostCSS 플러그인 구문을 그냥 Vanilla CSS로 바꿔주는 일종의 Transpiler(트랜스파일러)라고 생각해주시면 됩니다. Tailwind CSS를 해석해주는 친구라고 생각하면 될 것 같네요. 또한 웹팩이 읽을 수 있도록 Loader도 설치합니다.

Autoprefixer는 Vendor Prefix(벤더 프리픽스)를 자동으로 넣어주는 친구입니다.

 

postcss.config.js 설정

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

먼저 내 프로젝트 최상위에 postcss.config.js 파일을 생성하고 위와 같이 채워줍니다. PostCSS가 Tailwind CSS를 해석해주는 설정이라고 생각하시면 됩니다.

 

webpack.config.js에 loader추가

// ...

module.exports = {
  // ...
  
  module: {
    rules: [
      
      // ...
      
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
}

리액트 연결을 위해 기본적으로 웹팩 설정을 해놓으셨을 텐데요. 이제 여기서 PostCSS Loader를 달아줍니다. 다른 방대한 부분은 제외하였고 postcss-loader를 사용한 부분만 옮겨왔습니다.

 

tailwind.config.js 설정

npx tailwindcss init

 

이제 tailwind를 세팅해줄 건데요. 내 프로젝트 디렉토리 상에서 위와 같이 명령어를 입력하면 tailwind.config.js라는 파일이 생성되고 템플릿이 자동으로 세팅됩니다.

 

// tailwind.config.js

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

일단 Tailwind CSS가 잘 꽂혔는지 확인을 해야하니까 별다른 세팅은 하지 않았고요. content는 Tailwind가 읽는 경로인데, 제가 작업하는 프로젝트를 src 디렉토리 내부에 있다고 가정하여 위처럼 표기하였습니다.

 

styles/tailwind.css

// styles/tailwind.css

@import 'tailwindcss/base'
@import 'tailwindcss/components'
@import 'tailwindcss/utilities'

이제 거의 다 왔습니다. css 파일을 생성하여 위와 같이 넣어줍니다. 경로는 크게 상관없을 것 같고요. 저는 프로젝트 특성상 리액트 디렉토리가 따로 있어서 리액트 디렉토리에 모두 넣어줬는데, 보통 최상위에 styles 디렉토리로 두기 때문에 예시는 위와 같이 적어놓았습니다.

 

src/index.js

// src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './styles/tailwind.css' // tailwind.css를 import

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

리액트를 연결하는 파일에서 방금 생성한 tailwind.css 파일을 import 해줍니다. 

 

src/App.js

function App() {
  return <div className="font-bold text-center p-4 text-[23px] bg-slate-600 text-lime-300">Hello, Black Lobster!</div>
}

export default App

마지막으로 Render를 해주는 App 컴포넌트에서 Tailwind CSS가 잘 연결됐는지 테스트를 해줍니다. 위에 className 안에 Tailwind 문법을 넣어주면 되는데요. 나머지는 Tailwind CSS 공식문서에서 쉽게 찾을 수 있고요.

 

한 가지만 말씀드리면, text-[23px]의 대괄호([])가 보이죠? 이게 무엇이냐면, 원래는 위에 tailwind.config.js에서 미리 스타일을 세팅을 해줘야 되는데 세팅에 따로 폰트 크기를 설정하지 않았기 때문에 Tailwind에서 제공하는 대괄호를 이용하여 내가 직접 커스텀하게 사용할 수 있습니다. 이게 적용이 된다면 Tailwind가 잘 연결됐다고 할 수 있겠죠?

 

자 이제 끝입니다. 한번 실행을 시켜봅시다!

Hello, Black Lobster!

잘 반영된 것 같은데요. 개발자 도구를 열어서 한번 확인해봅시다.

 

광활한 앵귤러 속 나의 작은 리액트...

개발자 도구에서 요소를 찍어보시면 오른쪽 아래처럼 tailwind.css가 잘 적용이 된 것을 확인할 수 있습니다.

 

---

Tailwind CSS 공식 문서를 통해 더 자세한 정보를 확인할 수 있습니다.

• https://tailwindcss.com/