Pawink is a nextjs boilerplate for helping developer build product faster.

This readme shows how to build this boilerplate, which can let you feel free to change details in this boilerplate.

This project use pnpm pakcage manager, you can install by following command:

npm install -g pnpm

for more details you can check following Installation pnpm

Get started

nextjs

pnpm create next-app@latest pawink --typescript --tailwind --eslint

choose questions as following:

✔ Would you like to use src/ directory? … No / Yes

✔ Would you like to use App Router? (recommended) … No / Yes

✔ Would you like to customize the default import alias (@/*)? … No / Yes

This command creates nextjs app with typescript and tailwindcss.

move global.css

I'd like to move globals.css to a individual folder, use this command

mkdir styles && mv app/globals.css styles/globals.css

shadcn/ui

now let's add ui component library, change directory into your project and exec following command:

pnpm dlx shadcn-ui@latest init

anwser a few questions:

Would you like to use TypeScript (recommended)? no / yes

Which style would you like to use? › Default

Which color would you like to use as base color? › Slate

Where is your global CSS file? › › styles/globals.css

Do you want to use CSS variables for colors? › no / yes

Are you using a custom tailwind prefix eg. tw-? (Leave blank if not)

Where is your tailwind.config.js located? › tailwind.config.ts

Configure the import alias for components: › @/components

Configure the import alias for utils: › @/lib/utils

Are you using React Server Components? › no / yes

for more details you can check shadcn ui installation by nextjs

prettier

pnpm add --save-dev --save-exact prettier prettier-plugin-organize-imports prettier-plugin-tailwindcss

touch .prettierrc

touch .prettierignore

add following code to your .prettierrc file

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "semi": true,
  "experimentalTernaries": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "proseWrap": "preserve",
  "insertPragma": false,
  "printWidth": 80,
  "requirePragma": false,
  "tabWidth": 2,
  "useTabs": false,
  "embeddedLanguageFormatting": "auto",
  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
}

add following code to your .prettierignore file

# Ignore artifacts:
build
coverage
pnpm-lock.yaml

now exec format

pnpm exec prettier . --write

now every file show be formatted

for more messages, you can check following urls:

install prettier

prettier-plugin-tailwindcss

Prettier Plugin: Organize Imports

STILL in progressing