Formatting of the blog/blogindex using TailwindCSS

July 15, 2020

In a previous post on using TailwindCSS in Gatsby I’d mentioned that installing TailwindCSS ruined the formatting of my blog index page and the formatting of the individual blog posts.

TailwindCSS was picking up some default styling which is what was getting picked up in my MDX posts automatically. To override this, set preflight to false in tailwind.config.js:

module.exports = {
  purge: [
     './src/**/*.js',
     './content/blog/**/*.md*',
  ],
  corePlugins: {
    preflight: false, <--- ADD THIS
  },
}

Now define the styles you want to use in your global tailwindCSS CSS file. In there, add your default styling between @tailwind base and @tailwind components sections:

In /css/style.css:

@tailwind base;
/* Begin typography for MDX */
body{
    @apply font-roboto;
}
title {
    @apply text-gray-700;
}
h1 {
    @apply text-2xl font-roboto;
}
h2 {
    @apply text-xl font-roboto;
}
h3 {
    @apply text-lg font-roboto;
}
p{
    @apply block mb-6 mt-0;
}
/* End typography for MDX */
@tailwind components;

This avoids specificity issues that I was facing earlier.

I’m sure this is a rookie solution but it will do for now. For more details go to the TailwindCSS website.

• ← The CSS learning curve
• Creating a nav bar using TailwindCSS →