I'm trying to migrate a project from MUI to tailwind css in a Next JS project gradually. I have installed tailwindcss and have gone through each step of installation. For tailwind I have created a different file tailwind.css but it is not working when I'm importing it in a component.

/* tailwind.config.js*/
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// ProductCard.jsx
import Card from "@mui/material/Card";
import CardActionArea from "@mui/material/CardActionArea";
import CardMedia from "@mui/material/CardMedia";
import CardContent from "@mui/material/CardContent";
import { Typography } from "@mui/material";
import "../app/styles/tailwind.css";

// ... Other code goes here

What am I doing wrong?