1
I’m facing an issue when trying to use Tailwind CSS in my React (or Next.js, if applicable) project. The app loads and works for a few seconds, but then displays the following error in the console:
Module parse failed: Unexpected character ‘@’ (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
@tailwind base; | | @tailwind components;
Context: I’m using Webpack as a bundler (or Next.js, if applicable). I’ve already installed Tailwind CSS and its dependencies according to the official documentation. My tailwind.config.js file is configured correctly. This is my postcss.config.js file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
What I tried: 1.I verified that the dependencies are installed: npm install tailwindcss postcss autoprefixer 2.I verified that postcss.config.js and tailwind.config.js are in the root directory. **Additional detail: **The app loads fine and works for a few seconds before throwing the error. During those initial seconds, everything seems to be working, but then it stops responding and the error mentioned appears. **Question: **What could be causing the error to occur after a while and not at startup? Is it a problem with Webpack configuration, PostCSS, or something else? Thanks in advance!
2
What does your CSS look like? Is it literally:
@tailwind base; | | @tailwind components;
If so, try putting them on separate lines
@tailwind base;
@tailwind components;