CodeHoon

안녕하세요 상훈입니다.

Vue.js 3,  Tailwind.css 를 설치하여 프로젝트를 npm run serve 를 통해 실행하였는데 에러가 발생하였습니다.

 ERROR  Failed to compile with 1 error                                                                                                                                                                            오후 6:00:02
 error  in ./src/index.css

Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
Require stack:
- D:\Projects\loading-view\noop.js

(@D:\Projects\loading-view\postcss.config.js)
    at Array.map (<anonymous>)


 @ ./src/index.css 4:14-157 15:3-20:5 16:22-165
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.219.105:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

개략 Tailwindcss의 module을 찾을 수 없다는 문제인데요, 

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

를 명령어로 입력(설치)해주신 뒤,

module.exports = {
  purge: {  content: ['./public/**/*.html', './src/**/*.vue'] },
  //  ...
}

위의 내용을

 이와 같이 tailwind.config.js 에 작성해주고 저장해주세요.

그리고 다시 프로젝트 구동 "npm run serve" 해주시면 정상적으로 실행이 됩니다.

이상입니다.

참고

안녕하세요 상훈입니다.

Html, Css, Javascript 로 로딩 화면을 만드는 방법에 대해 포스팅하겠습니다.

BootStrap 을 이용하여 공통 클래스를 지정하였고. 일부분은 직접 작성하였습니다.

html

<div id="loader">
    <div class="spinner-border text-info position-absolute top-50 start-50" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

Css

#loader {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.8;
    background: rgb(156, 154, 154);
    z-index: 99;
    text-align: center;
}

#loader>div {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
}

Javascript

$(window).on('load', function () {
    $('#loader').hide();
})

 - 제이쿼리를 사용할 수 있게 해야합니다.

↓↓  제이쿼리 cdn 적용하는 법 ↓↓

↓↓  BootStrap cdn 적용하는 법 ↓↓

이상입니다.