danwilloughby.dev

Gatsby theme not loading css on blog pages

1 min read

My custom gatsby theme wasn’t loading the css on my blog pages. The key was adding ${__dirname} to my tailwind.config.js.

TODO: Do a highlight

    `${__dirname}/src/pages/**/*.js`,
    `${__dirname}/src/components/**/*.js`,
    `${__dirname}/src/templates/**/*.{js,jsx,ts,tsx}`,
module.exports = {
  content: [
    "./src/pages/**/*.js",
    "./src/components/**/*.js",
    "./src/templates/**/*.js",
    `${__dirname}/src/pages/**/*.js`,
    `${__dirname}/src/components/**/*.js`,
    `${__dirname}/src/templates/**/*.{js,jsx,ts,tsx}`,
  ],
  theme: {
    extend: {
      colors: {
        tellspin: "#2196f3",
        tellspinYellow: "#ffeb3b",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/aspect-ratio")],
};

The error was:

File: ../gatsby-theme-minimal/src/styles/global.css

failed Building development bundle - 5.139s
ERROR in ../gatsby-theme-minimal/src/styles/global.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/gatsby-plugin-postcss/node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (/Users/dan/test/my-theme/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:87:62)
    at /Users/dan/test/my-theme/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:99:92
    at /Users/dan/test/my-theme/node_modules/tailwindcss/lib/processTailwindFeatures.js:48:11
    at plugins (/Users/dan/test/my-theme/node_modules/tailwindcss/lib/plugin.js:38:63)
    at LazyResult.runOnRoot (/Users/dan/test/my-theme/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/Users/dan/test/my-theme/node_modules/postcss/lib/lazy-result.js:393:26)
    at LazyResult.async (/Users/dan/test/my-theme/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/Users/dan/test/my-theme/node_modules/postcss/lib/lazy-result.js:206:17)
    at processResult (/Users/dan/test/my-theme/node_modules/webpack/lib/NormalModule.js:763:19)
    at /Users/dan/test/my-theme/node_modules/webpack/lib/NormalModule.js:865:5
    at /Users/dan/test/my-theme/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/dan/test/my-theme/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/dan/test/my-theme/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at reportError (/Users/dan/test/my-theme/node_modules/gatsby-plugin-postcss/node_modules/postcss-loader/dist/utils.js:414:5)
    at Object.loader (/Users/dan/test/my-theme/node_modules/gatsby-plugin-postcss/node_modules/postcss-loader/dist/index.js:112:28)
 @ ../gatsby-theme-minimal/gatsby-browser.js 3:0-33
 @ ./.cache/api-runner-browser-plugins.js 4:10-65
 @ ./.cache/api-runner-browser.js 3:16-55
 @ ./.cache/app.js 10:0-65 28:87-32:1 36:20-29 64:0-14 87:19-28 122:6-15 28:0-32:2

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

The other problem was getting it to load the config (learn more)

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: { config: `${__dirname}/tailwind.config.js` },
    autoprefixer: {},
  },
};

Written by Dan Willoughby

Hey I'm Dan. I'm the solo-founder behind Tellspin which helps dev teams respond to support through Slack. Tellspin takes the guesswork out of who should pay attention to which messages making it easier to focus. You should try out Tellspin and follow me on Twitter