Uploaded March 2022 | Updated September 2026, 2 weeks ago
This is the 19th video in the statelesscode.com WordPress series. In this video Mike takes the styles from the Tailwind Play session and applies them to the sidebar classes and HTML structure we worked on in the previous two episodes.
This video covers:
00:00:10 Introduction
00:00:54 Experiment on where to apply the Tailwind Play classes
00:04:47 Update the z-index of the skewed div so it is behind the content
00:06:58 Fiddle with positioning classes in sidebar elements
00:16:07 Check on the mobile version
00:16:50 Get rid of the purple background we were using for identifying the inner blocks
00:17:59 Modify the JavaScript from last episode to add classes to both the empty div and its parent
00:19:34 Everything broken. Troubleshoot JavaScript. Need to use firstElementChild instead of firstChild
00:22:47 Style the text of the sidebar widget content
00:29:28 Work on link hover behavior
00:32:53 Reduce the horizontal footprint of the sidebar items slightly
00:34:59 Try to deal with really long non-breaking sidebar content. Not working. Revert
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.
This is the 19th video in the statelesscode.com WordPress series. In this video Mike takes the styles from the Tailwind Play session and applies them to the sidebar classes and HTML structure we worked on in the previous two episodes.
This video covers:
00:00:10 Introduction
00:00:54 Experiment on where to apply the Tailwind Play classes
00:04:47 Update the z-index of the skewed div so it is behind the content
00:06:58 Fiddle with positioning classes in sidebar elements
00:16:07 Check on the mobile version
00:16:50 Get rid of the purple background we were using for identifying the inner blocks
00:17:59 Modify the JavaScript from last episode to add classes to both the empty div and its parent
00:19:34 Everything broken. Troubleshoot JavaScript. Need to use firstElementChild instead of firstChild
00:22:47 Style the text of the sidebar widget content
00:29:28 Work on link hover behavior
00:32:53 Reduce the horizontal footprint of the sidebar items slightly
00:34:59 Try to deal with really long non-breaking sidebar content. Not working. Revert
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.
