tic-tac-toe

三目並べ

setup

yarn install

initial create

一から作成する場合は React アプリのベースディレクトリで以下を行う

React tailwind craco

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 init

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;

Available Scripts

In the project directory, you can run:

`yarn start`

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.

`yarn test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`yarn build`

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.

hironomiu / tic-tac-toe