Astro

Docs

Astro

Install and configure Astro.

CLI

Create project

Start by creating a new Astro project using create-astro

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 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 Solid to your Astro project

Install Solid using the Astro CLI:

pnpx astro add solid

Add Tailwind CSS or UnoCSS to your project

Tailwind CSS

To install Tailwind CSS, use the Astro CLI:

pnpx astro add tailwind

UnoCSS

If you prefer UnoCSS, install UnoCSS:

pnpm install -D unocss

Then create uno.config.ts in the root of your project:

uno.config.ts

import { defineConfig } from 'unocss'
 
export default defineConfig({
  // ...UnoCSS options
})

Finally add UnoCSS integration to Astro config file:

astro.config.mjs

import { defineConfig } from 'astro/config'
import solidJs from "@astrojs/solid-js"
import UnoCSS from 'unocss/astro'
 
// https://astro.build/config
export default defineConfig({
  integrations: [
    solidJs(),
    UnoCSS(),
  ],
})

Path Aliases

I’m use the @ alias to make it easier to import your components. This is how you can configure it:

tsconfig.json

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

Run the CLI

Run the shadcn-solid init command to setup your project:

pnpx shadcn-solid@latest init

Configure components.json

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

◆  Which CSS framework would you like to use?
│  ● TailwindCSS
│  ○ UnoCSS
│
◇  Which color would you like to use as base color?
│  Slate
│
◇  Where is your global CSS file?
│  src/styles/app.css
│
◇  Would you like to use CSS variables for colors?
│  Yes
│
◇  Are you using a custom tailwind prefix eg. tw-? (Leave blank if not)
│
│
◇  Where is your tailwind.config.cjs located?
│  tailwind.config.mjs
│
◇  Configure the import alias for components:
│  @/components
│
◇  Configure the import alias for utils:
│  @/lib/utils

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 shadcn-ui@latest 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 shadcn-solid@latest add button

You can then import shadcn componets in Astro like this:

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