[BUG] How to add Tailwind css globally with basset?

[blondie63]

I've used Tailwindcss because i'm just using it in other blades but my previous developer import it in each blade with:

Now i'd like to use basset to have last tailwind 3.4.3 version global and optimized Can you advise me how to do it?

Originally posted by @blondie63 in Laravel-Backpack/community-forum#906 (reply in thread)

[karandatwani92]

Hey @blondie63

Try this(assuming you are using theme-tabler):

1. Publish the theme config file:

php artisan vendor:publish --tag="theme-tabler-config"

2. Open theme config config\backpack\theme-tabler.php and add it to styles array:

'styles' => [
        base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'),
        base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css'),
+       'https://cdn.example.com/version.css'
+       'https://cdn.tailwindcss.com/3.4.3'
    ],

While doing it, I found a Bug. I'm assigning my colleague @pxpm to fix this:

BUG

While adding https://cdn.tailwindcss.com/3.4.3' I found an issue with the basset. It is not currently working for URLs without extensions.

[pxpm]

Hey @karandatwani92 thanks for the heads up.

I acknowledged that at the moment it's not possible to load urls without extension that easily.

For @blondie63 a "quick" workaround is to create a file in your public/assets/js/tailwind-3.4.3.js, download the contents from https://cdn.tailwindcss.com/3.4.3 into that file, and then load the local file with: public_path('assets/js/tailwind-3.4.3.js').

---

I will leave here also for future me and anybody that may have interest in this topic what I've tried/found while researching this.

I didn't came up with something I would be happy with. (I mean, small changes and not hacking a solution).

I think this may need some refactoring on basset workflow to be properly supported.

When you give an url without .css or .js, to basset(), we don't know if we should output <style> or <script> tags. In this case (tailwind cdn) it should be a <script> tag.

We can get the content-type header and display the tag accordingly, but that means 1 additional request to that asset.

Something along the following lines:

 if(Str::isUrl($path)) {
            $response = Http::get($path);
            $contentType = $response->header('content-type') ?? '';
            if(Str::contains($contentType, 'javascript')){
                $this->echoJs($path, $attributes);
            }else if(Str::contains($contentType, 'css')){
                $this->echoCss($path, $attributes);
            }
        }

When in dev-mode this is cumbersome, 2 requests for the same asset. Maybe with an option to internalize external assets, even in dev mode like I suggested in #114

I tried appending .js, or .css to the file we save when caching, but then found other myriad of issue linking back the internalized asset with the extension appended, with the url without extension.

I think @promatik can help here.