Adding Tailwindcss to my Gatsby website

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

2) Generate a tailwind config file

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

npx tailwindcss init

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

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

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")],
})

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;

7) Use of Tailwind

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

import "./src/styles/global.css"

🚀 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:

• Instagram: https://instagram.com/regisnut
• Twitter: https://twitter.com/regisnut
• Portfolio: https://regiscode.netlify.app/
• GitHub: https://github.com/regisnut

Comments

[Julien Bonvarlet]

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

[Regisnut]

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: [],
}

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

      }
    }