[Vue] Tailwind.css(with Nuxt.js) 시작하기

 

Tailwind.css 란?

-Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크로 부트스트랩처럼 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내 스타일링이 가능하다.

 

** Tailwind.css의 특징

- 매우 쉽고 빠르게 원하는 디자인을 개발할 수 있다.

- 커스텀이 편리하다. 커스텀을 할 경우, 기본 스타일 값을 수정하는 방식이므로 디자인 일관성을 크게 해치지 않는다.

- Intelli Sens 플러그인을 통해 세밀하게 원하는 디자인을 구현하기가 편하다. (미리보기, 자동완성, 신택스 하이라이팅, 린팅지원)

- 편리하지만 코드가 지저분해보일 수 있다.(css가 분리되어있는 게 아니므로)

 

 

 

1. tailwind.css 설치하기 (with Nuxt.js)

-  nuxt.js 2.15.8 버전을 사용하면서 프로젝트 생성시 환경설정을 통해 tailwind.css를 설치했으므로 자동으로 설치, 설정이 되었다.

-> 이 과정을 자동화한 nuxt.js 모듈이 존재하므로 개별 설치가 필요하지 않았음

 

**그렇지 않을 경우의 설치방법 - 설정환경의 버전에 따라 맞춰 설치

- 터미널에서 npm install tailwindcss@latest postcss@latest autoprefixer@latest 
= Tailwind CSS v2 부터는 IE를 지원하지 않기 때문에 PostCSS의 autoprefixer 등을 함께 사용해야 한다.

 

1-2) tailwind 설정 파일 생성

- 터미널에서 npx tailwindcss init 

= tailwind.config.js 파일 형성

 

1-3) tailwind css 적용하기

프로젝트에서 tailwind.css를 사용할 수 있도록 assets/css 폴더에 tailwind의 기본 css 파일을 추가하고 nuxt.config.js에 포함시킨다.

 

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

nuxt.config.js

 

nuxt.js 를 통한 프로젝트내에서는 buildModules에서만 설정을 해줘도 tailwind.css가 작동하였다.

왜 이렇게만 해도 작동하나요?

@nuxtjs/tailwindcss 모듈은 Tailwind CSS와 관련된 모든 설정을 자동으로 처리해주기 때문에, 별도의 설정 파일이나 CSS 파일을 추가하지 않아도 된다 Nuxt.js는 이 모듈을 통해 Tailwind을 쉽게 통합할 수 있도록 돕는다.

 

tailwind.css 사용예시

 

tailwind.css 설치가 완료되었고 template내의 html 요소에 적용시키면 설정을 통해 작동할 수 있는 것을 알 수 있다.

 

 

** tailwind.css 유틸리티 클래스 참고  https://tailwindcss.com/docs/colors 

 

 

 

 

2.  커스텀 적용하기 

 

- tailwind.css를 사용하다보면 기존 요소를 확장해서 사용해야하는 경우가 있는데  이럴 땐 tailwind.config.js 파일에서 extend를 통해 확장 요소를 설정해준다.

 

자주사용하는 width요소와 height 요소들을 설정해 줄 수 있다. 

 

 

 

3. 이벤트 적용하기 (hover) - hover:적용요소

hover:bg-red-100 등을 적용하면 hover시 백그라운드 컬러가 red 계열의 100이 적용되어라 라는 뜻으로 기본적인 hover 이벤트 적용의 예시다.

그렇다면 부모요소와 자식요소를 연계해서 이벤트 적용할 수 있을까? -> group을 사용하면 가능하다.

 

 

article 요소에 group을 주고 자식요소내 img에 grop-hover:적용요소를 주었다. 위 코드의 경우 article에 hover시 이미지가 tranfrom:scale(1.1)을 하는 효과를 가진다. 

 

 

4. 반응형 적용하기

- Tailwind CSS는 반응형 디자인을 매우 쉽게 구현할 수 있는 유틸리티 클래스들을 제공하는데 기본적으로 제공되는 반응형 브레이크포인트에 맞춰 클래스들을 지정할 수 있다.

Tailwind의 기본 반응형 브레이크포인트:

• sm: 최소 너비 640px 이상
• md: 최소 너비 768px 이상
• lg: 최소 너비 1024px 이상
• xl: 최소 너비 1280px 이상
• 2xl: 최소 너비 1536px 이상

기본적으로 Tailwind는 모바일 우선 접근 방식(mobile-first)을 사용하므로, sm, md, lg, xl, 2xl 등의 클래스는 해당 화면 크기 이상에서만 스타일을 적용한다. ** 해당화면 크기 이상을 기준으로 사용됨을 잊지말자!

 

<p class="text-base sm:text-lg md:text-xl lg:text-2xl">
  반응형 텍스트 크기
</p>

 

 

본인의 경우, 특정 너비만을 반응형으로 잡기로 하고 @media all and (max-width: ~) 를 기준으로 커스텀을 설정하기로 했다.

screens 라는 기본값을 확장하였다.

1024px 과 810px을 기준으로 태블릿 ~ 모바일 반응형 설정

 

 

 

위 코드의 경우,  article이 md-810 이하 일 때 너비값이 full로 변경되며 자식요소 imgBoxs 또한 md-810 이하일때 height 값이 50%으로 변하도록 적용하였다.

 

5. 반복되는 스타일 설정하기 : @apply

@apply는 tailwind css에서 유용한 기능으로, 여러 클래스를 한 번에 CSS 파일에서 반복적으로 적용할 수 있게 해준다. 이를 통해 반복되는 스타일을 별도의 클래스로 정의할 수 있어 코드가 더 깔끔하고 관리하기 쉬워진다.

간단히 말해 @apply는 Tailwind CSS에서 반복되는 유틸리티 클래스를 하나의 클래스에 모아 재사용할 수 있게 해주는 기능이다.

 

1. 버튼 스타일 정의  - @apply 사용 예시

자주 사용되는 버튼 스타일을 @apply를 통해 하나의 클래스에 묶을 수 있다.

 

/* styles.css 또는 tailwind.css */
.btn {
  @apply bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none;
}

 

<button class="btn">
  클릭하세요
</button>

 

 

btn이라는 클래스요소를 css 스타일 처럼 적용해 사용 할 수 있다.

 

 

 

- 

bootstrap을 이전에 사용해보기도 했지만 본인은 1.코드의 가독성이 떨어지는 경우와 2.css의 유연성이 저하되는 경우를 우려해 이러한 css프레임 워크를 사용하지 않았다.

그러나 tailwind를 사용해보면서 1. 일관성있는 디자인 2. 유연한 프레임워크 구조의 발달 3. 자유로운 커스텀 4. 개발속도향상 등의 장점등을 느끼면서 tailwind.css 사용도의 현황이 생각보다 효율성이 있음을 깨달았다. 

실무에서 빠르게 작업해야하는 경우 또는 백엔드 개발자와 협업에서 매우 유용한 프레임워크로 작용 할 수 있는 큰 장점을 가진 프레임워크임은 확실한 듯 싶다.