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 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:

npx astro add react

Answer Yes to all the question prompted by the CLI when installing React.

Add Tailwind CSS to your project

npx astro add tailwind

Create a `styles/globals.css` file in the `src` folder.

styles/globals.css

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

Import the `globals.css` file

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

src/pages/index.astro

---
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.

astro.config.mjs

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

Edit tsconfig.json file

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

tsconfig.json

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

Run the CLI

Run the shadcn init command to setup your project:

npx shadcn@latest init

That's it

You can now start adding components to your project.

npx shadcn@latest registry add @blode=https://blode.co/ui/r/{name}.json
npx shadcn@latest add @blode/ui
npx shadcn@latest add @blode/button

@blode/ui is the design system: it writes Blode's tokens into your CSS. Skip it and components install but render unstyled, because their variants compile to rounded-[var(--field-radius)] and h-[var(--field-height)].

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>

On This Page

Create project Configure your Astro project Add React to your project Add Tailwind CSS to your project Edit tsconfig.json file Run the CLI That's it

Astro

Create project

Configure your Astro project

Add React to your project

Add Tailwind CSS to your project

Create a styles/globals.css file in the src folder.

Import the globals.css file

Update astro.config.mjs and set applyBaseStyles to false

Edit tsconfig.json file

Run the CLI

That's it

Astro

Create project

Configure your Astro project

Add React to your project

Add Tailwind CSS to your project

Create a styles/globals.css file in the src folder.

Import the globals.css file

Update astro.config.mjs and set applyBaseStyles to false

Edit tsconfig.json file

Run the CLI

That's it

Create a `styles/globals.css` file in the `src` folder.

Import the `globals.css` file

Update `astro.config.mjs` and set `applyBaseStyles` to `false`

Create a `styles/globals.css` file in the `src` folder.

Import the `globals.css` file

Update `astro.config.mjs` and set `applyBaseStyles` to `false`