Talewind CSSでローディング・アニメーションを表示したくなったのですが、ググってもちょうど良いサンプルが見つかりませんでした。 というわけでコピペで簡単に使えるサンプルコードをいくつか考えてみました。あまりクオリティが高いものではないですが「Tailwind CSSでとりあえず何かローディング中っぽい表示にしたい」という場合にご自由にコピペしてお使いください。 波紋が広がるアニメーション <div className="flex justify-center" aria-label="読み込み中"> <div className="animate-ping h-4 w-4 bg-blue-600 rounded-full"></div> </div> アレンジ Reactでない場合はclassNameをclassに置き換えてください（もしくはCodePenのコードをコピペ） bg
<div class="flex ..."> <div class="w-1/2 ... ">w-1/2</div> <div class="w-1/2 ... ">w-1/2</div> </div> <div class="flex ..."> <div class="w-2/5 ...">w-2/5</div> <div class="w-3/5 ...">w-3/5</div> </div> <div class="flex ..."> <div class="w-1/3 ...">w-1/3</div> <div class="w-2/3 ...">w-2/3</div> </div> <div class="flex ..."> <div class="w-1/4 ...">w-1/4</div> <div class="w-3/4 ...">w-3/4</div> </div
CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum
で開発モードから表示確認していた際には問題なかったのに、 プロダクション用に静的ファイルで出力しようと コマンドを叩いた後のもので確認すると、スタイルがごっそり抜け落ちていました。 原因は単純なミスでしたが、一見buildは成功したように見えるため、調べるのに時間がかかってしまったのでメモとして残しておきます。 原因 tailwind.config.js の purge の項目で指定していたファイル拡張子が実際のものと違ったため、意図したファイル参照ができておらず、結果build対象外と判断され出力されていませんでした。 正しいファイルを参照するよう修正すると、問題なく動作しました。 purge とは purgeとは、指定したファイル内で使っているクラスを判別し、未使用のクラスは排除して出力してくれる便利機能です。 CSSの肥大化を防ぐことが出来るため設定したほうが良いのですが、 今回のよ
CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
