最近気づいた俺、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チーム本当に助かる！