#最近気づいた俺、css書けない、、、、、

ど素人の状態からwebアプリ開発を始めて早1年。
htmlもcssもよくわからない状態で現場にぶち込まれて、vueを触り始めたもんだから、まあわからん。
なんとなく、javascriptが書けるようになってきてvue.jsへの理解が進むと
少し楽しくなってきた。
その時は、UIフレームワークとしてvuetify.jsを使用していたので
まあ、ほとんどといっていいほど、cssの調整することはなかった。
あったとしても、widhtいじったり、background-color調整したり。

まあそんなんだから、マジでcssがわからない状態だった(笑)
そんな状態であるとき、ふと自分でvue.js　firebase でブログを立ち上げてみた
。まだデプロイしていないのだが、
まあ、cssがわからなすぎて、スタイルがひどい。

vuetifyでclassにスタイルを入れる記法に慣れていたので、
今更styleタグなんていじりたくもなかったし
最小限にしたかった。

そんなこんなでたどり着いたのがそう、tailwindcss

#tailwindcssのドキュメントが微妙にわかりずらくて(´;ω;｀)挫折

当初はドキュメントを見てフォルダを作成したが、これがうまくいかない。
英語なもんだから、purgeもよくわからんし、buildもうまくいっていない。

さて、前置きが長くなったがここから本題。

#vue.jsにおける正しい、tailwindcssの環境構築方法

若干公式とは外れた方法ではあるが、buildに必要なファイルはすべてはいっているので
問題なしと思われる。

まずは、普通にプロジェクトを立ち上げていく。

$vue create your-project-name

プロジェクトが立ち上がったら、
$cd your-project-name

でそのファイルパスまでいき
$vue add tailwind

これで、tailwindcssに必要なすべてのファイルが入る。
あとは、いつも通り、起動してあげればいい。
ビルドもすべてしてくれるからvue-cliチーム本当に助かる！