Drop Caps with Tailwindcss

If you seek his monument, look around you. If you seek an intervention free drop cap implementation for your blog, look around you.

First of all, the caveats; This will be useful in somewhat specific circumstances:

1. You are using a static blog generator of some kind or other;
2. You are using NPM.
3. You are using tailwindcss

If that is you, the following is my implementation that you can see on this very site.

Banality uses Gatsby, a React based static site generator. In the interests of brevity, all you need to know is that each MDX document in /content/blog becomes a post on the site thanks to /src/pages/blog/{mdx.slug}.js, which after various Gatsby specific implementation details contains the following div (which contains the body text of the markdown documents aforementioned).

<div className="blog-post-body mt-4 pb-10 md:w-4/5 text-xl">
  <!-- ... Blog Post Body -->
</div>

If you are using tailwind, undoubtedly you are familiar with the utility classes like mt-4 (margin top), pb-10 (padding bottom) and so on. But there is also the interesting concept of @layer directives. That is what the blog-post-body class is for.

When you first install and set up tailwind, you end up with a style.css file containing the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

But you can extend each of these imports using the @layer directive. For our purposes, we will be targetting the @tailwind base import.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .blog-post-body {
    @apply first-letter:float-left
           first-letter:text-6xl
           first-letter:pr-1;
  }
}

Wait a minute, I hear you cry—what the hell is this first-letter selector all about? That’s not in the docs. Well, you’re right, it’s not. But tailwindcss also has a plugin infrastructure that we can make use of. We are going to install tailwindcss-pseudo-elements which will add various pseudo selectors, including first-letter.

Install the NPM package to your project. You will need to register the plugin in tailwind.config.js like so:

module.exports = {
  ...
  plugins: [
    require("tailwindcss-pseudo-elements")(),
  ],
};

Now we can target the first letter of, say, a paragraph. Or, as in our case here, the first letter of the .blog-post-body.

The most important part of this, from my perspective, is that these Drop Caps are applied without intervention from me. There is no need to tag the first letter in my markdown document (which is plausible, especially with MDX). This is something I used to do on previous incarnations of this site which utilised tufte-css.

It’s not that that doesn’t work—it works just fine—it’s that my markdown documents started to look awful. I prefer the simplicity of this implementation. I hope you do too.

The equivalent CSS to the tailwind selectors is thus:

.blog-post-body:first-letter {
  float: left;
  font-size: 3.75rem;
  padding-right: 0.25rem;
}

Going further

Perhaps now you are wondering about the first line small caps implementation to go with your shiny new drop caps? If so, the following is a brief introduction.

.blog-post-body {
  @apply first-letter:float-left
      first-letter:text-6xl
      first-letter:pr-1
      first-line:small-caps
      first-line:tracking-wider;
}

We have already discussed the various first-letter selectors. The first-line selectors necessitate another NPM package called, appropriately, tailwindcss-first-line.

After installing the package, include it in tailwind.config.js

module.exports = {
  ...
  plugins: [
    require("tailwindcss-pseudo-elements")(),
    require("tailwindcss-first-line")
  ],
};

This will allow the use of the first-line selector as above, and the equivalent css is:

.blog-post-body:first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.05em;
}

Now, this may or may not work correctly for you right away. It depends on what typeface you are specifying. If your specified font does not include a specific small caps variant, you will end up with these bizarre all-caps-but-reduced size letters. At first glance you may think it has worked but it just won’t be right.

You can read more about small-caps variants at Buttericks Practical Typography, but for my purposes I am specifying Source Serif by Adobe, which as you can see, has real small caps variants included.