5

Hi guys here I want to integrate my Angular (12) with daisyUI (2.15.0). Everything goes right when I integrated the Angular with TailwindCSS (2.2.19), and also there's no problem with daisyUI installation. However, when I registered the daisyUI plugin into tailwind.config.js, the problem begin. Here is my tailwind.config.js :

module.exports = {
  content: ["./src/**/*.{html,js,ts}"],
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require("daisyui")], //everything goes right without this
};

The problem begin when I put the require("daisyui"). My Tailwind CSS Intellisense showed an error message:

Tailwind CSS: :4:1: Variant cannot be generated because selector contains no classes.

This problem caused my Angular can't be used anymore. Anyway I followed the instruction from this source: https://daisyui.com/docs/install/

  • I have the same issue and am still looking for a solution. Have you seen this https://github.com/tailwindlabs/tailwindcss/issues/1833? This did not solve my problem but believe it may surround what is being discussed. I will keep trying to work out how to fix... – ojhawkins Jun 05 '22 at 00:36

2 Answers2

4

Update TailwindCSS from version 2 to 3.

npm install tailwindcss@3

This worked for me.

ojhawkins
  • 3,200
  • 15
  • 50
  • 67
1
module.exports = {
  content: ["./src/**/*.{html,js,ts}"],
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
   plugins: [require(getDaisyUI())],
};
function getDaisyUI() {
  return "daisyui";
}

Same things happened with me while using tailgrids so I extraced this to a function in global scope.

function getDaisyUI() {
  return "daisyui";

like this and it solved it for me.

Muqtadir
  • 69
  • 1
  • 11
  • Please add a little textual explanation to your answer: Why and how does it work and what is the difference to the other answer given? – ahuemmer Jul 06 '22 at 13:08