Create a static HTML template to use wit Tailwind and Alpine

This guide helps you create a static HTML page that is super flexible and light weight. It uses Tailwind for styling and Alpine JS for light weight interactive elements. This setup is super lean and is a great way to create front end websites.

Setting up a static front end

This guide walks you through on how to set up a static front end website for development.

Install tailwind

This guide is based on the Tailwind Installation manual.

npm install -D tailwindcss
npx tailwindcss init

npx tailwindcss -i ./resources/input.css -o ./public/style.css --watch

Project Setup

Create a public folder and add the index.html file. This will be the starting point of your site.

Create a resources folder resources folder and a blank input.css file.

Adding Alpine JS

Add Alpine JS to handle Javascript based interactivity.

<script src="//unpkg.com/alpinejs" defer></script>

After adding the x-cloak tag, your input.css file will look as follows.

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

@tailwind base;
    [x-cloak] { display: none !important; }

Finishing touches

Install the Live Server plugin for Visual Code to see your edits update in real time. Now you are ready to build your website!

I recommend setting up github to keep track of your changes.