Acabo de empezar con Nuxtjs 3.

Sin embargo, actualmente estoy trabajando en el frontend, junto con tailwind css y daisy ui.

Cada vez que agrego código html junto con los atributos CSS apropiados de Tailwind, solo se aplica a un área.

Independientemente de si agrego algunos divs o similares, no cambia. ¿Qué me perdí?

A continuación se muestra mi código.

index.vue

 <template> <div class="hero min-h-screen" style=" background-image: url(https://api.lorem.space/image/fashion?w=1000&h=800); " > <div class="hero-overlay bg-opacity-60"></div> <div class="hero-content text-center text-neutral-content"> <div class="max-w-md"> <h1 class="mb-5 text-5xl font-bold">Hello there</h1> <p class="mb-5"> Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi. </p> <button class="btn btn-primary">Get Started</button> </div> </div> </div> </template>

tailwind.config.js

 module.exports = { content: [ "./components/**/*.{js,vue,ts}", "./layouts/**/*.vue", "./pages/**/*.vue", "./plugins/**/*.{js,ts}", ], theme: { extend: {}, }, plugins: [require("daisyui")], }

nuxt.config.js

 import { defineNuxtConfig } from 'nuxt3' // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config export default defineNuxtConfig({ build: { postcss: { postcssOptions: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, }, }, css: [ "~/assets/css/tailwind.css" ], })

cómo debería verse