Tengo una página de diseño que carga otro archivo html usando jquery en la división de contenido principal cuando el usuario hace clic
diseño.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="/assets/favicon.png"> <link rel="stylesheet" href="/dist/css/Shared/layoutTailWind.css"> <title>Todo List App</title> </head> <body> <div id="layoutApp" class="h-screen w-full bg-white relative flex overflow-hidden"> <div id="mainContentApp"> </div> </div> </body> </html>diseño.js:
import 'tw-elements'; $('#mainContentApp').load(`/Views/Content/Content.html`); var script = document.createElement('script'); script.src = `/dist/js/Content/Content.entry.js`; script.defer = "defer" document.body.appendChild(script)En la página de contenido hay un componente selector de fecha de elemento de viento de cola
Contenido.html:
<div class="flex items-center justify-center"> <div class="datepicker relative form-floating mb-3 xl:w-96" data-mdb-toggle-button="false"> <input type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Select a date" data-mdb-toggle="datepicker" /> <label for="floatingInput" class="text-gray-700">Select a date</label> </div> </div>Este es mi tailwind.config.js:
const colors = require('tailwindcss/colors') module.exports = { content: [ "./Views/**/*.{html}", "./ClientApp/src/js/**/*.{js}", "tw-elements/dist/js/**/*.js" ], theme: { extend: { colors: { amber: colors.amber, emerald: colors.emerald, } }, }, plugins: [ require('tw-elements/dist/plugin')Window ], }El problema es que cuando uso el selector de fechas en layout.html, funcionó bien. Pero cuando lo uso en Content.html, la entrada está ahí, pero cuando hago clic en ella, la fecha emergente no aparece.
Intenté importar 'tw-elements' en ambos archivos js pero aún no funciona. No puedo entender por qué. Cualquier ayuda sería apreciada.