This is a fairly old question, I suppose, but I’ll ask it anyway. Is it all right to use Bootstrap and Tailwind in the same project. For example, is it okay to use Bootstrap on one page, and Tailwind on another, or is that a bad idea? I saw some mention of the fact that Bootstrap is getting less popular than Tailwind for CSS, and wonder if that is true.
When using both bootstrap and tailwind on the same page, the common utilities might conflict and the latter css import wins. Here is a list chatgpt gave me.
m-0
,m-1
,m-2
, …p-0
,p-1
,p-2
, …text-center
text-left
text-right
text-muted
/text-gray-500
d-block
/block
d-inline
/inline
d-flex
/flex
justify-content-center
/justify-center
align-items-center
/items-center
w-100
/w-full
h-100
/h-full
rounded
border
shadow
bg-primary
/bg-blue-500
text-white
font-bold
But, using bootstrap and tailwind on different pages shouldn’t cause any issues. Ensure you activate them on the individual pages from File > Plugins and Libraries
. Note, I personally haven’t tried it, so please validate this.
With regards to which one is better is a very subjective question. Personally, for me tailwindcss wins as Pinegrow makes it easy with it’s internal compiler, so you don’t have to install node packages in your project or run commands in terminal in watch mode; you just activate tailwind and the design panel, and pinegrow tailwind addon takes care of the optimised compilation in the background.
But there is a learning curve with tailwindcss compared to using bootstrap. Long time bootstrap users will prefer bootstrap. Php, Jquery, React, Bootstrap all get the first-mover lock-in advantage over technologies that came after them, and will stay forever.