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を触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ
PIXIV Design System 2021 の発表をしました（前編） #pixivdevmeetup - pixiv inside
2021/10/25追記 おまたせしました。この記事の後編も公開しておりますので、合わせてお読みください。 inside.pixiv.blog こんにちは。プロダクトデザイナーの yksk とフロントエンドエンジニアの f_subal です。 ピクシブにはデザインシステムを開発するチームがあります。ピクシブが運営する数多くのプロダクトが共通のガイドライン、コードを使ってUIを設計できる体制への移行を目的としており、そのための仕組みづくりに取り組んでいます。 今回は、先日行われた pixiv DEV MEETUP 2021 のセッション「PIXIV Design System 2021」で発表した、技術的な取り組みについて前後編に分けて発表します。 前編にあたるこの記事では f_subal パートの内容をおさらいをしていきます。 PIXIV Design System 2021 昨年のpix
Use this interactive tool as a cheat sheet to view and search for all the class names from Tailwind CSS, the world's most popular utility-first CSS framework.
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
はじめに つい最近、ReactもVueも使わずに静的なペライチHTMLのマークアップを行う必要に迫られました。その際ViteのVanilla[1]テンプレートとTailwindを使った環境でマークアップをしたところ非常に快適だったので、環境構築の手順を記事にしておこうと思いました。 Viteを使う理由 ViteというとVueやReactの開発ツールと思われがちですが、UIライブラリに依存しないVanillaテンプレートが用意されています。 ファイルの更新を検知してブラウザへの反映といった基本的な機能に加えて、PostCSSのサポートもあるのでTailwindでの開発と相性が良いです。 セットアップ Viteでプロジェクトを立ち上げる普段の手順に加えて、Tailwindのセットアップを行います。 npm create vite@latest # project名を入力後、フレームワークでは「
レスポンシブデザインで 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: {
Webサイトやスマホアプリでよく使用されるUIコンポーネントをTailwind CSSのユーティリティクラスで実装したオープンソースのライブラリを紹介します。 Tailwind CSSには、コンポーネントの基本セットがありません。FlowBiteではナビゲーションバー、カード、ボタン、ページネーション、フォームなど基本的なコンポーネントがすべて揃っています FlowBite FlowBite -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました FlowBiteの特徴 FlowBiteの使い方 FlowBiteのコンポーネント FlowBiteの特徴 FlowBiteは、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
2024年1月26日紙版発売 2024年1月26日電子版発売 工藤智祥 著 B5変形判／384ページ 定価3,740円（本体3,400円＋税10%） ISBN 978-4-297-13943-8 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto この本の概要 本書はTailwind CSSの実践的な入門書です。フロントエンドエンジニア，マークアップエンジニア，そしてデザインシステムの構築に興味があるデザイナーを対象に，Tailwind CSSの中核的な思想である「ユーティリティファースト」の理解へといざないます。Tailwind CSSの基本的な使い方や，デフォルトテーマによって提供されるクラスの紹介はもちろん，テーマのカスタマイズやプラグイン
前回の見取り図記事でスコープ外にした用語について、です。 書かなくてもいいかとも思ったんですが、思ったより前回記事が読まれたので、補足的に書こうと思います。 具体的に何を扱うかは、目次を見てください。 ビルドとデプロイ ビルドとデプロイの違いはなんでしょう？ 開発環境によって微妙に差異があって、業界標準でこう、と決まってるわけではないんでしょうけど、一般的には下記を指すと僕は認識しています。 ビルド: ソースコードのコンパイル、関連ファイルの紐付けを行い、実行可能な状態にする デプロイ: ビルドして、ユーザーから実行可能な状態にする デプロイは自分以外のユーザーが実行できる環境でのビルド、と言ってもいいかもですね。 デプロイ環境（Vercel, Netlify, Heroku） で、Webサイトのデプロイ環境について。 かつては自分でサーバーサイドのミドルウェアをセットアップする必要があり
Tailwind Variantsに触れてみる
本記事執筆時点(2023.6.3)において、Tailwind Variantsのバージョンはv0.1.5となっています。 Tailwind Variantsとは Tailwind Variants a first-class variant API library for TailwindCSS. 引用元: https://www.tailwind-variants.org/docs/introduction ドキュメントに書かれているように、Tailwind VariantsはTailwindCSSの機能とファーストクラスのVariant APIを組み合わせた技術です。TypeScriptベースで作成されているので型安全であり、特定のフレームワークに依存しないユーティリティライブラリとなっています。 ここで登場したVariant APIという言葉ですが、これはStitchesというCSS
本文書は、Taliwind CSSをこれまで使ったことがない人向けの入門者向けの内容になっています。記事を2回にわけて説明を行っていますが、1回目の本文書はTailwind CSSの環境の構築を行い基本的な設定とカスタマイズ方法について説明を行います。2回目では本文書では触れていないFlexboxやブレイクポイント、レスポンシブデザインについて、実践的なナビゲーションバーを作成しながらTailwind CSSの理解を深めていきます。 タイトル通り利用者が爆増中で次々と新たしい機能が追加されています。現在の最新バージョンはv3です。本文書はv2.xの時に作成したので記載している内容もv3.4.3ではより簡単な方法で設定できたり以前のバージョンでできなかったことができるようになっています。しかしUtilify Classという根本は変わっていないので基礎を学ぶための情報は記載されています。
これは便利！ Tailwind CSSのチートシート、v3対応、すべてのクラスとプロパティ・値を参照および検索もできる優れもの
Tailwind CSS v3がリリースされ、ますます注目されているTailwind CSSのチートシートを紹介します。 Tailwind CSSに使用されているすべてのクラスとそのプロパティ・値を参照および検索もでき、非常に便利なチートシートです。 Tailwind CSS Cheat Sheet Tailwind CSSとは Tailwind CSSのチートシート Tailwind CSSとは Tailwind CSS（Tailwind CSS -GitHub）はユーティリティファーストのCSSのフレームワークで、汎用的なクラスを組み合わせてWebサイトやスマホアプリのレイアウト・コンポーネントを実装します。 たとえば、メールの入力欄だと下記のように記述します。 <input class="block appearance-none bg-white placeholder-gray-
はじめに この記事はTailwindCSSが最近流行ってるけどなんで流行ってるの？という疑問をいただいた、フロントエンドエンジニア歴3年ほどの人間が調べてわかったことをまとめた記事です。以下のようなことがわかります。 TailwindCSSとは一体なんなのか？ CSS設計とは違うの？Bootstrapなどとの違いは？ どんな背景があって流行るようになってきているのか考察 Design Systemとの相性は？ TailwindCSSとは一体なんなのか？ ものすごくざっくりまとめるとユーティリティクラスの詰め合わせのライブラリと表現できるのかなと思いました。 以下のTailwindCSSの公式ドキュメントに書いてあることについて軽くまとめます。 https://tailwindcss.com/docs/utility-first まずはコードを見てみる まずTailwindを使わない普通のH
Tailwind CSS Cheat Sheet
Cheat sheet to learn Tailwind CSS quickly. Browse and search all Tailwind utility classes or CSS properties on one page.
GitHub - t3-oss/create-t3-app: The best way to start a full-stack, typesafe Next.js app
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Blog をリニューアルするにあたり、今までの Movable Type でテンプレート作って、という手法から、Movable Type は JSON データの書き出しだけ担当させて、フロントエンドは Astro と Tailwind CSS で開発する形に切り替えたので、その概要を簡単にメモ。 この Blog は立ち上げ当初から Movable Type で運用していますが、MT タグを書いて、テンプレートを作って、という一般的な運用っていうんですかね？ それをやめて、Movable Type は記事データの管理と JSON を書き出す役割だけにして、フロントエンドは Astro + Tailwind CSS でリニューアルしました。 面倒だったのでデザインは大きく変えず、ぱっと見はリニューアルしたのがわかりにくい感じになっていますが、Movable Type とフロントエンドを完全に分
CSSにおける汎用化の先送り、ユーティリティファーストCSS、レイアウトプリミティブ - yuhei blog
CSSは普通、セレクタの記述から始まる。目の前にあるHTML片に対してどのようなスタイリングを施すかという前に、いかにしてそのHTML片を選択するかという意識が先に来る。あらかじめ完成したHTML文書へ向けてスタイルを適用していくのであればそれでうまくやれるのかもしれない。だが広く行われているウェブデザインの制作では、まずゴールとして定められた描画結果だけがあり、そこから逆算してHTMLとCSSを書き進めていく。つまり個別の結果だけがある状態で実装に取り掛かることになる。実装のために必要な構造化はたいてい後手に回る。 それでもCSSがセレクタから始まることは変わらない。実装を進めるためにはまずセレクタを書かなければならない。セレクタは規則の根幹である。バグを減らし、開発を効率的にするためには、あらゆるスタイリングの意図をセレクタに反映させるのが基本だ。しかし最初から正確にその意図を把握でき
Sailboat UI - Modern UI component library for Tailwind CSS
Build your website quickly with Sailboat UISailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open-source Tailwind CSS components, and make it easy to build your products.
Rewind-UI - A fully customizable React-TailwindCSS component library
Rewind-UI is a React component library that provides a set of accessible, reusable, and customizable components to help you build your next project. We've designed our components to be flexible and easy to use, so you can focus on what matters most: building great user experiences. Getting started with Rewind-UI is easy! Simply install the package using your package manager of choice, and you're r
GitHub - francoismassart/eslint-plugin-tailwindcss: ESLint plugin for Tailwind CSS usage
Learn more about each supported rules by reading their documentation: classnames-order: order classnames for consistency and it makes merge conflict a bit easier to resolve enforces-negative-arbitrary-values: make sure to use negative arbitrary values classname without the negative classname e.g. -top-[5px] should become top-[-5px] enforces-shorthand: merge multiple classnames into shorthand if po
Open-sourcing our progress on Tailwind CSS v4.0 - Tailwind CSS
Last summer at Tailwind Connect I shared a preview of Oxide — a new high-performance engine for Tailwind CSS that we’ve been working on, designed to simplify the developer experience and take advantage of how the web platform has evolved since Tailwind was first released. Last summer at Tailwind Connect I shared a preview of Oxide — a new high-performance engine for Tailwind CSS that we’ve been wo
Development preview Catalyst is currently in development preview and only available to all-access customers to help us refine the experience. Catalyst is a modern application UI kit built with Tailwind CSS, Headless UI and React, designed and built by the Tailwind CSS team. It's a collection of beautiful, production-ready UI components you drop into your projects alongside your own code that are y
The first new feature update since Tailwind CSS v2.0 is here and loaded with lots of cool stuff! We’ve merged the new JIT engine to core, added first-class support for composable CSS filters, added blending mode utilities, and a bunch more. Here are some of the highlights: JIT engine in core Composable CSS filters API New blending mode utilities New isolation utilities For the full details, check
Ready-to-use Tailwind CSS blocks
この雑記を書く問題意識は、Tailwind CSSに対して向けられている世の人々の不満が、Tailwind CSSがコミットしていることから外れた、お門違いの期待の押しつけになっているのではないかと感じるところにある。 ライブラリやフレームワーク、道具にはそれが作られた目的があり、果たそうとするコミットメントがある。その圏内において果たされていないコミットメントに対する不満は、それ自体の存在意義にかかわる意味を持つが、しかし利用者が一方的に寄せた期待が果たされないことに対する不満はそうではない。 念押しするまでもないと思うが、これはTailwind CSSに対して不満を向けるべきではないという話ではまったくない。むしろ、その不満の下敷きとなっている Tailwind CSS への期待が Tailwind CSS 自体によってコミットされたものでないとしたら、不満を向けてもしょうがないのでは
Next.js で next-themes と Tailwind CSS を使って Light/Dark モードを切り替える - Goodpatch Tech Blog
フロントエンドエンジニアの上垣です。 この記事では、Next.js で、next-themes と Tailwind CSS を使って Light/Dark モード切り替え対応する例を紹介しています。 github.com 前提 Tailwind CSS のダークモード Light/Dark モードの判定 Dark モードのスタイル next-themes インストール セットアップ 実行結果 Light/Dark モードの切り替え サンプルアプリケーション 感想 前提 この記事では下記のバージョンのライブラリを利用しています。 Next.js 13.4.12 next-themes 0.2.1 Tailwind CSS 3.3.2 Next.js の AppRouter を利用しています。 この記事で紹介するのは、「Light/Dark モードの切り替え」であり、Dark モード実装の詳
Tailwind UI KIT – 250 components and templates for React, VueJS and Angular.
Tail-kit Components and templates for Tailwind CSS 3.0Tail-kit now support tailwind CSS v3 !Tail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 3.0. It's all compatible with React, VueJS and Angular application.
The UI toolkit for Svelte and Tailwind. Skeleton allows you to create adaptive and accessible interfaces for web apps of any shape or size.
はじめに まず、Tailwind CSS の spacing とは何かについては、公式の Spacing ページ をご覧ください。Tailwind CSS はユーティリティファーストの CSS フレームワークですので、提供する padding や margin などのサイズは予め決められています。その基となるのが Spacing ページ下部にある Default spacing scale という表です。 Tailwind CSS default spacing scale Name がサイズ名で、size が実際の値で、pixels がピクセルに換算したときの数値です。この spacing は、padding、margin、width、height、top、left などなど、さまざまなプロパティに利用されます。Tailwind CSS を使用したことがある方はご存知だと思いますが、使い
March 2022 Update: Well the JIT is now the default way of managing Tailwind output generation, so that's cool. Unfortunately, Tailwind's purview has only grown in directions that are breathtaking in their weirdness. I remain as dubious of TW as ever, and in fact have started writing a course specifically designed to teach people how to switch away from Tailwind and use the best of today's "vanilla
目次 こんにちは、CADDi でフロントエンド エンジニアをやっている桐生です。この記事は CADDi Advent Calendar 2020 の7日目の記事になります。 昨日の記事はモリさんの あえてケイスケ・ホンダのようなデザイナーになるには でした！まだご覧になっていない方はぜひ目を通してみてください！ 本日は、最近触っている tailwindcss についてお話できればと思います。 [toc] tailwindcss とは tailwindcss は数あるCSSフレームワークの1つですが、Utility first というアプローチでスタイルを組み上げていく点がユニークで、OOCSS, BEM, SMACSS など、これまでのCSS設計アプローチとは考え方が大きく異なります。 tailwindcss では p-6, max-w-sm などの CSS class を utility
By the makers of Tailwind CSSModern website templates, crafted with Tailwind CSS. Visually-stunning, easy to customize site templates built with React and Next.js. The perfect starting point for your next project and the ultimate resource for learning how experts build real websites with Tailwind CSS.
Tailwind CSSのカスタマイズでよくやること
tailwindcss 3.0.23で検証 カラーテーマを追加する tailwindではbg-whiteで背景色を白、text-whiteで白テキストなどにできるが、whiteの部分で自分の決めたカラーを使えるようにする module.exports = { ・・・ theme: { extend: { colors: { "foo": "#f97316", "bar": { "buz": "#65C18C", ・・・ }, }, }, }, ・・・ }
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": "
Press spacebar, enter a hexcode or change the HSL values to create a custom color scale Enter a hexcode to create a custom color scale
TailwindCSSのapplyは何が悪いのか
Tailwind CSS には @apply という機能がある。ユーティリティクラスをカスタムクラスの内部に「展開」するというものだ。例えば以下のようにできる。 .custom-class { max-height: 350px; &:before, &:after { content: ''; @apply block sticky left-0 right-0 -mt-2 pb-3; } } これはビルドするとこうなる。 .custom-class { max-height: 350px; } .custon-class:before, .custon-class:after { content: ''; position: -webkit-sticky; position: sticky; left: 0px; right: 0px; margin-top: -16px; displ
Tailwind CSS 3.0 alpha1〜2の注目の新機能（５選！）をご紹介！ - 虎の穴開発室ブログ
こんにちは、虎の穴ラボ Advent Calendar 2021 - Qiita 3日目の記事です。 2日目は「T.M」さんによる MetaworkでRails開発のデバッグをしてみよう！ でした。 4日目は「Y.S」さんが DenoのFFIでMySQLに接続する の記事を書かれる予定です。 はじめに Tailwind CSS v3.0 の alpha1 が 10/2、alpha2 が 11/8 に公開されました。 今回は、その中からよく使われそうな 注目の新機能を５つ厳選して、ご紹介しようと思います。 最新の Tailwind CSS がどのような機能を実装するか、興味がある方の参考になれば、、、と思います。 Tailwind CSS Ver3.0 は 12/9 (木) にリリースされる予定です。 🤞🥵 pic.twitter.com/f700zq04wh— Adam Wathan
はじめに 最近なにかと話題のTailwindCSSですが、個人的には結構手に馴染むし、何よりもUI構造とスタイルをセットにできるところがかなり好きだったりします。 ただしTailwindCSSはその便利さゆえに自由奔放に書くことができてしまうため、無秩序なUIコンポーネントの定義ができてしまったりします。そういった状況を数々経験してきた方々は、あまりTailwindCSSをよく思わないかもしれません。 個人的には「TailwindCSSは、ルールを守って運用できれば楽しくUIコンポーネントの実装ができる」のかなと思ったりします。 今回は楽しいTailwindCSSを用いた開発を実現するために、守るべきお作法を共有できたらと思います。 個人的Tailwindcssお作法の四箇条 今回紹介したいTailwindCSSのお作法は、以下の四箇条です。 classNameは見やすさ重視で改行すべし
The ultimate tool for Tailwind CSSBuild, design and debug your Tailwind website visually with Tailscan, right within the browser.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】daisyUIを触ってみた！かなり楽しいw
Tailwind CSS Cheat Sheet - Flowbite
Vite + Tailwind CSSでペライチHTMLをマークアップする
便利なのが登場！ Tailwind CSSで実装されたOSSのUIコンポーネント集 -FlowBite
Tailwind CSSでお手軽ローディングアニメーション
Tailwind CSS実践入門
Webフロントエンドの見取り図で書ききれなかった用語について書きます
利用者爆増中 初めてでもわかるTailwind CSS入門 基礎編 | アールエフェクト
TailwindCSSって何？なんで流行ってるの？｜F Lab｜Fixel株式会社
Astro と Tailwind CSS でこの Blog をリニューアルしました
Catalyst - Tailwind CSS Application UI Kit
Tailwind CSS v2.1 - Tailwind CSS
Tailblocks — Ready-to-use Tailwind CSS blocks
Tailwind CSSの二面性、デザインシステムを借りるということ | Marginalia
Skeleton — UI Toolkit for Svelte + Tailwind
Tailwind CSS に流動的 Spacing を導入
Why Tailwind Isn't for Me
tailwindcss のコンセプトとメリットについての考察 - CADDi Tech Blog
Tailwind CSS Templates - Tailwind UI
🎨Storybook@7入門：Next.js + TailwindCSSへのステップバイステップ組み込みガイド
Tailwind CSS Color Generator | UI Colors
【提案】TailwindCSSの新お作法、一旦これにしませんか？
Tailscan - Browser inspector for Tailwind CSS