[Vue.js 3] Tailwind 설치

CSS 를 좀 더 편하고 빨리 할 수 있는 방법이라며 소개 받아서 알게 된 Tailwind CSS

 

설치 방법은 공식문서와 게시글을 보고 따라했음.

 

1. npm install 

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

공식문서대로 따라할 경우 ' Error: PostCSS plugin tailwindcss requires PostCSS 8. ' 에러가 발생하게 됨.

고로 위와 같이 npm install 하는게 정신건강에 이로움. 복붙 만만세!

 

2. init

npx tailwindcss init -p

 

3. tailwind.config.js 내용 수정

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

 

4. src/styles/app.css 만든 후 app.css에 내용 추가

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

 

5. main.js에 import './styles/app.css'; 내용 추가

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './styles/app.css';

createApp(App).use(store).use(router).mount('#app');

 

6. App.vue 수정

<template>
  <div class="justify-center flex bg-yellow-300 items-center h-screen">
    <div class="text-4xl">
      <h1 class="text-3xl font-bold underline">
        Hello world!
      </h1>
    </div>
  </div>
</template>

 

7. npm run serve 실행

끝