✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

HTML templates

Tailwind CSS

Unzip and open the folder of the HTML template with your favourite editor (I am using VSCode).‌

The HTML template is shipped with Webpack just to let you quickly get into the development process. We don’t discourage you from using any other build tool!‌

The first thing to do is to install NPM dependencies. To do that, open the terminal, type npm install and press the Enter key. This command will create a node_modules folder in the root of your template, which contains all required dependencies.

Feel confused? 🤔 Watch the video below! 👇

Start a development server

Run npm start in the terminal to run a development server and open http://localhost:8080/ to view it in the browser. The page will reload every time you make edits.

Any kind of change should be made inside the src folder. Inside that, you will find the HTML template pages, alongside with styles (src/css), images (src/images), and some JavaScript (src/js).

In order to make the content easier to read and maintain, we have sliced the HTML pages content into partials by taking advantages of html-loader for Webpack (https://webpack.js.org/loaders/html-loader/). Partial HTML files are located in the src/partials folder. No extra configuration is required.

CSS & JS customisations

There isn’t much to say about the CSS when it comes to templates that are built on the top of Tailwind CSS, so I would recommend to check out the Tailwind documentation.

As for JavaScript, we have started adopting third-party libraries (e.g. Alpine.js, AOS, and more) instead of custom code. Check out the src/js/main.js file to see how to import the JS dependencies.

Compile and minify for production

When you have done with changes, run npm run build for compiling and minify for production. This command will generate a dist folder in the root of your template that you can upload via FTP to your server.

Deploy with Netlify

You can alternatively host your site on Netlify: our templates come with a ready-made netlify.toml file to allow you deploying with Netlify and go live in a few clicks. You just need to create a repository from the HTML template, create a new site from Git in Netlify, and deploy the app. For more information, refer to Netlify documentation: https://docs.netlify.com/


Check out the video to see how to start a development server, make changes, and deploy your site via FTP or with Netlify 👇

Last updated on October 20, 2021