そろそろReact Nativeへ移行する③ - JavaScriptからReactまで

Reactでは、Flex Layoutはあるが、Grid Layoutはないのかもしれません。React NativeではGrid Layoutはありません。

わざわざ、CSSファイルで指定してもよいのですが、ここでは、React.jsでTailwind CSS（v3)を導入してみます。CSSで結局は書いているのですが、より華やかになる、レスポンシブにも対応可能です。また、おそらく、React Nativeのデバック作業が楽になりそうだからです。［クロスプラットフォームの場合、どのレイヤーあるいはどのレイヤー間の結合部にエラーがあるのかを調べたいといけないですが、一旦設定すれば、JavaScriptとCSSの結合部のことは考える必要なく、また、ファイルもjs(あるいはjsx)ファイルをみるだけでよいことになります。］

（おそらく、Reactでは、JavaScriptファイル内での記載で自動的に暗に存在するCSSファイルに追加されて、自動的にrebuildされて、React.jsを実行すると自動的に呼び出されるようです。合っているかどうかは不明）

React Native版というのもあるようです。

Tailwind CSSの設定と実装方法 - v3.0準拠 | YoheiKoブログ

このHPをすごく参考にさせていただきました。

自分のための備忘録として下記挙げておきます。

npx create-react-app [プロジェクト名]

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

React.jsでの設定では、公式にある、--watchが含まれるようなコマンドは入れる必要は無いです。

tailwind.config.jsファイルに追記

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

公式では、HTMLファイルで行う方法で記載されており、Reactでの記載はされていない。そこでは、input.sccで、下記の記載をしているが、Reactでは、create-react-appで作成されたindex.cssファイルの内容をすべて消して下記の記載だけにする

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

App.jsも下記に変更。

App.js

//importは無し

function App() {
  return (
    <div>
      <h1 class="text-3xl font-bold underline">
        Hello
      </h1>
    </div>
  );
}

export default App;