set up next tailwind ts

next-tailwind-ts.md

mkdir [name] cd [name] echo "{}" > package.json npm install next react react-dom

// add "scripts" to package.json // // "scripts": { // "dev": "next dev", // "build": "next build", // "lint": "next lint", // "start": "next start" // } // // save

mkdir pages cd pages touch _app.tsx touch index.tsx cd ..

// pages/index.tsx // // export default function Home() { // return

hello world

// }

// pages/_app.tsx // // import type { AppProps } from 'next/app' // // export default function App({ Component, pageProps }: AppProps) { // return <Component {...pageProps} /> // }

npm run dev

// check out localhost:3000

// setup tailwindcss

mkdir styles cd styles touch globals.css cd ..

// styles/globals.css // // html, // body { // padding: 0; // margin: 0; // font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, // Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; // user-select: none; // overflow: hidden; // width: 100%; // height: 100%; // } // // a { // color: inherit; // text-decoration: none; // } // // * { // box-sizing: border-box; // }

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

// Created Tailwind CSS config file: tailwind.config.js // Created PostCSS config file: postcss.config.js

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

// styles/globals.css // // @tailwind base; // @tailwind components; // @tailwind utilities; // // ...

mkdir components touch hello.tsx cd .. cd ..

// components/hello.tsx // // export default function Hello() { // return

hello world

// }

// pages/index.tsx // // import Hello from '../components/hello' // // export default function Home() { // return // }

// ! "hello world" shows up at localhost:3000

// style with tailwind

// pages/_app.tsx // // import '../styles/globals.css' // import type { AppProps } from 'next/app' // // export default function App({ Component, pageProps }: AppProps) P // return <Component {...pageProps} /> // }

// components/hello.tsx // // export default function Hello() { // return <div className={'bg-green-200'}>hello world // }

// localhost:300 will return "hello world" with a light green background

npm install --save-dev @types/node

// if you don't do the above you will run into issues at the build step when deploying to vercel