I've been having consistent challenges with my handwritten CSS, especially around scaling it between mobile and desktop. It was a game of wack-a-mole, where I'd get it looking right in one situation, only to find it regressed in the other.

I'd been interested in either Tailwind CSS or Bulma or something similar for a while. After looking around and doing some pretty minimal investigation I chose Tailwind.

To configure Tailwind to work with my existing setup, I found two options:

• a simple plugin: https://www.npmjs.com/package/eleventy-plugin-tailwindcss, with an example here: https://github.com/dafiulh/vredeburg.
• a more complicated version that also depends on webpack. This seems relatively popular and closer to Tailwind's recommendations, but it wasn't clear how to add it until I found a few examples:
  • First install webpack https://statickit.com/guides/eleventy-webpack
  • Then set up Tailwind, another good guide from the same folks here: https://statickit.com/guides/eleventy-tailwind

I did the more complicated version, and first thing of course all of my styles broke. I think that's how I knew it was working. The next step was to dig out of that hole - removing bits of my custom styles, and replacing it with the appropriate tailwind incantations. This was an iterative process, and mostly involved jettisoning (and giving up on) my custom styles in favor of more default options.

I had trouble with my changes not having an impact - I'd add a plugin (tailwind typography), or use a color (other than the standard set) and it silently wouldn't work. I solved this by adding a content tag to my tailwind.config.js:

module.exports = {
  content : [ './src/**/*.{html,js,njk,md}' ],
  theme : {
    extend : {},
  },
  plugins : [ require('@tailwindcss/typography') ],
}

Still some changes (like adding prose-a:text-blue-600, or text-4xl) required a clean build. It seems to be the first time that rule is used; maybe it's trimmed out if it's unused, and the full build is required to get that back in? Or, perhaps something to do with the typography plugin, I noticed it more often when trying to style those, or that could be the same thing about the first time a rule is used.

Regardless, if the changes you expect aren't being taken into account, running rm -fr dist && npm serve often helped to move me forward.