JWT Authentication【１３React Setup】

JWT Authentication【１３React Setup】

YouTube: https://youtu.be/GFQKmyNAczA

tailwind: https://tailwindcss.com/docs/guides/create-react-app
heroicons: https://github.com/tailwindlabs/heroicons
create react app: https://create-react-app.dev/docs/adding-typescript/

npx create-react-app . --template typescript

npm i react-router-dom
npm install @heroicons/react
npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

package.json

  "dependencies": {
    "@heroicons/react": "^2.0.12",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
   "devDependencies": {
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.1.8"
  }

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;