Framework Guides
Learn how to integrate TailGrids with your favorite framework.
NextJs
Create project
Start by creating a new React project using NextJs. Select the TypeScript + TailwindCSS template:
npx create-next-app@latest --ts --tailwind --import-alias "@/"Run the CLI
Run the tailgrids/cli init command to setup your project:
npx @tailgrids/cli initYou will be asked a few questions to configure tailgrids.json.
Which theme would you like to use? › DefaultAdd Components
You can now start adding components to your project.
npx @tailgrids/cli add buttonThe command above will add the Button component to your project. You can then import it like this:
import { Button } from "@/components/core/button";
function App() {
return (
<div className="flex min-h-svh flex-col items-center justify-center">
<Button>Click me</Button>
</div>
);
}
export default App;Vite.js
Create project
Start by creating a new React project using vite. Select the React + TypeScript template:
npm create vite@latestAdd Tailwind CSS
npm install tailwindcss @tailwindcss/viteReplace everything in src/index.css with the following:
@import "tailwindcss";Edit tsconfig.json file
The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and
tsconfig.app.json files:
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}Edit tsconfig.app.json file
Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}Update vite.config.ts
Add the following code to the vite.config.ts so your app can resolve paths without error:
npm install -D @types/nodeimport path from "path";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src")
}
}
});Run the CLI
Run the tailgrids/cli init command to setup your project:
npx @tailgrids/cli initYou will be asked a few questions to configure tailgrids.json.
Which theme would you like to use? › DefaultAdd Components
You can now start adding components to your project.
npx @tailgrids/cli add buttonThe command above will add the Button component to your project. You can then import it like this:
import { Button } from "@/components/core/button";
function App() {
return (
<div className="flex min-h-svh flex-col items-center justify-center">
<Button>Click me</Button>
</div>
);
}
export default App;