Failed to Integrate daisyUI (plugin for TailwindCSS) with Angular

user_19128212 0
Viewed 1289

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/

daisyui tailwind-css angular css
2 Answers

Update TailwindCSS from version 2 to 3.

npm install tailwindcss@3

This worked for me.

user_17274870 
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.

user_150886780
Related