Astro

Create a Astro project

Create a new Astro project using the following command:

npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git

pnpm dlx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git

yarn dlx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git

bun x create-astro@latest astro-app  --template with-tailwindcss --install --add react --git

Edit tsconfig.json file

Add baseUrl and paths to the compilerOptions section of tsconfig.json.

tsconfig.json

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

Install Tailwind CSS

npm install tailwindcss @tailwindcss/vite

pnpm add tailwindcss @tailwindcss/vite

yarn add tailwindcss @tailwindcss/vite

bun add tailwindcss @tailwindcss/vite

Now, Add the @tailwindcss/vite plugin to your Vite plugins in your Astro config file.

astro.config.mjs

// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite"; 

// https://astro.build/config
export default defineConfig({ 
  vite: { 
    plugins: [tailwindcss()], 
  }, 
});

now edit global.css to use Tailwind CSS styles.

src/global.css

@import 'tailwindcss';

Install HextaUI

To install HextaUI in your Astro project, navigate to your project directory and run:

npm install hextaui@latest

pnpm add hextaui@latest

yarn add hextaui@latest

bun add hextaui@latest

Or you can directly use the npx command to run HextaUI without installing it globally:

Initialize HextaUI

Run the init command to initialize HextaUI in your project:

npx hextaui@latest init

pnpm dlx hextaui@latest init

yarn dlx hextaui@latest init

bun x hextaui@latest init

Add components

You can now start using HextaUI components in your Astro project.

npx hextaui@latest add button

pnpm dlx hextaui@latest add button

yarn dlx hextaui@latest add button

bun x hextaui@latest add button

This command will add Button component to your project. You can simply import the button component from components/ui in your project.

src/pages/index.astro

---
import { Button } from "@/components/ui/button"
import "../styles/global.css";
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro + TailwindCSS</title>
	</head>

	<body>
		<div className="grid place-items-center h-screen content-center">
			<Button>Click me!</Button> 
		</div>
	</body>
</html>