Using TailwindCSS in Gatsby

July 09, 2020

I got two recommendations to use Tailwindcss for its ease of use and flexibility. One was from a colleague and the other was Kent C Dodds who has a cool and free course on React on egghead.io.

Instead of reinventing the wheel, go to Jerrie Pelser’s blog to see how to include Tailwindcss into your Gatsby project.

I didn’t remove the starter kit styling as indicated by Jerrie Pelser, so I will have to do that later. I wasn’t looking at the blog on http://localhost:8000/blogindex and didn’t realize that installing Tailwindcss completely messed up the styling for my blog index and for individual blog posts. I will address this in a future blog post.

One thing Jerrie Pelser doesn’t address in his blog post is performance of Tailwindcss in Gatsby. If you run gatsby build and then gatsby serve and look at the “View Page Source” of the landing page, you will see that the page source is very long, mine was about 200 pages! This is because TailwindCSS includes all possible utilities into your build.

Hey! This is Gatsby, so we’re going to have to purge the unused CSS. Go here to Tailwindcss to look at how to purge it.

I added this to my /tailwind.config.js:

module.exports = {
  purge: [
     './src/**/*.js',
  ],
}

and now “View Page Source” is about 6 pages long. This is good progress! :-)

I haven’t checked if it is necessary, but every time I make changes to the TailwindCSS config, I restart gatsby develop.

Also, just so you know, each of these changes on my website is taking me about a day or more for some issues. I google all over the place, find good and not-so-good solutions, and have to try them all to see what works. This is why I decided to blog “my final answer” on this website itself.

So— how do you use TailwindCSS in your JSX? Watch this wonderful series of YouTube videos by Adam Wathan, one of the creators of TailwindCSS. It’s groovy and a lot of fun!

Tailwind Tips:

• Intellisense

Add Intellisense to your Visual Studio Code.

• Using google fonts in your JSX

To use my google fonts in TailwindCSS I had to add the following to my /tailwind.config.js file:

module.exports = {
  theme: {
      extend: {
          fontFamily: {
              spectral: ["Spectral", "serif"],
              roboto: ["Roboto", "san-serif"],
          },
      },
  },
}

To use the fonts in your JSX:

className="font-spectral font-normal italic" className="font-roboto text-gray-700"

• D.R.Y.

Explore the use of @apply to refactor your tailwind css into classes.

• Smallest size first

Style for the smallest size first.

After a couple of iterations of using tailwindcss to style it, here’s a look at my landing page. I was styling it for my laptop and one thing I didn’t realize is that with screen sizes, TailwindCSS chooses minimum size or larger, so sm: means small screen size of 640px or larger, so it is better to start with a mobile screen size and build your way up to bigger screen sizes.

• Add autoprefixer to postcss.config.js

npm install autoprefixer

File /postcss.config.js:

module.exports = () => (
    {
        plugins: [
            require("tailwindcss"),
            require("autoprefixer"),
        ],
    }
)

• ← Using Google fonts in Gatsby
• Using Font Awesome icons in Gatsby →