DEV Community

Cover image for Adding Tailwindcss to my Gatsby website
Regisnut
Regisnut

Posted on

Adding Tailwindcss to my Gatsby website

#tailwindcss

After following a react formation, I've decided to make a Gatsby website using Contentful content, and for CSS, I've used bootstrap to help me get something good, also helped with framer-motion for animation.

But now, I want some change and add Tailwind for sure !!

Let's follow the steps to start your journey with tailwindcss. 🚀

  1. Install Tailwind
  2. install gatsby-plugin-postcss
  3. Custom CSS
  4. Purging your CSS

1) Install Tailwindcss

In your terminal in your Gatsby project, install Tailwind :

# Using NPM

npm install tailwindcss --save-dev

# Using Yarn

yarn add tailwindcss --dev
Enter fullscreen mode Exit fullscreen mode

2) Generate a tailwind config file

In your terminal, still in your gatsby project, just run the following :

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

You will have a new tailwind.config.js file.

3) Install the plugin gatsby-plugin-postcss

You will need also to install the Gatsby PostCSS plugin gatsby-plugin-postcss.

Tailwind is built on PostCSS, that's why weed the plugin.

To install the plugin, just run the following in your terminal :

# Using NPM
npm install --save gatsby-plugin-postcss

# Using Yarn
yarn add gatsby-plugin-postcss
Enter fullscreen mode Exit fullscreen mode

4) Include the plugin in your gatsby-config.js

We need to configure Gatsby, hence in your gatsby-config.js, just add the plugin as below (see my example):

module.exports = {
    siteMetadata: {
        title: `Dreaminh, illustrations, aquarelles & letterings`,
        siteUrl: `https://www.dreaminh.com`,
...
    },
    plugins: [
        `gatsby-plugin-react-helmet`,
        `gatsby-plugin-offline`,
        `gatsby-plugin-netlify`,
...
         `gatsby-plugin-postcss`,
    ]
};
Enter fullscreen mode Exit fullscreen mode

5) Configure PostCSS to use Tailwind

  • To configure PostCSS, you need to create an empty postcss.config.js file in your project's root.
  • Add the following content 
const tailwind = require('tailwindcss')

module.exports = () => ({
    plugins: [tailwind('./tailwind.config.js'),require("autoprefixer")],
})
Enter fullscreen mode Exit fullscreen mode

6) Add CSS File with tailwind directives

We are getting close, we just need to add our tailwind directives in our css.

Best practise is to create a global.css file such as src/styles/global.css and add the following :

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

7) Use of Tailwind

To finalize the installation, we need to import Tailwind in gatsby-browser.js

import "./src/styles/global.css"
Enter fullscreen mode Exit fullscreen mode

🚀 And that's it! You should now begin to play with Tailwindcss, as basic configuration is done.

I hope you will accomplish great things with this framework, obviously to go further don't hesitate to check on the official document, especially to build your custom theme. [talwindcss documentation]

Tailwind toolbox

Please find the library which can be helpful :

https://tailwindcomponents.com/

https://mertjf.github.io/tailblocks/

https://tailwind.build/

You can find me on:

Top comments (2)

Collapse
 
tyloo profile image
Julien Bonvarlet •

Add sume purgecss postcss to lighten the whole css foles ;)

Collapse
 
regisnut profile image
Regisnut • • Edited

indeed, since version 1.4.0 you can add in tailwind.config.JS

module.exports = {
  purge: ["./src/**/*.js", "./src/**/*.jsx", "./src/**/*.ts", "./src/**/*.tsx"],
  theme: {},
  variants: {},
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

I didn't try the plugin gatsby-plugin-purgecss, it has to be added in gatsby-config after postcss, and with tailwind: true:

 { 
      resolve: `gatsby-plugin-purgecss`,
      options: {

        tailwind : true, // Enable tailwindcss support

      }
    }
Enter fullscreen mode Exit fullscreen mode

Read next

ayaarragab profile image

Ever save a LinkedIn post thinking, “I’ll get back to this later,” but totally forget?

Aya Ragab -

codeplato profile image

How to write elegant code 1: Keep the chain of event calls short

code plato -

alexandrecalaca profile image

MBA em Desenvolvimento de Software Avançado com foco em Ruby on Rails

Alexandre Calaça -

resumewriting_services profile image

Using LinkedIn to Advance Your Career

Resume Writing Services -