Framework Guides

This guide shows how to install and use TailGrids with popular React-based frameworks. The steps are organized so each framework follows the same flow: create project, setup Tailwind, run the CLI, add components.

Next.js

Create project

Create a new Next.js project with TypeScript and Tailwind CSS:

npx create-next-app@latest --ts --tailwind --import-alias "@/"

Initialize TailGrids

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

npx @tailgrids/cli init

You will be prompted to configure tailgrids.json:

Which theme would you like to use? › Default

Add components

Add your first component:

npx @tailgrids/cli add button

Import and use it in your app:

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

export default function Home() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>Click me</Button>
    </div>
  );
}

React (Vite)

Create project

Create a new React project using Vite with TypeScript:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

Add Tailwind CSS

Install Tailwind and the Vite plugin:

npm install tailwindcss @tailwindcss/vite

Replace the contents of src/index.css:

@import "tailwindcss";

Ensure index.css is imported in src/main.tsx.

Configure path aliases

Vite uses multiple TypeScript config files. Update all the files below.

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json

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

Update vite.config.ts

Install Node types (required for path resolution):

npm install -D @types/node

Update vite.config.ts:

import path from "path";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src")
    }
  }
});

Initialize TailGrids

Run in the CLI:

npx @tailgrids/cli init

Select your preferred theme when prompted.

Add components

Add a component:

npx @tailgrids/cli add button

Use it in your app:

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

function App() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>Click me</Button>
    </div>
  );
}

export default App;

Notes

• The TailGrids CLI workflow is the same across all React-based frameworks.
• Path aliases (@/) are recommended but optional. If you skip them, update imports accordingly.
• More framework-specific guides (Astro, TanStack, Remix) can follow the same structure.