User Interface

## Typography

## Body font size

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.

## Rich text

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:

<div class="prose"> <!-- Some rich-text content with paragraphs, lists, links and etc. --> </div>

Here's an example content that's been wrapped with the `prose` class:

# Typography Demo

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 .

## Accusantium aspernatur autem enim

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:

1. Asperiores dicta esse maiores nobis officiis.
2. Accusamus aliquid debitis dolore illo ipsam molettiae possimus.
3. Magnam mollitia pariatur perspiciatis quasi quidem tenetur voluptatem! Adipisci aspernatur assumenda dicta.

Animi fugit incidunt iure magni maiores molestias.

### Consequatur iusto soluta

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:

Accusamus blanditiis labque delectus esse et eum excepturi, impedit ipsam iste maiores minima mollitia, nihil obcaecati placeat quaerat qui quidem sint unde!

A beatae lab deleniti explicabo id inventore magni nisi omnis placeat praesentium quibusdam:

- Dolorem eaque laboriosam omnis praesentium.
- Atque debitis delectus distinctio doloremque.
- Fuga illo impedit minima mollitia neque obcaecati.

Consequ eius eum excepturi explicabo.

## Adipisicing elit atque impedit?

### Atque distinctio doloremque ea qui quo, repellendus.

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.

### Accusamus iusto sint aperiam consectetur …

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 eos excepturi facilis fugit.

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.

### Dolorum ducimus expedita?

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.

1. Aspernatur at beatae corporis debitis.
   - Aperiam assumenda commodi lab dicta eius, “fugit ipsam“ itaque iure molestiae nihil numquam, officia omnis quia repellendus sapiente sed.
   - Nulla odio quod saepe accusantium, adipisci autem blanditiis lab doloribus.
   - Explicabo facilis iusto molestiae nisi nostrum obcaecati officia.
2. Nobis odio officiis optio quae quis quisquam quos rem.
   - Modi pariatur quod totam. Deserunt doloribus eveniet, expedita.
   - Ad beatae dicta et fugit libero optio quaerat rem repellendus./
   - Architecto atque consequuntur corporis id iste magni.
3. Deserunt non placeat unde veniam veritatis? Odio quod.
   - Inventore iure magni quod repellendus tempora. Magnam neque, quia. Adipisci amet.
   - Consectetur adipisicing elit.
   - labque eum expedita illo inventore iusto laboriosam nesciunt non, odio provident.

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.

  - Accusamus aperiam blanditiis `<p>` commodi
  - Dolorum ea explicabo fugiat in ipsum

- Commodi 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.

## Consectetur ea natus officia omnis reprehenderit.

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`.

### Ad alias atque culpa `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.

#### Cupiditate explicabo `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.

### Asperiores aspernatur autem error praesentium quidem.

#### Ad blanditiis commodi, doloribus id iste `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.