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