[Prettier Plugin] prettier-tailwind daisy ui formatting issues

[juanCortelezzi]

Hey there, just created a new Next.js project with tailwind and daisyui. When running prettier, it detects the prettier-plugin-tailwindcss and tries to run the formater. The issue is the following:

command: pnpm prettier src/pages/index.tsx

stdout output:

src/pages/index.tsx
🌼 daisyUI components 2.15.0  https://github.com/saadeghi/daisyui
  ✔ Including:  base, components, themes[3], utilities

import type { NextPage } from "next";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { Layout } from "@/components/Layout";

// more code here ....

and when running: pnpm prettier --write src/pages/index.tsx

the file output is:

🌼 daisyUI components 2.15.0  https://github.com/saadeghi/daisyui
  ✔ Including:  base, components, themes[3], utilities

import type { NextPage } from "next";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { Layout } from "@/components/Layout";

// more code here ....

As you can see, it is adding the output of daisyui in the file. Is this a problem with the tailwindcss prettier plugin, the daisyui tailwind plugin or prettier? Any suggestions on how to fix it?

Thanks!

[luizcarlos1405]

I'll add that the problem only happens for me when using the prettier inside node_modules/.bin and not when using a globally installed prettier. If I uninstall prettier-plugin-tailwindcss the problem stops.

This seems to be a specific bad interaction between daisyui and prettier-plugin-tailwindcss. Maybe there's something the daisyui team can do about it since it doesn't happen without it installed.

[saadeghi]

This is not something I can fix on my end. daisyUI just has console.logs in this file and it's meant to be printed on terminal after building the CSS, to inform the developer about the stuff daisyUI is adding.
It should only be on the terminal (because it's just a console.log) and should not be added to the output file.

A workaround is to disable daisyUI logs from tailwind.config.js:

module.exports = {
  //...
  daisyui: {
    logs: false,
    //...
  },
}

[luizcarlos1405]

Awesome, thanks!

[Apestein]

Yeah prettier-plugin-tailwindcss with daisy plugin breaks prettier. It works fine after uninstalling prettier-plugin-tailwindcss. We need a fix for this

[chriscarrillo]

@Apestein I had the same issue. Disabling the Tailwind extension in VSCode and then re-enabling it resolved the issue. 💯