[Tailwindcss] css 코드 1줄 없이 예쁜 웹사이트 만들기!

특강/웹 개발 속성 강좌

[Tailwindcss] css 코드 1줄 없이 예쁜 웹사이트 만들기!

JuniorEinstein 2022. 11. 24. 10:46

728x90

제가 요즘 푹 빠져 있는 css 프레임워크가 하나 있습니다. 바로 Tailwindcss인데요, 제가 최근 개발한 5개의 프로젝트에 모두 썼을만큼 편리하고 아름다운 웹사이트를 빠르게 개발할 수 있다는 장점이 있어서 여러분에게도 소개하려고 합니다!

Tailwindcss가 뭐죠? 🤔

tailwindcss는 (이후 테일윈드) 부트스트랩과 비슷한 css 프레임워크입니다. 개발에 자주 사용되는 css 코드들을 미리 정의해 놓고, 클래스에 미리 정의된 코드의 이름을 적으면 스타일이 적용되는 방식이죠.

왼쪽과 같이 코드를 작성하면, 오른쪽과 같은 결과가 나옵니다. (css 코드가 한줄도 없죠!)

Bootstrap, bulma, materialize, ui-kit 등등... 정말 수많은 css 프레임워크들이 있는데요. 제가 웬만한건 다 써봤지만 테일원드만큼 잘 만들어지고, 편하게 쓸 수 있는 것은 없었습니다.

테일윈드의 장점 👍

쓸만한 모든 css를 통째로 옮겨 놓아서, 새로 만들 필요가 없다!
강력한 기본 색 파레트 제공
config 파일을 이용한 강력한 확장성 및 커스터마이징 제공

유틸리티 중심 설계 🛠️

이런 장점들은 테일윈드의 코어 컨셉에서 나오는 것 같습니다. 테일윈드는 Utility-First Fundamentals를 메인 컨셉으로 내세우고 있습니다. 이는 어떤 디자인을 만들어내기 위한 전용 클래스 및 스타일링을 하는 것이 아닌, 어디서든 활용할 수 있는 유틸리티 클래스는 만드는 것을 이야기 합니다.

공식 문서에서는 다음과 같은 두 가지 예시로 설명하고 있습니다.

첫 번째 예시는 토스트 알림을 만들기 위해 전용 클래스를 만들고, 그에 대응하는 스타일을 만드는 방법입니다. 하지만 위의 예시에서 볼 수 있듯이 코드의 길이가 길어지고, style 태그 안에 css 코드를 따로 작성해 주어야 한다는 단점이 있죠.

css 코드를 별도의 style 파일로 분리한다면 관리해야하는 파일이 더 늘어나고 개발에 어려움을 겪을 것입니다. (아마 notification-style.css와 같은 파일들을 끊임없이 만들어내게 되겠죠.)

하지만 테일윈드는 사람들이 기본적으로 많이 사용하는 스타일들을 전부 개별 분리하여 css 코드로 정의해 놓았습니다. 따라서 다음과 같이 css 없이 같은 결과를 만들어낼 수 있습니다.

어떤가요? 코드가 훨씬 간결하고 명확하죠?

클래스 이름들을 css 코드 읽듯이 그대로 읽을 수 있다는 것도 엄청난 장점👍입니다. 클래스 이름만 보아도 어떤 스타일이 적용되는지 한눈에 파악할 수 있죠.

p-6 : padding을 6만큼 설정한다.
max-w-sm : max-width를 작게 설정한다.
mx-auto : 좌우(x) margin을 auto로 설정한다.
bg-white : 배경색을 white로 설정한다.
rounded-xl : 테두리를 둥굴게 설정한다. (border-radius)
shadow-lg : 큰 그림자를 적용한다.

테일윈드를 사용하지 않았다면, 각각의 클래스 이름을 보고 그 클래스에 어떤 스타일이 적용되어 있는지 확인하기 위해 style 파일과 html 파일을 번갈아보면서 살펴보아야 하는 상황이 생길겁니다.

정말 쓸만한 테일윈드, 이제 한 번 체험해 볼게요!

Tailwindcss 설치하기 🖥️

테일윈드 공식 사이트 👇
https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Documentation for the Tailwind CSS framework.

tailwindcss.com

테일윈드 공식 사이트에서 자세한 설치 방법을 확인할 수 있습니다!

테일윈드는 기본적으로 다양한 프론트엔드 프레임워크를 지원합니다. 아래의 프레임워크 중 여러분이 사용하는 프레임워크를 선택하여 적용하면 됩니다.

저는 요즘 vite를 자주 사용하고 있기 때문에 vite + react-ts 위주로 알아보겠습니다. react 없이 순수하게 tailwindcss만 사용해보실 분들은 아래의 cdn을 이용하시면 됩니다.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

1️⃣ Vite로 새로운 React 프로젝트 만들기

우선은 vite로 새로운 react 프로젝트를 만들어줍니다. yarn이 설치되어 있다면, 아래의 코드를 쉽게 새로운 react/vite 프로젝트를 생성할 수 있습니다.

> yarn create vite new-app --template react-ts

npm을 사용하신다면 아래의 코드를 실행하면 됩니다.

> npm create vite@latest new-app -- --template react-ts

그 다음에 프로젝트 폴더로 이동해 tailwindcss를 설치해 보겠습니다.

2️⃣ tailwindcss 설치하기

프로젝트 루트에서 아래 명령어를 실행해 tailwindcss를 설치합니다.

> yarn add -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p

첫 번째 명령어는 tailwindcss와 함께 사용되는 라이브러리를 설치하고,
두 번째 명령어는 tailwindcss를 설정하기 위한 기본 파일들을 생성합니다.

두 번째 명령어를 실행하면 프로젝트 루트에 "tailwind.config.cjs" 파일이 생성되었을 겁니다.
(typescript를 사용하지 않는다면 tailwind.config.js로 만들어질 거예요!)

3️⃣ tailwindcss 설정하기

react 혹은 vue 등의 프론트엔드 프레임워크에서 tailwindcss를 사용하려면 몇 가지 설정을 해주어야 합니다.
생성된 설정파일을 열고 다음과 같이 수정해 주세요!

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

content 안에 파일 경로 및 확장자들이 추가되었습니다.
react 프로젝트 기준으로 작성되었기 때문에 jsx, tsx 등 확장자를 추가해 주었습니다.

다음으로 index.css 파일을 다음과 같이 수정합니다.

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4️⃣ 내 입맛대로 커스터마이징 하기

tailwind.config.cjs 파일에서 내 입맛에 맞게 테일윈드를 커스터마이징할 수 있습니다.
저 같은 경우는 아래 코드로 primary color를 추가했습니다.

// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors");
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        ...colors,
        primary: "#1a74e5",
      },
    },
  },
  plugins: [],
};

이렇게 색깔을 추가하면 색과 관련된 모든 코드에 primary color가 추가됩니다.
그래서 설정 이후에 다음과 같은 코드들을 추가로 사용할 수 있게 됩니다.

bg-primary
text-primary
border-primary
outline-primary
등등

이 외에도 테일윈드에서 제공하는 다양한 플러그인들을 적용할 수도 있고, padding, margin 사이즈 등을 추가할 수도 있습니다.

일일이 새로운 설정을 추가하는 것이 귀찮을 수도 있습니다... (실제로 엄청 귀찮습니다.) 특히 margin, padding, font-size, width, height와 같이 자주 수정되고 내 입맛에 맞춰서 조금씩 다른 값으로 사용되는 코드들은 더 귀찮습니다.

실제로 다른 css 프레임워크들에서 제가 느꼈던 가장 큰 단점은 프레임워크에서 제공하지 않는 스타일들을 직접 만들어야 한다는 점이었습니다. 때문에 프레임워크과 직접 작성한 css를 함께 사용해야 했던 것이죠. 그 과정에서 내가 원하는 디자인을 만들기 위해 새로운 클래스 이름과 스타일들을 만들어내고, inline style 등을 사용하면서 코드가 복잡해지는 문제가 있었습니다.

하지만 테일윈드를 그런 문제들을 완벽하게 해결할 수 있는 방법을 제공합니다. 아래의 코드를 살펴 보시죠.

<div class="w-[200px] h-[200px] text-[3rem] rounded-2xl overflow-hidden z-[10]">
	<img src="https://picsum.photos/200" alt="random image" />
</div>

원래 테일윈드에는 width를 200px로 지정할 수 있는 클래스를 제공하지 않습니다.

위의 코드와 같이 대괄호 안에 값을 직접 넣으면 테일윈드가 해당 값을 가지는 속성을 자동으로 css로 변환해 빌드합니다. 실제로 빌드된 결과를 보면 다음과 같은 코드들이 자동으로 추가되어 있는 것을 볼 수 있습니다!

진짜 엄청나다고 밖에 말할 수 없습니다.

그리고 더 놀라운 점은!!
테일윈드에서 css 파일을 빌드할 때 내가 코드에 사용한 클래스들만 빌드한다는 점입니다. 👍

예를 들어서 테일윈드에서 제공하는 100가지 클래스 중에서 50가지만 사용하였다면, 사용된 50개의 클래스만을 가진 css 파일이 만들어지는 것입니다. 이렇게 되면 css 파일의 용량을 최적화해서 웹 사이트를 가볍게 만들 수 있습니다.

5️⃣ 코드 작성하기

이제 테일윈드를 적용해 코드를 작성할 수 있습니다!

function App() {
  return (
    <div className="h-screen bg-gray-100">
      <nav className="bg-primary py-4">
        <div className="container mx-auto px-5">
          <h1 className="font-bold text-xl text-white">세상의 모든 지식</h1>
        </div>
      </nav>

      <div className="container mx-auto">
        <section className="p-5">
          <header className="mb-4">
            <h2 className="font-bold text-lg">내 게시물</h2>
          </header>

          <div className="grid grid-cols-4 gap-5">
            <div className="rounded-2xl overflow-hidden">
              <img
                src="https://picsum.photos/200"
                className="w-[200px] h-[100px] object-cover"
              />
              <div className="p-4 bg-white">
                <header className="mb-2">
                  <h3 className="font-bold text-ellipsis whitespace-nowrap overflow-hidden">
                    [Tailwindcss] css 1줄 없이 예쁜 웹사이트 만들기
                  </h3>
                </header>
                <p className="text-gray-400 text-sm">
                  안녕하세요! 오늘은 새로운 라이브러리를 소개해드릴까합니다!
                </p>
              </div>
            </div>
            <div className="rounded-2xl overflow-hidden">
              <img
                src="https://picsum.photos/200"
                className="w-full h-[150px] object-cover"
              />
              <div className="p-4 bg-white">
                <header className="mb-2">
                  <h3 className="font-bold text-ellipsis whitespace-nowrap overflow-hidden">
                    [Tailwindcss] css 1줄 없이 예쁜 웹사이트 만들기
                  </h3>
                </header>
                <p className="text-gray-400 text-sm">
                  안녕하세요! 오늘은 새로운 라이브러리를 소개해드릴까합니다!
                </p>
              </div>
            </div>
            <div className="rounded-2xl overflow-hidden">
              <img
                src="https://picsum.photos/200"
                className="w-full h-[150px] object-cover"
              />
              <div className="p-4 bg-white">
                <header className="mb-2">
                  <h3 className="font-bold text-ellipsis whitespace-nowrap overflow-hidden">
                    [Tailwindcss] css 1줄 없이 예쁜 웹사이트 만들기
                  </h3>
                </header>
                <p className="text-gray-400 text-sm">
                  안녕하세요! 오늘은 새로운 라이브러리를 소개해드릴까합니다!
                </p>
              </div>
            </div>
            <div className="rounded-2xl overflow-hidden">
              <img
                src="https://picsum.photos/200"
                className="w-full h-[150px] object-cover"
              />
              <div className="p-4 bg-white">
                <header className="mb-2">
                  <h3 className="font-bold text-ellipsis whitespace-nowrap overflow-hidden">
                    [Tailwindcss] css 1줄 없이 예쁜 웹사이트 만들기
                  </h3>
                </header>
                <p className="text-gray-400 text-sm">
                  안녕하세요! 오늘은 새로운 라이브러리를 소개해드릴까합니다!
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

export default App;

결론

이렇게 해서 css 한줄 없이 예쁜 웹사이트를 만들 수 있는 tailwindcss에 대하여 알아보았습니다.
(실제로는 설정을 위해 3줄 작성했습니다 ㅎㅎ)

tailwindcss, 어떠셨나요? 앞으로의 새로 시작하는 프로젝트에 한 번 적용해보세요!
그리고 여러분이 어떤 인상을 받으셨는지 댓글로 간단하게 남겨주세요 🙂

728x90

저작자표시