Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
個人的によく使う、省スペースで表示できて雑然としないUI with TailwindCSS
1.Tooltip こちらは定番ですね！ 特に、何か注釈などの追加情報をユーザーに知らせる時はよく利用します。要素のホバー時だけ表示できるので、エリアの狭い箇所でも利用できるUIです。ただ、警告などの内容には非推奨な点やモバイルユーザーの考慮を必要とする点はデメリットですかね。 // page.tsx <div className="mt-10 mx-auto text-center"> <Tooltip label="ここに説明が入ります。ここに説明が入ります。ここに説明が入ります。ここに説明が入ります。"> <span className="p-2 bg-gray-100 rounded-full">🗑️</span> </Tooltip> </div> // Tooltip.tsx import { ReactNode } from "react" type TooltipProp
商用利用無料！ コピペで簡単に実装できる、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フレームワークなので
Mamba UI
Kickstart your next website in minutes Mamba UI is a free, open-source collection of UI components and templates based on Tailwind CSS. Make the web your playground Easy to use UI elements based on Tailwind CSS Mamba UI is a toolkit for developers and designers to make creating interfaces easier. We have some of the most popularly used components to help you get started. Everything is modular and
【提案】TailwindCSSの新お作法、一旦これにしませんか？
はじめに 最近なにかと話題のTailwindCSSですが、個人的には結構手に馴染むし、何よりもUI構造とスタイルをセットにできるところがかなり好きだったりします。 ただしTailwindCSSはその便利さゆえに自由奔放に書くことができてしまうため、無秩序なUIコンポーネントの定義ができてしまったりします。そういった状況を数々経験してきた方々は、あまりTailwindCSSをよく思わないかもしれません。 個人的には「TailwindCSSは、ルールを守って運用できれば楽しくUIコンポーネントの実装ができる」のかなと思ったりします。 今回は楽しいTailwindCSSを用いた開発を実現するために、守るべきお作法を共有できたらと思います。 個人的Tailwindcssお作法の四箇条 今回紹介したいTailwindCSSのお作法は、以下の四箇条です。 classNameは見やすさ重視で改行すべし
🎨Storybook@7入門：Next.js + TailwindCSSへのステップバイステップ組み込みガイド
Storybookのメジャーバージョンが7にアップデートしてからしばらく経ちます。 しかしながらNext.jsとtailwindCSSの組み合わせにStorybookを使用する記事が少なかったため、 組み込むために行ったことをまとめました。 動作確認環境は以下のとおりです。 "next": "13.3", "react": "^18.2.0", "tailwindcss": "^3.3.2", "storybook": "^7.0.11", "@storybook/addon-essentials": "^7.0.11", "@storybook/addon-interactions": "^7.0.11", "@storybook/addon-links": "^7.0.11", "@storybook/blocks": "^7.0.11", "@storybook/nextjs": "
レスポンシブデザインで Tailwind CSS と CSS custom properties を併用する体験が良過ぎる
Tailwind CSS での開発体験が個人的に最高すぎて、最近はどんなWebサイトの実装でも利用しています。 CSS custom properties を併用することもあり、そのときに嬉しいことを紹介します。 Next.js を使っている前提でコード・ファイル名を例示しますが、他でも扱えると思います。 CSS custom properties 併用したい場面 スマートフォンでは、コンテンツを端から 16px の位置に置く パソコンでは、コンテンツ幅を 960px にし中央寄せにする こんなデザイン仕様、レスポンシブデザインだとよく出きます。 tailwind.config.js でテーマを拡張して実装すると以下のようになります。 import type { Config } from 'tailwindcss'; export default { theme: { extend: {
TailwindにContainer Queriesがやってきた
<div class="flex flex-col gap-4 p-4"> <div class="@container w-[200px]"> <div class="border bg-blue-50 border-blue-300 @[300px]:bg-red-50 @[300px]:border-red-300 p-8"> Sample </div> </div> <div class="@container w-[400px]"> <div class="border bg-blue-50 border-blue-300 @[300px]:bg-red-50 @[300px]:border-red-300 p-8"> Sample </div> </div> </div>
Tailwind CSS の一歩進んだ書き方
-## CSS カスタムプロパティ +## CSS カスタムプロパティの宣言 +## CSS カスタムプロパティの利用 + +```html:html +<h1 class="px-[--gutter]"> + Hello world! +</h1> +``` + +`px-[var(--gutter)]` のように記述することもできますが、`var()` は省略可能です。 -<h1 class="text-[length:var(--title-size)] text-[color:var(--title-color)]"> +<h1 class="text-[length:--title-size] text-[color:--title-color]"> +## フォントサイズと一緒に行の高さを指定するショートハンド + +```html:html +<h1 class="text-
Tailwind考 - uhyo/blog
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
ReactとTailwindCSSでモックを作るのは楽しいぞ
（2022年11月25日追記） 私の本が株式会社インプレス R&Dさんより出版されました。この記事の内容も含まれています。イラストは鍋料理さんの作品です。猫のモデルはなんとうちのコです！ 感想を書いていただけるととても嬉しいです！ （2022年8月3日追記）この記事の内容はこちらの本でも読めます。無料公開している「3章 モックアップを作ろう」に相当します。本の方がより詳しく説明しています。 はじめに 現在、とあるAPIを販売するWEBサービスをReactで作成中です。先週は環境構築を行いましたが、今週はモックの作成を進めました。TailwindCSSのUIコンポーネントを公開しているページがたくさんあるので、気に入ったデザインを選んでコードをコピペすると画面モックがサクサク作れてとても楽しいです。 コピペする前にこれを読もう コードをコピペすればきれいなデザインは再現できますが、セマンティ
【React】daisyUIを触ってみた！かなり楽しいw
daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこちらのライブラリをReact（Next.js）で色々触ってみましたので、感想などをお伝えします。 なぜ興味を持ったか 最近プロジェクトでChakra UIを触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Headless UI
Next.jsにTailwind CSSを導入する
Tailwind CSSのカスタマイズでよくやること
Meraki UI Tailwind CSS Components
Tailwind UI KIT – 250 components and templates for React, VueJS and Angular.
Kitwind
Tailblocks — Ready-to-use Tailwind CSS blocks
Flowrift
