Is there a straightforward way to use Tailwind CSS with Quarto as a base theme for a blog?

Question

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

As you can see, the code snippet I took from from Tailwind CSS official website and put it in my Quarto index.qmd file doesn't work, and unfortunately breaks..

Answer 1

You'd want to use the Play CDN, not the random CSS and JS files you included:

format:
  html:
    include-in-header:
      - text: |
          <script src="https://cdn.tailwindcss.com/3.4.1"></script>

Though do be aware that:

The Play CDN is designed for development purposes only, and is not the best choice for production.

Otherwise, you could consider integrating the Tailwind CLI, via NPM or as a standalone executable. The Tailwind build process is language-agnostic so it should work with your project (if you are using the standalone executable, substitute npx tailwindcss with path to the executable):

1. Create a Tailwind configuration:

   $ npx tailwindcss init
   

2. Include file paths/globs that cover source code that contain Tailwind class names using the content option:

   module.exports = {
     content: [
       './path/to/index.qmd',
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

3. Have an input CSS file:

   /* input.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

4. Run a compilation:

   npx tailwind --input path/to/input.css --output path/to/output.css
   

5. Include the output.css file in your project:

   format:
     html: 
       css: path/to/output.css