Setup Next.js with Tailwind 2.0 on Cloud Run

Featuring shell scripts

Created on 2021–02–09 15:09:59.

Step 1: Installation

npx create-next-app client &&
cd client &&
npm install tailwindcss@latest postcss@latest autoprefixer@latest &&
curl https://gist.githubusercontent.com/thoughtstile/b3acbd3310cd49dfe33958dff14c0273/raw/7a2c20c264bf5e1973a4503aa77bc73f9286d388/tailwind.config.js -o tailwind.config.js &&
curl https://gist.githubusercontent.com/thoughtstile/95ca6c4df1b9f38e82703857f1d9e562/raw/013b41ecca8d067695df4ea4609ca1aef96f549b/index.css  -o ./styles/globals.css &&
curl https://gist.githubusercontent.com/thoughtstile/1e88b7febb7f059aaa2fafb58032bb7d/raw/2a36dce1bf836e7575a3d597010feab725d3ea2e/postcss.config.js -o postcss.config.js &&
curl https://gist.githubusercontent.com/thoughtstile/e6920b4e837cc6c8733b7709c1bd9b2f/raw/9c6a4c3d1bbe5c15f40c0de02711db9cb6d0b16f/index.js -o ./pages/index.js &&
cd .. && 
curl https://gist.githubusercontent.com/thoughtstile/ac82beb65d55898c44719e3b1af960fe/raw/2a2223f5f923141c04e53ac47876a81ba6e7f9fe/Dockerfile -o ./client/Dockerfile &&
curl https://gist.githubusercontent.com/thoughtstile/ab9cc994bc1b278625a1539aa184fb6e/raw/ae40a85a6d6916c4c5c40e38f8eed8de73835e16/cloudbuild.yaml -o ./cloudbuild.yaml

NOTE: The default directory for this guide will be at ./client.

NOTE: The ./cloudbuild.yaml sets the project name as nextjs-cloud-run. Simply change all occurrences of the project name to that of your liking.