DEV Community

loading...

How to add Tailwind CSS

Mario
Software Engineer from Vienna, Austria. Building things, mainly in JavaScript.
Originally published at mariokandut.com on ・4 min read

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
Enter fullscreen mode Exit fullscreen mode

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'],
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

postcss.config.js :

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

2. Add NPM dependencies

npm install --save gatsby-plugin-postcss tailwindcss
Enter fullscreen mode Exit fullscreen mode

💰: 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`
  ]
})
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)