Quick Start

In this section, we are going to show you two ways you can use the components. The first one is the recommended method, and it’s the easiest one.

And the other one is the alternative method. You can use both depending on the project type or requirements.

Installation and Usage

In this part, we are going to show you how to set up a TailGrids project from scratch.

First, we will set up a Tailwind CSS project then we will integrate TailGrids in it.

Here are the steps you can follow to do that:

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 TailGrids plugin.

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

Note: This is the config file for html project. Go to Tailwind CSS docs 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 first we will have to add the 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 is, if it’s under the src include that 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 just copy and paste the components from TailGrids and build websites.

Complete Video Tutorial on Installing TailGrids


Alternative Way

You can follow this method if you have a Premium account.

Here are the steps you need to follow:

Step#1: Login into your TailGrids account, then go to Downloads from the Account Menu (top right) or hit this link

Step#2: After that Download the Components file. You’ll get a zip file, so unzip/extract it.

Directory Structure

After downloading the components package you will get a zip file structure will be like below after you unzip.

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

Step#3: 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#4: 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 copy and paste the components to build the websites you want to build.

Using TailGrids UI Components with Tailwind CSS