init react vite tailwind pnpm ts

initViteTailwindPnpm.sh

#!/bin/bash
# inits vite with react and tailwind according to my preferences

# Check if $1 is empty
if [ -z "$1" ]; then
  echo "Error: No file directory passed. You can put . for current directory" >&2
  exit 1
fi

pnpm create vite@latest $1 --template react-ts
cd $1

pnpm install tailwindcss @tailwindcss/vite

# overwrite tailwind.config.ts
echo "
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'


// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})
" > vite.config.ts

# overwrite css
rm src/App.css
echo "@import \"tailwindcss\";

:root {
    color-scheme: light dark;
}
body {
    @apply p-5 max-w-6xl mx-auto;
}
" > src/index.css

# overwrite App
echo "
export default function App() {
    return (
        <>
            <h1 className=\"text-4xl font-semibold\">Hello</h1>
        </>
    );
}
" > src/App.tsx

# set up prettier
echo "{
  \"tabWidth\": 4
}" > .prettierrc.json

# todo: maybe ask whether to install and set up boilerplate of common libraries such as reactQuery

old.sh

#!/bin/bash
# worked before for tailwind v3. might not work any longer. not going to fix it

# Check if $1 is empty
if [ -z "$1" ]; then
  echo "Error: No file directory passed. You can put . for current directory" >&2
  exit 1
fi

pnpm create vite@latest $1 --template react-ts
cd $1

pnpm install -D tailwindcss postcss autoprefixer
pnpx tailwindcss init -p

# replaces `content: []` with `content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}"` ] in tailwind.config.js. # creates & removes bak file because that way it works on both mac and gnu linux

sed -i.bak 's|content: \[[^]]*\]|content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}" ]|' tailwind.config.js && rm -f tailwind.config.js.bak 

rm src/App.css

echo "@tailwind base; 
@tailwind components; 
@tailwind utilities;
@tailwind utilities;

:root {
    color-scheme: light dark;
}
body {
    @apply p-5 max-w-6xl mx-auto;
}" > src/index.css" > src/index.css

echo "
export default function App() {

  return (
    <>
      
    </>
  );
}" > src/App.tsx

# can customize with your preferences
echo "{

}" > .prettierrc.json

#