Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

Making a new blog theme in Tailwind

14 Oct 2021 🔖 web development
💬 EN

Table of Contents

Blah blah blah

Rather than introduce a “visual-only DIV,” I made my HTML templating a little more complex by changing the <section /> tag /_layouts/default.html from this:

<section id="main-content">

To this:

<section id="main-content" class="{% if page.layout == 'page' or page.layout == 'post' %}prose myprose{% endif %}">

I like nesting, so I turned it on in /postcss.config.js:

module.exports = {
  plugins: [
    require("postcss-import"),
    // require("postcss-scss"), /* jekyll-postcss-v2 does not like postcss-scss */
    require('tailwindcss/nesting'),
    require("tailwindcss")(`./tailwind.config.js`),
    require("autoprefixer"),
    ...(process.env.JEKYLL_ENV == "production"
      ? [require("cssnano")({ preset: "default" })]
      : []),
  ],
};

Then in /tailwind.config.js I turned off “prose” styling for links, because I wanted link styling to inherit the rest of the site’s blue:

module.exports = {
  // ...
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            a: false,
          },
        },
      }),
      // ...
    },
    // ...
  },
  // ...
};

And in /assets/css/main.css I decided to add some yellow hover behavior to links within page & post bodies:

---
---

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
  a {
    @apply text-blue-700;
  }
  //...
}

@layer components {
  .bg-linkey-colors {
    @apply bg-gradient-to-r from-yellow-100 to-yellow-100;
  }
  .bg-underline {
    background-size: 100% 0.1em;
    background-position: 0 88%;
    background-repeat: no-repeat;
  }
  .bg-fullheight {
    background-size: 100% 100%;
  }
}

@layer utilities {
  //...
  .myprose a {
    /*Set the underline size & color for "prose" links*/
    @apply bg-linkey-colors bg-underline;
    /*Make "prose" links toggle to have a full background color when hovered/focused*/
    &:hover {
      @apply bg-fullheight;
    }
    &:focus {
      @apply bg-fullheight;
    }
    /*If user is OK w/ it, smooth out any "prose" link style changes with a transition*/
    @media (prefers-reduced-motion: no-preference) {
      @apply transition-all duration-300;
    }
  }
}

I couldn’t figure out how to leverage Tailwind’s motion-safe pseudo-selector in custom CSS, so I just turned on Tailwind Nesting and threw in a traditional @media query.

blue-700 on yellow-100 is only a WCAG AA contrast ratio, so I should look into whether I need to figure out something else to do. (I’ve also got the issue of links in pre and code tags, as well as in my “attention note” red & purple callout boxes, to deal with.)

I mean, half of why I’m taking on a full redesign is because I’m getting nailed by accessibility checkers on contrast ratio, target area sizes for mobile, etc.

Nevertheless, there’s also, like, an entire freaking other part of the page to redo, and I’ve still got a lot more tweaking of “prose” I want to do (I’ve got some nasty deeply nested lists, I definitely use H5 tags, etc.).

I’ll need to do some playing around to decide if I want to do an @apply font-medium on .myprose a to get links up to 500-weight (it looks good in the Tailwind docs)

Prose backticks

In /tailwind.config.js I turned off those annoying visible backticks that come with <code> tags in Tailwind Typography:

module.exports = {
  // ...
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            "code::before": {
              content: '""',
            },
            "code::after": {
              content: '""',
            },
          },
        },
      }),
      // ...
    },
    // ...
  },
  // ...
};

I might disable code styling altogether & do it myself like a styling … TBD.

Custom classes from my markdown

I need to search for custom classes I’ve put straight into .md files. There’s attention-note and attention-note-gentle, but I think there are more, like handwritten, and such, that I haven’t yet thought of.

Looks like I’ve got expandable-code, table-wrapper, handwritten-font, twitter-tweet, wp-block-audio (no wait, that’s from a code example), has-large-font-size (?) … perhaps I should start just w/ a search for markdown="block".

Prose datatables

I should probably false it out & reimplement

Prose code & pre

I should probably false it out & reimplement

--- ---