Tailwind CSS로 블로그 개편하기

동기

Next.js에서 Tailwind CSS, Cypress 사용기라는 글을 작성하며 Tailwind CSS로 블로그 개편을 진행하였습니다. 기존에는 Bulma라는 CSS Framework를 사용하고 있었는데, 입맛에 맞는 스타일을 적용하는 부분이 불편하다고 느끼고 있어서 이번 기회를 통해 전환하고자 했습니다. 추가로 사용이 애매한 메인의 페이지 및 공유 버튼들은 제거하고 다크 테마를 적용하고자 했습니다.

Tailwind CSS 설정

Tailwind CSS는 공식 문서에서 환경별 설정 방법을 자세하게 제공하고 있습니다. Install Tailwind CSS with Gatsby를 통해 필자가 사용하고 있는 Gatsby 환경에 맞추어 설정하였습니다. 필자의 경우 Styled Component와 함께 사용하는 것을 선호하여서 twin.macro 또한 이 문서를 참고하여 함께 설정하였습니다. 설정을 마치면 아래 코드와 같이 Tailwind CSS와 Styled Component를 함께 사용하실 수 있습니다.

interface PropsType {
  size?: number;
}

const Spin: FC<PropsType> = props => {
  const { size = 30 } = props;

  return (
    <Wrapper>
      <Container size={size}>
        <ImSpinner3 className="icon-spin" size={size} />
      </Container>
    </Wrapper>
  );
};

export default Spin;

const Wrapper = styled.div`
  ${tw`absolute left-0 top-0 right-0 bottom-0 z-50`}
`;

const Container = styled.div<{ size: number }>`
  ${tw`absolute`}
  width: ${({ size }) => size}px;
  height: ${({ size }) => size}px;
  left: calc(50% - ${({ size }) => size * 0.5}px);
  top: calc(50% - ${({ size }) => size * 0.5}px);
`;

설정을 끝내고는 Bulma를 걷어 내고 Styled Component도 가능한 부분들에 대해서 twin.macro를 사용하여 Tailwind CSS를 사용하도록 전반적으로 수정하였습니다. twin.macro와 Styled Component를 사용하지 않고 바로 className에 적용하여 별도의 컴포넌트를 생성하지 않고 사용할 수 있지만, 필자의 경우는 별도의 파일로 분리하기에는 애매하지만 className에만 적용하기에는 의미가 와닿지 않는 컴포넌트를 twin.macro와 Styled Component를 사용하여 분리하여 사용하는 것을 선호하여 이렇게 사용하고 있습니다.

Dark Theme

공식 문서 및 다른 많은 참고 문서들이 있지만, 필자는 TailwindCSS Dark Mode in Next.js with Tailwind Typography Prose Classes라는 글을 참조하여 설정하였습니다. 해당 글에서는 아래 코드와 같이 tailwind.config.js를 설정하고 있으며 @tailwindcss/typography플러그인을 사용합니다. 이 설정에서는 플러그인의 기본 테마를 다 제거하게 되어있어(typography: (theme) => ({})), 필요에 따라 설정하여 사용하였습니다.

module.exports = {
  darkMode: 'class',
  purge: {
    enabled: true,
    content: ['./src/**/*.tsx'],
    options: {
      safelist: ['dark'], //specific classes
    },
  },
  theme: {
    typography: (theme) => ({}),
    extend: {
      typography: (theme) => ({
        dark: {
          css: {
            color: 'white',
          },
        },
      }),
    },
  },
  variants: {
    typography: ['dark'],
  },
  plugins: [require('@tailwindcss/typography')],
}

필자는 위와 같이 설정 후에 Helmet을 사용하여 html의 class에 테마를 설정하고 body에 typography 및 배경에 대한 설정을 진행하여 사용하였습니다.

const Head: FC<PropsType> = () => {
  const { theme } = useLayoutState();
  return (
    <Helmet
      htmlAttributes={{
        class: theme,
      }}
      bodyAttributes={{
        class: 'prose dark:prose-dark bg-white dark:bg-gray-800',
      }}
    />
  );
};

export default Head;

마치며

앞서 언급한 이외에 자잘한 수정들이 있었지만, 전반적으로 크게 변경한 부분만 기록차 작성하였습니다. Jekyll에 테마를 받아쓸 때보다는 Gatsby와 Bulma를 사용하여 개편했을 때 더 자유롭게 수정을 할 수 있어 만족하고 있었습니다만, Bulma를 사용하는 부분이 늘 마음에 걸려왔습니다. 블로그를 개편할 당시에는 조금이나마 Bulma에 학습을 하였지만, 블로그 이외에는 사용하지 않기 때문에 시간에 지남에 따라 학습한 부분들은 잊히게 되어 유지보수에 어려움이 생겼습니다. Tailwind CSS 또한 사용하지 않으면 같은 문제를 겪겠지만, 업무적으로나 업무 외적으로나 사용할 일이 있어서 이번 기회에 전환을 진행하였고 결과에도 만족스러웠습니다.