How do I preview documents with Tailwind?

[younes-io]

Description

I want to use tailwind instead of Bootstrap in all the app, so I used include-in-header. I used the example from the Tailwind docs:

---
title: "Fake app"
pagetitle: "Fake page title"
subtitle: "Fake role"

format:
  html:
    include-in-header:
      - text: |
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.min.js"></script>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/base.min.css">
---



::: {.py-8 .px-8 .max-w-sm .mx-auto .bg-white .rounded-xl .shadow-lg .space-y-2 .sm:py-4 .sm:flex .sm:items-center .sm:space-y-0 .sm:space-x-6}
<img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face" />

::: {.text-center .space-y-2 .sm:text-left}
::: {.space-y-0.5}
Erin Lindford
::: {.text-lg .text-black .font-semibold}
Product Engineer
::: {.text-slate-500 .font-medium}
:::

<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
:::
:::

This is the output

[cscheid]

: {.text-lg .text-black .font-semibold}

What do you expect this to do?

[younes-io]

Sorry it was a typo from another snippet.

[younes-io]

I updated the post.. sorry for the typo..

[mcanouil]

@younes-io could you edit the title of your post to actually include your question? Than you.

[younes-io]

Done, thank you

[mcanouil]

The code shared is incorrect, you did not even close all the divs (5 opened, 3 closed) and you should not use raw HTML outside of raw inline/block elements (```{=html} or `TEXT`{=html}).
Also divs should be surrounded by empty lines.

If you write proper markdown (use a linter) it's going to work.

[younes-io]

Oh, I see.. you add the : for nested divs.. Thank you, I'll try to look into the docs to grasp this very well.

For the styling part, this is the expected render; now it works

[mcanouil]

The additional : is just a trick to see the nested level.
Pandoc does not care much as long as the divs open and close with at least three. Pandoc also does not care if the div open with six but close with three.

[mcanouil]

Regarding the styling, I don't know the CDN you are using but following Tailwind CSS official documentation (https://tailwindcss.com/docs/installation/play-cdn):

---
title: "Fake app"
pagetitle: "Fake page title"
subtitle: "Fake role"
format: html
include-in-header:
  text: |
    <script src="https://cdn.tailwindcss.com"></script>
---

```{=html}
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
```

Note that this has nothing to do with Quarto per se.

[mcanouil]

Here when following third party documentation:

Quarto document

HTML

--- title: "Fake app" pagetitle: "Fake page title" subtitle: "Fake role" format: html include-in-header: text: | <script src="https://cdn.tailwindcss.com"></script> --- ::: {.py-8 .px-8 .max-w-sm .mx-auto .bg-white .rounded-xl .shadow-lg .space-y-2 .sm:py-4 .sm:flex .sm:items-center .sm:space-y-0 .sm:space-x-6} ```{=html} <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="https://placehold.co/600x400.png" alt="Woman's Face" /> ``` :::: {.text-center .space-y-2 .sm:text-left} ::::: {.space-y-0.5} Erin Lindford :::::: {.text-lg .text-black .font-semibold} Product Engineer ::::::: {.text-slate-500 .font-medium} ::::::: ```{=html} <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2" >Message</button> ``` :::::: ::::: :::: :::

[younes-io]

@mcanouil : I really struggle to have Tailwind CSS working properly because it conflicts with Quarto's embedded Bootstrap..

Could you please let me know my options?
I want to have (almost full) control on the layouts.. for example, I created an esj template with Tailwind classes, but it's not properly rendering.. I spent many hours on this and it seems that it's a lot of CSS work; so I'm wondering if there is a way to reduce all this CSS "debugging" and have a way to either "configure" a different theme (other than the built-in Bootstrap) or completely build my own theme from scratch.. Because, from what it seems in Quarto's docs, a "theme" means a "look and feel" on top of Bootstrap.
The bootstrap links are still generated on the HTML, so I'm just hopelessly seeking advice

[mcanouil]

Quarto website/book structure are based and used Bootstrap.
I am not aware of CMS or tools like that offering the ability to use several frameworks with a satisfying result.

So if you want to completely build a website from scratch using tailwind, I am not sure Quarto is the tool you want at least in its current version.

You could try minimal: true, but this will also disable several features that use Bootstrap.

[younes-io]

okay, thank you

[mcanouil]

FYI:

• How to use Tailwind css in quarto website? #8076

[younes-io]

yes, I already checked that one

[mcanouil]

It's for future readers.

[SivuyileNzimeni]

Just here to say thank you for this Q&A post. It has made a project I am working on much faster.