A library filled with Tailwind CSS UI blocks, components & templates. Browse an ever-growing UI kit inside a highly optimized app. View / copy / customize.
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
(2022年11月25日追記) 私の本が株式会社インプレス R&Dさんより出版されました。この記事の内容も含まれています。イラストは鍋料理さんの作品です。猫のモデルはなんとうちのコです! 感想を書いていただけるととても嬉しいです! (2022年8月3日追記)この記事の内容はこちらの本でも読めます。無料公開している「3章 モックアップを作ろう」に相当します。本の方がより詳しく説明しています。 はじめに 現在、とあるAPIを販売するWEBサービスをReactで作成中です。先週は環境構築を行いましたが、今週はモックの作成を進めました。TailwindCSSのUIコンポーネントを公開しているページがたくさんあるので、気に入ったデザインを選んでコードをコピペすると画面モックがサクサク作れてとても楽しいです。 コピペする前にこれを読もう コードをコピペすればきれいなデザインは再現できますが、セマンティ
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 5 best practices for preventing chaos in Tailwind CSS—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/10 原著者: Nina Torgunakova(フロントエンドエンジニア)、Travis Turner(技術編集者) サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 章立てや強調の一部は原文から変更しています。 参考: Tailwind CSS - Rapidly build modern webs
If you work in the front-end, you've probably heard a lot about TailwindCSS, a CSS library, much like Bootstrap. Much unlike Bootstrap, however, Tailwind takes a different approach - it is all "utility classes". And I am not a fan. I got a whiff of it and quickly learned the name is appropos: it was as welcome and useful as passed gas. Before we start, let me try to explain what a utility class is
Today’s the day — we just published the first development preview of Catalyst, our first fully-componentized, batteries-included application UI kit for React, just in time for your holiday hacking sessions. Today’s the day — we just published the first development preview of Catalyst, just in time for your holiday hacking sessions. Catalyst is our first fully-componentized, batteries-included appl
インラインスタイルと Tailwind CSS と Tailwind CSS 入力補助ライブラリと Tailwind CSS in JS この記事では Tailwind CSS 自体の紹介はしません。公式ページを参照してください。 https://tailwindcss.com/ Tailwind CSS とインラインスタイル Tailwind CSS 関連の記事を目にする機会が増えました。私もプロダクトに導入してしばらく使っていますが、 CSS in JS だと 10 行だったスタイルが 1 行にまとまり、コードの見通しが非常に良くなりました。多くの方には受け入れられている印象ですが、中には「なにそれインラインスタイルと同じじゃんダメじゃん」みたいな反応も見られます。まずはこれに反論しておきたいです。 インラインスタイルの問題点 そもそもインラインスタイルにはどんな問題があるでしょう?
Instant feedback Building complex layouts takes a lot of trial and error. Gimli Tailwind lets the developer preview changes just by hovering on different values. We also let developers: Ctrl+Click to toggle values on/off Ctrl+Hold-and-drag to use inputs as sliders By focusing on instant feedback, we enable developers to Build better websites faster. Show what's relevant. We don't want to overwhelm
One of the hardest constraints we’ve had to deal with as we’ve improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there’s only so much CSS that build tools and even the browser itself will comfortably tolerate. Update: As of Tailwind CSS v2.1, the new Just-in-Time engine is in
Next.jsでTailwind CSSを使えるようにする **Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。 **また、Tailwind CSSとはユーティリティファーストのCSSフレームワークです。**その特徴は、Tailwind CSSによって提供されるクラスを組み合わせてコンポーネントを作り、サイトをデザインしていくところにあります。さらにCSSフレームワークなので、CSSに慣れていない人でも簡単に使うことができます。 関連記事:
このサイトについて プライバシーポリシー プロフィール 投稿タグの一覧 amp.dev(外部リンク) 本サイトについて 趣味で開発したプログラムや開発メモを載せています。 ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、 誰かのお役に立てれば嬉しいです。 プロフィール uhyo様の「Tailwind考」を拝見させていただいて、概ね賛成ですが 今までTailwind CSSのv1.0が公開されてから、業務や個人でTailwind CSSを使ってきた私なりの考えや感想、意見を特に私が異なると思った部分を中心に一部引用させていただきながら、まとめました。 内容がかなり長くなってしまい、Twitterやはてブのコメントでは収まらなくなったので大変恐縮ですが、個人ブログで公開します。 引用させていただいた、uhyo様のブログは「こちら」です。 「Tailwin
Tailwind vs. Semantic CSS Tero Piirainen @tipiirai This study compares two websites with similar design: the commercial Spotlight template from developers of Tailwind vs the same site with semantic CSS: GIST Semantic version is several times smaller, renders faster, and requires no extra CSS tooling Front page HTML The main difference: Tailwind uses "utility" classes and the semantic version uses
はじめに 今回は、Tailwind CSSを次のレベルにするためにTailwind Variantsによるスタイリングをしようという内容です。 Tailwind CSSは書きやすいですし、かなり使い心地がいいですが、ある点についてのみ圧倒的な短所があります。 それが「クラス名長すぎ問題」です。 私はよく以下のようなことを感じたりします。 おそらく、Tailwind CSSを使った人がある方なら一度は思ったことあるのではないでしょうか。 そんなTailwind CSSの短所を解決できると感じたものがTailwind Variantsです。 Tailwind Variantsとは 以下は、ドキュメントから抜粋したTailwind Variantsの定義です。 Tailwind VariantsとはTailwind CSSの機能とファーストクラスのVariant APIを組み合わせたライブラリで
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
2022/06/27追記 本記事はTailwind CSSのv2を使用しています。 2022/06/27現在の最新バージョンはv3となっており設定等が異なる箇所がありますので、v3を利用の場合は以下のドキュメントを参照してください。 https://tailwindcss.com/docs/installation TailwindCSSは「使いやすさを優先しよう」という考え方で設計されたユーティリティファーストのCSSフレームワークです。公式ドキュメントがかなり充実していますので、こちらを参照しつつ導入部分を簡単にまとめてみたいと思います。 今回は行うことは以下のような内容です。 npmでtailwindcssをインストールする 設定ファイルを作成して簡単なカスタマイズをする Purge機能を使用してファイルの軽量化を行う TailwindCSSを利用する方法 TailwindCSSを利
Last year we released Tailwind UI — a huge directory of professionally designed UI examples built with Tailwind CSS. Up until now, all of the examples in Tailwind UI have been pure HTML which is sort of the lowest common denominator for all web developers, and makes it possible to adapt them to any templating language or JavaScript framework. Today we’re excited to add first class support for Reac
初めに 最近のCSSについての学んだことをまとめます。特にReactにおけるCSSはどうすればいいのかと悩んでいたため、それについての自分の中での結論も記述できたらと思います! CSSの世界的動向 まず、世界におけるCSSの動向を見てみましょう。2021年におけるstateofcssというサイトをみてみます。 最近の動向としては、CSS Modulesが使われていることが多く、Tailwind CSSが急激に伸びていることがわかります。 stateofcssにも出てきた、プリプロセッサとポストプロセッサについて述べます。 プリプロセッサー 独自の言語(メタ言語)で書かれたスタイル構文をCSS構文へと変換してくれる。 例:Sass、Less、Stylus ポストプロセッサー CSS構文を便利なプラグインなどを通してより良いCSSへと変換してくれる。(自動整形やプレフィックス付与など) 例:P
CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum
サイボウズでkintoneのデザインシステム開発をしているトビ(@0b1tk)です。こんにちは。 今回はデザイントークン、特にセマンティックトークンの命名方法について掘り下げます。 まずはデザイントークンの定義について、W3Cから設立されたデザイントークンの仕様策定をするコミュニティ「Design Tokens Community Group」の定義を引用いたします。 Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. (訳:デザイン・トークンとは、色、スペーシング、タイポグラフィ・スケールなど、デザインシステムを構成する不可分の要素のことである) Design Tokens Community Group このデザイントークンの名前づけについて
<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>
Disclaimer: This article is my version of Tailwind CSS: Adds complexity, does nothing. I respect the original author’s opinions, but I think there’s a better way to criticize Tailwind CSS. Here goes. If you work in the front-end, you’ve probably heard a lot about Tailwind CSS, a CSS framework, much like Bootstrap. Much unlike Bootstrap, however, Tailwind takes a different approach – it is almost e
Tailwind CSS v3.0 is a major update to the framework with a brand new internal engine and as such includes a small number of breaking changes. We take stability very seriously and have worked hard to make any breaking changes as painless as possible. For most projects, upgrading to Tailwind CSS v3.0 should take less than 30 minutes. To learn more about what’s new in Tailwind CSS v3.0, read the Tai
Linda Ikechukwu Frontend developer. Writer. Community Strategist. Building web interfaces that connect products to their target users. Editor’s note: This post was updated on 22 December 2023 to introduce component collections such as Tailwind Elements and TailGrids. Tailwind CSS is a utility-first framework for rapidly building custom UI components. This means that, unlike other CSS frameworks or
This is the main repo for the Open Source Pines UI Library. This repo is simple to setup and get running on your local if you wish to submit a fix or make some additions to the library. Download the contents of the GitHub repo and store it in a folder. Make sure you have NodeJS installed along with the http-server package. CD into your folder and run http-serve Visit the localhost URL to see Pines
はじめに 先日Tailwind CSSを開発しているAdam WathanさんがTwitterでSVGアイコンのアニメーションに関する以下のようなツイートをしていました。 Tailwind CSSを使って実装する手順が示されているのですが、面白そうだったので自分でもいくつか作成してみました。 作例①:伸縮させてみる 最初に、以下のようなMenu用のSVGアイコンを作成しました。 Tailwind Playでデモを作成しましたので、こちらからコードとプレビューが確認できます。 ボタン部分を作成する まずはじめに、Tailwind CSSのユーティリティクラスを使用してボタンをスタイリングします。 <button type="button" class="rounded-full bg-gray-700 px-4 py-2 font-bold text-white hover:bg-gray-
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く