The webpack not able to recognise tailwind CSS properties like @tailwind base;

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;

next config

/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')(['@dej611/spid-react-button']);

module.exports = withTM({
  reactStrictMode: false,
  webpack(config) {
    const fileLoaderRule = config.module.rules.find(rule => rule.test)
    fileLoaderRule.exclude = /.svg$/
    config.module.rules.push({
      test: /.svg$/,
      loader: require.resolve('@svgr/webpack')
    },
    {
      test: /.svg$/,
      loader: require.resolve('url-loader')
    })
    return config
  }
})

I have installing latest version on tailwind CSS and Nextjs and