このリポジトリ でやったこと。 やろうとしたこと tailwind.css は Utility First と銘打った CSS フレームワークで、コンポーネント化を前提としたモダンフレームワークと相性がいいです。今回は next.js の amp-mode で tailwind を使おうとしてみました。 Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs 問題 前提として、 amp には inline css の容量制限があり、75kb を超えると AMP と認識されなくなります。 tailwind はビルドして使うのが前提のフレームワークですが、全部入りの tailwind.min.css は 1.3 M あります。これでは到底、75 kb に収まりません。 AMP の CSS
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
Windi CSS
Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.
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
Shuffle
Combine elements and styles to create an entirely new UI Library! Try UI Library Creator →
Tailwind CSS のテンプレートサイトを使えば Web サイトを効率よく作成できます。簡単ではありますが個人的に素敵だと思った Tailwind CSS のテンプレートサイトをまとめてみました。 Tailwind CSS テンプレート＆ UI キットサイト Tailwind UI（有料） https://tailwindui.com/ すべてのテンプレートを使用するにはライセンス購入が必要 シンプルなデザインはとても汎用的 React や Vue を使用したテンプレートも有 Headless UI https://headlessui.com/ ドロップダウンやダイアログ等の「機能」をメインとした UI コンポーネント集 サンプルコードは React か Vue.js の2種類から選択できる。 MIT ライセンス Preline UI https://preline.co/ 無料で
Ready-to-use Tailwind CSS blocks
JSer.info #684 - Tailwind CSS v4.0 alphaがリリースされました。 Open-sourcing our progress on Tailwind CSS v4.0 - Tailwind CSS OxideというRustで書かれたエンジンを追加、Lightning CSSを組み込むように変更することでパフォーマンスやビルドトインでサポートする構文が改善されています。また、記事ではv4のロードマップについても触れられています。 TypeScript 5.4がリリースされました。 Announcing TypeScript 5.4 - TypeScript BetaやRCからの大きな機能的な追加などはありません。 クロージャーにおけるNarrowing結果の改善、NoInfer Utility Typeの追加、 --module preserveの追加が行われ
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.
Find quickly all the class names and CSS properties with this interactive cheat sheet. The only Tailwind CheatSheet you will ever need!
Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs
Utility-first多くのCSSフレームワークはボタン、カード、アラートなど、開発の初期段階ですばやくデザインするのに役立つ、あらゆる種類の事前に設計されたコンポーネントが付属しています。 しかし、カスタムデザインでサイトを目立たせるときは、多くの痛みを引き起こします。 Tailwindは違います。 Tailwindは、事前に設計されたコンポーネントの代わりに、HTMLを離れることなく完全にカスタム設計を構築できる低レベルのユーティリティクラスを提供します。 <div class="md:flex"> <div class="md:flex-shrink-0"> <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ix
はじめに まず、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
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.
[初心者向け] Next.js で初めての OpenAI API アプリを作ってみた（Tailwind CSS、Docker 利用） | DevelopersIO
[初心者向け] Next.js で初めての OpenAI API アプリを作ってみた（Tailwind CSS、Docker 利用） こんにちは、アノテーション テクニカルサポートの Shimizu です。 昨今の OpenAI ブームに乗り、私も何かを始めてみたくなりました。 そこで、ちょうど勉強中だったフロントエンド開発環境（Next.js + Tailwind CSS + Docker）と OpenAI API を利用して、AI が質問に答えてくれるだけのシンプルな入門アプリを、実作業 30 分ほどで作ってみました。 完成品イメージ ここでは筆者の備忘も兼ねて、一連の手順を記事にしてみました。 以下のような方の参考になれば幸いです。 OpenAI API で最小限の動くアプリを作り、仕組みを理解したい Next.js(React)や Tailwind CSS などフロントエンドの流行
![[初心者向け] Next.js で初めての OpenAI API アプリを作ってみた（Tailwind CSS、Docker 利用） | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/3c0e373391bd52827f22134f0b09da3118d7f40a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2023%2F01%2Fopenai_chatgpt.png)
Tailwind CSSのカスタマイズでよくやること
tailwindcss 3.0.23で検証 カラーテーマを追加する tailwindではbg-whiteで背景色を白、text-whiteで白テキストなどにできるが、whiteの部分で自分の決めたカラーを使えるようにする module.exports = { ・・・ theme: { extend: { colors: { "foo": "#f97316", "bar": { "buz": "#65C18C", ・・・ }, }, }, }, ・・・ }
People have been talking about the best way to sort your utility classes in Tailwind projects for at least four years. Today we’re excited to announce that you can finally stop worrying about it with the release of our official Prettier plugin for Tailwind CSS. This plugin scans your templates for class attributes containing Tailwind CSS classes, and then sorts those classes automatically followin
GitHub - ben-rogerson/twin.macro: 🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
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
Tailwind Starter Kit by Creative Tim | Free & Open Source Design System
A beautiful extension for TailwindCSS.Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular. Great for your awesome projectPutting together a page has never been easier than matching together pre-made components. From landing pages pres
Installation - Tailwind CSS
CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum
はじめに 最近なにかと話題のTailwindCSSですが、個人的には結構手に馴染むし、何よりもUI構造とスタイルをセットにできるところがかなり好きだったりします。 ただしTailwindCSSはその便利さゆえに自由奔放に書くことができてしまうため、無秩序なUIコンポーネントの定義ができてしまったりします。そういった状況を数々経験してきた方々は、あまりTailwindCSSをよく思わないかもしれません。 個人的には「TailwindCSSは、ルールを守って運用できれば楽しくUIコンポーネントの実装ができる」のかなと思ったりします。 今回は楽しいTailwindCSSを用いた開発を実現するために、守るべきお作法を共有できたらと思います。 個人的Tailwindcssお作法の四箇条 今回紹介したいTailwindCSSのお作法は、以下の四箇条です。 classNameは見やすさ重視で改行すべし
Tailwind CSS IntelliSense - Visual Studio Marketplace
Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting. Installation Install via the Visual Studio Code Marketplace → In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.{js,cjs,mjs,ts} in your wo
GitHub - kripod/otion: Atomic CSS-in-JS with a featherweight runtime
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
Flowrift
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.
Tailwind Starter Kit by Creative Tim | Free & Open Source Design System
A beautiful extension for TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue, and Angular.
GitHub - tw-in-js/twind: The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
Twind is a small compiler that converts utility classes into CSS at runtime. The goal of this project is to unify the flexibility of CSS-in-JS with the carefully considered constraints of the Tailwind API. Utility-first CSS without any build step right in the browser or any other environment like Node.js, deno, workers, ... 📖 Study the documentation 🤖 Try the playground 🧭 Explore the examples
GitHub - tailwindlabs/headlessui: Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
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
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
Tailwind CSS の基本的な使い方 - コムテブログ
Tailwind CSS とは？ Tailwind CSS は、スタイリングを効率的に行える CSS フレームワークです。HTML タグ内に、規定の短いクラスを追加するだけで、多くのスタイルを適用できます。クラス名は直感的なので、CSS を書いたことがある方なら、すぐに使い方を覚えられます。
Tailwind Builder
Create Tailwind templates in minutes The only product for Tailwind CSS that includes a visual editor, 25+ beautiful styles, and 5,800+ UI components. Try Demo 1 Choose UI components Use ready-made UI components from the multipurpose library grouped into 20 most frequently used categories.
Flowrift
A library filled with Tailwind CSS UI blocks, components & templates. Browse an ever-growing UI kit inside a highly optimized app. View / copy / customize.
概要 Tailwind CSSを半年使い込んで分かった便利な点/注意点を説明する 最新v3.0のアップデート内容を紹介する はじめに 本記事では非常に便利なCSSフレームワークであるTailwind CSSについて説明します。 筆者はフロントエンドエンジニアとして仕事/趣味でこの半年いくつかのサービスやツールを実装しましたが、そのいずれでもTailwind CSSを利用しました。その中では素のCSSを書くことはほとんどありませんでした。例えば最近リリースされたDockpit liteというツールでもTailwind CSSをフル活用しています。 以下ではこうした経験の中で見えてきたTailwind CSSの特徴、便利なポイント、注意点をご紹介していきます。 また最後に最新のv3.0のアップデート内容を紹介します。 Tailwind CSSとは Tailwind CSSの概要 Tailwin
CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum
Supabase UI
Supabase UIAn open-source UI component library inspired by Tailwind and AntDesign. Supabase UI is a high-level UI component library with a focus on creating beautiful apps quickly and efficiently. Supabase UI is designed to be used with Tailwind CSS utility classes. VisionWe have compiled repetitive UI patterns into components that we use across the Supabase suite of apps and examples. This librar
1. ComponentPropsを使う 多くの人が述べていますが、拡張性を高めるためにReact.ComponentPropsを使います。 import { ComponentProps, FC } from 'react' type ButtonProps = { loading: boolean } & ComponentProps<'button'> export const Button: FC<ButtonProps> = ({ loading, children, ...props }) => { return <button {...props}>{loading ? children : 'Loading...'}</button> } このようにすると、ページで用いるときにデフォルトのボタンと同じような使用感で用いることができます。 2. tailwind-mergeを
はじめに こんにちは、D2Cのフロントエンドエンジニアをやっている廣瀬です。 私が担当しているプロジェクトでは、Vite・React・MUIを主に使用しています。 最近、フロントエンド系の技術を調査してみたところ、shadcn/uiというものを見つけました。 今回、このshadcn/uiをViteで試してみましたので、その内容を記事にしたいと思います。 今回の記事では簡単なWebページを作ってみたいと思います。 shadcn/uiとは？ Radix UIとTailwind CSSをベースに開発された、比較的低レイヤーなUIコンポーネントの集まりです。 ここで注意なのが、shadcn/uiはMUIやChakraUIのようなUIライブラリではなく、npmパッケージとしては提供されていません。ですので、依存関係としてインストールすることはできません。 環境の準備 実際に、以下のような手順でsha
釣り針のクソデカいタイトルですが、こちらの記事はロンドンのフルスタックNode/JS/TS開発者のBrian Boykoさんが4月20日にDEV Communityに投稿した記事:TailwindCSS: Adds complexity, does nothing.の和訳となります。(6/28原文著者の掲載許可取得済み) こちらの記事を5月7日にtwitterで10万人のフォロワーを持つフロントエンド開発者でインフルエンサーのSara Soueidanさんがリツイートし、それにTailwindCSSの作者 Adam Wathanさんが反応したことで炎上。議論を巻き起こした様です。（こちらの炎上事件の詳細は: Tailwind CSS批判ブログ記事の紹介ツイートへの攻撃で作者が炎上 などでご確認ください) さてさて、日本ではフロントエンドのオピニオンリーダー的な影響力の強いエンジニアにも概ね
A tool for creating new color shades based on a neural network and trained with the Tailwindcss palette.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
next.js の amp モードで tailwind.css を purgecss と合わせて使う
Tailwind CSS v2.1 - Tailwind CSS
Tailwind CSS のテンプレート & UI キット集【まとめ】 - Qiita
Tailblocks — Ready-to-use Tailwind CSS blocks
2024-03-12のJS: Tailwind CSS v4.0 alpha、TypeScript 5.4、Speedometer 3.0
Tailwind CSS Cheat Sheet
Tailwind CSS に流動的 Spacing を導入
Why Tailwind Isn't for Me
Tailwind CSS Templates - Tailwind UI
Automatic Class Sorting with Prettier - Tailwind CSS
【提案】TailwindCSSの新お作法、一旦これにしませんか？
nakamu.life - このウェブサイトは販売用です！ - nakamu リソースおよび情報
TailwindCSS: Adds complexity, does nothing.
Tailwind CSSを半年使い込んで分かった便利な点 + 最新動向 - Qiita
Customizing Colors - Tailwind CSS
Twind
TailwindCSSでコンポーネントを作成するときに意識していること
shadcn/uiを使って簡単なWebページを作ってみた
TailwindCSSは複雑性を足すだけで、何もしていない（和訳） - Qiita
Tailwind Ink | AI color palette generator for Tailwindcss