[Next Js + TypeScript + Tailwind CSS 프로젝트] - 1편 Tailwind CSS

이번에 회사에서 빠르고 간단하게 예약 시스템을 만들 일이 생겨서, 평소에 관심 있었던 기술 스택들을 가지고 프로젝트를 시작했다! 이들을 채택한 이유를 간단하게 설명하고, 내가 겪은 오류들을 해결한 방법을 쓰고자 한다.

Tailwind CSS

그 전에 혼자 사이드 프로젝트를 하면서 tailwind를 써봤는데 너무 신세계였어서 이번에도 도입했다.

tailwind 를 써본 후 느낀 장점은

1. 아주 간편하게 글로벌 디자인을 통일시킬 수 있다.

tailwindconfig.js에 아래와 같이 입력만 하면 끝!

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    screens: {
      mobile: '375px',
      tablet: '1024px',
      desktop: '1200px',
      wide: '1536px',
    },
    fontFamily: {
      sans: ['Noto Sans KR', 'sans-serif'],
    },
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
    },
    extend: {
      colors: {
        lightScheme: {
          primary: '#1E41EB',
          'primary-focus': '#3454ed',
          'primary-content': '#ffffff',
          secondary: '#E8EBF9',
          'secondary-focus': '#d4d9f4',
          'secondary-content': '#1E41EB',
          accent: '#11B679',
          'accent-focus': '#28bd86',
          'accent-content': '#ffffff',
          neutral: '#ECEDEF',
          'neutral-focus': '#dee0e3',
          'neutral-content': '#3e4549',
          'base-100': '#f2f2f2',
          'base-200': '#f7f8f9', // 기본 배경색상
          'base-300': '#FFFFFF',
          'base-content': '#111314', // 타이틀 폰트 색상
          info: '#88929c', // 부가설명 폰트 색상
          success: '#0FA36C',
          warning: '#DB5F6C',
          error: '#DB5F6C',
        },
        gray: {
          100: '#111314', // 타이틀 폰트 색상
          200: '#3e4549', // 본문 폰트 색상
          300: '#737e8a',
          400: '#88929c', // 부가설명 폰트 색상
          500: '#AAB1B8',
          600: '#d5d7db',
          700: '#dee0e3',
          800: '#f7f8f9', // 기본 배경 색상
          900: '#ffffff',
        },
        blue: {
          100: '#ebf8ff',
          200: '#bee3f8',
          300: '#90cdf4',
          400: '#63b3ed',
          500: '#4299e1',
          600: '#3182ce',
          700: '#2b6cb0',
          800: '#2c5282',
          900: '#2a4365',
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  // eslint-disable-next-line global-require
  plugins: [require('daisyui')],
  daisyui: {
    styled: true,
    base: true,
    utils: true,
    logs: true,
    rtl: false,
  },
};

이런식으로 간격을 입력할 수 있다.
이 때, plugins require 부분에서

eslint-disable-next-line global-require

이것을 안해주면.. 아주 참사가 일어난다. (꽤나 많은 시간을 소모함 ㅜㅜ)

Error: Unexpected require().  global-require

빌드 및 배포 과정에서 이 에러가 계속 날것이다...
위에 꼭 주석 문구를 추가해주자^^
esLint를 설정하는 법도 있는데, 추후 포스팅에서 자세히 다뤄보겠다.

2. 컴포넌트 네이밍에 신경쓸 필요가 없다.

그냥 이런식으로 쓰면 된다.

<div className="w-full bg-gray-800 px-4"></div>

3.커스텀도 아주 쉽다.

다크모드 구현도 아주 쉽다. 난 daisy ui를 사용했기에 tailwind.config.js에서 다음과 같이 설정해주었다.

  plugins: [require('daisyui')],
  daisyui: {
    styled: true,
    themes: [
      {
        dark: darkScheme,
        light: lightScheme,
      },
    ],
    base: true,
    utils: true,
    logs: true,
    rtl: false,
  },

이제 맛보기 간단 예시 코드를 보면

<div className="border-solid border-r dark:border-gray-600 border-gray-300" />

이런 식인데, 다크 모드에서는 gray-600 이 적용되고, 라이트 모드에서는 gray-300이 적용되는 것이다. 매우 간편!

4. 자동완성만 있다면 무엇이든 빠르게 해낼 수 있어.

무조건 이 익스텐션을 사용하자. 다운받기

원래 모든 기술 스택에 관한 인사이트를 다 다루고 싶었는데 시간이 너무 늦어서 다음 포스팅에 이어서 쓰겠다 :)

tailwind CSS 공홈 둘러보기