∞
Managing Specificity with CSS Variables
A recent project at work had me defining some shared button styles for us to use in conjunction with Tailwind CSS. The styling is much like you might expect; a base button class with some specific “types” of buttons in different styles. For the purpose of illustration, imagine something like this:
.button { color: black; } .button.type-plain { color: blue; } To render a “plain” button, you use the classes together on an element:
∞
Replace an Unused Dependency
I recently ran into a bit of an odd situation regarding a problematic npm dependency. Our app depended on an old version of d3, which had a dependency on an old version of jsdom, which itself depended on contextify. contextify is not supported on modern versions of Node and would fail to install. Upgrading d3 to a modern version without the dependency on jsdom was too hard, but we needed some way to move forward.
∞
Verifying Changes
Recently, Movable Ink, the company where I work, released our configuration for Tailwind as an open-source project. While it’s only being used internally, making it Open Source has been a motivating factor to keep the code clean and be thoughtful about how we’re maintaining it. Using GitHub Actions has been key in helping us achieve that goal. In this series of posts, I’ll be covering all the ways we’re putting GitHub Actions to work for us.