Tailwind v3/v0.10 -> Tailwind v4/v0.12 migration silently removes global form styles

オープン
  • 何か問題がありますか？
#1,677 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
48/100
issue の種類
ドキュメント
明瞭さ
説明が足りない
活発さ
静か
技術スタック
react, tailwindcss
領域
documentation

調査の方向性

まず、レポートで説明されている legacy の flowbite-react/tailwind と flowbite/plugin のセットアップを、Tailwind v4 の flowbite-react/plugin/tailwindcss import および .flowbite-react/class-list.json パスと比較します。フォームセレクターとグローバルスタイルに違いがあるかを確認し、そのうえで、動作と推奨される置き換えを説明する必要がある移行または互換性のドキュメントを特定します。意図された動作と移行ガイダンスが明確に文書化されていれば完了です。

索引モデルが issue の本文から書いたものです。

説明

We ran into a fairly subtle migration issue upgrading from:

  • Flowbite React v0.10.x + Tailwind v3
    to
  • Flowbite React v0.12.x + Tailwind v4

and wanted to document the findings and ask for guidance on the intended migration path.

What changed for us

After upgrading, a number of input fields across our application suddenly lost their styling (especially padding/spacing), including components that do not use Flowbite React at all.

Initially this was confusing because the affected components were unrelated to Flowbite.

After tracing through the generated CSS, we found that the old integration path implicitly injected global form styles, while the new Tailwind v4 integration no longer does.

Flowbite React 0.10 injects global styles

With Tailwind v3 we had:

const flowbite = require("flowbite-react/tailwind");

plugins: [
  flowbite.plugin(),
]

It seems that flowbite.plugin() internally routed through the standalone flowbite/plugin.

That plugin appears to have had forms = true enabled by default and injected global base styles via addBase(...), including selectors like:

[type='text'],
[type='email'],
textarea,
select {
  padding: .5rem .75rem;
  ...
}
Flowbite React v0.12 no longer creates global stzles

With Tailwind v4 / Flowbite React v0.12 the recommended setup is

@import "flowbite-react/plugin/tailwindcss";
@source "../../.flowbite-react/class-list.json";

This new CSS-first integration path no longer appears to route through the standalone flowbite/plugin, and the global form base styles disappear.

As a result:

  • unrelated inputs lose padding/styling
  • applications may experience visual regressions outside Flowbite components
  • the migration impact is difficult to trace back to Flowbite
Questions
  1. Is this an intended behavioral change? Is my analyis correct that flowbite v0.10 injected global styles?
  2. Is there an officially recommended migration path for users who implicitly depended on the old global form reset behavior?
  3. Would it make sense to mention this in the migration docs / compatibility docs?

This was particularly difficult to debug because the regressions appeared in components that did not use Flowbite at all.

主要言語
TypeScript
スター
2.1k
フォーク
502
平均マージ
19時間 16分
マージ済み PR（30日）
2

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

themesberg/flowbite-react のほかの issue

themesberg/flowbite-react の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。