chat uiをネットで探してコピペして使っていたら、なぜかUIが崩れる問題が発生していて、それがバージョンの違いであることがわかりました

どうやらTailwindは1系と2系では若干動作が異なるところがあるようで、今回のケースで行くと .clearfix というclassが2系では使えず、flow-root というclassに変更する必要が発生したみたいです

<div className="flow-root">
            <div className="bg-gray-300 w-3/4 mx-4 my-2 p-2 rounded-lg">
              this is a basic mobile chat layout, build with tailwind css
            </div>
          </div>
          <div className="flow-root">
            <div className="bg-green-300 float-right w-3/4 mx-4 my-2 p-2 rounded-lg clearfix">
              check my twitter to see when it will be released.
            </div>
          </div>

          <div className="flow-root">
            <div className="bg-gray-300 w-3/4 mx-4 my-2 p-2 rounded-lg clearfix">
              It will be used for a full tutorial about building a chat app with vue, tailwind and firebase.
            </div>
          </div>
          <div className="flow-root">
            <div className="bg-green-300 float-right w-3/4 mx-4 my-2 p-2 rounded-lg clearfix">
              check my twitter to see when it will be released.
            </div>
          </div>

classを変更すると、こんな感じで正常に機能します🙌

参考記事

Build a mobile chat layout with tailwindcss

Upgrade Guide

npx tailwindcss init Cannot find module ‘autoprefixer’

参考記事