Free components render extra large!

[BaltWeb]

I am new to Tailwind and would like to start by using the free of charge components, with code readily available to code and use from the Tailwind UI page. Taking the first Application UI free component as example to explain the issue, this :

https://tailwindui.com/components/application-ui/application-shells/stacked

Coping and pasting the HTML code to render, on running it does not render correctly; and is displayed very large in the browser, please see P1 & P2 attached.

This issue persists when running via the terminal / localhost and also when run with VS Code, Apache and Codepen. I also tested for this issue on a different pc using Codepen only; finding the same large rendering issue also.

Further to the above, I have gone further and tried some of the other free components available, with the same rendering issue also!

Please let me know what may be the root cause of the issue and how to resolve it?

[wongjn]

Consider providing a Tailwind Play that reproduces the unexpected behavior.

[wongjn]

You seem to be missing Tailwind in that CodePen. Here it is with only Tailwind CDN added, which seems to be visually as intended: https://codepen.io/Wongjn/pen/rNoeQoQ. Please note, Tailwind CDN is not recommended for production and is only used in the CodePen since we cannot run a Tailwind compilation there.

[BaltWeb]

As it should render as shown on Tailwind UI page:

3 screenshots of how is renders on Codepen and also on Apache and VS Code:

[wongjn]

Please see my previous comment: #11909 (reply in thread). It seems you have not included Tailwind-generated CSS in the webpage.

[BaltWeb]

Please explain further, as there I may have missed the instruction for this in UI HTML code; as there is for the two classes to add in this example. Kindly show me this instruction is shown?

[wongjn]

Consider reading the documentation to getting started.

[thecrypticace]

If it's not zoom related and components are rendering larger than you expect chances are that your browser or editor preview has a larger-than-normal font size specified which is the basis for the rem CSS unit and affects the spacing, sizing, and other scales that Tailwind uses. Another scenario in which this can happen is you are overriding the font-size in your CSS on the html element with a size that is larger than 16px.

A great way verify either of these is to add html { font-size: 16px } to the CSS and see if the components render normal size.

If neither of those help a CodePen with screenshots of everything you are seeing (CodePen UI included) will probably be necessary to figure out what the problem is.