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
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@^7CRACOのインストールと設定
Create React AppではPostCSSの設定を上書きすることができないので、CRACO (Create React App Configuration Override)をインストールする必要がある
$ yarn add @craco/cracopackage.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 inittailwind.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
良き
