Codecast: statelesscode.com WordPress 18: Use JavaScript to Add Elements for Tailwind Styling
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.
Watch video Codecast: statelesscode.com WordPress 18: Use JavaScript to Add Elements for Tailwind Styling online without registration, duration hours minute second in high quality. This video was added by user Stateless Code 28 March 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 14 once and liked it 0 people.