tailwindcss-custom-forms icon indicating copy to clipboard operation
tailwindcss-custom-forms copied to clipboard

`form-checkbox` does not show check in a Laravel project

Open mst101 opened this issue 5 years ago • 0 comments

The css generated when a checkbox with class form-checkbox is checked is:

background-image: {
    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='//www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e")
}

However, the check does not show; I can only see a fully-filled-in blue box with no check.

If I manually modify the css to escape all single quotes and add http: to the w3.org link instead of //, then it works correctly:

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=\'M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z\'/%3e%3c/svg%3e")
}

I am using: "@tailwindcss/custom-forms": "^0.2.1", "tailwindcss": "^1.6.0",

...on a Laravel 7 project. N.B. It works fine when I use it from within a vue-cli project.

Thanks

mst101 avatar Aug 01 '20 13:08 mst101