DaisyUI not loading style

Question

Working on Rails 7 app where I added postcss and Tailwind, removed redundant tailwind gem and tailwind stylesheet_link_tag in the application.html.erb.

My problem starts when I wanted to include DaisyUI components. The install guide is pretty straightforward so I'm not sure what I'm doing wrong. I've added daisyui to plugins and added it through yarn.

Here is my setup, config/tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  mode: 'jit',
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/line-clamp'),
    require('daisyui'),
  ]
}

package.json:

{
  "dependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@tailwindcss/typography": "^0.5.9",
    "autoprefixer": "^10.4.14",
    "daisyui": "^2.51.3",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7"
  },
  "scripts": {
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  }
}

Running bin/dev:

DaisyUI not loading style

0 Answers0