Vite Installation

Follow these steps to set up Tailgrids UI in your React project using 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 CSS and the Vite plugin:

npm install tailwindcss @tailwindcss/vite

Configure Path Aliases

Vite requires some configuration for path aliases. Update your tsconfig.json and vite.config.ts.

tsconfig.json

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

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 UI

Run the CLI in your project root to initialize Tailgrids UI:

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

Add Components

Add a component using the CLI:

npx @tailgrids/cli@latest add button

Use the Component

Use the component in your app:

src/App.tsx

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

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

export default App;

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

Vite Installation

On this page