TailWind CSS + Vue

TailWind CSS

유틸리티 를 우선으로 하는 CSS 프레임워크 마크업에서 직접 모든 디자인을 빌드하도록 구성할 수 있다.

유틸리티
시스템 소프트웨어 중 컴퓨터를 관리하거나, 정상적으로 돌아가도록 유지하는 소프트웨어를 유틸리티라고 한다. (나무위키)

장점

1. CSS를 작성하지 않고 인터페이스를 구축할 수 있게 해준다. 기존에는 CSS 파일로 코드를 작성 해야 했다면 TailWind CSS 에서는 HTML class 속성을 주는 것으로 스타일을 적용할 수 있다. 과연 이게 장점인가??

2. 학습 난이도가 낮음 CSS만 알고 있으면 빠르게 적용 가능
   함 대부분 클래스들이 단순히 각 스타일 속성의 축약형이나 다름 없기 때문에, 클래스의 이름만 봐도 무슨 역할을 하는지 확인 가능

3. 스타일 속성, 수치들이 클래스로 정의 되어 있기 때문에 스타일을 재사용하는데 유리함

4. 반응형 적용이 쉬움 class 앞ㅂ에 md:,lg:등 미디어 쿼리를 대체하는 접두사를 붙여 구성가능

단점

1. 최적화 도구가 없으면 CSS 사이즈가 너무 크다. 유틸리티 우선 CSS의 특성상, 스타일을 사전 지정한 속성들이 모두 담겨있기 때문에 파일 크키가 큰 편이다. v2 기준 minify를 한 CDN 버전이 2.8MB에 육박함.

2. TailWind CSS를 사용한다고 해서 100% CSS를 걷어낼수 있는건 아닌 것 같음

TailWind CSS + Vue

프로젝트 시작하기

Tailwind css 설치

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Vue cli 프로젝트 생성

vue create tailwindcss-vue

config file 생성

npx tailwindcss init -p

최적화 하기
Tailwind css 는 용량이 큰편 tailwind.config.js 파일에 아래와 같은 최적화 코드 작성

module.exports = {
  // purge: [],
  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

CSS 파일 생성

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

CSS 파일 적용
main.js(main.ts)

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";

createApp(App).mount("#app");

실행

npm run serve

프로젝트를 실행시킬 때 아래와 같은 에러가 발생한다면 아래 명령어 실행.

PostCSS plugin tailwindcss requires PostCSS 8

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

VSCode 확장 프로그램

Tailwind CSS IntelliSense

TailWind 간단하게 사용해보기

vue 파일 생성

HelloTailWindCss.vue

<template>
  <div class="hello">
    <h3 class="bg-red-300">Vue3 + TailWind CSS</h3>
  </div>
</template>

flex 사용

  <div class="flex justify-center items-center">
    <h1>Awesome Tailwind!!</h1>
  </div>

반응형 사용

class 앞에 sm: md: lg: 등의 접두어로 반응형 css 구현

• sm-640px
• md-768px
• lg-1024px
• xl-1280px
• 2xl-1536px

  <div class="flex justify-center items-center">
    <h3 class="sm:bg-red-100 md:bg-red-300 lg:bg-red-500">Vue3 + TailWind CSS</h3>
  </div>

참고 사이트

1. tailwindcss