Vue2에서 tailwindcss 사용

vue2에서 사용하는 방법 기록

 

이미 8버전이 설치되어 있는 경우 먼저 삭제

// uninstall
npm uninstall tailwindcss postcss autoprefixer

 

 

설치

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

23.4.12 기준 vue2 확인

"@tailwindcss/postcss7-compat": "^2.2.17",

설치 확인 됨

 

초기화

// init
npx tailwindcss init -p

초기화를 하면 파일이 생성됨

/postcss.config.js

/tailwind.config.js

 

최적화

postcss.config.js

// postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

 

 

파일 정리

tailwind.config.js

// tailwind.config.js
module.exports = {
  purge: [
    './public/**/*.html',
    './src/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

 

 

css 생성

import하기 위한 css파일을 만들어 내용을 넣어준다.

(경로는 편한곳에)

// src/assets/css/tailwindcss.css
@tailwind base;
@tailwind components;
@tailwind utilities;

 

 

css import

main.js 

생성된 css를 import해준다.

(경로는 위에서 생성한 곳의 경로)

// main.js
// 경로는 생성한 파일의 위치
import './assets/css/tailwindcss.css';
import "@/assets/css/tailwindcss.css";

 

실행

npm run serve

---

끝

 

 

https://tailwindcss.com/

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