How to add Tailwind CSS

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 addded 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

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'],
    },
  },
};

postcss.config.js:

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

2. Add NPM dependencies

npm install --save gatsby-plugin-postcss tailwindcss

💰: Start your cloud journey with $100 in free credits with DigitalOcean!

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.

gatbsy-config.js

module.exports = {
  "plugins": [
    // All other plugins
    `gatsby-plugin-postcss`
  ]
})

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