Tailwindcss

CSS 라이브러리를 선택하기 전 CSS의 발전 흐름에 대해 정리한 글을 보았다.

CSS의 발전 흐름에 대해 정리한 글: 내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1

정말 간단히 요약하면 다음 그림과 같을 것이다.

첫 CSS 라이브러리로 SASS를 학습했던터라 오히려 구조화된 변수나 함수를 잘 사용하지 못하면서 코드가 중구난방으로 작성되는 불편함도 직접 느낄 수 있었다.
이후 styled-component를 사용하면서 class 네이밍에 대한 부담은 줄었지만 여전히 컴포넌트 네이밍과 한줄의 CSS를 추가하기 위해 컴포넌트를 만드는 것에 대한 불편함을 느낄 수 있었다.

atomic CSS에 대한 개념은 개발 선배님들 중 한분께서 if(kakao) 2021: Functional CSS와 Figma를 이용한 디자이너와의 웹프론트 협업이야기 링크를 전달해주셔서 접하게 되었다.

처음에는 위 글에서처럼, 이 영상에서처럼 atomiccss는 다시 인라인 방식으로 돌아가는 것이 아닌가하는 생각이 들었다.

하지만 글과 영상을 보다보니 제일 와닿았던 문구가 있다.

atomic css를 사용한다면

예전에는 Page 단위로 html 파일을 작성하여 html 태그와 css 스타일링이 함께 존재하는 것이 가독성과 디버깅에 불리하여 semantic한 코드의 중요성이 매우 강조되었다.

하지만 컴포넌트 단위로 파일을 작성하는 지금은 컴포넌트가 시맨틱과 중복방지의 역할을 대신해주고 있기 때문에 상대적으로 시맨틱의 중요성이 떨어진다고 할 수 있다.

이제는 Atomic Css를 사용해도 되는 이유 - 시대가 변했다!

항상 불편함이 와닿기 전에는 이 흐름의 변화를 이해하기 어렵다. 하지만 불편함을 직접 겪고 그 불편함이 와닿았을 때 이해가 되는 것 같다.

그래서 이번 미니 프로젝트의 라이브러리로 Tailwindcss를 사용해보기로 하였다.

Tailwindcss

기본 세팅

나는 리액트로 개발하고 있기에 docs - Install Tailwind CSS with Create React App 를 참고하여 세팅하였다.

라이브러리 설치

npm install -D tailwindcss
npx tailwindcss init

tailwind.config.js 파일 수정

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

index.css에 Tailwindcss 지시문 추가하기

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

사용해보기

<h1 className="text-3xl font-bold underline">Hello world!</h1>

VSC extension

Visual Studio Code에서 Tailwindcss intellisense라는 extension가 있는데 자동완성 기능, 오류 등을 강조해주는 등 매우 편리한 기능을 제공한다고 하니 설치해보는 것을 추천드립니다!