Cannot find module 'tailwind-config/tailwind.config.js' even though the tailwind.config.js file exists (Novel Editor)

Question

I cloned the Novel repo (https://github.com/steven-tey/novel) and proceded to build the NextJS web app that was included in the novel/apps/web folder using Yarn. I ran yarn at the top level folder to install dependencies and yarn dev in the apps/web folder to build the app. The app crashes when loaded on the browser and produces the following error:

./styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[3]!./styles/globals.css
Error: Cannot find module 'tailwind-config/tailwind.config.js'
Require stack:
- /Users/levita/novel/apps/web/tailwind.config.js

However, the file tailwind.config.js exists in the novel/apps/web folder where I am running the yarn dev command.

I tried initializing Tailwind by running npx tailwindcss init per the Tailwind installation instructions. However, I got the following message:

tailwind.config.js already exists.

So it seems like the config file is in the correct location, but if so, why would the app crash and how can I fix it?

Answer 1

It seems like the tailwind.config.js file that is included with the project requires a second "shared config" file:

/** @type {import('tailwindcss').Config} */
const sharedConfig = require("tailwind-config/tailwind.config.js");

module.exports = {
  presets: [sharedConfig],
};

This second config file, however, does not exist in apps/web/node_modules/tailwind-config. Hence the missing module.

How to fix it? I am still learning Tailwind and web dev in general, so although what I did got the app to load, it may cause issues down the road. I assumed that the example config (shown in the installation page) would have good default values, so I replaced the original tailwind.config.js with the example tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

The result is that the app no longer searches for the shared config and the web app loads.