Inside BuildIt

株式会社ビルディットのデザイナー・エンジニアによるブログです

tailwind の検索結果:

BuildItコーポレートサイトをリニューアルするまでの取り組み

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

ゆるはち.it 第15回【Webデザインテクニックについてゆるく話す】参加レポート

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

tailwindcss v0.7→v1.xへのupgradeを自動化した

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

ゆるはち.it 第14回【CSSフレームワークについてゆるく話す】参加レポート

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