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:

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. We will call these 2 properties:

• 
  open
  

  This will determine whether the mobile nav menu is shown. We will set it to false to start with.

• 
  dropdown_open
  

  This will determine if the other dropdown menu is open or closed. We will set it to false to start with.

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:

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.

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.