Making a new blog theme in Tailwind
14 Oct 2021
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" })]
: []),
],
};
Prose links
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