How to handle tailwind.config.js in a Gatsby Theme

Question

I am trying to include tailwindcss into my custom Gatsby Theme via twin.macro. I am using yarn workspaces and the project directory tree is setup as follows:

./site - The actual site which contains the content
./packages/gatsby-theme-custom/** - The Gatsby theme

So my site pulls in gatsby-theme-custom and fills it with its own contents.

The integration of tailwindcss per se has worked fine so far. Now I am trying to add a tailwind.config.js file to the root of gatsby-theme-custom but it seems the file does not get picked up during compilation. For example I was trying to extend the base theme with some custom colours:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        electric: "#db00ff",
        ribbon: "#0047ff",
        wonderfulgray: "#eeeeee",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Then in some file inside the theme:

import tw from "twin.macro";

...


return (
 <div
      css={[
        tw`flex flex-col items-center justify-center h-screen`,
        tw`bg-gradient-to-b from-electric to-wonderfulgray`,
      ]}
    >
    Test
 </div>

)

When I now compile the site I am getting errors that the referenced colours cannot be found.

✕ from-electric was not found

When I put the config file into the root of the site everything is working fine. The issue now is that the site should basically not know anything about the styling. Everything related to the styling should be encapsulated into the theme. Is there a way to accomplish that tailwind is picking up the config file from the theme instead ? Or did I make some errors along the way ?

Any help is appreciated !

score 1 · Accepted Answer · answered Jan 06 '21 at 19:50

I just found the answer. It is possible with twin.macro to specify the path to the tailwindcss config file.

I added a babel-plugin-macros.config.js file at the root of the gatsby-theme-custom directory. Secondly I added the tailwind.config.js at the root fo the theme directory as well.

The content of the babel-plugin-macros.config.js file looks like the following:

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    config: `${__dirname}/tailwind.config.js`,
    preset: "styled-components",
  },
};

${__dirname} is important here in order to pick the root of the Gatsby-theme-custom directory.

With that configuration it was possible to place the tailwind config file inside the theme directory and have it encapsulated away from the site directory.

score 0 · Answer 2 · answered Sep 11 '21 at 20:47

An alternate approach to handling tailwind.config.js in a Gatsby theme is to require a custom file path in the plugin options for gatsby-plugin-postcss.

In gatsby-config.js:

plugins: [
    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          require("postcss-import"),
          require("tailwindcss")({ config: `${__dirname}/tailwind.config.js` }),
          require("postcss-preset-env")({ stage: 1 }),
        ],
      },
    },

Source: Github comment by tiggeymone

The handy thing about this approach is, you can allow sites using the theme to optionally provide their own tailwind.config.js file by passing postCssPlugins to the theme via theme options.

How to handle tailwind.config.js in a Gatsby Theme

2 Answers2