hono SSR, tailwindcss 短縮表記

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

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

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

/* custom_class */
.container_base {
    @apply container mx-auto px-8 bg-white;
}
/* button */
.btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

npx tailwindcss -i ./src/main.css -o ./public/styles/main.css --watch

npx tailwindcss -i ./src/main.css -o ./public/styles/main.css

{html`
<link href="/styles/main.css" rel="stylesheet">
`} 

{
  "name": "hono_jsx4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "wrangler dev src/index.tsx",
    "deploy": "wrangler deploy --minify src/index.tsx",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20230922.0",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.3",
    "wrangler": "^3.10.0"
  },
  "dependencies": {
    "hono": "^3.7.2"
  }
}