三目並べ
yarn install
一から作成する場合は React アプリのベースディレクトリで以下を行う
npx create-react-app .
yarn add react-icons
yarn add react-router-dom
yarn add @headlessui/react
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
yarn add @craco/craco
package.json
の script をcraco
で構成する
before
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
after(eject は削除)
"start": "craco start",
"build": "craco build",
"test": "craco test"
craco.config.js
を作成(touch ではなく VSCode からファイル作成でも良い)
touch craco.config.js
作成したcraco.config.js
に以下を記述
module.exports = {
style: {
postcss: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
}
tailwind
の初期化
npx tailwindcss init -p
tailwind.config.js
の purge を修正
- purge: [],
+ purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
./src/index.css
を tailwind を利用する設定に修正(以下の 3 行に全てを書き換え)
@tailwind base;
@tailwind components;
@tailwind utilities;
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.