reactjsnext.jstailwind-cssyarnpkgwysiwyg

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


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?


Solution

  • 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.