TrewindCSSの背景画像-クリーンで簡単な方法

TailWindCSSと私の最大の問題は、それと背景画像を使用する醜い方法だった.私はbackground-urlプロパティをインラインにしなければならなかった.そして、私は他のフロントエンド開発者が同じことを言ったので、私が一人でないということを知っています.以下のように見えた.

<section class="bg-accent-dark bg-cover"
  style="background-image: url({{ 'images/home/hero.jpg' | asset_url }})">

注意:液体を使用して、CDNに置かれたイメージにURLを生成します.
数日前、私は6種類のコンフィグ(私は別の記事で私の発見を報告します)を使用してTarwindCSSで6つのテーマを行っていたとき、私はそれが簡素化できることを発見した.CSSファイルはCDNにもあり、背景画像はTailWindCSS設定でカスタマイズできます.

backgroundImage: {
  'hero': "url('../images/home/hero.jpg')"
}

さて、私たちのヒーロー要素HTMLは次のようになります.

<section class="bg-accent-dark bg-cover bg-hero">

そして、私は非常にクリーナーだと思う!ドキュメントの読み込みに失敗しました
read more
続きを読む
あなたがより多くのパフォーマンス指向のコンテンツに興味を持っている場合は、私に従って、私はあなたのウェブサイトを改善するためのオリジナル、または少なくとも効果的な方法を提供することを約束します.

Using WebP in Your Existing Webpage

Paweł Kowalski for platformOS ・ Nov 17 '20 ・ 4 min read

#webperf #design

Optimizing Images For The Web

Paweł Kowalski for platformOS ・ Apr 24 '20 ・ 8 min read

#beginners #node