JavaScript
As the name suggests, Tailwind CSS is a CSS framework. It does not contain JavaScript code and does not offer solutions related to it.
However, that doesn't mean we shouldn't use JS in Tailwind. Quite the opposite.
By not providing any JavaScript code by default, Tailwind wants to be agnostic - that is, it has no "preference" when it comes to the technologies it will be used with - be it React, Vue, Angular, Svelte or any other JavaScript code - Tailwind CSS will make friends with everyone.
This approach, of course, has its pros and cons.
The most obvious disadvantage is that when using regular Tailwind, we have a very limited choice when it comes to interactivity or advanced functionalities that we would like to add to our UI.
And here libraries such as TW Elements come to our aid - it offers not only a number of ready-to-use components, built from Tailwind classes, but also provide JavaScript code, thanks to which we can enjoy interactivity and advanced functionalities (such as Navbar collapsing and extending on mobile, what have we seen in the previous lesson).
So let's take a closer look at how this JavaScript and the interactivity and advanced features it provides work.
Psst! Don't worry if you don't feel too comfortable with JS. We won't be writing JavaScript code here, but we'll just explain useful concepts and usage that will help us in future lessons.
Data attributes
Have a look at the Navbar code we have in our current project.
Have you noticed elements like data-te-navbar-ref or data-te-collapse-init in your HTML code?
These are so called data attributes. They are used to store additional information in HTML elements.
"HTML is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM."
MDB Web Docs
You don't have to try to remember exactly what each attribute does, let alone memorize them.
That would be pointless because there are so many of them and you always have access to them in the documentation.
What is important is that you know that the Tailwind Elements library uses these data attributes to provide interactivity and functionality to components.
Without data attributes, TW Elements cannot function properly, so never remove them.
How does it exactly work?
It may look complicated, but the concept is very simple - data attributes indicate to the TW Elements library where what functionality (what JavaScript code) should be used.
For example, if you look at our navbar's code and look at the item commented <!-- Collapsible navigation container --> you will find the data-te-collapse-item attribute.
<!-- Collapsible navigation container -->
<div
class="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
id="navbarSupportedContent1"
data-te-collapse-item>
[...]
</div>
Recall how in the previous lesson we initialized Navbar by pasting the following code into our project:
// Initialization for ES Users import { Collapse, Dropdown, initTE, } from
"tw-elements"; initTE({ Collapse, Dropdown });
Do you see the collapse import?
It's a bit oversimplification, but you could say it's the following instructions for the TW Elements library:
- Import and add collapse functionality to my project
- Find the element marked with the data-te-collapse-item attribute in the HTML code
- Apply the collapse functionality to this element and make the Navbar collapse and expand on the mobile view
I hope it makes sense now and data attributes will no longer look disturbing to you 😉
Top comments (0)