Running DaisyUI with Tailwind and jekyll-postcss gem

[oliwoodsuk]

Just wanted to make a note of this in case anyone else runs into this. The DaisyUI Tailwind plugin throws a weird JSON.parse error when using the jekyll-postcss gem:

Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'assets/css/style.css':
                    859: unexpected token at '🌼 daisyUI components 2.37.0  https://github.com/saadeghi/daisyui ✔︎ Including:   base, components, themes[29], utilities {"compiled_css":"/*\n! tailwindcss v3.2.1 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after...' etc

But only in production ...

After trying quite a few things, I ended up turning the logs off for Daisy, as the beginning of the error doesn't look anything like CSS. That worked. For some odd reason, a log message from DaisyUI was being prepended where it shouldn't. Not sure why, but I haven't come across any other mentions of this error, so am posting it here.

Working Tailwind config:

//tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: ["./_includes/**/*.html", "./_layouts/**/*.html", "./blog/*.html", "./_posts/*.html", "./*.html"],
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
  },
  plugins: [
    require("daisyui")
  ],
  daisyui: {
    logs: false
  }
};