[Vue3] TailWind CSS + Vue 설치

 

1. TailWind CSS란?

리액트를 할 때는 mui, bootstrap 등의 css 라이브러리를 써봤지만 vue를 시작하면서 Tailwind CSS를 사용하게 되었다.

우선 css를 작성하지 않고 구성하게 해준다는게 기본 설명이지만 style에 작성하는 대신 html 태그의 class로 이미 지정되어 축약된 키워드를 삽입하는 형식이다.

 

아무래도 자주 쓰는 표현들은 인지하며 익숙해 져야할거 같다.

자세한 설명은 홈페이지에 잘 나와있다.

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

아래는 예시로 작성한 Tailwind css

<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>

 

2. 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

 

3. VSCode 확장 프로그램

Tailwind CSS IntelliSense

 

 

 

 

참고 사이트 : https://velog.io/@hec8897/TailWind-CSS-Vue