Documentation
Installation and Usage
Vue

Vue Version

This section will guide you through setting up and using TailGrids Vue with your Vue projects.

Open your Vue project and follow these steps to integrate TailGrids components. If you don't have a Vue project, create one using Vite (opens in a new tab).

We Will Use Vite for This Guide.

Step 1: Create your project

Start by creating a new Vite project if you don’t have one set up already. The most common approach is to use Create Vite.

npm create vite@latest my-project
cd my-project

Step 2: Install Tailwind CSS

Open the command terminal, then run the code below ( Skip this step if you have already set up Tailwind CSS in your project )

npm install tailwindcss @tailwindcss/vite

Step #2: Install TailGrids

Next, install TailGrids by running the following command:

npm i tailgrids

Step #3: Add Tailwind CSS directives to your CSS.

Create a CSS file named **index.css** in the /src directory. Then, include this code at the top of the file.

@import "tailwindcss";
@plugin "tailgrids/plugin";

Step #4: Configure the vite.config.js file

Add the @tailwindcss/vite plugin to your Vite configuration.

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
 
export default defineConfig({
  plugins: [tailwindcss()],
});

Step #5: Start the build process

Finally, start the build process for your React project:

npm run dev

Step #6: Start using Tailwind CSS and TailGrids

Make sure your compiled CSS is included in the <head> (your framework might handle this for you), then start using Tailwind’s utility classes to style your content.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/src/style.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

That's it! Browse and start using the TailGrids Vue component in your Vue project.

If you want to build the project, you can run npm run build.

Need Help? Our supportive community is here to assist!

ReactUsing CDN