https://tailwindcss.com/docs/styling-with-utility-classes

Tailwind CSSを使う利点

you don't spend any time coming up with class names, making decisions about selectors, or switching between HTML and CSS files, so your designs come together very fast.

「クラス名を考えなくてすむ、HTMLとCSSを行ったり来たりしなくてすむ」

adding or removing a utility class to an element only ever affects that element, so you never have to worry about accidentally breaking something another page that's using the same CSS.

「CSSを変更したときに、想定外の場所に変更が入らない」
タグに直接スタイルを当てているときはそうかも。ただそれ自体はCSSとしてベストプラクティスではないので、そもそもやらない。クラスにスタイルを当てているときは、コードをクラス名で検索して、スタイルの変更前後で確認する手間が省ける

changing something just means finding that element in your project and changing the classes, not trying to remember how all of that custom CSS works that you haven't touched in six months.

「スタイルを変更するときは変更したい箇所だけを見ればよく、その他のスタイルを気にする必要がない」

since both the structure and styling live in the same place, you can easily copy and paste entire chunks of UI around, even between different projects.

「マークアップとスタイルが一体になっているのでコピペしやすい」

since utility classes are so reusable, your CSS doesn't continue to grow linearly with every new feature you add to a project.

「ユーティリティクラスは再利用しやすく、UIコンポーネントが増えてもCSSが同じだけ増えるわけではない」

インラインスタイルとの違い

using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs.

「ユーティリティクラスを使うと色やフォントなどのテーマをプロジェクト内で統一しやすくなる

inline styles can’t target states like hover or focus, but Tailwind’s state variants make it easy to style those states with utility classes.

you can’t use media queries in inline styles, but you can use Tailwind’s responsive variants to build fully responsive interfaces easily.

「擬似クラス、擬似要素、メディアクエリを使うことができる」

https://tailwindcss.com/docs/styling-with-utility-classes#when-to-use-inline-styles

インラインスタイルと組み合わせるやり方もあるっぽい

export function BrandedButton({ buttonColor, textColor, children }) {
  return (
    <button
      style={{
        backgroundColor: buttonColor,
        color: textColor,
      }}
      className="rounded-md px-3 py-1.5 font-medium"
    >
      {children}
    </button>
  );
}

でも値をpropsとして渡すよりももっといい方法がありそうではある。例えば↓

function Button({ color, children }) {
  const colorVariants = {
    blue: "bg-blue-600 hover:bg-blue-500",
    red: "bg-red-600 hover:bg-red-500",
  };
  return <button className={`${colorVariants[color]} ...`}>{children}</button>;
}