tailwindlabs

AIでコードを書くのが簡単になったあと OSSはどう続いていくのか（CSS2026 OWS研究会） 2026年10月21日、コンピュータ・セキュリティ・シンポジウムCSS 2026で、Trivy作者のTeppei Fukudaさんによる「OSSとAI」という招待講演を聴いた。Trivyは、コンテナイメージなどの脆弱性や設定ミスを調べる脆弱性対応の分野では世界1著名なスキャナーだ。 trivy.dev 公式プログラムにもあるとおり、講演ではAIがOSSの参加方法や保守、コミュニティに与える変化が扱われた。 コードを書けるようになることと、そのコードを引き受けて保守できることの間には、まだ大きな距離がある。 AIによって実装の速度が上がったとき、その先にいるメンテナーの仕事はどうなるのか。利用者が増えたとき、改善や感謝、収益は作者へ戻ってくるのか。講演を通じて考えたのは、この二つだった。 報告が増えると受け取る側の仕事も増える 講演の前半では、AIによって増えるPRや脆弱性報告を、メンテナーがどう受け止めているかが語られた。 AIがコードを調べて問題を見つけ、報告文を整えてくれる。提出する側からすると、以前より少ない労力で貢献できるように見える。しかし、受け取る側には、報告を読み、再現し、影響を判断し、修正の必要性を確かめる仕事が残る。 しかも、負担になるのは誤報だけではない。同じ問題を、別々の人が似たツールで見つけ、何度も報告してくることがある。 脆弱性報告では、修正や公開時期を調整するために、非公開でやり取りすることがある。その場合、後から報告する人には、同じ内容がすでに届いているのか分からない。報告者同士には見えない重複が、メンテナーの手元に集まる。 TeppeiさんはTrivyでもこうした負担があると紹介していた。講演以前の公開Discussionでも、AI生成とみられる類似の報告が大量に届き、確認や分類に時間がかかると説明している。Linuxでも、Linus Torvaldsが2026年5月のリリース告知で、同じツールによる重複報告と、非公開であるために重複を避けにくい問題に触れていた。 さらに、Teppeiさんの判断では脆弱性に当たらない報告が、CERT/CCを経由して届いた経験も紹介された。なぜ脆弱性に当たらないのかを説明し、取り下げを求める調整にも時間がかかるという。CERT/CCには初回報告から原則45日で公開する方針があり、事情によって前後するものの、期限のある対応は受け手にとって重い。 報告を生成する時間が短くなっても、受け手が判断を終える時間まで同じように短くなるとは限らない。提出する側から見た効率化が、別の人の作業を増やすこともある。 受付の仕組みにも変化が出ている。GitHubは2026年10月1日に、非公開脆弱性報告の日次制限や、信頼する報告者の許可リストを導入した。 多くの情報を集めるために開いてきた入口を、受け手が対応できる形に調整する必要が出てきている。 OSSを支えてきた二つのフィードバック ここから、話はOSSのコミュニティそのものへ広がっていく。Teppeiさんは、OSSには二つのフィードバックがあると説明していた。 一つは、ソフトウェアが良くなるためのフィードバックだ。誰かが使い、不具合を見つけ、報告や修正を送る。それが元のプロジェクトに取り込まれ、ほかの利用者も改善の恩恵を受ける。 もう一つは、作り続ける動機につながるフィードバックだ。使っている人から感謝される。記事で紹介される。自分の知らなかった使い方を教えてもらう。そうした反応から、誰かの役に立っていると分かる。 この二つを分けて考えると、AIによる変化が見えやすい。 たとえば、使っているライブラリに足りない機能があったとする。元のプロジェクトに相談して修正を送るほかに、必要な部分をコピーし、AIを使って自分の用途に合わせて作り直す選択がある。その後の修正も手元だけで済ませれば、元の作者に連絡せずに使い続けることもできる。 利用者にとっては合理的でも、その過程で見つかった問題や知識が、上流のプロジェクトへ戻らないことがある。 フォークや再実装自体は以前からあった。講演で印象に残ったのは、AIがそれを選びやすくすることで、改善が共有される経路まで変わるという指摘だった。 実装が増えても、改善を共有する機会や、保守を担う人とのつながりが同じだけ増えるとは限らない。各自の手元で動くものができたあと、その知識をどう共有資産へ戻すのかが問われる。 使われていても作者との接点がなくなる もう一つの変化は、利用者と作者の間にAIが入ることだ。 AIにアプリケーションを作ってもらうと、依存するライブラリの選定や、使い方の調査までAIが進める。利用者は完成したものを使えるが、そのためにどのOSSが使われ、誰が保守しているのかを意識しないまま終わることがある。 ドキュメントを読みに行く機会が減れば、作者の考え方や関連する製品を知る機会も減る。感謝や質問を伝える相手すら、見えにくくなる。 講演では、この問題を扱った論文Vibe Coding Kills Open Sourceも紹介された。これは、利用者との直接の関わりによって作者が収益を得る条件のもとで、AI経由の利用がその関わりを弱めると、OSSの供給や品質にどう影響するかを考えた経済モデルだ。 タイトルは強い。ただ、すべてのOSSが同じように衰退すると実証した研究ではない。どのような経路で作者へ見返りが戻っているかによって、影響は変わる。 具体例として紹介されたのがTailwind CSSだった。Adam Wathanは2026年1月のコメントで、Tailwindの人気が高まる一方、ドキュメントへのアクセスは2023年初めから約40%減り、収益も約80%減ったと説明している。ドキュメントが商用製品を知ってもらう経路なので、そこへの訪問が減ることは事業の継続に響くという。 これはOSSの利用と、保守に必要な収益が別の動きをし得ることを考える具体例になる。 OSSが広く使われること、その作者が知られること、開発を続ける資金が得られること。それぞれをつないでいた経路が、AIによって変わっている。使いやすくすることに加えて、作者へ何が戻るのかも考える必要がある。 ソースの公開と貢献の受付を分けて考える こうした変化の中で、OSSの運営方法も見直されている。 講演では、コードは公開しつつ外部PRは受け付けない方式や、Issueや利用例、設計上の知識を受け取り、実装はメンテナー側で行う方式が紹介された。開発過程は非公開にして、リリース時にソースを公開する形もある。 ここは、「オープン」という言葉に含まれるものを分けて考えると整理しやすい。 分けて考えたいこと 決める内容 ソースコードの利用条件 利用、改変、再配布などにどのような権利を認めるか 外部からの貢献 誰から、どのような提案やPRを受け付けるか 開発過程の公開 設計、テスト、議論、履歴をどこまで公開するか 利用者との接点 質問、再現例、利用報告などをどう受け取るか Open Source Initiativeの定義は、ソースの提供や再配布、改変などの条件を定めている。誰から届いたPRでも受け付け、メンテナーがレビューすることを必須にはしていない。もちろん、ソースを読める状態にするだけでOSSになるわけでもなく、ライセンスの条件は別に確認する必要がある。 コードを公開し、利用や改変を認めながら、貢献を受け付ける手順を絞ることはできる。どこを開くと有益な情報が戻り、どこで受け手の負担が大きくなるのかを、個別に考えられる。 Trivyについての質疑でも、信頼できる貢献者に絞ってPRを受け付ける案や、Issueで先に相談し、担当を決めてからPRを作ってもらう案が挙がっていた。 背景には、同じIssueに複数のPRが届くことや、レビューしても提出者から返事がなくなることがあるという。ベンダーなどから届く有用な貢献を残しながら、最後まで対応する人と進めたいという話だった。 AIを使った人が説明と対応を引き受ける 貢献の受付方法と合わせて、講演を通して繰り返されていたのが、提出する人の理解と責任だった。 AIが書いたコードでも、PRを出す人が変更の理由を説明できるか。なぜその実装を選んだのか、どの条件で動くのか、既存の処理へどんな影響があるのか。レビューで質問されたときに、調べて答えられるか。 コードを生成して提出するところまでを自動化しても、その後の確認や修正をすべてメンテナーが引き受けるなら、相手の仕事は増えてしまう。 生成過程が見えるかどうか、という話も興味深かった。外部から届いたAI生成コードでは、どんな指示や環境で作られ、何を検証したのかが分からないことがある。自分たちで設定し、挙動を確かめてきたエージェントなら、前提を把握しやすい。生成されたコードを受け取る価値には、それを理解するための情報も関わってくる。 質疑でTeppeiさんは、提出者も変更の意図を説明できない場合、メンテナーが理解できる説明を得るまでマージしないと話していた。 現在のGhosttyのAI利用方針にも、使用したAIと関与範囲の申告に加えて、人間が変更内容とシステム全体への影響を理解し、説明できることが明記されている。 自分がここから受け取ったのは、PRを出した時点で貢献が完了するわけではない、ということだ。変更を理解し、質問に答え、必要な修正まで付き合う。その部分を誰が担うのかが、コードを書きやすくなった今ほど重要になる。 初めての貢献者の入口をどう残すか 一方で、受付を信頼できる人に絞ると、別の難しさが出てくる。 これまでの実績がある人だけを受け入れるなら、初めて貢献する人は、どこで最初の実績を作ればよいのか。 質疑では、まさにこの点が問われていた。Teppeiさんも明確な解決策があるとはしておらず、イベントやメンテナーの伴走を通じて、AIも使いながら貢献を学ぶ機会などを候補として挙げていた。 メンテナーを守るための制限と、新しく参加する人の機会。その両方を考える必要がある。 たとえば、いきなり完成したPRを送る前に、問題の再現を確認する。Issueで変更の方針を相談する。小さな調査や説明から関わり、やり取りを通じて信頼を作る。そうした入口なら、実装の量以外の形でも貢献を示せるのではないかと思った。 ただし、伴走にも時間がかかる。入口を残す仕組みを作るなら、その運営をまた少数のメンテナーに背負わせない方法まで考えたい。 まとめ セキュリティツールで多くの問題を検出できた。修正PRを自動で作れた。 そこまでできると、成果が出たように感じやすい。 でも、受け取った人が重複を調べ直し、誤報かどうかを確認し、変更の意図を読み解く必要があるなら、その人の仕事はどれだけ減ったのだろう。 検出結果を渡すなら、どの条件で問題になるのか、何を根拠にそう判断したのかまで伝えたい。修正案なら、変更の理由と検証結果を揃えたい。新しい情報を増やすことと同じくらい、受け手が判断を終えられるようにすることを考える必要がある。 これはツールの機能にも、自分自身の貢献の仕方にも返ってくる問いだと思う。 Teppeiさんは、失われつつあるフィードバックをどう取り戻すかについて、まだ答えはないとしたうえで、新しい仕組みやツールを作る機会にも触れていた。 自分も、AIによって作れるものが増えることを楽しみたい。そのとき、受け取る人が理解できる説明を添えること、使っているOSSへ改善や感謝を返すこと、次の人が参加できる入口を残すことまで、一緒に考えていきたい。 コードを作りやすくなった今、そのコードを支える人と、支えるためのやり取りに、もう少し目を向けたい。 ここまで読んでいただいた方は、当ブログ筆者である佐田淳史のOWS研究会・招待講演もぜひご覧になってください。私の講演では、AIが発展してきたけど今後どうしていく？の一案について話しています。 speakerdeck.com youtube.com

@tailwindcss @adamwathan any reason tailwindcss-typography#429 is not being merged? this is a security issue

How to Create an SVG Icon Sprite for Your Website Build a small navigation example with Home, Search, and a dismiss button using three icons from the same set. You will paste SVG code into the free SVG Sprite Generator, copy its output, and use the resulting symbols in a web page. No framework or build plugin is needed. !Navigation demo showing Home, Search and a dismiss button Once the generated sprite is included in your page, a visible icon needs only a reference to its symbol. Here is the Home link used in this example: <a href="#home"> <svg class="icon" width="24" height="24" aria-hidden="true" focusable="false"> <use href="#icon-home"></use> </svg> Home </a> .icon { width: 1em; height: 1em; fill: currentColor; } This short snippet assumes icon-home is already defined in the document. The steps below create that definition; section 3 contains the complete page you can copy. When a sprite fits A sprite defines each icon once inside a <symbol>. An <svg> containing <use> draws an instance wherever you need it. This is useful for repeated icons in plain HTML, server templates, and documentation. A small, deliberately chosen set is easier to maintain than a bundle of every available icon. Sprites can reduce repeated markup, but they do not always improve performance. An inline sprite adds bytes to each HTML document; an external sprite needs a request but can be cached. Unused symbols still cost bytes. Measure your own pages. Separate SVGs or components may fit better when icons need different animations, per-instance path changes, or individual imports. 1. Choose three matching icons Use the 24-pixel solid variants from HeroIcons: home-solid, magnifying-glass-solid, and x-mark-solid. Keep the same variant and grid rather than mixing outline, 16-pixel, and solid artwork. On each icon page, use the basic Copy to Clipboard → SVG action. Basic SVG copying is available without signing in; the separate download action requires a verified Member account. Neither an account nor Pro is required to use this generator. See Copy SVG code for that workflow. The reproducible inputs below come from the same set's official Heroicons v2.2.0 sources. They use a 0 0 24 24 viewBox. Heroicons is distributed under the MIT license; retain its copyright and permission notice with redistributed copies. Save a copy of the linked license alongside your example as LICENSE-heroicons.txt. The generator does not create a license manifest for you. For an exact reproduction, paste these complete SVG documents into separate input blocks: Name: home <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon"> <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z"/> <path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z"/> </svg> Name: magnifying-glass <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon"> <path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z" clip-rule="evenodd"/> </svg> Name: x-mark <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon"> <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/> </svg> 2. Generate the sprite !SVG Sprite Generator with three named Heroicons and generated output 1. Open the SVG Sprite Generator. It starts with two blocks named icon-1 and icon-2. 2. Replace the first name with home and paste the home SVG. Name the second magnifying-glass and paste its SVG. 3. Click Add SVG Icon +. Name the new block x-mark and paste the third SVG. Use Remove for unwanted blocks; a named empty block prevents generation. 4. Under Options, keep ID prefix as icon, Default size as 24, and HTML mode as Decorative. Leave Hide sprite by default and currentColor CSS helper checked. 5. Click Generate Sprite. Check the previews and any errors or warnings. The output should contain icon-home, icon-magnifying-glass, and icon-x-mark. 6. Select the Sprite tab and click Copy output. The other tabs are HTML snippet, CSS, and React. Copy each snippet you need. This interface accepts pasted SVG markup, not uploaded files or a selection from Collections. It processes the markup in your browser. There is no file download button: you copy text and save files yourself. Load example set replaces the inputs with the tool's own samples; Clear restores two empty blocks. After editing names, SVGs, or options, click Generate Sprite again before copying to avoid stale output. 3. Use the output in a web page Save the following as index.html. The hidden SVG is the actual generated sprite. It belongs once inside the document body; the visible SVGs reference its symbol IDs. The Home and Search icons repeat link text, so they are decorative. The icon-only dismiss button has its accessible name on the button and actually hides the notice. Complete example: index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>SVG sprite demo</title> <style>body { margin: 2rem; font: 18px/1.5 system-ui, sans-serif; color: #163b66; background: #fff; } nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } a { color: inherit; } button { font: inherit; color: inherit; background: #eef4ff; border: 1px solid #7c94ad; border-radius: .5rem; padding: .6rem; cursor: pointer; } :focus-visible { outline: 3px solid #b45309; outline-offset: 4px; } .icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; } .icon-button .icon { width: 24px; height: 24px; } .large { font-size: 32px; color: #9f1239; } .dark { margin-top: 1rem; padding: 1rem; color: #e2e8f0; background: #172033; } </style> </head> <body> <!-- Heroicons v2.2.0, MIT; see LICENSE-heroicons.txt. --> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; width: 0; height: 0; overflow: hidden;"> <symbol id="icon-home" viewBox="0 0 24 24"> <g xmlns="http://www.w3.org/2000/svg" fill="currentColor"> <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z"/> <path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z"/> </g> </symbol> <symbol id="icon-magnifying-glass" viewBox="0 0 24 24"> <g xmlns="http://www.w3.org/2000/svg" fill="currentColor"> <path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z" clip-rule="evenodd"/> </g> </symbol> <symbol id="icon-x-mark" viewBox="0 0 24 24"> <g xmlns="http://www.w3.org/2000/svg" fill="currentColor"> <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/> </g> </symbol> </svg> <h1>SVG sprite demo</h1> <nav aria-label="Demo navigation"> <a href="#home"><svg class="icon" width="24" height="24" aria-hidden="true" focusable="false"><use href="#icon-home"></use></svg> Home</a> <a href="#search"><svg class="icon" width="24" height="24" aria-hidden="true" focusable="false"><use href="#icon-magnifying-glass"></use></svg> Search</a> <button class="icon-button" type="button" aria-label="Dismiss notice" onclick="document.getElementById('notice').hidden = true"><svg class="icon" width="24" height="24" aria-hidden="true" focusable="false"><use href="#icon-x-mark"></use></svg></button> </nav> <p id="notice">This is a dismissible demo notice.</p> <section id="home"><h2>Home</h2><p>One sprite, three reusable symbols.</p></section> <section id="search"><h2>Search</h2><p>This link is a navigation example, not a search engine.</p></section> <p class="large"><svg class="icon" width="24" height="24" aria-hidden="true" focusable="false"><use href="#icon-home"></use></svg> A larger, differently colored instance</p> <div class="dark"><svg class="icon" width="24" height="24" aria-hidden="true" focusable="false"><use href="#icon-magnifying-glass"></use></svg> The same icon on a dark background</div> <p>Icons: Heroicons by Tailwind Labs / Refactoring UI Inc, MIT. Keep LICENSE-heroicons.txt with redistributed copies.</p> </body> </html> The generator produces the sprite and small snippets, not the surrounding page, navigation, or dismiss behavior. The example above supplies those parts. The generated wrapper is absolutely positioned with zero width and height, keeping referenced definitions available; its symbols are referenced by the visible SVG instances. Test this pattern with your target browsers, especially if you introduce gradients or filters. 4. Control size and color The viewBox describes the artwork's coordinate system, not its displayed pixel size. Keep it on each symbol. The CSS helper sets width and height to 1em, so these icons follow their element's font size. The 24-pixel width and height attributes in a generated snippet are overridden by that CSS. Our button deliberately overrides the helper with 24-pixel dimensions; the larger paragraph uses a 32-pixel font size. fill: currentColor makes this solid artwork follow CSS color. Change the surrounding text color to recolor its icons. The helper does not rewrite hard-coded colors inside paths, and it is a fill helper, not a stroke conversion. Keep intentional multicolor artwork unchanged. See MDN's currentColor reference. Outline icons keep their paint settings. Supported root presentation attributes, including fill="none", stroke="currentColor", and stroke-width, are preserved on an internal group. Child shapes can still override them. Paste the complete SVG; no manual group wrapper is needed. The fill helper does not turn a preserved outline into a filled icon. The preview renders the generated symbol. Root style and class are not copied; use explicit SVG presentation attributes. Root viewport effects such as clip-path, mask, filter, transform and vector-effect are not transferred and produce warnings. Review those warnings and the final appearance for complex artwork. 5. Optionally save an external sprite Save the copied Sprite output as sprite.svg next to your HTML. Remove the inline sprite from that page and use a filename plus a fragment: <svg class="icon" width="24" height="24" aria-hidden="true" focusable="false"> <use href="sprite.svg#icon-home"></use> </svg> Keep the same CSS. Serve both files from the same origin using your project's local development server. Do not test external references by double-clicking the HTML file: file:// restrictions can prevent the SVG from loading. If Python is installed, run this command in the folder containing both files: python -m http.server 8000 --bind 127.0.0.1 Open http://127.0.0.1:8000/index.html. Stop the server with Ctrl+C. An external sprite requires deployment of the asset as well as the HTML; check its URL, response type, caching, and your browser support. Do not assume a sprite on another domain will work just by enabling CORS. MDN documents external use references and same-origin restrictions. Common problems and fixes - No output: remove unused empty blocks and paste one complete, valid SVG document per input. Fix the reported XML error before generating again. - Blank icon: compare the exact href fragment with the generated ID. A name like “Home Icon” becomes icon-home-icon, not icon-home. Keep input names unique and inspect final IDs; do not rely on suffixing to resolve every possible collision. - Wrong size or clipping: preserve the source viewBox and check CSS dimensions. The tool can infer a viewBox from positive numeric width and height (including px), but it cannot recover arbitrary missing coordinate information. - Black or missing outline: check the source fill and stroke settings and any generator warnings. A fixed fill on a child path will also override inherited color. Verify both light and dark backgrounds. - Broken gradients or masks: review rewritten internal IDs and every reference. This tool removes some obvious unsafe content but is not a comprehensive sanitizer for untrusted SVG. Use reviewed sources. - External sprite missing: use HTTP, check the request succeeds, and keep the asset on the same origin. Recheck the deployed path after moving files. - Repeated or missing accessible labels: hide decorative SVGs and name their controls. If you choose Labelled mode for a meaningful standalone icon, adapt its title and make title IDs unique for every repeated instance. The generated title IDs are based on symbol names. See the WAI button pattern and SVG icon accessibility guide. Keep the workflow small Start with three icons, review their actual use sites, and keep the source SVGs and license notice beside your generated output. Try the SVG Sprite Generator with your next small set of interface icons. For more options, read the generator documentation. If your project needs automated generation, see Build an SVG Sprite for Modern Vite, React, and Vue Apps. For per-icon components, see Use SVG Icons in React with Vite and SVGR or the [SVG to Component Converter](svgicons.com

@arvidkahl That's so cool. So AI was able to find this discussion tailwindcss#19444

We, at the ministry of "do not use bundlers", are happy to bring you the message that a ton of x86 machines are, again, not good enough to edit CSS. tailwindcss#15181

Tailwind 4.1.0 added .pointer-coarse tailwindcss#16946

tailwind v4 turns a custom prefix into a variant instead of a class prefix: v3's tw-text-sky-500 becomes tw:text-sky-500, set by adding prefix(tw) to the tailwindcss import in the css. tailwindcss#16046

@dywidendowopl głównie frontend webowy dostał strzała tailwindcss.com#2388

making a design token responsive in tailwind v4: redefine the variable in :root inside the media query, not in a second theme block. one utility, two values depending on the breakpoint. tailwindcss#17655

tailwind v4 already supports per-property color vars like bg-primary-500, undocumented; wongjn confirmed it follows the exact syntax people were guessing at. tailwindcss#15757