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; }
HTML template
Here is a template that shows the generated css file to be included and the javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Template</title>
<link rel="stylesheet" href="style.css">
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a basic HTML template with an external style and a JavaScript include.</p>
</body>
</html>
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.