…が利用されていたり、tailwindcssをさらっと使っていたりと少々初心者に優しくない内容ではありますが、非常に参考になる本です！ これからVue.js 3.xを触ってみようという方はぜひ読んでみてはいかがでしょうか👀 Vue.jsビギナーズガイド 3.x対応 作者:ushironoko シーアンドアール研究所 Amazon エンジニアのkawamuraです。 引き続き，現場で役立つシステム設計の原則を読み進めていました． ほぼ終わりまで読み，とても勉強になったのですが，実…

…ームワークによると、Tailwind CSSが一番満足度、興味が高いフレームワークとなっています。 そんなTailwind CSSについて取り上げつつ、難解になりがちなtailwind.config.jsを見やすくできるTailwind Config Viewerについて紹介します。VS Codeの便利なプラグインも一緒に紹介します。 Tailwind CSSとは Tailwind CSSは、.btnのようなコンポーネントclassは提供しておらず、ボタンを構成する1つ1つの…

…メンバーからの共有 Tailwind Config Viewerの紹介 jalemyです。 state of css 2020でTailwind CSSが1番人気のフレームワークとなっていました。 2020.stateofcss.com そんな便利なTailwind CSSですが、プロジェクトによっては設定内容が把握し難い、デザイン/コーディングする際にconfigファイルとにらめっこする、なんてこともあると思います。 そんなときに役立つのがTailwind Config V…

…ジェクトで使い慣れたTailwind CSSを導入しました。スタイルガイドで指定した色やフォントサイズをTailwindに登録しておくことで、Figmaとのズレを軽減することができました。 トップのWORKS(実績紹介)にはカルーセルがありますが、要素をループさせたいという要件があったため vue-carousel を利用しています。 他にも、SNSでは非同期で設定されたOGP設定を読み込まないため、prerender-spa-plugin を用いてプリレンダリングすることで…

…してました。(雑) tailwindcss v0.7→v1.xへのupgradeを自動化した - Inside BuildIt では前置きを短く、本題のゆるはち.it勉強会についてレポートを書きます。 ゆるはち.itの紹介 ゆるはち.it は、毎月八王子で行われている勉強会です。 毎月テーマが変わります。今回はWebデザインテクニックがお題でした。 タイトルにある通りゆるーく進行する勉強会なので、気楽に参加できます。 懇親会の時間に地元・八王子のピザ屋No.8 pizzeri…

…あるプロジェクトで tailwindcss というCSSフレームワークを利用しているのですが、今回 tailwindcss をupgradeすることになりました。 upgrade前のversionが v0.7 で、upgrade後のversionは v1.1.2 です。 メジャーバージョンが上がるので変更点がかなり多いです。 職人による手作業でやろうとすると、ファイル数 × 変更点 という膨大な量になります…… これは手作業でやりたくない……ということで、できる限り自動化して…

… PureCSS, Tailwind, Tachyons) 『Tailwind CSSでいろんなUIをつくる』 界隈で満足度 No.1 の Tailwind を使った具体的な実装の話 『CSSフレームワークに頼らない受託マークアップエンジニアのサイト制作術』 現場感ある熱い話 まずは全体像を話し、その後具体的な実装も見せ、最後には頼るな！という何というかキレイな流れだったように思います。 では、ひとつずつ見ていきます。 トーク1: 『CSSフレームワーク選びのポイント』 sp…