I have been trying to make my tailwind to work in my fullstack application, I am using Vite to work with React, Node.js and I want to use express also. This are my files so far

For the component that I want to manipulate with tailwind Header.jsx

import logo from '../images/ID-logo.png';

function Header() {
    return (
        <header className="w-full relative">
            <div className='flex mb-1'>
                {/* Adjusted image size for better visibility */}
                <img src={logo} className="w-20 h-20 ml-3" alt="Logo" />
                <ul className="outline outline-blue-600">
                    {/* Consider using <Link> or <NavLink> from react-router-dom if you're using React Router */}
                    <li><a href="#" className="text-white text-2xl font-bold">Inicio</a></li>
                    <li><a href="#" className="text-white text-2xl font-bold">Nosotros</a></li>
                    <li><a href="#" className="text-white text-2xl font-bold">Servicios</a></li>
                    <li><a href="#" className="text-white text-2xl font-bold">Galeria</a></li>
                    <li><a href="#" className="text-white text-2xl font-bold">Contacto</a></li>
                    <li><a href="#" className="text-white text-2xl font-bold">Preguntas frecuentes</a></li>
                </ul>
            </div>
        </header>
    );
}

export default Header;

postcss.config

import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

package.json

{
  "name": "my-fullstack-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.2",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.4",
    "vite": "^5.3.1"
  }
}

vite.config

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Global CSS

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

App.jsx

import './styles/index.css'
import Header from './components/Header'

function App() {

  return (
    // <DarkModeProvider>
      <Header />
    // </DarkModeProvider>
  )
}

export default App

What I have tried is

• To reinstall the npm dependencies
• Check the paths (They are good)
• Tried different dimensions for the img element (None are working)