TailwindCSS Typography Plugin

When I first started writing articles for this blog, one of the first challenges I encountered was the display of code blocks in my articles. I tried a number of things and ended up writing the following CSS to handle the display;

.article-content p {
    margin-bottom: 15px;
}

.markdown {
    & code {
        @apply font-mono text-sm inline bg-black p-2 text-gray-200 px-1;
    }
    & pre code {
        margin: 15px 15px;
        @apply block bg-black p-4 rounded;
    }
}

While the above works, I didn’t really like it because I am using TailwindCSS, which is meant to rapidly build websites without leaving my HTML. In this case, I was forced to leave my HTML because out of the box, there was no utility class that would look into my HTML and style my articles and ensure my code blocks are rendered appropriately.

A while ago I was chatting with my friend @vivgui, founder of TailwindMade and she told me about the Tailwind Typography plugin which has a prose class that would nicely solve my problem.

First thing I had to do was upgrade TailwindCSS from version 1.x to 2.x in my project. Then I installed the typography plugin

yarn add @tailwindcss/typography

If you are using npm then you will install the plugin with

npm install @tailwindcss/typography

Once that is done, all you have to do is add the plugin into the plugin section of your tailwind.config.js file.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

With that done, all I had to do was add the prose class to my Article component. By the way, I use Gridsome to develop my site and Forestry.io for my CMS which makes it possible for me to create my blog posts in Markdown and publish it by pushing to my GIT repository which automatically deploys to Netlify.

This was how I added the prose class to my Article component;

<Layout>
    <article class="prose lg:prose-xl mx-auto py-8">
      <div class="flex-1 bg-white">
        <div class="article-heading my-10">
          <h1
            class="w-full text-center text-gray-600 text-xl md:text-4xl px-6 py-2"
          >{{ $page.article.title }}</h1>
          <div class="flex justify-center text-gray-600 text-xs text-base md:text-lg">
            <span class="text-center">Posted on {{ $page.article.date | formatDate }}</span>
            <span class="ml-2">
              -
              <ReadingTime :content="$page.article.content" />
            </span>
          </div>
        </div>
        <div class="flex justify-center mb-8">
          <g-image :src="$page.article.hero_image"></g-image>
        </div>

        <div class="mx-auto">
          <div
            v-html="$page.article.content"
            class="article-content text-gray-700 text-base md:text-xl px-6 mb-5"
          ></div>
        </div>
      </div>
    </article>
  </Layout>
</template>

Just adding the prose class solved the problem. It added typography styles to my Article HTML so I no longer needed the CSS I wrote previously which means I am now back to developing my website design without the need for me to leave my HTML. There are more customisations you can for your use case such as adding colour modifiers and responsive variants.

You can read more about the TailwindCSS Typography plugin here