代码之家 › 专栏 › 技术社区 › devio

有没有一种简单的方法可以将Tailwind CSS与Quarto一起用作博客的基本主题?

python-markdown tailwind-ui quarto tailwind-css

0

devio · 技术社区 · 2 年前

我想在所有的应用程序中使用顺风而不是引导,所以我使用了 include-in-header 。我使用了 example 来自Tailwind文档:

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

这是输出

正如你所看到的,我从Tailwind CSS官方网站上截取的代码片段并将其放在我的Quarto中 index.qmd 文件不起作用,不幸的是坏了。。

1 回复 | 直到 2 年前

1

Wongjn 2 年前

你会想使用 Play CDN ,而不是您包含的随机CSS和JS文件:

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

尽管要注意:

Play CDN仅用于开发目的,不是生产的最佳选择。

否则,您可以考虑集成Tailwind CLI, via NPM 或作为 standalone executable 。Tailwind构建过程与语言无关,因此它应该与您的项目一起使用(如果您使用的是独立的可执行文件,请替换 npx tailwindcss 带有可执行文件的路径):

创建顺风配置:
```
$ npx tailwindcss init
```

使用包含包含Tailwind类名的源代码的文件路径/globs the


      content

option :

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

有一个输入CSS文件:

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

运行编译:

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

包括


     output.css

项目中的文件:

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