Radio and Checkbox lose styling in prod mode

[jacekschae]

I'm wondering what i'm doing wrong 🤔. I have a form with input, radio, select, and checkbox elements. I know that my configuration with @tailwindcss/forms is valid since in dev mode; all form elements are displayed correctly -- with styling.

tailwindcss build ./src/dev/tailwind.css -o ./public/css/main.css

Yet when I run the production

NODE_ENV=production postcss build ./src/dev/tailwind.css -o ./public/css/main.css

I'm losing styling on radio and checkbox elements, select seems to be not impacted and I'm wondering why?

/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// tailwind.config.js
module.exports = {
  purge: {
    content: ["./public/**/*.html", "./src/main/**/*.cljs"]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

// postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    cssnano({ preset: 'default' }),
  ]
}

Output when running (all ok):

tailwindcss build ./src/dev/tailwind.css -o ./public/css/main.css

Output when running (radio and checkbox lose styling):

NODE_ENV=production postcss build ./src/dev/tailwind.css -o ./public/css/main.css

Any ideas or pointes what I could change to make this work would be appreciated.

[jacekschae]

I fixed it with the release of tailwind-jit https://github.com/jacekschae/shadow-cljs-tailwindcss

[jtormey]

I'm seeing an issue that might be related to this, but am not 100% sure.

When building for production specifically, checkboxes lose their SVG background due to what looks like an invalid data URI. The following is what I see in the browser style inspector...

In development:

[type='checkbox']:checked {
    background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e);
}

In production:

[type=checkbox]:checked {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 10 1.414 NaN NaNlNaN NaNa1 1 0 1-1.414 NaN NaNlNaN NaNa1 1 0 11.414-1.414 NaN NaNlNaN NaN NaN NaNa1 1 0 11.414 0 NaN NaNz'/%3E%3C/svg%3E);
}

No other styles are affected, from what I can tell. The NaNs in the data URI seem to be the problem to me, but I'm not sure where they would be coming from.

This was tested using @tailwindcss/jit 0.1.18 and @tailwindcss/forms 0.3.1. For context, I also have @tailwindcss/ui 0.7.2 and @tailwindcss/aspect-ratio 0.2.0 installed and in use. I'm happy to provide more information if needed!

[crenwick]

I'm seeing this same NaN issue on my production build as well. I have also nailed this down to being something with cssnano. Curious if you were able to dig into what's happening or if there's a fix?

tailwind "version": "2.0.3"
forms "version": "0.2.1"

[jasonlimantoro]

I experience this issue with strategy class, but fine with the default strategy.

[chasegiunta]

@jtormey @crenwick @jasonlimantoro If you were seeing this with the class strategy, and were using something like cssnano somewhere in your pipeline, it was probably combining your form- style declarations in production and breaking on a typo I made in the original class strategy PR (sorry).

I've opened a PR for it here #72 .

[anton-papaja]

Having the same NaN issue with checkboxes on our production as well. Does anybody know about a fix or workaround for this yet?

[cc1776]

@adamwathan @chasegiunta i think this is still an issue. i am using forms 0.3.3 and am experiencing it. can this be re-opened?

[chasegiunta]

@cc1776 0.3.3 fixed the issue i was seeing with with a misspelled :checked selector . The NaN issue in SVGs is completely separate and sounds like it may be stemming from something else in the pipeline like cssnano. If it's not a direct dependency of your project, you may want to try explicitly adding the latest version, as another dependency may be using an older version.

[cc1776]

@chasegiunta thanks, upgrading cssnano did the trick!

[tance77]

cssnano is used by css-loader updating css-loader which uses cssnano fixed this for me.