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
商用利用無料！ コピペで簡単に実装できる、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
朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。 そんな:has()疑似クラスの便利な使い方を紹介します。 :has()疑似クラスのサポート状況 ※まだFirefox 121の分がアップデートされていないようです。 Chrome, Edgeは105から、Safariは15.4からサポートされているので、来年は:has()疑似クラスを使用する機会も増えるでしょう。 また、12/20にアップデートされたTailwind CSS v3.4（リリース情報）でも:has()疑似クラスがサポートされました。 :has()疑似クラスの基礎知識 CSSの:has()疑似クラスとは、指定した要素がある場合にのみ
レスポンシブデザインで 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-
React + Tailwind CSS でコンポーネントを作ってみた
はじめに React+Tailwindで再利用性の高い？コンポーネントに作ってみましたと... 今回はボタンを例に作って見ました ※tailwind CSSのインストールとかは省きます（verは3.1.8使用） コンポーネント 使用するうえで必要な機能を乗せると以下のような感じになりました。 type BtnProps = { block?: boolean; children: React.ReactNode; className?: string; color?: "blue" | "green" | "red" | "yellow" | "indigo" | "dark"; disabled?: boolean; rounded?: boolean; size?: "sm" | "md" | "lg"; submit?: boolean; onClick?: (event: any)
Tailwind考 - uhyo/blog
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
【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を触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ
Next.js (JavaScript/TypeScript) に Tailwind CSS を導入する方法 | fwywd（フュード）powered by キカガク
どーも、入田 / ぐるたか @guru_taka です！ 本記事では Next.js に Tailwind CSS を導入する方法を紹介します。また、VS Code で Tailwind CSS での開発がしやすくなる Tips もまとめていますので、参考にしてみてください！ バージョン情報 node：15.11.0 react: 17.0.2 react-dom: 17.0.2 next: 11.0.1 autoprefixer: 10.2.6 postcss: 8.3.5 tailwindcss: 2.2.4 Tailwind CSS とは？ Tailwind CSS とは、ユーティリティファーストの CSS フレームワークになります。CSS フレームワークで有名な Bootstrap のように、デザインが整ったコンポーネントがあるのではなく、デザインを整えるときに便利かつシンプルな機
【Next.js＋TailwindCSS】Next.jsにTailwindCSSを導入しtailwind.config.jsでカスタマイズする - Qiita
【Next.js＋TailwindCSS】Next.jsにTailwindCSSを導入しtailwind.config.jsでカスタマイズするNext.jstailwindcsstailwind.config.jsfwywd はじめに TailwindCSSでコーディング時に同じ記述を何度も記述してしまい、汚くなってしまったので、繰り返し使用するクラスの作り方や使用したい色を設定する方法の一部をまとめました。 分かること バックグラウンドにしたい画像の定義 使いまわしたい色の定義 <h1>タグや<p>タグ等、タグの基本スタイルを登録する クラス名を設定して装飾する 環境 Next.js：11.0.2 Tailwind CSS：2.2.15 React：17.0.2 Tailwind CSS について Next.jsでtailwind.cssのプロジェクトを作成されていない方はNext.js
【Next.js + Tailwind】これを押さえればOK 最新のフロントエンド開発 - Qiita
目次 1.この記事を書くきっかけ 2.自己紹介 3.この記事を見てほしい人 4.Reactについて 5.Next.js + Tailwind cssの導入方法 6.Tailwind css 7.スクロールアニメーション 8.Next.jsのImageについて 9.おわり 10.おまけ 1. この記事を書くきっかけ fwywdという会社の１次試験でQiitaに記事を投稿するという試験があり、書くことになりました。 初めて記事を書くので、ご不明な点等があるかもしれませんが、できるだけ詳しく書いていくので、どうぞよろしくお願いいたします。 2. 自己紹介 私はhtml css を３カ月前に勉強し始めたばかりの学生です。 Tailwind css歴は２カ月程度ですが、こんな私でもfwywdの一次試験のサイト制作が合格したので、ぜひ参考にしていただければ幸いです。 3. この記事を見てほしい人 Re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Headless UI
Next.jsに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
