TailwindとFramer Motionでスタイリングされたアニメーションエフェクト付きのUIを提供するReactコンポーネント集・「SyntaxUI」 - かちびと.net
SyntaxUI SyntaxUIはTailwindとFramer Motionでスタイリングされたアニメーションエフェクト付きのUIを提供するReactコンポーネント集です。 Tailwind.cssをベースにFramer MotionでアニメーションするUIコンポーネントをコピペで導入できる、というもの。例えば軽くバウンドするアコーディオンや、マウスホバーやクリックでアニメーションする様々なボタン、ユニークな数々のローダー、内容が切り替わったり数字が高速カウントされるテキストエフェクト、リストのインフィニティスクロールなどなど他にも様々なUIが提供されています。 いずれもコードのコピペで導入できるようコードが提示されています。特にアニメーションエフェクトは一から作ると手間がかかるので骨組みだけコピペして自身でカスタマイズする、という流れのほうがより効率的ですね。 よく見かけるようなエフ
AstroとTailwind CSSを使ってDeveloper Siteをリデザインした話 | 株式会社ヌーラボ(Nulab inc.)
はじめに 今回のDeveloper Siteリデザインの目的は英語のコーポレートサイト（https://nulab.com/ ）とのUIを合わせることでした。旧Developer Siteのヘッダーやフッターなどの共通パーツは古いデザインのままだったため刷新する必要がありました。 旧Developer Siteのトップページ Developer Siteのトップページ 使用した技術 今回使用した技術は、静的サイトジェネレータであるAstroとユーティリティファーストのCSSフレームワークであるTailwind CSSです。 旧サイトはHugoとSCSSを用いて構成されており、今回はコンテンツはそのままで見た目のみを変更する制作だったため仕様の変更は不要でした。しかし、パフォーマンスの向上を目指し、かつ新しい技術に挑戦するためAstroとTailwind CSSを採用することにしました。 A
コピペで時短、Tailwind CSSおすすめUIコンポーネント、UIキット集、便利ツール【まとめ】
開発者にとっていかに早くWeb制作を進められるかは、永遠のテーマと言えます。 この記事ではWebサイト制作を効率化、爆速にするTailwind CSSのUIコンポーネント集、便利ツールをまとめてご紹介します。 表現したいレイアウトをコピペのみで実現でき、これまでかかっていたサイト制作時間を劇的に削減します。 おしゃれなWebサイトを素早く開発できるUIコンポーネント素材、あなたはいくつ知っていますか。 Tailwind CSSの便利UIコンポーネントまとめTailwind UIMagic UIDyna UIAnimataPrelineMamba UIFlowbiteDaisy UISailboat UIMeraki UITail-KitReact AriaWicked BlocksTailwind Starter KitWindstaticMyna UITailwind StampHype
コピペで使えるTailwind.cssとReactによるアニメーション、エフェクト、インタラクションのコレクション・「Animata」 - かちびと.net
Animataはコピペで使えるTailwind.cssとReactによるアニメーション、エフェクト、インタラクションのコレクションです。タイトル通りで、既存のReactアプリ等にコピペでアニメーションコンテンツを追加可能なコンポーネントを手作業でコレクション化したそうです。 いわゆるUIライブラリの類ではなく、既存のプロジェクトにアニメーション要素を加えるスパイス的な役割となっています。尚、基本的にはTailwindベースですが、細かなスタイルは利用者の采配に任せているそうで特に完成度が高かったりスタイルに一貫性があるようなものではありません。 用意されているのは背景や弁当グリッド、ボタン、カード、ナビゲーション、チャートなどで今のところ40程度のコンポーネントが集められています。Reactアプリにエフェクト等を追加する際はご利用になってみては如何でしょうか。ライセンスはMITです。 An
コピペで簡単に実装できる！ Tailwind CSSで実装されたボタンの最新コレクション -Tailwind CSS button collection
Webサイトの外観を向上させるためにデザインされた、Tailwind CSSで実装されたボタンのコレクションを紹介します。 ボタンの実装はJavaScriptは無し、Tailwind CSSで実装されたさまざまなエフェクトが用意されています。コードはコピペするだけで、簡単に実装できます。
shadcn/ui で テキスト系のCSS が効かなくなる現象を修正する
こんにちは森田です。 最近 Gaji-Labo では shadcn/ui を使った案件が増えてきています。 shadcn/ui は、Radix & Tailwindを使ったコンポーネントコレクションで、ライブラリではなくコピーして使うことを前提に作られているのが特徴です。 shadcn/ui の CSS は Tailwind CSS で書くのですが、先日そのCSSが効かなくなる現象が起こり、それを解決したのでまとめます。 起こった現象現象としてはコンポーネントに指定したフォントサイズやフォントカラーなどテキスト系のクラスがうまく効かない現象となっていました。 コード的には以下のように Button コンポーネントにカスタムクラスのテキストサイズやテキストカラーを指定していたのですが、うまく聞きませんでした。 ブラウザのデベロッパーツールで見てもクラスが見当たらず、なぜかクラスが消えている状
ユーティリティでclamp()を簡単に生成できるようにするTailwindプラグイン・「Fluid for Tailwind CSS」 - かちびと.net
Fluid for Tailwind CSSはユーティリティでclamp()を簡単に生成できるようにするTailwindプラグインです。コードの記述量を減らし、より見栄えのいいRWDの対応をサポートします。 プリフィックスとして「~」が追加され、開始値と終了値は「/」で区切って指定、開始点と終了点はデフォルトで最小画面と最大画面に設定、ただしユーティリティごとにカスタマイズまたは上書きできるそうです。また、プリフィックスと区切りの記号はカスタマイズ可能となっていますのでコンフリクトの回避も問題なく行えます。 例えば.~text-lg/2xlというclassには以下のコードが生成されます。 .\~text-lg\/2xl { font-size: clamp(1.125rem, 0.9rem + 0.75vw, 1.5rem); line-height: clamp(1.75rem, 1.6
コピペで簡単利用も出来るオープンソースのTailwindベースUIコンポーネントライブラリ・「Tailframes」 - かちびと.net
Tailframesはシンプルで使いやすいオープンソースのTailwindベースUIコンポーネントライブラリです。コピペで簡単利用できるよう各コンポーネントのコードやサンプルも公開されています。 フレームワークの類ではなく、装飾等も概ね完成されたもので、Webアプリ構築の時短に貢献できるよう開発されたものであるため、コピペできるようにしてあるのもその理由の1つです。 コンポーネントはWebアプリ構築に必要とされるUIの大半が揃えられており、それぞれに複数の別スタイルが用意されています。各UIコンポーネントには動作サンプル、コピペ用のコード、RWDの確認、Codepenへのリンク（編集用）などが用意されています。 Webアプリのスタイリングに時間を掛けたくないサイドプロジェクトなどに。ライセンスは独自ライセンスが設けられているので利用前にご確認下さい。 TailframesGithub
商用利用無料！ コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上！ -Mamba UI
Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。 コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。 Mamba UI Mamba UI -GitHub Mamba UIの特徴 Mamba UIの使い方 Mamba UIのコンポーネント Mamba UIの特徴 Mamba UIは、Webサイトやスマホアプリによく使用されるUI要素をTailwind CSSベースで実装したオープンソースのコレクションです。すべてのコンポーネント・テンプレートはHTMLとCSSで実装されており、Tailwind CSSのおかげで複雑なCSSルールを記述する必要はありません。 Tailwind CSSはユーティリティファーストのCSSフレームワークなので
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: Tailwind CSS実践入門 エンジニア選書: 工藤智祥: Digital Ebook Purchas
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
Tailwind CSS の基本的な使い方 - コムテブログ