Search code examples
next.jstailwind-csspostcss

@tailwindcss/jit not working when configured in postcss.config.js

This is my dependencies and I already installed @tailwindcss/jit

image

I Followed the Instruction given by the

https://www.npmjs.com/package/@tailwindcss/jit

But when I try to replace the tailwindcss object

 // postcss.config.js
  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

Inside the postcss.config.js INTO THIS @tailwindcss/jit object

  // postcss.config.js
  module.exports = {
    plugins: {
      '@tailwindcss/jit': {},
      autoprefixer: {},
    }
  }

and when I try again to run using yarn dev

It got me this error

error - ./src/styles/tailwind.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-6-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-6-2!./src/styles/tailwind.css)
Error: ENOENT: no such file or directory, stat '/media/acatzk/Hard%20Drive/backup/React-Projects/joshuagalit.com/src/styles/tailwind.css'

DOES IT EFFECT WHEN YOU TRY TO ADD jsconfig.json? because i have this code and file structure

tempo

PLEASE HELP ME I NEED THIS KIND OF FILE STRUCTURE

P.S: I AM USING NEXT.JS

Solution

  • This is a known bug in the version of Tailwind JIT you have installed (0.1.3). It's failing to compile because of the spaces in the file path.

    https://github.com/tailwindlabs/tailwindcss-jit/issues/22

    A fix has already been released. All you need to do is update the dependency and it should be build as expected.