Create React App + TypeScript + Tailwind CSSのボイラープレート

Thu, 25 Nov 2021 00:00:00 +0000

「Create React AppでTypeScriptとTailwind CSSの導入まで」で作ったReactアプリのボイラープレートを作った

作ったといっても最低限動く状態なったものをGitHubに上げただけで、よくあるボイラーテンプレートにあるセットアップスクリプトとかもない
でもこれでReactの勉強のためにReactアプリを量産できるようになった

余力があれば、ちゃんとメンテしていきたいなという感じ

使い方 🔗

$ git clone --depth=1 https://github.com/ytkg/react-typescript-tailwind-boilerplate.git <YOUR_PROJECT_NAME>
$ cd <YOUR_PROJECT_NAME>
$ yarn install
$ yarn start

Create React AppでTypeScriptとTailwind CSSの導入まで

Thu, 28 Oct 2021 00:00:00 +0000

そろそろReactもガッツリ触ろうと思って、Create React AppでTypeScriptとTailwind CSSの導入までやった

手順はTailwind CSSのドキュメントで
Install Tailwind CSS with Create React App - Tailwind CSS

環境 🔗

macOS Big Sur 11.5.1
zsh 5.8 (x86_64-apple-darwin20.0)
Node.js: v16.7.0
Yarn: 1.22.11
create-react-app: 4.0.3

手順 🔗

Reactアプリを作成（TypeScriptで） 🔗

$ npx create-react-app sample-react-app --template typescript

$ cd sample-react-app
$ yarn start

Tailwind CSSのインストール 🔗

$ yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

エラー 🔗

もしZsh環境で以下のエラーがでたら、zsh: no matches found: postcss@^7 を解決する - ちこぐを参照

zsh: no matches found: postcss@^7

CRACOのインストールと設定 🔗

Create React AppではPostCSSの設定を上書きすることができないので、CRACO (Create React App Configuration Override)をインストールする必要がある

$ yarn add @craco/craco

`package.json`を編集 🔗

     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

`craco.config.js`を作成 🔗

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Tailwind CSSの設定 🔗

以下のコマンドで、tailwind.config.jsを生成する

$ npx tailwindcss-cli@latest init

`tailwind.config.js`を編集 🔗

 module.exports = {
-  purge: [],
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},

`src/index.css`を編集 🔗

-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

確認 🔗

実際にクラス名を当てて、Tailwind CSSが使えるようになったか確認をする

import React from 'react';
import logo from './logo.svg';
import './App.css';

 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
         <a
           className="App-link"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
         >
           Learn React
         </a>
+        <div className="text-5xl text-yellow-300">こんにちは</div>
       </header>
     </div>
   );
 }

export default App;

$ yarn start

良き

参考 🔗

tailwind2.0 + react + typescript 環境構築 - Qiita

Tailwind CSS on 高木のブログ