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

{
  "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

Configure Styles

Copy the contents of the generated tailgrids.css file into your main CSS file (e.g., 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