Tailwind CSS 설치 및 Vue.js 프로젝트 적용하는 방법

 

 

 

---

 

Tailwind CSS이란? 

---

Tailwind CSS은 ‘utility-first’라는 목적 하에 만들어진 CSS 프레임워크입니다. 별도의 CSS 파일이나 style 태그를 사용하지 않고 HTML의 class 속성에 입력되는 내용에 따라 스타일링이 적용되기 때문에 굉장히 간단하고 직관적으로 코드를 작성할 수 있습니다

Tailwind CSS는 커스터마이즈 가능한 디자인 시스템을 구축하기 위한 풍부한 기능을 제공합니다. 클래스 네임을 사용하여 여러 가지 스타일을 적용할 수 있으며, 반응형 디자인을 위한 클래스도 제공합니다. 또한, 테마 파일을 사용하여 전체적인 디자인을 변경할 수 있습니다.

이 프레임워크는 많은 개발자들에게 인기가 있으며, Tailwind CSS를 사용하면 일관된 디자인과 빠른 개발 속도를 유지할 수 있습니다. 또한, Tailwind CSS는 자바스크립트와도 통합되어 있어 동적인 요소에 대한 스타일링도 용이합니다.

Tailwind CSS는 HTML과 CSS의 관계를 혁신적으로 바꾸어주는 독특한 접근 방식을 제공합니다. 이를 통해 개발자들은 빠르게 스타일을 적용하고 유지할 수 있으며, 일관된 디자인 시스템을 구축할 수 있습니다.

 

 

---

 

 

TailwindCSS의 장점

---

Tailwind CSS는 많은 장점을 가지고 있습니다. 몇 가지 추가적인 장점을 살펴보겠습니다.

- 클래스의 이름 생각을 줄임 -> Tailwind CSS는 클래스 네임을 사용하여 스타일을 지정하므로, 개발자들은 스타일을 적용하기 위해 고유하고 의미 있는 클래스 이름을 생각할 필요가 없습니다. 대신, 필요한 스타일을 바로 클래스로 적용할 수 있습니다.

- 컨텍스트 전환 감소 ->  Tailwind CSS는 많은 클래스를 제공하여 컨텍스트 전환이 줄어듭니다. 예를 들어, mt-4는 상단 마진을 4단위로 설정하는 클래스입니다. 이렇게 클래스를 사용하면 스타일을 적용하는 데 필요한 컨텍스트 전환이 감소하여 개발 속도를 높입니다.

- 다양한 변형 사용 -> Tailwind CSS는 다양한 변형(variant) 클래스를 제공하여 원하는 스타일을 쉽게 적용할 수 있습니다. 예를 들어, hover:text-red-500는 마우스 호버 시 텍스트를 빨간색으로 변경하는 클래스입니다. 이러한 변형 클래스를 사용하여 인터랙티브한 요소나 상태에 따른 스타일을 적용할 수 있습니다.

- 일관성 있는 디자인 시스템 -> Tailwind CSS는 일관성 있는 디자인 시스템을 적용하기 위해 설계되었습니다. 클래스 네임은 의미 있는 이름을 가지며, 프로젝트 전반에 걸쳐 재사용될 수 있습니다. 이를 통해 디자인의 일관성을 유지하고 코드의 중복을 방지할 수 있습니다.

- 프로덕션에 필요한 스타일만 포함-> Tailwind CSS는 유틸리티 클래스를 사용하여 필요한 스타일만 포함시킵니다. 이는 불필요한 CSS 코드를 줄여서 프로덕션에서 사용되는 파일 크기를 최소화하고 로딩 속도를 향상시킵니다.

- 캐시 가능한 유틸리티 클래스 ->  Tailwind CSS는 유틸리티 클래스를 잘 캐시합니다. 클래스의 이름과 스타일이 일치하면 브라우저에서 캐싱하여 성능을 개선할 수 있습니다.

- 스타일 변경의 용이성 -> Tailwind CSS는 클래스 네임을 통해 스타일을 쉽게 변경할 수 있습니다. 클래스를 추가, 수정, 제거함으로써 스타일을 조정할 수 있으며 오버라이드(override) 없이도 스타일을 쉽게 변경할 수 있습니다.

- 코드 DRY(Don't Repeat Yourself)를 유지하는 컴포넌트 추출 ->  Tailwind CSS는 컴포넌트를 추출하여 코드의 중복을 방지하는 데 도움이 됩니다. 컴포넌트로 스타일을 캡슐화하고 재사용함으로써 코드를 DRY하게 유지할 수 있습니다.

- 유지 관리의 용이성 ->  Tailwind CSS는 클래스 네임을 사용하여 스타일을 지정하므로, 스타일 관리가 훨씬 쉬워집니다. 클래스 네임을 사용하여 스타일을 찾고 수정하기 쉽고, 일관성 있는 디자인 시스템을 유지하며 프로젝트를 유지 관리할 수 있습니다.

 

 

 

---

 

 

TailwindCSS의 어떤 단점이 있을까요? 

---

Tailwind CSS는 많은 장점을 가지고 있지만, 몇 가지 단점도 있을 수 있습니다. 

- 빌드 단계 필요 -> Tailwind CSS는 컴파일되어 최종 CSS 파일을 생성하는 빌드 단계가 필요합니다. 이는 추가적인 설정과 빌드 도구의 사용을 필요로 하므로, 초기 설정에는 약간의 번거로움이 있을 수 있습니다.

- 러닝 커브 -> Tailwind CSS는 다른 CSS 프레임워크보다 학습 곡선이 높을 수 있습니다. 클래스 네임의 사용 및 클래스 네임과 스타일의 관계를 이해해야 하기 때문에 처음 사용하는 개발자들에게는 약간의 학습 곡선이 있을 수 있습니다.

- HTML 크기 증가 -> Tailwind CSS는 많은 클래스를 사용하므로, HTML 파일의 크기가 더 커질 수 있습니다. 이는 초기 다운로드 속도와 페이지의 성능에 영향을 줄 수 있습니다. 그러나 gzip 압축 및 효율적인 캐싱을 통해 이 문제를 완화할 수 있습니다.

- 직접 CSS를 작성 -> Tailwind CSS는 많은 유틸리티 클래스를 제공하지만, 모든 스타일링 요구사항을 충족시키지는 못합니다. 일부 복잡한 레이아웃 또는 특정한 디자인 요구사항은 직접 CSS를 작성해야 할 수도 있습니다.

- 제대로된 CSS 학습 방해 ->  Tailwind CSS의 사용은 개발자들이 기존의 CSS 학습을 무시하거나 방해할 수 있습니다. 클래스 네임의 사용으로 인해 CSS의 기본 원리와 개념을 제대로 이해하지 않을 수 있으며, 다른 프로젝트나 팀에서 사용하는 일반적인 CSS 기술과의 호환성이 떨어질 수 있습니다.

- 콘텐츠와 스타일의 관심사 분리 감소 ->  Tailwind CSS는 HTML 파일 내에서 스타일을 직접 지정하기 때문에, 스타일과 콘텐츠의 관심사를 분리하는 데 어려움이 있을 수 있습니다. 일부 개발자들은 이것을 좋아하지 않을 수 있으며, 콘텐츠와 스타일을 분리하여 관리하고자 하는 경우에는 다른 접근 방식을 고려해야 할 수도 있습니다.

이러한 단점들은 Tailwind CSS를 사용할 때 고려해야 할 사항입니다. 개발자는 이러한 단점들을 감안하고 프로젝트의 요구사항과 우선순위에 따라 적절한 도구를 선택해야 합니다.

 

 

 

 

---

 

 

Vue.js 설치, Vue 프로젝트 생성

---

Tailwind CSS 설치하기 전에 Vue.js 설치하고  Vue 프로젝트 생성헤보겠습니다. 순서는 되게 간단해서 다음 순서대로 진행하면 되겠습니다.

1. Node.js 설치

Vue.js는 Node.js 환경에서 동작하므로, 먼저 Node.js를 설치해야 합니다. 공식 웹사이트 ( https://nodejs.org ) 에서 Node.js를 다운로드하고 설치합니다.

2. Vue CLI 설치:

Vue CLI는 Vue.js 개발을 위한 명령줄 도구입니다. 터미널 또는 명령 프롬프트에서 다음 명령을 실행하여 Vue CLI를 전역으로 설치합니다. 설치 후 터미널으로 " vue --version " 명령을 실행하면 버전정보 알수 있습니다. 혹시 기존에 이미 설치 되어 있으면 버전 업그레이드 " npm update -g @vue/cli  " 명령어를  실행하면 됩니다.

npm install -g @vue/cli


/* Update */
npm update -g @vue/cli

 

Vue 프로젝트 생성

Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성합니다. 프로젝트를 생성할 디렉토리로 이동한 후, 다음 명령을 실행합니다.  "projectName"은 원하는 프로젝트 이름으로 대체합니다. 명령을 실행하면 Vue CLI가 프로젝트 구성을 위한 몇 가지 옵션을 물어볼 수 있습니다. 필요한 옵션을 선택하거나 기본값으로 진행할 수 있습니다.

vue create projectName

> Choose Default Vue3

 

프로젝트 실행

프로젝트가 성공적으로 생성되면, 해당 프로젝트의 디렉토리로 이동하여 개발 서버를 실행할 수 있습니다. 터미널 또는 명령 프롬프트에서 다음 명령을 실행합니다. 서버가 실행되면 웹 브라우저에서  " http://localhost:8080 "  또는 기타 포트 번호에 접속하여 Vue.js 프로젝트를 확인할 수 있습니다.

cd projectName
npm run serve

 

 

---

 

 

Tailwind CSS를 설치

---

 

1. Tailwind CSS 설치 과정에서 가장 먼저, 프로젝트 디렉토리에서 터미널 또는 명령 프롬프트를 열고 다음 명령을 실행하여
Tailwind CSS와 관련 의존성 패키지를 설치합니다.

> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p

 

2. Tailwind CSS 구성

Tailwind CSS의 구성 파일을 생성해야 합니다. 프로젝트 루트 디렉토리에 tailwind.config.js 파일을 생성하고 다음 내용을 추가합니다. 이 구성 파일은 Tailwind CSS의 설정과 사용자 정의를 관리하는 데 사용됩니다.

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

CSS 파일 생성

Tailwind CSS를 사용하기 위해 CSS 파일을 생성해야 합니다. 프로젝트 루트 디렉토리에 styles.css 또는 원하는 다른 이름의 CSS 파일을 생성하고, 다음 내용을 추가합니다. 이 CSS 파일은 Tailwind CSS의 기본 스타일, 컴포넌트 및 유틸리티 클래스를 가져옵니다.

./styles.css 

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

 

Vue.js 프로젝트에 Tailwind CSS 적용

이제 Vue.js 프로젝트에서 Tailwind CSS를 사용할 수 있도록 구성해야 합니다. Vue.js 프로젝트의 main.js 파일을 열고 다음 내용을 추가합니다. 이제 Vue.js 프로젝트에서 Tailwind CSS 스타일을 사용할 수 있게 됩니다. 

/* import to src/main.js  */
..
..

import './styles.css';