How to get Tailwind.css working with Gatsby.js?

Question

Has anyone managed to get Tailwind.css working with Gatsby.js?

Configuring postCSS plugins with Gatsby is a bit tricky... If anyone has managed to get Tailwind up and running with Gatsby, I'd love to know how!

Consistory

There is a starter now for Gatsby Tailwind github.com/taylorbryant/gatsby-starter-tailwind – Potemkin

Great! Thanks for sharing that. – Consistory

Answer 1

I managed to get this working (including hot reloading) thanks to this post.

Basically I had to install postcss and autoprefixer additionally:

npm install autoprefixer postcss-cli

I added a postcss.config.js to the root of my Gatsby site folder with this content (tailwind.js is my Tailwind config - yours might be named differently):

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer'),
    ],
};

Then I added a CSS watch and build script to my package.json, and included these scripts in my default develop and build scripts:

"scripts": {
  "build:css": "postcss src/layouts/index.css -o src/layouts/generated.css",
  "watch:css": "postcss src/layouts/index.css -o src/layouts/generated.css -w",
  "build": "npm run build:css && gatsby build",
  "develop": "npm run watch:css & gatsby develop",
  ...
}

(Please note the input (index.css) and output (generated.css) filenames and locations for my css are specific to my project. Feel free to use your own convention.)

Let me know, if this works for you.

Lipread

Thank you! I saw the same article yesterday and worked out a similar solution (posted below). – Consistory

thanks! gatsby + tailwind is a very nice combo, and I was looking to add autoreload on tailwind.js file, now it is perfect – Emelun

Answer 2

As a supplement to morgler's answer, here is a similar solution I ended up with (which includes Sass and PurgeCSS).

I went with a CLI solution because gatsby-plugin-postcss-sass currently runs PostCSS before Sass (which breaks Tailwind), and Gatsby's PostCSS plugins are a bit difficult to configure via Webpack at the moment.

I included Sass so I can break main.sass into more manageable partials, and added PurgeCSS so I can remove any unused Tailwinds classes in production. I've found that PurgeCSS is more effective than PurifyCSS, which is why I opted not to use gatsby-plugin-purify-css.

To begin, create a src/styles folder with the following structure (feel free to customize this for your project and adapt the settings below accordingly):

src/
  styles/
    builds/
      after-postcss/
        main.css
      after-purgecss/
        main.css
      after-sass/
        main.css
    // other subfolders for sass partials...
    main.sass

Install the necessary dependencies:

npm i node-sass-chokidar postcss-cli purgecss

Add the following to gatsby-node.js (to disable Gatsby's default PostCSS plugins):

const ExtractTextPlugin = require('extract-text-webpack-plugin')

exports.modifyWebpackConfig = ({ config, stage }) => {
  switch (stage) {
    case 'develop':
      // Remove postcss from Gatsby's dev process:
      config.removeLoader(`css`)
      config.loader(`css`, {
        test: /\.css$/,
        loaders: [`style`, `css`]
      })

      break

    case 'build-css':
      // Remove postcss from Gatsby's build process:
      config.removeLoader(`css`)
      config.loader(`css`, {
        test: /after-purgecss\/main\.css/,
        loader: ExtractTextPlugin.extract([`css?minimize`])
      })

     break
  }
  return config
}

Add a postcss.config.js file to the project root:

const tailwind = require('tailwindcss')
const cssnext = require('postcss-cssnext')

module.exports = {
  plugins: [
    // your file's name or path may differ:
    tailwind('./src/styles/tailwind.config.js'), 
    cssnext()
    // add any other postcss plugins you like...
  ]
}

Add the following scripts to package.json:

"scripts": {
  "watch:sass": "node-sass-chokidar --source-map true src/styles/main.sass -o src/styles/builds/after-sass -w",
  "watch:postcss": "postcss src/styles/builds/after-sass/main.css -o src/styles/builds/after-postcss/main.css -w",
  "watch:styles": "npm run watch:sass & npm run watch:postcss",
  "build:sass": "node-sass-chokidar src/styles/main.sass -o src/styles/builds/after-sass",
  "build:postcss": "postcss src/styles/builds/after-sass/main.css -o src/styles/builds/after-postcss/main.css",
  "build:purgecss":
    "purgecss --css src/styles/builds/after-postcss/main.css --con public/index.html src/**/*.js -o src/styles/builds/after-purgecss",
  "build:styles": "npm run build:sass && npm run build:postcss && npm run build:purgecss",
  "develop": "gatsby develop & npm run watch:styles",
  "build": "npm run build:styles && gatsby build"
  // ...
},

In development, run npm run develop instead of gatsby develop. The watch: scripts will run Sass + PostCSS (in that order) whenever a change is made to main.sass or any of its imports.

To build the site, run npm run build instead of gatsby build. The build: scripts will run Sass + PostCSS (without the watch tasks) + PurgeCSS (in that order).

Add the following to layouts/index.js to import the after-postcss version of main.css during development and the after-purgecss version during production:

switch (process.env.NODE_ENV) {
  case `development`:
    require('../styles/builds/after-postcss/main.css')
    break
  case `production`:
    require('../styles/builds/after-purgecss/main.css')
    break
}

Hope that helps someone! If anyone knows how to convert this into a Webpack equivalent that works with Gatsby, please feel free to post it here.

Consistory

Heyo... This works during development... But it throws are error when building: ⠂ Building CSSThere were errors with your webpack config: [1] module.loaders.6.loader string.base , "loader" must be a string – Predigestion

huzzah! managed to get it working with a regular gatsby setup.... the hack is to install the latest version of postcss and postcss-loader: github.com/magicspon/gatsby-tailwind-hack-example – Predigestion

it's not quite there... @apply will only work in the main file... Not to worry, i'm mixing it up with styled components... Wooot – Predigestion

With Gatsby v2 and the new gatsby-plugin-postcss, it's now possible use Tailwinds with Gatsby without using the CLI tool. See my comment here for an updated approach. – Consistory

Answer 3

I recently added it on top of the Gatsby starter default and wrote a detailed step by step guide.

https://www.michaelfasani.com/2020/installing-tailwind-css-on-top-of-the-gatsby-starter-default/

Sedition

Answer 4

That's my setup and is working perfectly fine with Gatsby:

tailwind.config.js

    module.exports = {
      mode: "jit",
      purge: [
        "./src/pages/**/*.{js,ts,jsx,tsx}",
        "./src/components/**/*.{js,ts,jsx,tsx}",
      ],

package.json

"scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "tw:build": "tailwindcss build ./src/styles/global.css -o ./public/styles/global.css",
    "tw:prod": "cross-env NODE_ENV=production postcss build ./src/styles/global.css -o ./public/styles/global.css",
    "tw:watch": "onchange \"tailwind.config.js\" \"src/**/*.css\" -- npm run tw:build"
  },

You can also use cssnano it's an awsome extension for purging tailwind css

postcss.config.js

const cssnano = require("cssnano");

module.exports = {
  plugins: [
    require("tailwindcss"),
    cssnano({
      preset: "default",
    }),
    require("autoprefixer"),
  ],
};

Also the devDependencies that are needed for the latest Tailwind version are these:

package.json devDependencies

"devDependencies": {
    "autoprefixer": "^10.3.6",
    "gatsby-plugin-postcss": "^4.14.0",
    "postcss": "^8.3.9",
    "postcss-cli": "^9.0.1",
    "tailwindcss": "^2.2.17"
  }
}

Also make sure to include these on top of the global.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Buckels