More than 3 years have passed since last update.

v-calender でCSSが効かない件

Last updated at 2021-01-20Posted at 2021-01-20

#環境
　エディタ：VS-CODE
Vue:@vue/cli 4.5.9 vue": "2.6.11",
"v-calendar": "2.1.6",
"bootstrap": "4.5.3",

###初めての記事なので、わかりにくい場合は申し訳ありません。

カレンダーをVueで利用しようと思い、v-calenderを選択しました。
サンプルとして、GitHubの
https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue
からコードをコピペしてVS-CODEに張り付けたのですが、CSSが適用されず困っていました。
調べたところissueにも回答が見つけられず、自力で調べてみました。
参考issue : https://github.com/nathanreyes/v-calendar/issues/727
まだ、Gitのサンプルと違う？というところはありますが、備忘録的に記載しておきます。

##1.npm or yarn経由でTailwindをインストールする
https://tailwindcss-ja.entap.app/docs/installation

 # Using npm
 npm install tailwindcss
 または、
 # Using Yarn
yarn add tailwindcss

##2.main.js にてCSSをインポートする。
　　CSSの該当ファイルが見つからず苦労しました・・・
###main.js

import "tailwindcss/dist/tailwind.css";
//VCalender の設定
import VCalendar from 'v-calendar';
Vue.use(VCalendar);

より良い方法があればご指導ください。