Want to style a totally custom Gatsby site, without writing thousands of lines of CSS? Tailwind CSS comes to the rescue!

There are two types of people in this world: those who don’t put a case on their phone and those who put a case, side load apps, run beta versions of an unreleased OS, jailbreak their device and accept tracking cookies. 😬 Cookies aside, sometimes you just need a little customisation to get the most out of something. The same can be said for styling web apps. CSS frameworks like Bulma & Bootstrap give you some awesome styles out of the box, but that’s what your stuck with. If you’re tasked with creating something truly unique, surely there’s another way than just writing 100s of lines of CSS code yourself?

Introducing Tailwind CSS

Yes, it’s another framework, but there is a significant difference with this one. Tailwind works under the basis of “utility classes”. For example, rather than giving you a pre-defined button class which would style your buttons, you can group together a bunch of low-level classes which would render out any kind of button you can think of. Something like this:

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
	Green button
</button>

Conversely, with Bulma for example, you’re likely doing something like this:

<button class="button">
	Simples.
</button>

“Multiple classes instead of a simple, single class? Hogwash I say!”

True. At first it looks a little dicey and completely against the standard way of writing HTML and CSS. Luckily for us, Tailwind also allows you to extract commonly used classes into component classes. So we can get back to our beloved way of writing the web:

<button class="btn btn-green">
	Green button
</button>

<style>
	.btn {
		@apply font-bold py-2 px-4 rounded;
	}

	.btn-green {
		@apply bg-green-500 text-white;
	}

	.btn-green:hover {
		background: #2F855A;
	}
</style>

(Lol, those styles can also exist in a CSS file if you want — more on that later…)

The @apply directive allows us to use Tailwind classes in CSS (really useful if you’ve defined some extra custom stuff in your config), but you can also mix and match with traditional CSS.

Adding to Gatsby

Now we’ve got an idea of what Tailwind is and how it works, let’s add it to a Gatsby project. We’ll be using Tailwind via PostCSS, but other methods are available. If you want to find out more, visit the Gatsby docs. You’ll need a Gatsby project to follow along with. If you don’t have one yet, just run these commands in your terminal to get started:

yarn global add gatsby-cli	# install gatsby-cli globally
gatsby new gatsby-site		# create a new site
cd gatsby-site				# change into our newly created site's directory

Now we’re ready! 🔥💪🏾 Firstly, let’s install the additional dependencies we’re going to need in our project:

yarn add gatsby-plugin-postcss tailwindcss

(If you’re rocking npm, replace those yarn commands above with the following: npm install -g gatsby-cli & npm install gatsby-plugin-postcss tailwindcss)

We’re using PostCSS so we can use the @tailwind directives in our CSS files, alongside all the other directives — like @apply mentioned previously.

Go ahead and add the PostCSS plugin into your gatsby-config.js file:

// gatsby-config.js 

module.exports = {
	plugins: [
		`gatsby-plugin-postcss`,
	]
}

Now create a postcss.config.js file in the root of your project. This is where we’ll include our reference to Tailwind:

// postcss.config.js

module.exports = () => {
	return {
		plugins: [require('tailwindcss')]
	}
}

Now we just need to include the Tailwind directives in our CSS file, giving us access to all of that utility first goodness! 🤤

Open up layout.css (should be located in:src/components if not, create it and import it in your app’s layout component ). That’s a lot of CSS in there! We can leave this as it is for now, but we need to add some things around it. Begin by adding @tailwind base; in the very first line of the file. Then underneath that mountain of CSS code, add @tailwind components; . Finally, underneath that, add @tailwind utilities;. So you should have something like this:

/* src/components/layout.css */

@tailwind base;

html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

/* ...the rest of the element styles... */

@tailwind components;

.heading {
	@apply font-bold text-4xl; /* a heading with bold font and 2.25rem font size */
}

@tailwind utilities;

Let’s go over those directives!

• @tailwind base — adds base styles offered by Tailwind and any additional plugins, alongside boilerplate CSS
• @tailwind components — adds component classes from Tailwind and any additional plugins
• @tailwind utilities — adds utility classes from Tailwind and, of course, any additional plugins

You’ll notice I’ve also sneaked in a cheeky custom component class there called heading. This is just to demonstrate how easy it is to add reusable component classes in your CSS. Now everything’s installed and configured, let’s use it!

#tailwindcss #gatsby #web-development #developer