React로 디스코드 봇 전용 웹페이지 만들기 (1) - tailwindCSS

지난 시간에 React 프로젝트 초기 설정법을 알아봤다.

React로 디스코드 봇 전용 웹페이지 만들기 (0)

Discord.js를 이용해 디스코드 봇을 만들고 난 후, 뭘 만들면 좋을지 고민하던 중 웹 페이지에서 초대링크와 사용법 정도를 볼 수 있으면 좋겠다는 생각이 들어 react를 이용한 페이지를 만들어보기

huzan2.tistory.com

이번에는 tailwind를 이용한 편리한 css작성법을 알아보도록 하자.

Tailwind CSS

tailwind css는 class 이름 설정만으로 css를 자동적용해주는 편리한 라이브러리이다. 여러 개의 스타일을 적용할 수도 있고, js 코드에서 바로 적용이 가능하기 때문에 css파일과 js 파일을 왔다갔다 할 필요 없이 한 파일에서 코드를 작성할 수 있다는 장점이 있지만, 코드의 가독성이 떨어지고 유지보수가 귀찮아질 수 있다는 단점이 있다. 아래 예시코드를 보면 바로 이해할 수 있을 것이다.

    <div className="relative isolate px-6 lg:px-8 bg-gray-100 rounded-full">
      <div className="nx-auto max-w-2xl py-32 ms:py-48 lg:py-56">
        <button className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          버튼
        </button>
      </div>
    </div>

보다시피 엄청난 길이의 className을 가지게 될 수도 있다(...)

하지만 불편한 점보다 편리한 점이 더 크다고 판단해서 사용하기로 했다. 먼저 간단한 설치방법을 알아보자. 아래 명령어를 터미널에 입력해서 tailwindcss를 설치해주자.

npm i -D tailwindcss

tailwind.config.js를 생성해주고,

npx tailwindcss init

우리가 코드를 작성할 폴더와 파일 종류를 입력해준다.

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

다음으로 src폴더에 css파일을 하나 만들어주고 아래 내용을 입력한 후, index.js 최상단에서 이 css파일을 import해주면 된다.

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

//index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./main.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

테스트 겸 Home.js을 아래 내용처럼 작성해준 후 저장해보도록 하겠다.

export default function Home() {
  return <div className="text-center">home</div>;
}

훌륭하게 가운데 정렬이 된 것을 확인할 수 있다. 야호~

TailwindCSS의 키워드명이 처음에는 적응하기 어려울 수 있으나, CSS파일과 js파일을 왔다갔다하지 않고 스타일을 적용하며 코드를 같이 작성할 수 있다는 것은 굉장히 편리하다. 아래 링크에 들어가면 클래스명과 해당 클래스명의 스타일 등을 모아볼 수 있으니 작업 시에 띄워놓고 보면 좋을 것이다.

https://umeshmk.github.io/Tailwindcss-cheatsheet/

Tailwind CSS - Cheatsheet

umeshmk.github.io

여러 개의 className(스타일)을 중첩시키려면 공백 한 칸으로 구분하면 된다. 위에서 엄청난 길이의 className을 보여주기 위해 든 예시코드를 참고하자.