Tailwind UI components in HTML
Tailwind UI components with HTML
Let's look at how to use Tailwind UI in HTML. Tailwind UI is an amazing component library that makes the life of a developer a lot easier. When used in a Vue.js or React project, all the javascript you need to make these components work is already built in. However, when we want to use Tailwind UI in a HTML project we have to add our own javascript. This can seem daunting if you don't know what you are doing. Luckily it is really easy to do! So lets take a look at exactly how to do it.
Method recommended by the Tailwind UI team
So you want to use Tailwind UI components in your HTML project. But where do you start? There are a million and one different ways to complete a coding task. We could write our own javascript from scratch. But that is time consuming and for losers. Our best bet is to use the method recommended on here on the Tailwind UI website.
It is recommended that you use Alpine.js to add the required javascript to your Tailwind UI components. It is worth noting that not all components will require javascript. Thankfully 😅
What is Alpine.js?
Alpine.js describes itself as "a rugged, minimal tool for composing behavior directly in your markup." Simply put - it makes it really easy to add javascript functionality to Tailwind UI components. The beauty of Alpine.js is we can write all of the required code directly in our HTML markup! Honestly once you start using it for 5 minutes your mind will be blown.
How to hook up Alpine.js to your Tailwind UI components
We are going to create a very simple version of a HTML project with just 2 files. An index.php file and a nav.php file. For our example we will create a nav component using Tailwind UI.
Make sure we have installed TailwindCSS
To get started we need to make sure we have installed TailwindCSS. The easiest way to do this is via the cdn. Installation instructions can be found in the Tailwind docs. For simple HTML projects I recommend using the Play CDN method of installation. Or use this method if you are installing TailwindCSS in WordPress.
Install Alpine.js
You also need to have Alpine.js installed. Instructions can be found on the Alpine.js installation page. But if you are using the cdn its literally a case of pasting the script into your head.
This is what my index.php file looks like:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<?php require_once('./nav.php'); ?>
<h1>Tailwind UI with HTML</h1>
</body>
</html>
We now have TailwindCSS and Alpine.js installed. This means we are ready to get started!
Create the Tailwind UI component
Head over to the Tailwind UI components page. Find a component you want to use. In our example we will use the first Navbar on the navbars page. The reason for this is that it is a free to use component. So I am not at risk of giving away information that is meant to be paid for! If you don't have a paid for account, check out my Tailwind UI review if you are wondering if its worth buying.
Make sure that you are viewing the HTML version of the component (check that the drop down menu says HTML). Now copy the code and paste it into your project. In our case into the nav.php file. We are making good progress. If you save the nav.php file and view your website in the browser you should see the navbar displayed. However, if you shrink the page down, you will notice that the menu is not responsive. This is responsive by default with the Vue.js and React versions. But with HTML we need to add the functionality in ourself. This is where Alpine.js shines...
Add some Alpine.js magic
Alpine.js is mind bogglingly easy to use
How Alpine.js is not more well know and spoken about, I do not know. Simply put, it's amazing. If you have ever created a responsive navbar before using plain javascript. Just try it with Alpine.js. Seriously, it will blow your mind how simple it is.
x-data
The first step we need to take in making our navbar responsive is by adding the x-data directive to it. The x-data directive "defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference." See the Alpine.js x-data page for a full explanation. What you need to know is that if we define an x-data object on an HTML element. Then we can access that data anywhere within that HTML element.
In our case we will define an x-data element with 2 properties. These 2 properties will both have Boolean values. This is because these are going to contain the states of both the mobile nav menu and the other dropdown menu within the navbar:
false - Enables analytics for your project (coming soon).false - This will determine if the other dropdown menu is open or closed.We are also going to make sure we put this x-data directive on the outer element of our navbar. It should look like this:
<nav class="bg-gray-800" x-data="{ open: false, dropdown_open: false }">
...
</nav>
x-bind
Our navbar contains a button with 2 svg icons. These are the burger icon to open the nave menu, and an x icon to close it. When the nav menu is closed we want to display the burger icon and hide the x icon. When it is open we want to display the x icon and hide the burger icon. To do this we will use x-bind to bind specific classes to each icon depending on the state of our 'open' x-data property.
Tailwind UI make this very obvious by telling us which classes to display with which state.
- Burger icon
- When open == true bind 'hidden' class
- When open == false bind 'block' class
- x icon
- When open == true bind 'block' class
- When open == false bind 'hidden' class
We can implement this by using the shorthand syntax. This is done by using a colon in front of class like :class. We also want to remove the hidden and block classes that are on our svg icons by default.
...
<!--
Icon when menu is closed.
Menu open: "hidden", Menu closed: "block"
-->
<svg class="h-6 w-6" :class="open ? 'hidden' : 'block'" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!--
Icon when menu is open.
Menu open: "block", Menu closed: "hidden"
-->
<svg x-cloak class="h-6 w-6" :class="open ? 'block' : 'hidden'" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
...
Use x-cloak to stop the icons 'blipping' up when the page loads. We can use this on any icons that do this. We just need to remember to include the following in a stylesheet: [x-cloak] { display: none !important; }
x-show
Now we need to add the x-show directive to some elements in our navbar. The x-show directive will look at the value of the property you pass to it. If the property value is true, it will display the element. If the value if false, it will hide the element.
Tailwind UI Review 2023
Here is my honest Tailwind UI review for 2023, updated for 2024. Is it worth using? Is it worth the money? Should you use an alternative?
The significance of Alex Hormozi’s Involvement with Skool
Alex Hormozi has invested $200 million in skool. But why is this significant? And why should you care about skool more than any other website? Let me explain.
