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

Step 1: Install Tailwind CSS and generate the config file.

If you haven't set up Tailwind CSS in your project yet, open your command terminal and execute the following commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step #2: Install TailGrids

Next, install TailGrids by running the following command:

npm i tailgrids

Step #3: Update the Configuration

Now, update your tailwind.config.js file to include the TailGrids plugin. Add the following code snippet:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("tailgrids/plugin")],
};

Step #4: Add Tailwind CSS directives.

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

@tailwind base;
@tailwind components;
@tailwind utilities;

Step #5: Import CSS into main.js

Import the style.css CSS file inside your ./src/main.js file:

import { createApp } from "vue";
import App from "./App.vue";
 
import "./style.css"; // add this
 
createApp(App).mount("#app");

npm run dev

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!