I just want to create components with tailwind css in javascript:
I started there adding an element:
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",
});
to my "ul" element.
I can see the element, but no css is applied. Does tailwind not work, if the element is built with javascript?
Tailwind purges the classes you dont need. If you build an element with javascript, tailwind cannot know that you will need for example text-gray-900 so it gets purged.
If you have any JavaScript files that manipulate your HTML to add classes, make sure you include those as well
module.exports = {
content: [
// ...
'./src/**/*.js',
],
// ...
}
You can read it here: https://tailwindcss.com/docs/content-configuration
The solution is most likely to use a code setup suited for tailwind. I believe quite a few JS frameworks have packages for tailwind, like react/preact, nextjs, etc. So you could use one of those, or try to customize your setup to work.
I found this in the docs: https://tailwindcss.com/docs/adding-custom-styles, maybe you can write code that registers classnames in tailwind, in some way, to prevent them from being purged?