【簡単CSS】Tailwind CSSの実装方法

HTML CSS

こんにちは、Totsukaと申します。
今回は、Tailwind CSSについて書きました。
簡易的に書いてみたので参考がてらに読んでいただけると幸いです。
※ここではReactでの開発を前提に書いています。

Tailwind CSSのインストールと設定

Tailwind CSSのインストールと、設定に関しては以下の公式ドキュメントを参照し、開発環境に合わせてやっていく。※開発環境によって設定の仕方が違う為、公式ドキュメントを参照した方が早い

Install Tailwind CSS with Create React App - Tailwind CSS
Setting up Tailwind CSS in a Create React App project.
tailwindcss.com

Tailwind CSSの簡単な書き方

実装の仕方としては、各タグのclassName属性（開発環境によってはclass属性や他の属性になっています）に自分で定義したクラス名を設定する要領でTailwind CSSが用意しているクラス名を指定するだけです。
超簡単な例は以下のようになります。

<div className="text-center text-base">
  <p>Hello World</p>
</div>

上記のコードを通常のCSSに戻すと以下のようになります。

div {
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
}

Tailwind CSSを簡単に実装する為のチートシート↓

Tailwind CSS Cheat Sheet
Cheat sheet to learn Tailwind CSS quickly. Browse and search all Tailwind utility classes or CSS properties on one page.
nerdcave.com

最後に

Reactや、Next.jsではCSSの書き方が多種多様なので色々な書き方を知っておくと便利になります！
他のCSSの書き方についても記事を出していくのでよかったらご覧下さい。