Tailwind doesn't work when combined with Chakra UI and emotion

I need these 3 CSS libraries, but why is it that when I use them together the only thing that doesn't work is tailwind, here's the code:

//tailwind.config.tsimport type { Config } from 'tailwindcss'export default {  content: ['./index.html','./src/**/*.{js,jsx,ts,tsx}'  ],  theme: {    extend: {},  },  plugins: [],} satisfies Config

//index.tsximport ReactDOM from 'react-dom/client';import './index.css';import 'tailwindcss/tailwind.css'import App from './App';import reportWebVitals from './reportWebVitals';import { theme, ChakraProvider, ColorModeScript } from '@chakra-ui/react';import { theme as tema } from './utils';import { Provider } from 'react-redux';import Store from 'store';const root = ReactDOM.createRoot(  document.getElementById('root') as HTMLElement);root.render(<ChakraProvider resetCSS={true} theme={theme}><ColorModeScript initialColorMode={tema.config.initialColorMode} /><Provider store={Store}><App /></Provider></ChakraProvider>)

//index.css@tailwind base;@tailwind components;@tailwind utilities;body {  margin: 0;  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',    sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}code {  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',    monospace;}

//webpack.config.tsconst path = require('path');module.exports = {    entry: './src/index.tsx',    output: {        path: path.resolve(__dirname, 'dist'),        filename: 'bundle.js',    },    resolve: {        extensions: ['.ts', '.tsx', '.js', '.jsx'],    },    module: {        rules: [            {                test: /\.tsx?$/,                use: 'ts-loader',                exclude: /node_modules/            },            {                test: /\.css$/,                use: ['style-loader',                    {                        loader: 'css-loader',                        options: {                            modules: true,                            importLoaders: 1,                            sourceMap: true                        }                    },'postcss-loader'                ],            },        ],    },};

on the component I tried this, but it didn't work

<div className="flex bg-red"><p className="text-center">Hello world</p><div>

Is there a setting I'm missing? Or is it possible that the way it is implemented is different because of an update? maybe someone can answer it