Astro

Docs

Astro

Install and configure Astro.

Create project

Start by creating a new Astro project:

npm create astro@latest

Configure your Astro project

You will be asked a few questions to configure your project:

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

Add React to your project

Install React using the Astro CLI:

npx astro add react

Add Tailwind CSS to your project

Install Tailwind CSS using the Astro CLI:

npx astro add tailwind

Edit tsconfig.json file

Add the following code to the tsconfig.json file to resolve paths:

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

Run the CLI

Run the pm-ui init command to setup your project:

npx @pujan-modha/pm-ui init

Configure components.json

You will be asked a few questions to configure components.json:

Would you like to use TypeScript (recommended)? no / yes
Where is your global CSS file? › › ./src/styles/globals.css
Where is your tailwind.config.js located? › tailwind.config.mjs
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no

Import the globals.css file

Import the globals.css file in the src/pages/index.astro file:

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

Update astro tailwind config

To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own globals.css file. To do this, set the applyBaseStyles config option for the tailwind plugin in astro.config.mjs to false.

export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
  ],
})

Update tailwind.config.mjs

When running npx @pujan-modha/pm-ui init, your tailwind config for content will be overwritten. To fix this, change the module.exports to export default and the content section with the code below to your tailwind.config.mjs file:

export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
}

That's it

You can now start adding components to your project.

npx @pujan-modha/pm-ui add button

The command above will add the Button component to your project. You can then import it like this:

---
import { Button } from "@/components/ui/button"
---
 
<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button>Hello World</Button>
	</body>
</html>