The default body text is set to 14px. This allows building more complex and dense layouts without needing too much screen space. Applications usually need to show a lot more information on one page compared to, let's say, a blog post. This requires more denser layouts hence the smaller default body font size.
When building a web application, you don't want to have default HTML element styles interfering with your design. This is because those style are designed for building web sites, therefore, Fuse takes advantage of Tailwind's reset styles to reset all element styles by default.
This way, you can build complex layouts and application interfaces without needing to reset element styles over and over again.
But this introduce a new problem when you actually want to show a rich-text content with paragraphs, lists, links, titles and other HTML elements. They will look bad and they won't be properly styled.
To overcome this issue, Fuse uses
Tailwind's Official Typography Plugin
which adds prose
class to provide typographic defaults:
Here's an example content that's been wrapped with the prose
class:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam lab et fugiat id magnam minus nemo quam voluptatem. Culpa deleniti explica nisi quod soluta.
Alias animi labque, deserunt distinctio eum excepturi fuga iure labore magni molestias mollitia natus, officia pofro quis sunt temporibus veritatis voluptatem, voluptatum. Aut blanditiis esse et illum maxim, obcaecati possimus voluptate! Accusamus adipisci amet aperiam, assumenda consequuntur fugiat inventore iusto magnam molestias natus necessitatibus, nulla pariatur.
Amet distinctio enim itaque minima minus nesciunt recusandae soluta voluptatibus:
Ad aliquid amet asperiores lab distinctio doloremque
eaque
, exercitationem explicabo, minus mollitia natus necessitatibus odio omnis pofro rem.
Alias architecto asperiores, dignissimos illum ipsam ipsum itaque, natus necessitatibus officiis, perferendis quae
sed ullam veniam vitae voluptas! Magni, nisi, quis! A accusamus
animi commodi, consectetur distinctio
eaque, eos excepturi illum laboriosam maiores nam natus nulla officiis perspiciatis rem reprehenderit sed
tenetur veritatis.
Consectetur dicta enim
error eveniet expedita, facere in itaque labore natus quasi? Ad consectetur
eligendi facilis magni quae quis, quo temporibus voluptas voluptate voluptatem!
Adipisci alias animi debitis
eos et impedit maiores, modi nam nobis officia optio perspiciatis, rerum.
Accusantium esse nostrum odit quis quo:
h1 a {{'{'}}
display: block;
width: 300px;
height: 80px;
{{'}'}}
Accusantium aut autem, lab deleniti eaque fugiat fugit id ipsa iste molestiae, necessitatibus nemo quasi .
Blanditiis, fugit voluptate! Assumenda blanditiis consectetur, labque cupiditate ducimus eaque earum, fugiat illum ipsa, necessitatibus omnis quaerat reiciendis totam. Architecto, facere illum molestiae nihil nulla quibusdam quidem vel! Atque blanditiis deserunt.
Debitis deserunt doloremque labore laboriosam magni minus odit:
Animi fugit incidunt iure magni maiores molestias.
Aliquid asperiores corporis — deserunt dolorum ducimus eius eligendi explicabo quaerat suscipit voluptas.
Deserunt dolor eos et illum laborum magni molestiae mollitia:
Autem beatae consectetur consequatur, facere, facilis fugiat id illo, impedit numquam optio quis sunt ducimus illo.
Adipisci consequuntur doloribus facere in ipsam maxime molestias pofro quam:
A beatae lab deleniti explicabo id inventore magni nisi omnis placeat praesentium quibusdam:
Consequ eius eum excepturi explicabo.
Delectus deserunt explicabo facilis numquam quasi! Laboriosam, magni, quisquam. Aut, blanditiis commodi distinctio, facere fuga hic itaque iure labore laborum maxime nemo neque provident quos recusandae sequi veritatis illum inventore iure qui rerum sapiente.
Aliquid assumenda ipsa nam odit pofro quaerat, quasi recusandae sint! Aut, esse explicabo facilis fugit illum iure magni necessitatibus odio quas.
Dolore natus placeat rem atque dignissimos laboriosam.
Amet repudiandae voluptates architecto dignissimos repellendus voluptas dignissimos eveniet itaque maiores natus.
Accusamus aliquam debitis delectus dolorem ducimus enim eos, exercitationem fugiat id iusto nostrum quae quos recusandae reiciendis rerum sequi temporibus veniam vero? Accusantium culpa, cupiditate ducimus eveniet id maiores modi mollitia nisi aliquid dolorum ducimus et illo in.
Ab amet deleniti dolor, et hic optio placeat.
Accusantium ad alias beatae, consequatur consequuntur eos error eveniet expedita fuga laborum libero maxime nulla pofro praesentium rem rerum saepe soluta ullam vero, voluptas? Architecto at debitis, doloribus harum iure libero natus odio optio soluta veritatis voluptate.
At aut consectetur nam necessitatibus neque nesciunt.
Aut dignissimos labore nobis nostrum optio! Dolor id minima velit voluptatibus. Aut consequuntur eum exercitationem fuga, harum id impedit molestiae natus neque numquam perspiciatis quam rem voluptatum.
Animi aperiam autem labque dolore enim ex expedita harum hic id impedit ipsa laborum modi mollitia non perspiciatis quae ratione.
Alias asperiores, aspernatur corporis delectus est facilis inventore dolore ipsa nobis nostrum officia quia, veritatis vero! At dolore est nesciunt numquam quam. Ab animi architecto aut, dignissimos eos est eum explicabo.
Adipisci autem consequuntur labque cupiditate
dolor ducimus fuga neque nesciunt:
module.exports = {{'{'}}
purge: [],
theme: {{'{'}}
extend: {{'{}'}},
},
variants: {{'{}'}},
plugins: [],
{{'}'}}
Aliquid aspernatur eius fugit hic iusto.
Culpa debitis explicabo maxime minus quaerat reprehenderit temporibus! Asperiores, cupiditate ducimus esse est expedita fuga hic ipsam necessitatibus placeat possimus? Amet animi aut consequuntur earum eveniet.
A aliquam architecto consequatur labque dicta doloremque <li>
doloribus, ducimus earum, est <p>
eveniet explicabo fuga fugit ipsum minima minus molestias nihil nisi non qui sunt vel voluptatibus? A dolorum illum nihil quidem.
Laboriosam nesciunt obcaecati optio qui.
Doloremque magni molestias reprehenderit.
<p>
commodiCommodi dolor dolorem dolores eum expedita libero.
Accusamus alias consectetur dolores et, excepturi fuga iusto possimus.
Accusantium ad alias atque aut autem consequuntur deserunt dignissimos eaque iure <p>
maxime.
Dolorum in nisi numquam omnis quam sapiente sit vero.
Adipisci lab in nisi odit soluta sunt vitae commodi excepturi.
Assumenda deserunt distinctio dolor iste mollitia nihil non?
Consectetur adipisicing elit dicta dolor iste.
Distinctio impedit quaerat sed! Accusamus aliquam aspernatur enim expedita explicabo . Libero molestiae odio quasi unde ut? Ab exercitationem id numquam odio quisquam!
Explicabo facilis nemo quidem natus tempore:
Wrestler | Origin | Finisher |
---|---|---|
Bret “The Hitman” Hart | Calgary, AB | Sharpshooter |
Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
Randy Savage | Sarasota, FL | Elbow Drop |
Vader | Boulder, CO | Vader Bomb |
Razor Ramon | Chuluota, FL | Razor’s Edge |
A aliquid autem lab doloremque, ea earum eum fuga fugit illo ipsa minus natus nisi <span>
obcaecati pariatur
perferendis pofro suscipit tempore
.
illum
earum optio
Architecto consequatur eveniet illo in iure laborum minus omnis quibusdam sequi temporibus? Ab aliquid “atque dolores molestiae nemo perferendis” reprehenderit saepe.
Accusantium aliquid eligendi est fuga natus, quos
vel? Adipisci aperiam asperiores aspernatur consectetur cupiditate
@distinctio/doloribus
et exercitationem expedita, facere facilis illum, impedit inventore
ipsa iure iusto magnam, magni minus nesciunt non officia possimus quod reiciendis.
hic
maiores
Aliquam amet consequuntur distinctio ea
est excepturi
facere illum maiores nisi nobis non odit officiis
quisquam, similique tempora temporibus, tenetur ullam voluptates
adipisci aperiam deleniti doloremque
ducimus eos
.
Ducimus qui quo tempora. lab enim explicabo hic
inventore qui soluta voluptates voluptatum? Asperiores consectetur
delectus dolorem fugiat ipsa pariatur, quas quos
repellendus repudiandae sunt aut blanditiis.
repudiandae
vero vitae.
Atque consectetur lab debitis enim est et, facere fugit impedit, possimus quaerat quibusdam.
Dolorem nihil placeat quibusdam veniam? Amet architecto at consequatur eligendi eveniet excepturi hic illo impedit in iste magni maxime modi nisi nulla odio placeat quidem, quos rem repellat similique suscipit voluptate voluptates nobis omnis quo repellendus.
Assumenda, eum, minima! Autem consectetur fugiat iste sit! Nobis omnis quo repellendus.