Tailwind CSSでReactのdivタグの背景色を設定する方法

目次

Tailwind CSSでReactのdivタグの背景色を設定する方法

Tailwind CSSは、迅速かつ効率的にスタイリングするためのユーティリティファーストなCSSフレームワークです。
この記事では、Tailwind CSSを用いてReactプロジェクト内の<div>タグに背景色を設定する方法を説明します。

divタグに背景色を設定する

Tailwind CSSでdivタグの背景色を設定するには、classNameプロパティを使用し、以下のように記述します。

// src/App.js
function App() {
  return (
    <div className="bg-blue-500">
      ここにテキストが入ります。
    </div>
  );
}

export default App;

上記のコードでは、<div>タグの背景色が青（blue-500）に設定されています。
bg-blue-500の代わりに、Tailwind CSSで定義されている他の色クラスを使用することもできます。

まとめ

Tailwind CSSを利用すれば、Reactプロジェクトの<div>タグに簡単かつ効率的に背景色を設定できます。
多彩な色クラスが提供されているので、開発者は素早く見た目の調整ができます。