Beautiful UI components built with Tailwind CSS and React.A collection of copy-and-paste components for quickly build application UIs. Quick search...
tailwindに関するnacika_inscatolareのブックマーク (18)
-
nacika_inscatolare 2025/02/11
-
Tailwind CSSでお手軽ローディングアニメーション
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
-
-
-
-
Width - Tailwind CSS
<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
-
-
-
-
-
Optimizing for Production - Tailwind 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
-
Next.jsでTailwind CSSをbuildしたがcssファイルがうまく出力できなかった時に確認した項目
で開発モードから表示確認していた際には問題なかったのに、 プロダクション用に静的ファイルで出力しようと コマンドを叩いた後のもので確認すると、スタイルがごっそり抜け落ちていました。 原因は単純なミスでしたが、一見buildは成功したように見えるため、調べるのに時間がかかってしまったのでメモとして残しておきます。 原因 tailwind.config.js の purge の項目で指定していたファイル拡張子が実際のものと違ったため、意図したファイル参照ができておらず、結果build対象外と判断され出力されていませんでした。 正しいファイルを参照するよう修正すると、問題なく動作しました。 purge とは purgeとは、指定したファイル内で使っているクラスを判別し、未使用のクラスは排除して出力してくれる便利機能です。 CSSの肥大化を防ぐことが出来るため設定したほうが良いのですが、 今回のよ
-
Install Tailwind CSS with Next.js - Tailwind 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
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました