✨ Welcome Summer Sale! Get all templates for $79 (40% Off) ✨
Tailwind CSS

HTML Templates

The HTML template is the ideal starting point for creating customized versions of the template and designing user interfaces that meet your specific needs. It is particularly useful if you want to create a website or app using a specific stack other than React, Vue, or Laravel.

If you need to use our interfaces to build an app using a framework or site generator that we do not provide, we suggest starting with the HTML template. The basic idea is to set up your own environment and import the necessary components or elements from our templates into your application. This approach will allow you to customize the integration to suit your specific needs.

The HTML template provides ready-to-use HTML pages with a pre-compiled CSS file, making it a “vanilla HTML” option. It doesn’t require any build tool to function: we’ve kept it simple and used the Tailwind CLI tool only. So, if you’re familiar with Tailwind CSS, you’ll know that changes to class names may require recompiling CSS, and that can be done with a simple terminal command. Let’s dive in and see how it works!

Quickstart

Once you have downloaded and unzipped the main folder, proceed with unzipping the folder with the -html suffix.

Download and unzip the files

Open the folder with your preferred code editor. We use Visual Studio Code, which includes a fully-featured integrated terminal. You can launch the terminal from the appropriate menu or with a keyboard shortcut.

Run the command npm i to install the Tailwind CSS dependency, and then npm run dev to scan your template files for classes and build your CSS on-the-fly.

Install the Tailwind CLI tool

At this point, you can open up the HTML files in your browser and start working on the website’s code and content. Whenever you make changes to one of the *.html or *.js files, the Tailwind CLI tool will automatically rebuild the CSS, and all you need to do is refresh the browser window.

Working on the website content (the video also shows how to globally switch Open PRO’s purple accent color to blue)

Folder structure

The template’s structure is super basic and easy to understand. In the root directory of the template there is an HTML file for each page, the Tailwind configuration file (which you don’t need to modify unless you have a specific requirement), and the style.css file, which should never be edited directly because its contents are automatically generated by the Tailwind CLI tool.

In addition to these files, you will find the following directories:

  • The css/ folder includes Tailwind directives and imports additional styles, as well as Google Fonts, if present. Inside the css/ folder, you will also find a folder called “vendors” that includes any other dependencies’ CSS, if present (e.g., AOS, Swiper, etc.).
  • The fonts/ directory includes embedded fonts, if any.
  • The images/ folder contains all the images included in the template.
  • The js/ directory includes the libraries used, initialized in the main.js file.
How the HTML templates are structured

Third-party JS libraries

For our templates, we generally use some third-party JS libraries, such as AOS for scroll-reveal animations, Swiper for creating carousels and sliders, Chart.js for charts displaying in our admin dashboard template, and more. These libraries are typically included in the js/vendors/ and css/vendors/ folders.

As for basic JavaScript functionalities (such as dropdowns, accordions, mobile menus, and more), our HTML templates use the Alpine.js library, which perfectly aligns with the Tailwind ecosystem. For more information on using this library, please refer to the official documentation at this link.

Last updated on March 10, 2023