[CSS] Tailwind CSS 반응형 커스텀 사이즈 세팅하기

 

안녕하세요, 성조입니다.

프론트엔드를 개발하다 보면 흔하게 사용되는 CSS 프레임워크인 Tailwind CSS에 대해 포스팅하는 시간을 가져보려 해요.

Tailwind CSS가 가독성 규칙이 좋지 못해서 추천받지 못하는 경우도 있지만, CSS감이 부족한 저에게는 많은 도움을 주고 있는 CSS 프레임워크입니다 😂

 

※ 해당 포스트는 학습을 기록하기 위해 작성된 게시물로 다소 부족한 정보를 담고 있을 수 있습니다.

---

 

요즘 Nextjs에서는 Tailwind CSS 설치 및 설정을 초기 프로젝트 세팅에서 같이 설치하는 경우가 있다.

만약 Tailwind CSS 패키지를 초기에 설치를 하지 않았다면 다음과 같이 프로젝트 폴더에서 Tailwind CSS를 설치할 수 있다.

 

1. Tailwind CSS 설치 및 설정

# 프로젝트 폴더에서 Tailwind와 관련 패키지를 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

1. npm install -D tailwindcss postcss autoprefixer

해당 명령어는 Tailwind CSS와 관련된 패키지들을 설치하는 명령어이다.

명령어의 의미를 이해하기 위해 각 패키지의 설명을 덧붙인다.

 

tailwindcss

Tailwind CSS 프레임워크 자체이다.

유틸리티 클래스를 통해 빠르고 효율적인 CSS 스타일링을 가능하게 도와주는 데 Tailwind CSS가 설치되면, 프레임워크에서 미리 개발된 다양한 CSS 유틸리티 클래스를 사용하여 스타일을 쉽게 조정할 수 있게 된다. 그리고, CSS에 적용되는 우선순위를 사용자가 커스텀할 수 있기 때문에 작은 프로젝트에서 초기에 사용할 때 생산성 측면이 좋을 것이라 생각된다. 하지만, CSS가 적용되는 공간이 늘어날수록 코드를 읽는 가독성 측면이 급격히 떨어질 수 있기 때문에 주의하여 작성하면 매우 좋은 프레임워크가 될 것으로 보인다.

 

postcss

CSS 후처리기로, CSS 파일을 처리하고 변환할 수 있도록 돕는 도구이다.

Tailwind CSS와 결합하여, 작성한 스타일 코드가 최적화되고 여러 브라우저 호환성 문제를 해결하도록 도와주는 역할을 한다.

CSS에서 display: flex;라고 사용하게 되면, postcss가 이를 다양한 브라우저 환경에 맞춰 자동으로 변환할 수 있게 도와준다.

 

autoprefixer

PostCSS의 플러그인 중 하나로, 브라우저 호환성을 위해 자동 접두사(prefix)를 추가해 주는 역할을 담당한다.

ex) postcss가 display: flex;와 같이 CSS 속성을 입력하면 autoprefixer가 브라우저와 호환될 수 있도록 -webkit- 등의 접두사를 자동으로 추가해 주는 것이다.

 

※ -D 옵션의 경우 개발 의존성(devDependencies)으로 설치하겠다는 의미이다.

 

 

 

2. npx tailwindcss init -p

이 명령어는 Tailwind CSS를 설정하기 위해 필요한 초기 설정 파일을 프로젝트에 생성하는 역할을 한다.

 

npx는 실행 가능한 패키지를 바로 사용할 수 있도록 해주는 npm의 도구이다.

yarn을 프로젝트에서 사용하는 경우 yarn tailwind init를 사용해 주면 된다.

 

[참조]

https://tailwindcss-v0.netlify.app/docs/installation/

Tailwind CSS

 

tailwindcss init

Tailwind CSS 설정 파일(tailwind.config.js)을 생성하는 명령어이다.

Tailwind에서 제공하는 테마, 색상, 브레이크포인트 등 사전에 개발된 내용들을 가져올 수 있으며, 사용자가 직접 커스텀하여 프로젝트에 필요한 다양한 설정들을 가져올 수 있다.

 

 

-p 옵션

PostCSS 설정 파일(postcss.config.js)을 함께 생성해 주는 명령어이다.

postcss.config.js는 PostCSS와 관련된 설정을 정의하는 파일로, autoprefixer와 같은 플러그인을 Tailwind CSS와 함께 사용할 수 있도록 설정할 수 있다.

해당 파일이 생성되면 PostCSS와 Tailwind CSS가 연동되어 최적화 작업을 수행하는데 이때 프로젝트에 tailwind.config.js와 postcss.config.js가 생성된다.

 

tailwind.config.js

옵션을 정의하는 파일로 색상, 글꼴 크기, 브레이크포인트 등을 필요에 따라 수정할 수 있다.

또한, content 배열을 설정하여 Tailwind가 사용되는 파일들(ex: Next.js의 pages와 components 폴더)을 지정한다.

 

postcss.config.js

tailwindcss와 autoprefixer 플러그인을 등록하여 프로젝트에서 Tailwind가 제대로 작동하도록 설정된다.

 

 

2. Tailwind CSS 기본 설정하기

프로젝트 초기 세팅에서 tailwind를 설정했다면 괜찮지만 마이그레이션 하는 경우 기본 프로젝트 환경에 적합하게 CSS가 제대로 설정되어 있는지 의문이 들 수 있다.

tailwind.config.js 파일을 열고 Next.js 디렉터리 구조에 맞춰 설정을 추가하면 된다.

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Next.js 프레임워크를 사용하여 세팅한 경우 자동으로 설정되어 있을 것이다. 

 

 

 

3. Tailwind CSS를 글로벌 CSS 파일로~

styles/globals.css 파일을 열어 보면 다음의 코드가 있을 것이다.

이번에 추가했기 때문에 없다면 해당 내용을 넣어주자

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

 

조금 더 자세하게 알아보자

1. @tailwind base;

Tailwind의 기본 스타일과 리셋 스타일을 불러온다.

HTML 요소에 Tailwind의 초기 스타일을 적용해 모든 브라우저에서 일관되게 표시되도록 해 주는 명령어이다.

기본 HTML 태그(ex: <h1>, <p>, <a> 등)에 표준화된 스타일이 적용된다.

 

2. @tailwind components;

tailwind에서 제공하는 UI 컴포넌트 스타일을 불러온다.

자주 사용되는 버튼 스타일, 폼 스타일 등을 기본적으로 제공하며, 사용자가 커스텀한 컴포넌트도 여기에 추가할 수 있다.

커스텀하면 복잡도가 올라갈 수 있지만, 뼈대를 설계하고 구축하는 것에 많은 도움이 된다.

 

 

3. @tailwind utilities;

Tailwind의 유틸리티 클래스를 불러온다.

text-center, bg-blue-500, m-4 등 개별 스타일 속성을 담당하는 클래스가 포함되어 있어, 필요에 따라 쉽게 스타일을 조정할 수 있다. 특히 반응형 디자인과 커스텀을 작업할 때 유용하게 사용되는 유틸리티 클래스이다.

 

globals.css을 있는 _app.js 또는 최상위 앱이 있는 파일에 css를 import 하면 tailwind css가 적용된다.

 

 

 

4. 기본 제공 반응형 클래스 적용 예시

export default function Home() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl md:text-4xl lg:text-6xl font-bold">
        반응형 타이틀
      </h1>
      <p className="text-base sm:text-lg md:text-xl lg:text-2xl">
        화면 크기에 따라 글자 크기가 변경됩니다.
      </p>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div className="bg-blue-500 p-4">Card 1</div>
        <div className="bg-green-500 p-4">Card 2</div>
        <div className="bg-red-500 p-4">Card 3</div>
      </div>
    </div>
  );
}

 

- 텍스트 크기 조정: txet-2xl, md:text-4xl, lg:text-6xl와 같이 반응형 클래스(sm, md, lg)를 사용하여 화면 크기에 따라 글자 크기를 조정한다.

- 그리드 레이아웃 설정 : grid-cols-1, sm:grid-cols-2, md:grid-cols-3 등을 사용하여 화면 크기에 따라 컬럼 수를 변경할 수 있다.

 

 

 

5. tailwind CSS 커스텀하기

tailwind.config.js 파일 열면 다음과 같이 기본 설정이 되어 있을 것이다.

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

 

스크린 화면은 커스텀 외에도 다른 명칭을 추가하여 적용할 수 있다.

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    screens: {
      'xs': '365px',         // 커스텀 브레이크포인트: 365px 이상일 때 적용
      'sm': '460px',
      'md': '640px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      'max-xs': { 'max': '350px' }, // 커스텀 브레이크포인트: 350px 이하일 때 적용
    },
    extend: {},
  },
  plugins: [],
};

 

 

 

Tailwind css 기본 브레이크 포인트 정보

https://tailwindcss.com/docs/responsive-design

Responsive Design - Tailwind CSS

Tailwind CSS에서 기본으로 지원해 주는 브레이크 포인트는 다음과 같다.

중단 지점, 최소 사이즈, CSS 

sm - min-width: 640px
md - min-width: 768px
lg - min-width: 1024px
xl - min-width: 1280px
2xl - min-width: 1536px

모바일 환경은 정의된 화면보다 작은 화면이 많기에 커스텀을 진행하자

 

---

잘못 전달된 내용이 있다면 언제든지 댓글로 알려주시면 감사드리겠습니다.

 

다음 포스트에서 뵙겠습니다.

감사합니다.