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

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/tailwindcss@3.4.1/lib/index.min.js"></script>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/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..

Solution

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):

Create a Tailwind configuration:
```
$ npx tailwindcss init
```

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: [],
}

Have an input CSS file:

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

Run a compilation:

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

Include the output.css file in your project:

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