B4J Question [ABMaterial] How to use js and css with Tailwindcss ?

MichalK73

Well-Known Member
Licensed User
Longtime User
For example, I want to make ABMCustomComponent based on js and css Tailwindcss. However, when it loads it into the page then all the ABMaterial css is disabled, it doesn't work.

This is what it looks like without tailwind enabled
As you can see, the first 2 lines are correctly displayed in ABMAterial css, but ABMCustomComponent from Tailwindcss is not.
1.png


And yes after including JS and CSS Tailwindcss.
You can see that the first 2 lines of ABMaterial components have lost their CSS properties but the CustomComponent from Tailwindcss is displayed correctly.

2.png


In Build Page:
    page.AddExtraJavaScriptFile("custom/tailwindcss341.js")
    page.AddExtraCSSFile("custom/tailwind.min.css")

Is there any way to solve this so that Tailwindcss doesn't interfere with ABMaterial ?
I ask because there are plenty of ready-made templates free that can be quickly used in ABMCustoComponent.

Link to finished components https://tailwindflex.com/

Other example
3.png4.png5.png6.png
 

alwaysbusy

Expert
Licensed User
Longtime User
You can try to make changes to the tailwind css to make it work so each 'tag' in such a component is uniquely identified by the browser (a lot of trial and error and no guarantee you succeed I'm afraid).

This is because you are using two complete frameworks (Materialize CSS and Tailwind CSS) and as they both cover the same things (buttons, labels, etc) and there is a race between both of them to win. ABMaterial is not made to mix with other complete frameworks.
 
Upvote 0
Top