How to Add Javascript to Tailwind UI [HTML COMPONENTS]

How to set up your Tailwind UI components in an HTML / PHP / WordPress project.
How to add javascript to TailwindCSS, specifically to Tailwind UI components.

Tailwind UI is great. Especially if you use a javascript framework like Vue.js or React. However if you want to use Tailwind UI in HTML or PHP you will need to take a couple of extra steps to get some of the components working. This is because you need to add your own javascript to some of the components. This can seem like a daunting task. Luckily it is easy to do! In this video I will show you exactly how to get your Tailwind UI components working in HTML by making use of Alpine.js.

Alpine.js is the recommended way of getting Tailwind UI working with HTML. The team at Tailwind UI recommend Alpine.js themselves in the docs at tailwindui.com/documentation#using-html-and-your-own-js.

Simply include the Tailwind UI component you need in your project. Then use Alpine.js to apply any required javascript functionality!

All the links you need to get Tailwind UI working with HTML:
Written guide: https://codingoblin.com/tailwindui-co...
Install TailwindCSS: https://tailwindcss.com/docs/installa...
Tailwind UI: https://tailwindui.com/
Navbar component: https://tailwindui.com/components/app...

Alpine.js
How to use x-data: https://alpinejs.dev/directives/data
How to add transitions: https://alpinejs.dev/directives/trans...
How to use x-cloak: https://alpinejs.dev/directives/cloak
How to bind classes: https://alpinejs.dev/directives/bind
How to use @click: https://alpinejs.dev/directives/on
TailwindUI Alpine info: tailwindui.com/documentation#using-html-and-your-own-js

Codingoblin: https://codingoblin.com/blog

My Hosting Provider - use code GOBLIN for a discount. Free trial with no card required:
https://platform.cloudways.com/signup...