How to add Tailwind when I use foundation or bootstrap?

Beginners
1

Should I add Tailwind when I use foundation or bootstrap? If so check Tailwind in libraries and plugins?

Screen Shot 2020-09-02 at 5.10.34 PM
Screen Shot 2020-09-02 at 5.10.34 PM864Ɨ1072 80 KB
Screen Shot 2020-09-02 at 5.09.28 PM

2

You could use Tailwind by checking the ā€œActivateā€ link in the Libraries and Plugins Manager. Having said that, Iā€™m not sure how nicely it plays with either Foundation or Bootstrap. Each of those frameworks are really meant to be independent. There might be conflicts or unexpected behavior. What are you trying to achieve with Tailwind that you canā€™t with the other Frameworks?

1 Like
3

I watched your Tailwind Fantico tutorial. Applying classes in the ā€œinlineā€ button area and setting responsive-ness SM, LG, etc. is a lot easier with Tailwind than in PG Pro. Donā€™t have to switch from styling to elements to properties panels.

Q 1: In Tailwind where does clicking class or inline input buttons put classes, in a css file?

Q2: Clarify when/why I would want to use Tailwind as opposed to BB or Foundation please.

Q3: Does Tailwind UI contain themes - I guess that is the right word - like BB and Foundation?

Q4: Can I use Interactions with BB or Foundation?

4

Q1: When you add classes in Tailwind, you are just taking advantage of the stylesheet that the Tailwind designers put together. Remember, classes are used to let the browser know what styling should be added to a particular element. The classes (or inline modifications) are added directly to the HTML page. Look at the code for the element before and after you make an inline change

Q2: It is mostly a matter of choice. Each is a framework that operates a little differently. In Foundation you would added classes of ā€œcell small-4ā€ to get a region that is 4/12 (or 1/3) of the screen from small size up. In Bootstrap you would use ā€œcol col-sm-4ā€. Finally, for TailwindCSS you would added a class of ā€˜sm:w-1/3ā€™. However, Tailwind doesnā€™t have sliders, or filters, or some other JavaScript type elements built-in. So, you may slant away from Tailwind if you have a project that has these elements. All three are just a set of predesigned stylings that let you put the page together a little quicker.

Q3: Iā€™m sure there are sites out there with Tailwind themes. I donā€™t think there are any as big as the ones for Bootstrap or Foundation.

Q4: Interactions is a stand-alone library (not framework) that can be used with most any Framework. So, yes, it can be used with BB, or Foundation, or Tailwind.

Bob

2 Likes