Reactでアプリを作成をしました【4】【天気アプリ③】【随時更新】

Tailwind CSSとは

Tailwind CSSはutility classを活用したCSSフレームワークのこと。BootstrapやBulmaなどのフレームワークでは事前に準備されているボタン、メニューなどのコンポーネントを活用してデザインを行うが、Tailwind CSSではコンポーネントは準備されておらずutility classを使って独自のボタンを作成しデザインを行う。

1. Reactアプリの作成方法

ターミナルでreactアプリケーションを作成する。

npx create-react-app <Your app name>と入力。
例: npx create-react-app  my-weather-app

パッケージのインストールが完了したら、プロジェクトフォルダに入ってnpm startと入力し、デフォルトのReactテンプレートが表示を確認する。

src/components/Header.jsを作成し、編集をする。

import React from "react";

const Header = () => {
  return (
    <div>
      <h1>Hello from Header</h1>
    </div>
  );
};
export default Header;

import logo from "./logo.svg";
import "./App.css";
import Header from "./components/Header";

function App() {
  return <Header />;
}
export default App;

tailwindcssをインストールする。

Installation → Create React App をクリックする。

Setting up Tailwind CSSの下記の項目① - ④の作業を行う。

① Install Tailwind via npm
② Install and configure CRACO
③ Create your configuration file
④ Include Tailwind in your CSS

Header.jsにclassName="text-2xl text-blue-500"のソースコードを追加する。

import React from "react";

const Header = () => {
  return (
    <div>
      <h1 className="text-2xl text-blue-500">Hello from Header</h1>
    </div>
  );
};
export default Header;

npm startで、『Hello from Header』の文字が青色で表示されているのを確認する。

参考サイト

React Weather App using Tailwind CSS || Project based Series- #1 React & Tailwind CSS Setup
利用者爆増中 初めてでもわかるTailwind CSS入門 基礎編