[React] Tailwind 설치 및 전체 화면 중앙 정렬

 

내 프로젝트의 경우, 개발 환경은 다음과 같다.

⚙️ React + Typescript + npm + Tailwind

 

Tailwind를 처음 사용해보는 터라 설치부터 난관이었다.

 

프로젝트 초기 세팅

• Tailwind와 PostCSS를 개발 의존성으로 추가한다.

npm install -D tailwindcss postcss
npm tailwindcss init -p

 

이 명령을 실행하면 두 파일이 생성되게 된다.

 

• 📁 tailwind.config.js
• 📁 postcss.config.js

 

 

[ tailwind.config.js ]

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

 

[ postcss.config.js ]

const config = {
  plugins: {
    tailwindcss: {},
  },
}

export default config;

 

가장 중요한 부분은 다음이다.

개발 도중 전체 화면이 계속 안먹히고 dom에만 적용되는 것을 보고 이건 Tailwind 문제다 싶어서 찾아본 결과 src/index.css에 다음 3줄이 없어서였다.

 

[ index.css ]

body {
  background: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

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

 

그리고 src/index.tsx 상단에 이 css 파일을 반드시 import 해야 한다.

import './index.css';

 

 

이미지 설정

📁 my-project/
└── 📁 src/
    └── 📁 assets/
        └── 📁 hamster
        	└── golden_hamster.png
    	└── lobby_background.png

 

이미지 파일은 src/assets 안에 넣어두었기 때문에 컴포넌트에서 배경 이미지를 불러오도록 설정하였다.

배경이 적용된 상태에서 이미지를 중앙 정렬하기 위해서 부모 컨테이너에 flex, items-center, justify-center를 적용하면 된다.

import React from "react";
import bg from "../assets/lobby_background.png";
import { hamster } from "../assets/hamster";

export function Lobby() {
  return (
    <div
      className="w-full h-screen bg-cover bg-center bg-no-repeat flex items-center justify-center"
      style={{ backgroundImage: `url(${bg})` }}
    >
      <div className="flex flex-col items-center justify-center">
        <img
          src={hamster.golden}
          alt="hamster"
          className="object-contain mx-auto"
          style={{
            width: "40%",
            height: "auto",
          }}
        />
        <div className="text-center">
          <div className="text-4xl font-bold text-amber-800">
            🐹 Welcome to Hamstalk!
          </div>
        </div>
      </div>
    </div>
  );
}