tailwind css Compiler error | Next.js | Page 1

ornate needle Apr 13, 2023, 11:05 AM

#

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;
| @tailwind utilities;

Import trace for requested module:
./styles/globals.css``` I get this error when switching to nextjs 13 appDir.  I have tried to configure a Customer Loader but it doesnt really work well, also i think i dont even need a customer loader becouse i didnt needed one before . When i configure a Customer Loader other Errors occur like:  
```* ./node_modules/postcss-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| */
|
> *,
| ::before,
| ::after {``` which doesnt make any sense to me.  ```/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')(['lord-icon-element']);
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = withTM({
  reactStrictMode: false,
  output: "standalone",
  experimental: {
    appDir: true,
  },
  webpack: (config, { isServer }) => {
    // Add a rule to handle CSS files
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: ['tailwindcss'],
            },
          },
        },
      ],
    })

    // Do not run type checking twice
    if (!isServer) {
      config.plugins.push(new ForkTsCheckerWebpackPlugin())
    }

    return config
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },

});

simple magnetBOT Apr 13, 2023, 11:05 AM

#

Hi @ornate needle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Sorry @ornate needle, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

ornate needle Apr 13, 2023, 11:07 AM

#

Ye

ornate needle Apr 13, 2023, 11:45 AM

#

@simple magnet

simple magnetBOT Apr 13, 2023, 11:45 AM

#

Let me check the knowledge base for you. One moment! :books:

#

Sorry @ornate needle, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

ornate needle Apr 13, 2023, 12:01 PM

#

@simple magnet

simple magnetBOT Apr 13, 2023, 12:01 PM

#

Let me check the knowledge base for you. One moment! :books:

#

Sorry @ornate needle, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

ornate needle Apr 13, 2023, 12:47 PM

#

@simple magnet

simple magnetBOT Apr 13, 2023, 12:47 PM

#

Let me check the knowledge base for you. One moment! :books:

#tailwind css Compiler error