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: {},
},
};