Stateless Code | Codecast: statelesscode.com WordPress 18: Use JavaScript to Add Elements for Tailwind Styling @StatelessCode | Uploaded March 2022 | Updated October 2024, 1 hour ago.
This is the 18th video in the statelesscode.com WordPress series. In this video Mike examines the HTML structure of the different sidebar to consistently apply the same Tailwind directives to the header and content of each widget.

He then hacks together some JavaScript that finds the sidebar widgets except for the search bar and login/logout ones and prepends an empty div so that the Tailwind inset styling can take place.

This video covers:
00:00:28 Introduction
00:01:03 Review HTML structure differences between widgets
00:01:45 Modify Tailwind directives to handle latest posts and latests comments
00:04:26 Use JavaScript to insert empty divs for the Tailwind inset styling
00:16:52 Refactor the JavaScript
00:23:22 Apply the Tailwind styles to the newly created DOM elements using directives
00:27:01 Fix mistake in JavaScript logic related to login/logout widget

This video is CC0 - No rights reserved. (YouTube doesn't allow this option when publishing.) All code is released under the UNLICENSE. Stateless Code denies the concept of "intellectual property". Copying is not stealing.