FlyonUI - Free Tailwind CSS Components LibraryTailwind CSS Components LibraryFlyonUI is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins.
Tailwind CSS実践入門
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ã®åŸºæœ¬çš„ãªä½¿ã„方や，デフォルトテーマã«ã‚ˆã£ã¦æä¾›ã•ã‚Œã‚‹ã‚¯ãƒ©ã‚¹ã®ç´¹ä»‹ã¯ã‚‚ã¡ã‚ん，テーマã®ã‚«ã‚¹
CSSè¨è¨ˆã«ãŠã‘ã‚‹ã€ã™ã¹ã¦ãŒã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã§ã‚ã‚‹ã¨ã„ã†èª¤è¬¬
後日追記: WEB+DB PRESS Vol.133ã§ã•ã‚‰ã«è©³ã—ã書ã„ãŸã€‚ BEMã«ã‚ˆã£ã¦ã‚‚ãŸã‚‰ã•ã‚ŒãŸã€ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆãƒ™ãƒ¼ã‚¹ã®ã‚¢ãƒ—ãƒãƒ¼ãƒã§ã¯ã€ã€Œãƒšãƒ¼ã‚¸ã¯ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®é›†åˆã«ã‚ˆã£ã¦è¡¨ç¾ã•ã‚Œã‚‹ã¹ãã§ã‚ã‚Šã€ãƒšãƒ¼ã‚¸ã«å«ã¾ã‚Œã‚‹ã®ã¯ã™ã¹ã¦ãŒã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã§ã‚ã‚‹ã€ã¨è€ƒãˆã‚‹ã€‚ã—ã‹ã—ã“ã‚Œã¾ã§CSSを書ã„ã¦ããŸçµŒé¨“ã‹ã‚‰ã€ã“ã‚Œã§ã¯ãƒ‡ã‚¶ã‚¤ãƒ³æ„図をã¾ã¨ã‚‚ã«è¡¨ç¾ã™ã‚‹ã“ã¨ãŒã§ããªã„ã¨æ„Ÿã˜å§‹ã‚ãŸã€‚ãªãœãªã‚‰ã€æ™®é€šãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã¯ãƒšãƒ¼ã‚¸ã®ã™ã¹ã¦ãŒã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã§ã‚ã‚‹ã¨ã¯è€ƒãˆãªã„ã‹ã‚‰ã 。 ã‚‚ã¡ã‚んページã®æ§‹æˆè¦ç´ ã®ãªã‹ã«ã¯ã€æ˜Žã‚‰ã‹ã«ãã‚ŒãŒã€Œã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã€ã§ã‚ã‚‹ã¨æ„è˜ã—ã¦ä½œã‚‰ã‚ŒãŸã‚‚ã®ã‚‚ã‚る。ãŸã ã—ãã‚Œã¯ä¸€éƒ¨ã§ã‚ã‚Šã€å…¨éƒ¨ã§ã¯ãªã„。「コンãƒãƒ¼ãƒãƒ³ãƒˆã‚‚ã‚ã‚Œã°ã€ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã§ã¯ãªã„ã‚‚ã®ã‚‚ã‚ã‚‹ã€ã¨ã„ã†æ„Ÿè¦šã®ã»ã†ãŒæ™®é€šãªã®ã 。 典型的ãªUIライブラリã«ã‚ã‚‹ã€ã€Œã‚¶ãƒ»ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã€ã¿ãŸã„ãªã‚‚ã®ã ã‘ã§ã¯ãƒšãƒ¼ã‚¸ã¯å®Œæˆã—ãªã„。例ã¨ã—ã¦ã€ä¸€è²«ã—ã¦B
vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.
import { createTheme, style } from '@vanilla-extract/css'; export const [themeClass, vars] = createTheme({ color: { brand: 'blue', white: '#fff' }, space: { small: '4px', medium: '8px', } }); export const hero = style({ backgroundColor: vars.color.brandd, color: vars.color.white, padding: vars.space.large });
Airbnb’s Trip to Linaria
CSS is a critical component of every web application, and many solutions have evolved for how styles are written by developers and delivered to visitors. In this post we’ll take you through Airbnb’s journey from Sass to CSS-in-JS and show you why we landed on Linaria, a zero-runtime CSS-in-JS library, and the impact it has had on the developer experience and performance of Airbnb’s web app. From S
Tailwind考 - uhyo/blog
皆ã•ã‚“ã“ã‚“ã«ã¡ã¯ã€‚最近ã¨ã‚る事情ã§Tailwind CSSã«ã‚ã‚Šã¨çœŸå‰£ã«å‘ãåˆã‚ãªã„ã¨ã„ã‘ãªããªã£ãŸç†è€…ã§ã™ã€‚ Tailwind CSSã®è©±é¡Œã¯ã€Twitterã®ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ç•Œéšˆã§ã¯å®šç•ªã®ãƒˆãƒ¼ã‚¯ãƒ†ãƒ¼ãƒžã®ã²ã¨ã¤ã§ã™ã€‚ã—ã‹ã—ã€ç†è€…ã®è€ƒãˆã‚’æ–‡ç« ã«ã¾ã¨ã‚ãŸã“ã¨ã¯ç„¡ã‹ã£ãŸã®ã§ã€ã“ã®ãŸã³ãƒ–ãƒã‚°è¨˜äº‹ã«ã™ã‚‹ã“ã¨ã«ã—ã¾ã—ãŸã€‚ çµè«–ç†è€…ãŒä¸€ç•ªã¿ãªã•ã‚“ã«ä¼ãˆãŸã„ã“ã¨ã¯ã€Tailwind CSSã¯è€ƒãˆç„¡ã—ã«æŽ¡ç”¨ã—ã¦ã‚ˆã„技術ã§ã¯ãªãã€æŽ¡ç”¨ã™ã‚‹ã«ã¯ç†Ÿæ…®ãŒå¿…è¦ã ã¨ã„ã†ã“ã¨ã§ã™ã€‚ã¨ãã«ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®ã‚¹ã‚¿ãƒ¼ã‚¿ãƒ¼ã‚ット的ãªãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã®ä¸ã«Tailwind CSSãŒæ··ã–ã£ã¦ã„ã‚‹ã“ã¨ãŒã‚ã‚Šã¾ã™ãŒã€ã‚ã‚Œã¯ã‘ã£ã“ã†ãªç½ ã§ã™ã€‚気軽ã«æŽ¡ç”¨ã™ã¹ãã‚‚ã®ã§ã¯ã‚ã‚Šã¾ã›ã‚“。 ç†è€…ã®è€ƒãˆã§ã¯ã€Tailwind CSSã®æŽ¡ç”¨ã‚’考慮ã«å…¥ã‚Œã¦ã‚ˆã„ã®ã¯æ¬¡ã®2ã¤ã®å ´åˆã§ã™ã€‚ デザインã«ã“ã ã‚ã‚ŠãŒãªãã€æœ€ä½Žé™æ•´ã£ã¦ã„ã‚Œã°ã„ã„å ´åˆã€‚デザイナーä¸åœ¨ã®ãƒ—ãƒã‚¸
Design Tokens Format Module
Design Tokens Format Module Draft Community Group Report 27 November 2024 Latest published version: https://tr.designtokens.org/format/ Editors: Daniel Banks Donna Vitan James Nash Kevin Powell Louis Chenais Feedback: GitHub design-tokens/community-group (pull requests, new issue, open issues) Abstract This document describes the technical specification for a file format to exchange design tokens
劇薬㮠The New CSS Reset - kojika17
æ–°ã—ã„プãƒãƒ‘ティを使ã£ãŸCSSリセットãŒç´¹ä»‹ã•ã‚Œã¦ã„ã¾ã—ãŸãŒã€æ‰±ã„ãŒé›£ã—ãã†ãªå°è±¡ã ã£ãŸã®ã§è§£èª¬ã—ã¾ã™ã€‚ The New CSS Reset ã¨ã¯ The New CSS Reset | the-new-css-reset ã¯ã€ç°¡æ½”ã«ã„ã†ã¨ all: unset ã§ã€å…¨ã¦ã®è¦ç´ ã«å¯¾ã—ã¦ãƒ–ラウザã®ãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆï¼ˆUAスタイルシート）を亡ã者ã«ã—ãŸå¾Œã«ã€ display: revert ã§UAスタイルシートã®displayã®å€¤ã‚’蘇生ã•ã›ãŸCSSリセットã§ã™ã€‚ /*** The new CSS Reset - version 1.0.0 (last updated 8.7.2021) ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */ *:
Tailwind CSS製UIデザインã®HTMLコードをコピペã§ãã‚‹Flowrift（便利ツールã¾ã¨ã‚も公開）
Tailwind CSSã¨ã„ã†è¨€è‘‰ã€æœ€è¿‘よã耳ã«ã™ã‚‹ã‚ˆã†ã«ãªã£ã¦ã„ã¾ã™ã€‚ カードやボタンãªã©UIデザインを基本ã¨ã—ãŸCSSスタイリングãŒç‰¹é•·ã®Bootstrapãªã©ã®ãƒ•ãƒ¬ãƒ¼ãƒ ワークã«æ¯”ã¹ã€Tailwind.cssã¯HTMLã«ç›´æŽ¥ã‚¹ã‚¿ã‚¤ãƒªãƒ³ã‚°ã‚’è¡Œã£ã¦ã—ã¾ãŠã†ã¨ã„ã†è€ƒãˆã§ã€ä»Šã¾ã§ã®CSSè¨è¨ˆã®ã‚¢ãƒ—ãƒãƒ¼ãƒã¨å…¨ã真逆ã¨ã‚‚言ãˆã¾ã™ã€‚ ãã®ãŸã‚ã€ã²ã¨ã¤ã®è¦ç´ ã«è¿½åŠ ã•ã‚ŒãŸè†¨å¤§ãªã‚¯ãƒ©ã‚¹åを見るã¨ã€ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã—ã«ãã„ã¨æ„Ÿã˜ã‚‹ã²ã¨ã‚‚多ã„よã†ã§ã™ã€‚ ãã‚“ãªã¨ãã¯ã€Tailwind.cssã§åˆ©ç”¨å¯èƒ½ãªUIデザインã®HTMLスニペットを集ã‚ãŸä¾¿åˆ©ãƒ©ã‚¤ãƒ–ラリFlowriftを活用ã—ã¦ã¿ã¾ã—ょã†ã€‚ ヘッダーやフッターã€ãƒŠãƒ“メニューã¨ã„ã£ãŸåŸºæœ¬ã‹ã‚‰ã€ãƒ’ーãƒãƒ¼ã‚¤ãƒ¡ãƒ¼ã‚¸ã€CTAã€ã‚µãƒ¼ãƒ“スã€ãŠå•ã„åˆã‚ã›ãƒ•ã‚©ãƒ¼ãƒ ã€å€¤æ®µè¡¨ã€ã‚®ãƒ£ãƒ©ãƒªãƒ¼ã€404ページã¨ã„ã£ãŸãƒ›ãƒ¼ãƒ ページ制作ã§ã‚ˆã利用ã™ã‚‹UIコンãƒãƒ¼ãƒãƒ³ãƒˆã®ã‚³ãƒ¼ãƒ‰ã‚’ボタンã²ã¨ã¤ã§ã‚³
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,cts,mts} in
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
Flexbox Cheat Site
Webエンジニアã¨ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã®ãŸã‚ã® CSS Flexbox ãƒãƒ¼ãƒˆã‚·ãƒ¼ãƒˆ
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Tailwind UI - Official Tailwind CSS Components & Templates
Headless UI
GitHub - facebook/stylex: StyleX is the styling system for ambitious user interfaces.
GitHub - tokencss/tokencss
Tailwind Builder
Tailwind CSS Components - 600+ Free Examples and Templates
GitHub - frenic/csstype: Strict TypeScript and Flow types for style based on MDN data
nteract/packages/styled-blueprintjsx at master · nteract/nteract · GitHub
{{#tags}}- {{label}}
{{/tags}}