Tailwindがデザイントークンを定義するのに向いている話
はじめに Finatextグループ Advent Calendar 2024 21日目の記事です こんにちは！Finatextのクレジットドメインでエンジニアをしている名澤(@studiokaiji)です。 この記事では、デザイントークンをTailwindで管理する方法と、そのメリットについてお話ししていきます。 そもそもデザイントークンってなんだっけ デザイントークンとは、デザインシステムのうちのUIの基本的な要素（色、タイポグラフィ、スペーシング、アニメーションなど）を再利用可能な変数として定義しているものです。 これらを適切に管理することで以下のようなメリットがあります。 UIの一貫性を保つことができる ブランドアイデンティティを強化できる 開発者間でのコミュニケーションを円滑にできる なぜTailwindCSSがデザイントークン運用に適しているのか TailwindCSSには、デザ
Svelte × Tailwind CSSの「Rabee UI」コンポーネント5種類を新たに公開しました
株式会社Rabee（本社：東京都渋谷区、代表取締役：上松勇喜）は、Svelte × Tailwind CSSのUIコンポーネント集「Rabee UI」において、UIコンポーネント5種類を新たに公開しました。 今回リリースしたコンポーネントも含む全29種類のRabee UIは、以下から確認できます。 ■ Rabee UIとは Rabee UIとは、SvelteとTailwind CSSで構築されたUIコンポーネント集であり、カスタマイズを前提とした「コンポーネントの種」です。プロダクトごとに色やフォント、アニメーションなどを自由にカスタマイズすることで、プロダクトらしさを表現するデザインシステムをスピーディーに作り上げます。
Tailwindでなめらかなレスポンシブを実現できる「Fluid for Tailwind CSS」を試してみた
はじめに Tailwind CSSでは、メディアクエリを使わずにブレイクポイントで簡単にレスポンシブ対応ができます。でも、画面サイズが変わるたびに急にレイアウトが切り替わって「ガクッ」とした感じ、気になったことはありませんか？ そこで便利なのが「Fluid for Tailwind CSS」。このプラグインを使うと、CSSの clamp() 関数を活用して、画面サイズに応じて要素が滑らかに変化し、より自然なデザインが実現できます。今回は、このFluidの使い方とその魅力を見ていきましょう！ Fluid for Tailwind CSSとは？ 「Fluid for Tailwind CSS」は、レスポンシブデザインをさらにスムーズにしてくれるプラグインです。"Fluid" とは流体という意味があり、その名の通り、デザインがまるで流れるように滑らかに調整されます。通常、Tailwindでは s
Create reusable Tailwind CSS + React components – TWC
Supercharge React + Tailwind CSSTWC is a lightweight library to create Tailwind CSS Components in one line, write less code and build faster. import * as React from "react"; import clsx from "clsx"; const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => ( <div ref={ref} className={clsx( "rounded-lg border bg-slate-100 text-white shad
Headless UI: Unstyled, Accessible UI Components
One of the biggest pain points when building modern web applications is building custom components like select menus, dropdowns, toggles, modals, tabs, radio groups — components that are pretty similar from project to project, but never quite the same. You could use an off-the-shelf package, but they usually come tightly coupled with their own provided styles. It ends up being very hard to get the
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Functions and directives - Core concepts
Svelte × Tailwind CSSの「Rabee UI」に新たにサンプルが登場。ヘッダー・サイドバーが使えるようになりました
GitHub - jnsahaj/tweakcn: A visual no-code theme editor for shadcn/ui components
Origin UI - Beautiful UI components built with Tailwind CSS and React
GitHub - Nutlope/logocreator: A free + OSS logo generator powered by Flux on Together AI
GitHub - noodle-run/noodle: Rethinking Student Productivity
GitHub - midday-ai/midday: Invoicing, Time tracking, File reconciliation, Storage, Financial Overview & your own Assistant made for Freelancers
https://x.com/shadcn/status/1842329158879420864?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
FlyonUI - Free Tailwind CSS UI Components Library
GitHub - adrianhajdin/banking: Horizon is a modern banking platform for everyone.
GitHub - adrianhajdin/iphone: Recreate the Apple iPhone 15 Pro website, combining GSAP animations and Three.js 3D effects. From custom animations to animated 3D models, this tutorial covers it all.
GitHub - nodejs/nodejs.org: The Node.js® Website
GitHub - a16z-infra/ai-town: A MIT-licensed, deployable starter kit for building and customizing your own version of AI town - a virtual town where AI characters live, chat and socialize.
Building a command palette with Tailwind CSS, React, and Headless UI
𝐊𝐢𝐭𝐞 / KITERETZ inc. on Twitter: "Next.js で静的サイトを作ることも多くなってきたので、毎回 Google Analytics、OGP、TypeScript、Tailwind CSS、アクティブリンクなどを設定するの面倒くさいのでテンプレートを作っておきまし… https://t.co/l0KMOkTLz5"