Templates

This section of the documentation provides step-by-step instructions for downloading, installing, customizing, and deploying TailGrids templates.

If you have any questions beyond the scope of this documentation, feel free to Open a Support Ticket (opens in a new tab) or reach out to us on Discord (opens in a new tab). We will get back to you as soon as possible.

The example templates are built with TailGrids Components, mainly a combination of HTML, Tailwind CSS, and a few Vanilla JS scripts. We used Alpine JS for interactions like sliders, videos, and image popups.

Downloading Templates

Free Version: Discover a collection of free templates on our Templates Page (opens in a new tab).
TailGrids Pro: Access the full template library (opens in a new tab), including exclusive designs and premium features, with TailGrids Pro (opens in a new tab).

Download your preferred template and extract the files to begin.

Directory Structure

When you download a template and extract it, you’ll get a folder that looks like this:

Main Folder
  |-- src
  |    |-- assets
  |        |-- css
  |            |-- All CSS files
  |        |-- JS
  |            |-- All Javascript files
  |        |-- images
  |            |-- All Images
  |
  |-- All HTML Files
  |
  |-- All Config files

TailGrids templates follow a consistent structure for clarity and ease of customization:

src/: Contains the main source files of the template.
- assets/: CSS, JavaScript, and image files.
HTML Files: Individual HTML pages within the template.
Config Files: Configuration files for build tools or frameworks.

If you want to customize the template, go to the /src folder, where you’ll find all the necessary files.

Installing Template

Before you begin installation, please ensure you have the following prerequisites

Prerequisites:

Node.js
Code editor (e.g., Visual Studio Code)
Basic understanding of HTML, Tailwind CSS, and JavaScript

Instructions

Here are the steps you’ll have to take to install the templates:

Step 1: Download the template from TailGrids. When you download the template, you’ll get a zip file.

Step 2: Unzip/Extract the zip file. After you’ve extracted it, you’ll find all the files and assets you need (as we see above in the Directory Structure Section).

Step 3: Now open the Terminal/Command Line in the project folder. And run this command to install the plugins and the dependencies:

npm install

It will take a few seconds to install the required packages. Once the installation is complete, proceed to the next step.

Step 4: Run this command to start the development server to preview the template locally.

npm run start

Refer to template-specific instructions or check the package.json file for further commands.

When it starts, the project will automatically open up on localhost:3000 (opens in a new tab).

Customization

TailGrids templates are built with Tailwind CSS and a few Vanilla JS scripts for interactive elements (like dropdown and modal popups), making customization a breeze.

Once you can preview the template locally, you can proceed to change the default content, add your content, and see the changes immediately in the browser.

Tailwind Classes: Use Tailwind utility classes (opens in a new tab) to modify colors, fonts, spacing, and more directly within your HTML. Explore our customization documentation or read our in-depth blog on customization (opens in a new tab) for guidance.
Template-Specific Options: Some templates offer even more customization options. Check the template's description and instructions for details.

Deployment to Server

To deploy the Template, you’ll have to generate the build folder. You can do that by running the build command (e.g., npm run build) to generate a production-ready "build" folder.

npm run build

It’ll give you a build folder. Now, you can upload it to your server, and your website will be live.

💡

However, Many TailGrids templates use static HTML. Use the above command or check the package.json file if a build step is required.

Hosting Options:

Deployment Methods:

Static Sites: Upload the contents of your "build" folder to the hosting provider.
Framework Integration: If the template uses a framework like React or Vue.js, follow the framework's deployment guidelines provided by the hosting provider.

Let's Build Something Amazing!

Figma Advance Usage