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

…ジェクトで使い慣れた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…