Adding Tailwindcss to my Gatsby website

Regisnut — Tue, 17 Nov 2020 19:02:15 +0000

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

Install Tailwind
install gatsby-plugin-postcss
Custom CSS
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

DEV Community: Regisnut