Why is my Tailwindcss & DaisyUI styling breaking when i move from TailwindCSS CDN to tailwindcss-rails gem

Question

Rails 7.1.3.2 app, not using Node (and ideally don't want to have to). I built whilst using the tailwindcss CDN and the DaisyUI CDN, both listed in the head of my application.html.erb:

<!-- <script src="https://cdn.tailwindcss.com"></script> --> (uses TailwindCSS v.3.4.5)

<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" /> (uses DaisyUI v.4.12.10)

In prep for production deployment, removing the Tailwindcss CDN script tag from application.html.erb and moving to the tailwindcss-rails gem (v.2.6.2 (the one that matches TailwindCSS 3.4.5)). Running: bundle update tailwindcss-rails bundle install bundle tailwindcss:install bin/rails assets:clobber bin/rails assets:precompile, I now have various styling elements that break:

• <hr> default styling changes and explicit TailwindCSS utility classes or application.tailwind.css component @apply rules or important statements fail to style the elements. <hr class="my-2">
• DaisyUI dropdown elements' utility class explicitly defined widths get lost, e.g. <details class="conversations-dropdown dropdown dropdown-end w-11 h-11 mr-2 flex justify-center items-center">.
• DaisyUI card elements' utility class applied positioning no longer has any effect; <div class="card w-96 bg-base-100 fixed right-8 bottom-8">

I uncomment the TailwindCSS CDN and styling is all fine, I comment it out and the above listed elements, and perhaps others that I haven't found, breaks.

Relevant code extracts:

application.html.erb

<!-- <script src="https://cdn.tailwindcss.com"></script> --><!--styling lost with this commented-->
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

gemfile.rb

gem "tailwindcss-rails", '~> 2.6.2'

gemfile.lock

tailwindcss-rails (2.6.2)
      railties (>= 7.0.0)
    tailwindcss-rails (2.6.2-aarch64-linux)
      railties (>= 7.0.0)
    tailwindcss-rails (2.6.2-arm-linux)
      railties (>= 7.0.0)
    tailwindcss-rails (2.6.2-arm64-darwin)
      railties (>= 7.0.0)
    tailwindcss-rails (2.6.2-x86_64-darwin)
      railties (>= 7.0.0)
    tailwindcss-rails (2.6.2-x86_64-linux)
      railties (>= 7.0.0)

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
        ...
      },
      animation: {
        ...,
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
    require("daisyui"), // comment out for Docker
  ],
  daisyui: {
    themes: ["light", "dark", "cupcake"],
  },
}

application.tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes fadeOut {
  ...
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s
}

@layer components {
  ...
}

The tailwindcss-rails gem version page here for tailwindcss 3.4.5 matching version.

Anybody got any idea what I'm doing wrong and how to solve?

Answer 1

I've found a way to get my styling working without CDN, though uses Node & Yarn to build and tailwindcss config feels a mess. I took these steps:

• bin/rails assets:clobber then bin/rails tmp:clear
• bundle add cssbundling-rails (I was not using it before)
• rails css:install:tailwind:
  • did not allow the build process to overwrite my bin/dev
  • it deleted my assets/stylesheets/application.css manifest file and its link_directory line in assets/config/manifest.js
  • did allow the build process to create a ./tailwind.config.js file with the following contents: (note the addition of a stylesheet, something which tailwindcss docs explicitly say not to do) (and note that my original config/tailwind.config.js still exists with the same content in there. If i move this out to the root located file i get errors and if i just add the stylesheet content path into the config/ located file and delete the root located file i get errors)

./tailwind.config.js:

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js'
  ]
}

• yarn add daisyui
• bin/rails assets:clobber then bin/rails tmp:clear

Using cssbundling-rails gem uses node and yarn, so these files were also created in my app:

package.json:

    {
  "name": "app",
  "private": "true",
  "dependencies": {
    "autoprefixer": "^10.4.19",
    "daisyui": "^4.12.10",
    "postcss": "^8.4.40",
    "tailwindcss": "^3.4.7"
  },
  "scripts": {
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  }
}

yarn.lock: ...

Once I did this my styling began to work without the CDN linked in the head. My config feels like a mess and surely this can't be the right approach. Now to try to build a docker image to deploy, without copying over node or yarn.

Any guidance on an appropriate 'non node/yarn on prod machine, non CDN' method to get this working would be greatly appreciated.