Astro
Install and configure Astro.
Create project
Start by creating a new Astro project:
pnpm 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 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
Add React to your project
Install React using the Astro CLI:
pnpm dlx astro add react
Answer Yes
to all the question prompted by the CLI when installing React.
Add Tailwind CSS to your project
pnpm dlx astro add tailwind
Create a styles/globals.css
file in the src
folder.
@tailwind base;
@tailwind components;
@tailwind utilities;
Import the globals.css
file
Import the styles/globals.css
file in the src/pages/index.astro
file:
---
import '@/styles/globals.css'
---
Update astro.config.mjs
and set applyBaseStyles
to false
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,
}),
],
})
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 shadcn
init command to setup your project:
pnpm dlx shadcn@latest init
That's it
You can now start adding components to your project.
pnpm dlx shadcn@latest 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>