Nicolas Marien

Use Tailwind CSS with Quartz

Sep 14, 20243 min read

Context

When creating this website, I did not want to code every single element on the page. Since I have been using Obsidian quite a lot lately (journaling, work, etc …), I wanted to find a solution that integrates nicely with it. Of course Obsidian has its own solution for publishing a website based on notes in a vault: Obsidian publish. However, I did not want to spend the money just yet. So I stumbled upon Quartz and that appeared to do exactly what I wanted.

I have always been a huge fan of Tailwind CSS. It has always made CSS easier for me to use. So now the question is: how do I integrate Tailwind into my website?

My implementation

According to tailwind documentation, we can use several methods to use it. The first is to use tailwind CLI. But you must specify a CSS entry point for the tool to find the custom @tailwind directives. The other method is to use tailwind as a postcss plugin.

Quartz uses sass, and exposes both its internal styles as well as an entry point for us to put our custom styles: quartz/styles/custom.scss.

Quartz uses esbuild and a sass plugin to generate the CSS (see the source).

My solution is to use postcss inside the transform function provided by the sass plugin used by Quartz.

      sassPlugin({
        type: "css-text",
        cssImports: true,
        async transform(source) {
          const { plugins } = await postcssLoadConfig()
          const processor = postcss(plugins)
          const { css } = await processor.process(source, { from: undefined })
          return css
        },
      }),

I had an issue where postcss would not load the configuration file. So I used the postcss-load-config plugin. My configuration file is the same as the one presented in Tailwind’s documentation:

/** @type {import('postcss').Config} */
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

The last piece of the puzzle is to instruct Tailwind on how to find its classes. In my case, I want it to look for my posts inside my content directory, and in quartz components. In the official documentation there is an example of how to feed markdown content using remark. However, I could not get it to work properly. So I used marked instead.

import { marked } from "marked"
 
/** @type {import('tailwindcss').Config} */
export default {
  content: {
    files: ["./content/**/*.md", "./quartz/**/*.tsx"],
    transform: {
      md(content) {
        return marked.parse(content)
      },
    },
  },
  theme: {
    extend: {},
  },
  plugins: [],
}

And thanks to this, I can now use Tailwind with quartz!

Recent Notes