hu-config

npm

npx hu-config

yarn

yarn dlx hu-config

pnpm

pnpx hu-config

ni

nlx hu-config

1. Follow the hu-config Prompts.

   - What is your name? (name)
   - (name), are you using [packageManager]? Y/n
   - Great! Noted.
   - So (name), which set would you like to install? Custom
   - Which packages would you like to install?: Marp for VS Code, Prettier

2. Configure your Astro project.

   npm

   npm create astro

   yarn

   yarn create astro

   pnpm

   pnpm create astro

   - Where should we create your new project? ./your-app-name
   - How would you like to start your new project? Choose a template
   - Do you plan to write TypeScript? Yes
   - How strict should TypeScript be? Strict
   - Install dependencies? Yes
   - Initialize a new git repository? (optional) Yes/No

3. Answer Yes when prompted by the CLI when installing React and Tailwind.

   npm

   npx astro add react tailwind

   yarn

   yarn astro add react tailwind

   pnpm

   pnpm astro add react tailwind

   ni

   nlx astro add react tailwind

4. Finish all other configuration, then select Yes.

   Styles

   styles/global.css

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

   Astro

   src/pages/index.astro

   ---
   import '@/styles/global.css'
   ---

   Astro Config

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   
   import react from '@astrojs/react';
   import tailwind from '@astrojs/tailwind';
   export default defineConfig({
     integrations: [
         tailwind(),
         tailwind({
             applyBaseStyles: false,
         }),
         react()
     ],
   })

   tsConfig

   tsconfig.json

   {
     "compilerOptions": {
       // ...
       "baseUrl": ".",
       "paths": {
         "@/*": [
           "./src/*"
         ]
       }
       // ...
     }
   }

5. Follow the prompts to set up components.