PrimeTek
Primevue Lara tailwind preset different from Figma file #1459
-
|
In the Figma file (using Lara light theme) the base font size is 14px where in presets for Tailwind the base font is 16px. That means everything is much bigger when translating into code and don't match what we design in Figma using PrimeOne 2.2.0. That creates many visual inconsistencies. I noticed on https://tailwind.primevue.org/button/ the sizes look correct and match with the Figma file - and I'm assuming tailwind presets are being used. Is there any extra configuration that needs to be added and is not documented on https://tailwind.primevue.org/nuxt/ or https://tailwind.primevue.org/vite/? e.g. extra tailwind configuration or css variables? I'm wondering whether anyone has come across this issue... Everything looks REALLY big and don't match the documentation. Many thanks! |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
Hi, since this is related to the presets, and I am the preset guy, I am here to help :) The primevue tailwind showcase uses 14px as the base. It is relatively easy to set. You only need to add the font size you want your rem units to be based on inside your HTML tag's style. When you add this, the rem units will base from that; otherwise, they will base from a tailwind or the browser, mostly 16px. I hope this will help 🌟 Have a nice day! Note: If you see any inconsistencies after that, you can always open up an issue in the primevue-tailwind repo. Sometimes, the line heights can be problematic. |
Beta Was this translation helpful? Give feedback.
-
|
@atakantepe I think it's a major drawback for using PrimeVue and PrimeBlocks. All components which are designed for copy + paste to enable rapid development are styled with TailwindCSS and a base font-size of 14px. Which makes PrimeVue incompatible with any other TailwindCSS components wich do not enforce any base font-size on the document level. The whole advantage of Tailwind offering an inline styling method to easily mix and match components from different sources is hereby destroyed. The components of PrimeBlocks should have been designed with the base font size of modern browsers, which is 16px - not 14px. This is what Tailwind itself is doing, so other libraries should follow the same approach. If I set the base font-size to 14px, I cannot add in Tailwind UI or Flowbite components for example. Since Tailwind classes use rem for all kinds of sizing, there is really only one way of setting the base size for the rem units and that is on the html tag level. So there's no way of combining Primevue components or Primeblocks with any other Tailwind components, which should work out-of-the-box and is a very big point of using Tailwind. |
Beta Was this translation helpful? Give feedback.
-
|
If someone is stumbling upon this issue, I came up with a solution that seems to work pretty well for the time being and as long as there is no official solution for this problem: |
Beta Was this translation helpful? Give feedback.
Hi, since this is related to the presets, and I am the preset guy, I am here to help :)
The primevue tailwind showcase uses 14px as the base. It is relatively easy to set. You only need to add the font size you want your rem units to be based on inside your HTML tag's style. When you add this, the rem units will base from that; otherwise, they will base from a tailwind or the browser, mostly 16px.
I hope this will help 🌟
Have a nice day!
Note: If you see any inconsistencies after that, you can always open up an issue in the primevue-tailwind repo. Sometimes, the line heights can be problematic.