petter-init

Appearance

Introduction ​

What is petter-init? ​

petter-init is a npm package that scaffolds projects, with TailwindCSS configured, and ready-to-code. The tool is supposed to be a better initializer when you want to use TailwindCSS in your projects.

Why petter-init? ​

TailwindCSS is great for styling your website quickly. However, there are several steps to setting up TailwindCSS before you can start using it. This can be cumbersome in smaller projects, where you might just want to test something.

I decided to create petter-init after getting sick of setting up TailwindCSS for simple applications where I just wanted to try something. To my surprise, Fireship is also tired of configuring TailwindCSS.

How does it work? ​

petter-init will do the steps listed on tailwindcss framework guides for the selected framework and package manager.

  1. React and Vue projects are initialized with:
npm
npm create vite@latest
npm create vite@latest
pnpm
pnpm create vite@latest
pnpm create vite@latest
yarn
yarn create vite
yarn create vite

SvelteKit projects are initialized with:

npm
npm create svelte@latest
npm create svelte@latest
pnpm
pnpm create svelte@latest
pnpm create svelte@latest
yarn
yarn create svelte
yarn create svelte
  1. In your new project, petter-init runs:
npm
npm install tailwindcss postcss autoprefixer
npm install tailwindcss postcss autoprefixer
pnpm
pnpm install tailwindcss postcss autoprefixer
pnpm install tailwindcss postcss autoprefixer
yarn
yarn install tailwindcss postcss autoprefixer
yarn install tailwindcss postcss autoprefixer
  1. Copying necessary template files using fs.copyFileSync and removing boilerplate files.