Solo quiero crear componentes con tailwind css en javascript:
Empecé allí agregando un elemento:
let myil = document.createElement("li", { onclick: 'check("5");', class: "text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9", zip:"listbox-option-0", id: "listbox-option-5", role: "option", });a mi elemento "ul".
Puedo ver el elemento, pero no se aplica css. ¿El viento de cola no funciona si el elemento está construido con javascript?
Tailwind purga las clases que no necesitas. Si crea un elemento con javascript, Tailwind no puede saber que necesitará, por ejemplo text-gray-900 para que se elimine.
Si tiene archivos JavaScript que manipulan su HTML para agregar clases, asegúrese de incluirlos también.
module.exports = { content: [ // ... './src/**/*.js', ], // ... }Puede leerlo aquí: https://tailwindcss.com/docs/content-configuration
Lo más probable es que la solución utilice una configuración de código adecuada para el viento de cola. Creo que algunos marcos JS tienen paquetes para viento de cola, como reaccionar/preact, nextjs, etc. Así que podría usar uno de esos, o intentar personalizar su configuración para que funcione.
Encontré esto en los documentos: https://tailwindcss.com/docs/adding-custom-styles , ¿quizás puedas escribir un código que registre los nombres de clase en Tailwind, de alguna manera, para evitar que se eliminen?