Failed to compile using postcss-import in React

[glowychan]

I am using postcss-import in create-react-app and the setup is as follows:

// postcss.config.js
 const tailwindcss = require('tailwindcss');
 module.exports = {
     plugins: [
         require('postcss-import'),
         tailwindcss('./tailwind.config.js'),
         require('autoprefixer'),
     ],
 };

// index.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

The error is that it can't resolve './tailwindcss/base'. I ensured that postcss-import comes first in the plugins and I used the import statements provided in the documentation (if I use @tailwind base it will work but I won't be able to import other files). I am on a relatively new version (1.9.5). Any help is much appreciated.

[simonswiss]

Hey!

Would you be able to share your code repo so we can take a look?

Are you getting any other error messages apart from can't resolve ./tailwindcss/base?

[glowychan]

Hi, thank you for your help. It looks like I had to update react-scripts in order for the import statements to work. However, my custom styles could not be applied. Could you tell me if the syntax or path is incorrect? Both index.css and base.css are in the src/styles/ folder. I created a repo here: https://github.com/glowychan/my-app

/* index.css */
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

/* this does not work */
@import './base.css';

/* this works */
/*@layer components {
  .btn {
    @apply py-2 px-4 rounded bg-blue-600 text-white;;
  }
}
*/

/* base.css */
@layer components {
  .btn {
    @apply py-2 px-4 rounded bg-blue-600 text-white;;
  }
}

I also tried removing the layer directive but the style didn't apply in that case either.