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

Follow the prompts to configure your project.

Note: If you have chosen not to replace the content of your main CSS file, you will need to copy and paste the styles of tailgrids.css into your main CSS file (e.g., src/app/globals.css or src/index.css).

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.