Changing tailwindCSS config path in create-react-app v5

user_10183877 0
Viewed 235

My project root directory is "./src" and I'm currently using tailwindCSS v2 I tried to upgrade tailwindCSS to the newest version (3.0.24) and failed because I can't change the config file path.

This is my postcss.config.js file:

module.exports = {
  plugins: {
    tailwindcss: { config: "./src/tailwind.config.js" },
    autoprefixer: {},
  },
};

Everything works perfectly in v2, but when I upgrade I see that tailwindCSS doesn't work anymore - unless I place the config file in the project real root directory (not ./src).

The thing is I don't want to place it in the root directory but ./src dir.

I heard that CRA v5 has some problems with the postCSS plugins but how am I supposed to use a different location now?

Is there a solution for this?

I really need this because I want to import some styles directly from the config file, and it won't let me use a lower directory. I want to be able to import the config like this:

import theme from "./tailwind.config.js"

And use it.

Thanks in advance

tailwind-css reactjs
1 Answers

create two tailwind.config.js files, one in root and one in src directory

// src/tailwind.config.js

module.exports = {
 content: [],
 theme: {
  extend: {},
 },
 plugins: [],
};

and

// tailwind.config.js

const tailwindConfig = require("./src/tailwind.config");

module.exports = tailwindConfig;
user_88173720
Related