高木のブログ

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

2021/10/28

そろそろ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

001.png

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を編集

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を作成

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を編集

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を編集

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が使えるようになったか確認をする

src/App.tsx
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

002.png

良き

参考

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


ytkg

Written by ytkg, Twitter, GitHub