Installation and Usage

Welcome to the Installation and Usage section of TailGrids documentation! This section will guide you through the step-by-step installation and usage of TailGrids, a powerful Tailwind CSS UI library.

Whether you prefer package managers like NPM or Yarn or opt for CDN links, we've got you covered.

Learn how to set up TailGrids and utilize its powerful UI components.

Select the guide tailored to your preferred technology for step-by-step instructions:

Framework Specific

Other Options

Alternative Way (Pro User 💎): If you've purchased the premium version of TailGrids, there is another way to install and directly access the component code. Learn more about this alternative.

Start with the HTML installation guide!

HTML Version

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

npm install -D tailwindcss
npx tailwindcss init

Step #2: Install TailGrids

npm i tailgrids

Step #3: Update the tailwind.config.js file with the TailGrids plugin.

tailwind.config.js

module.exports = {
  content: ["./*.html", "./ecommerce/*.html", "./assets/**/*.js"],
  theme: {},
  variants: {
    extend: {},
  },
  plugins: [require("tailgrids/plugin")],
};

Note: This is the config file for the HTML project. Go to Tailwind CSS docs (opens in a new tab) and install Tailwind according to your Framework and Languages.

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

Create a CSS file named input.css in the root of your project or the /src directory. Then, include this code at the top of the file.

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

Step #5: Generate the CSS file with the build command.

To do that, we must first add the build script to the package.json file. Make sure you’ve provided the correct path of the input.css file. If it’s in the root, keep the script as it is. If it’s under the /src directory, ****include it before the CSS file.

"scripts": {
    "build": "npx tailwindcss -i ./input.css -o ./dist/output.css --watch"
  },

Then, we will have to run the build command:

npm run build

Step #6: Include the compiled CSS file in the HTML file. We’ve compiled the file in the dist folder.

<link href="/dist/output.css" rel="stylesheet" />

Now, you can copy and paste the components from TailGrids and build websites.

React Version

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

Open your React project and follow these steps to integrate TailGrids components. If you don't have a React project, you can create one (opens in a new tab) using vite, parcel, create-react-app, or your preferred method.

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

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 -D tailwindcss
npx tailwindcss init

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:

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("tailgrids/plugin")],
};

Step #4: 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.

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

Step #5: Start the build process

Finally, start the build process for your React project:

npm run start

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

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:

tailwind.config.js

/** @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!

Using CDN

⚠️

Installing using CDN files is not recommended.

Suppose you want to experiment with TailGrids HTML components without a full project setup. In that case, you can leverage the power of CDN. Here's how:

Step #1: Include the Scripts and Stylesheet

Add the following lines within the <head> tag of your HTML file:

<script src="https://cdn.jsdelivr.net/npm/tailgrids@2.1.0/plugin.min.js"></script>
<link
  href="https://cdn.jsdelivr.net/npm/tailgrids@2.1.0/assets/css/tailwind.min.css"
  rel="stylesheet"
/>

💡 Don’t forget to include Tailwind CSS and Alpine.js CDN URLs in your code.

<head>
  <!-- Your existing codes go here -->
 
  <script src="https://cdn.tailwindcss.com"></script>
  <script
    defer
    src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
  ></script>
 
  <!-- TailGrids CDN -->
 
  <script src="https://cdn.jsdelivr.net/npm/tailgrids@2.1.0/plugin.min.js"></script>
  <link
    href="https://cdn.jsdelivr.net/npm/tailgrids@2.1.0/assets/css/tailwind.min.css"
    rel="stylesheet"
  />
</head>

Step #2. Start Using TailGrids Components

You can copy and paste TailGrids HTML component code snippets into your project.

Important Notes!

Limited Functionality: Using the CDN might cause some components (especially those with dark mode support) not to work perfectly.
Troubleshooting: Check the official Tailwind CSS Dark Mode (opens in a new tab) documentation for unexpected behavior.
Production: CDNs are generally not recommended for production environments.

Alternative Way

If you've purchased the pro version (opens in a new tab) of TailGrids, there is another way to install and directly access the component code.

This installation method, specifically for premium TailGrids users, offers direct access to components and maximizes customization potential.

If you have a TailGrids Premium (opens in a new tab) account, you can follow these steps for installation:

Step #1: Login and Download

Access your TailGrids account and navigate to the "Downloads (opens in a new tab)" section
After that, Download the Components file. You’ll get a zip file, so unzip/extract it.

After extracting the components package, you will get a file structure like the one below.

Directory Structure

Main Folder
  |-- assets
  |     |-- css
  |           |-- All CSS files
  |     |-- images
  |           |-- All Images
  |
  |-- node_modules
  |     |-- All packages needed
  |
  |-- src
  |     |-- tailwind.css (this file is editable)
  |
  |-- All HTML Files
  |
  |-- All Config files

The extracted folder includes the following:

/assets: Contains core CSS files, images, and scripts.
/src: include editable Tailwind CSS configuration files.
Individual HTML component files.
Configuration files (like package.json or tailwind.config.js).

Step #2: Open the Terminal/Command line inside the extracted folder, then run this command:

npm install

This command will install all the dependencies you’ll need to build websites with TailGrids components.

Step #3: Include the compiled CSS file from the assets folder.

Open up the project folder in your code editor and create an HTML file called Index.html.

Add this line of code to the Index.html file to link the CSS:

<link rel="stylesheet" href="./assets/css/tailwind.css" />

That’s it. Now, you can run the local server and open the index.html to browse and preview components.

Using TailGrids UI Components

Copy and Paste: Browse the individual HTML component files and copy the desired component's code directly into your project.
Customization: Utilize Tailwind CSS utility classes (opens in a new tab) to change the appearance of components to fit your specific needs.

Using TailGrids UI Components with Tailwind CSS

Additional Notes

Figma Access: If your premium plan includes Figma files, use them for extensive prototyping and design adjustments.

Now, Start building with TailGrids components!

Getting Started Components