How to add Tailwind CSS

How to add Tailwind CSS

The easy way to add Tailwind CSS to Gatsby

ByMario Kandut

honey pot logo

Europeโ€™s developer-focused job platform

Let companies apply to you

Developer-focused, salary and tech stack upfront.

Just one profile, no job applications!

There are several ways of adding Tailwind CSS to Gatsby, and a lot of them are too complex or adding unnecessary code. Tailwind CSS can be added with PostCSS in a simple way.

4 simple steps to add Tailwind CSS

1. Create the config files

Create two configs for Tailwind CSS and PostCSS.

touch tailwind.config.js
touch postcss.config.js

๐Ÿ’ฐ The Pragmatic Programmer: journey to mastery. ๐Ÿ’ฐ One of the best books in software development, sold over 200,000 times.

Copy basic theme styling to tailwind.config.js. This can be adjusted to your needs, refer to the official docs.

const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      borderRadius: {
        '4xl': '2rem',
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],


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

2. Add NPM dependencies

npm install --save gatsby-plugin-postcss tailwindcss

3. Add Gatsby plugin to Gatsby config

To get PostCSS to trigger properly in the build process, you have to add the gatsby-plugin-postcss to your Gatsby config.


module.exports = {
  "plugins": [
    // All other plugins

4. Import TailwindCSS

The last step is to import Tailwind CSS in the gatsby-browser.js.

import 'tailwindcss/base.css';
import 'tailwindcss/components.css';
import 'tailwindcss/utilities.css';

๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ Congratulations! ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ You have successfully added TailwindCSS to your website and can simply add Tailwind classes to your HTML.

Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut. If you want to know more about Gatsby, have a look at these Gatsby Tutorials.

References (and Big thanks):

TailwindCSS, Mark Shust

Scroll to top โ†‘