'Tailwind not loaded with nextjs

I'm tring to crete an app using tailwindcss and next.js

I sterted creating the nextjs app, then I runned these commands:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

After that I updated the tailwind.config.js like:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And, then I created and populated the ./syles/globals.css with:

@tailwind base;
@tailwind components;
@tailwind utilities;

all this step by step is on the website:https://tailwindcss.com/docs/guides/nextjs but still any attempt at customization doesn't work, is there any way to know if tailwind has been loaded? Was there something missing to be done?

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source