Astro Installation

Create project

Create a new Astro project:

npm create astro@latest

Install Tailwind CSS

Install Tailwind CSS and the Vite plugin:

npm install tailwindcss @tailwindcss/vite

Configure Vite plugin

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

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

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

Import Tailwind CSS

Create a src/styles/global.css file and add an @import for Tailwind CSS.

@import "tailwindcss";

Import styles

Add the following line to your src/pages/index.astro file:

---
import "../styles/global.css";
---

Visit here to learn more about Tailwind CSS installation.

Initialize Tailgrids

Run the command in the CLI to initialize Tailgrids in your project:

npx @tailgrids/cli@latest init

Configure Styles

Copy the contents of the generated tailgrids.css file and paste them into src/styles/global.css file.

React Integration

Run the command in the CLI to integrate React with Astro:

npx astro add react

Configure Path Aliases

Vite requires some configuration for path aliases. Update your tsconfig.json file.

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Add Components

Use the CLI to add components to your project:

npx @tailgrids/cli@latest add button

Use the Component

Import and use the component in your Astro page:

---
import { Button } from "@/components/tailgrids/core/button";
---

<div class="flex min-h-svh items-center justify-center">
  <Button client:load>Click me</Button>
</div>

Note: You may need to update the import path based on your project structure.