I created a Vite-React project, and added TailwindCSS into it, but for some reason it does not work like Next.JS, any help or clue as to why?

[Voiceless33]

Here's my code from my tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Helvetica", "Arial", "sans-serif"],
      },

      animation: {
        typewriter: "typewriter 4s steps(40) 1s 1 normal both",
        blink: "blink 0.75s step-end infinite",
      },

      keyframes: {
        typewriter: {
          "0%": { width: "0" },
          "100%": { width: "100%" },
        },
        blink: {
          "0%": { borderColor: "transparent" },
          "50%": { borderColor: "transparent" },
          "100%": { borderColor: "black" },
        },
      },

      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
};

Any clue as to why?
This is when I try to use it:

import React from 'react';
import './index.css'

const App = () => {
  return (
    <div className="overflow-hidden whitespace-nowrap border-r-4 border-black">
      <p className="typewriter">Example text :)</p>
    </div>
  );
}

export default App;

This was just a quick example
Anyone has an idea how to fix it or something?

[wongjn]

Could I check what version of Tailwind you are using please?