Tailwind + Daisy UI, deploys broken css

Phoenix
1

Hi,
I’m using Chris McCord’s mix task for tailwind, and adding DaisyUI, and I have a problem:

  1. mix phx.server runs and page renders fine
  2. MIX_ENV=prod mix assets deply then MIX_ENV=prod phx.server runs and page looks fine
  3. flyctl --app purple-water-3078 deploy . builds and deploys healthy but the css is broken.

I’m guessing that it has to do with daisyUI — Install Tailwind CSS plugin.

Here are my settings:
tailwind.config.js:

module.exports = {
  content: [
    './js/**/*.js',
    "../lib/**/*.html.eex",
    "../lib/**/*.html.leex",
    "../lib/**/*.html.heex",
  ],
  theme: {
    extend: {
      colors: require('daisyui/colors'),
    },
  },
  plugins: [
    require('daisyui')
  ]
}

with config:

config :tailwind,
  version: "3.0.12",
  default: [
      args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css
      ),
      cd: Path.expand("../assets", __DIR__)
  ]

and in mix.exs:

      "assets.deploy": [
        "esbuild default --minify",
        "tailwind default --minify",
        "phx.digest"
      ],

and app.css:


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

body {
  @apply antialiased relative bg-yellow-100 font-sans;
}


header {
  @apply mb-8;
}

.container {
  @apply max-w-6xl mx-auto px-6;
}

ul {
  list-style-type: circle;
}

ol {
  list-style-type: numeric;
}

p {
  @apply mb-4;
}

h1 {
  @apply text-center text-green-900 font-extrabold text-3xl mb-8;
}

h2 {
  @apply text-center text-green-900 font-bold text-2xl mb-6;
}

#map {
  height: 500px;
}
  
.icon {
  fill: currentColor;
}


.garden-plot {
  @apply px-6 py-4 rounded-lg overflow-hidden shadow-lg border-solid border-2 border-yellow-700 mb-8 mr-2; 
}


/* LiveView specific classes for your customizations */

.invalid-feedback {
  color: #a94442;
  display: block;
  margin: -1rem 0 2rem;
}

.phx-no-feedback.invalid-feedback, .phx-no-feedback .invalid-feedback {
  display: none;
}

.phx-click-loading {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}

.phx-disconnected{
  cursor: wait;
}
.phx-disconnected *{
  pointer-events: none;
}

.phx-modal {
  opacity: 1!important;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.phx-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.phx-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.phx-modal-close:hover,
.phx-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* Alerts and form errors */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert p {
  margin-bottom: 0;
}
.alert:empty {
  display: none;
}
2

solution described here: deploy, RUN mix release, "failed to compute cache key: not found" - #12 by brainlid

1 Like
3

Oh wow I’m glad you figured this out. :smiley: