Tailwind Classes don't get compiled

@Tray2 @Tray2 No, I run npm run build, I have no need for npm run dev. I have my apps hosted on a server and domain and dont run it locally. So I run npm run build directly on my development and production environment and it works correctly, as in when I use a new class Tailwind doesnt have compiled, I run npm run build and the class gets recognized on page refresh afterwards. I have this command bundled with php artisan optimize:clear so it always runs after it. But I have used rounded-lr-lg before, i actually have used all rounded-side-lg classes before and they work fine and even now, If I use this class outside the dynamic code, it works fine. The table is a blade view component, that is used in a livewire (Not full page) component and If I put that class inside the component blade view and not from dynamic code generation it works: Class works outside And Im just blocked because If I have "'link-base bg-main-gray cursor-pointer rounded-tl-lg'" why would most of these work, but the rest not?

Basically I pass rows to the action table:

<x-action-table :rows="$rows"></x-action-table>

Those rows are put in @props and get processed in there like so:

@foreach ($rows as $entry)
<tr wire:key="entry-{{ $entry['id'] }}" class="text-center" style="border-bottom: 1px solid #e0e0e0;">
                    <div class="flex justify-center items-center">
                        @foreach ($entry as $key => $value)
                            @if(is_array($value))
                                   @if(!empty($action['onclick']))
                                       ...
                                   @else
                                       <button type="button" onclick="window.open('{{ $action['route'] }}', '_blank')"  class="py-2 px-2 {{ $action['class'] }}">{!! $action['innerHTML'] !!}</button>

So the classes in createAction (2nd parameter) go in the $action['class'].

'I have no need for npm run dev' - you're wrong. If you're using npm run build to do a production build, dev will help you during your development. It will also tell you if the files you're saving are being tracked as and when you save your files and it does a fresh compile.

@bvfi-dev There is no rounded-lr-lg class so of course it doesn't compilem, unless you have created it yourself.

@jaseofspades88 Yes, however my dev app is also on the same server, on the same domain and host, the only difference it being a subdomain website, so I have never used it, because npm run build and clearing the cache does what I need it to do. This is an issue of class names being passed at the wrong time during the lifecycle because the class doesnt apply to the class name. So, read this: I have added rounded-tr-lg inside the action-table View Component and now the rounded-tr-lg is getting recognized. I have all four directions of that class: the -bl- -br- -tl- and -tr- If I add rounded-tl-lg ANYWHERE inside the action-table, then it works, the createAction works as intended...So, I just randomly added it to some invisible divs and now its working...Thats literally all I did, just added them to the action-table view component. But, I dont like this dirty solution, I want it to work as intended

This was added in the action-table:

<div class="rounded-tr-lg rounded-tl-lg rounded-bl-lg rounded-br-lg hidden"></div>

And it just works. So, this leads me to believe that passing classes like I do, for some reason, happens after the tailwind classes get compiled and therefore the app.css doesnt contain this border thing in it and it doesnt get applied.

P.S. When I run npm run dev then this is what my webpage looks like: Basically Tailwind gets yeeted

@Tray2 Sorry, dont mind the syntax errors, I have written many of them manually, but I meant tr and it is so in my code. Actually, in my code (createAction() functions), i have all of them in there rounded-tr-lg rounded-tl-lg rounded-bl-lg rounded-br-lg, but I wanted to only paste and work with tr or just one, to simplify things. I have many createActions, which are buttons which get sorted depending on how many actions there are. Then I create a sort of eclipse button panel with rounded corners action rows and columns that are passed. But, anyways, could you please read the comment/reply I have written for jaseofspades88 above, because I have further explanations there?

@bvfi-dev Are you generating any elements using JavaScript? I'm not sure if classes used in pure js is discovered by Tailwind.

function someThing() {
		if(someCondition) {
        		document.querySelector('#some-element').classList.add('mt-8');
				//mt-8 not used anywhere else.
		}
}

@Tray2 No, I basically pass the string from a Livewire component into a Laravel Blade View Component like so: In the livewire component backend I have a public $rows used like so in the view: <x-action-table :headers="$headers" :rows="$rows"></x-action-table> So, $rows here is an array and I fill it like so 'actions' => ['actionName1' => $this->createAction(params, 2nd param is classes I pass and dont work), 'actionName2' =>$this->createAction(params), etc] (This is 1 entry in the $rows array).

Then in the action-table.blade.php I have:

@props(['headers', 'rows'])

And then the rest of it, I sent it earlier (The @foreach ($entry as $key => $value) ... code above). I apply the classes this way basically:

<button type="button" onclick="window.open('{{ $action['route'] }}', '_blank')"  class="py-2 px-2 {{ $action['class'] }}">{!! $action['innerHTML'] !!}</button>

And the classes get applied here: {{ $action['class'] }}. But now, I have added this piece of code in my action-table.blade.php: <div class="rounded-tr-lg rounded-tl-lg rounded-bl-lg rounded-br-lg hidden"></div>

And everything is working correct, I just dont know if this is the right solution.

Just incase you need to see the create action:

private function createAction($onclick, $class, $innerHTML = '', $route = ''): array
    {
        return [
            'onclick' => $onclick,
            'route' => $route,
            'class' => $class,
            'innerHTML' => $innerHTML,
        ];
    }

So, whatever I put as the second parameter, gets passed on to the action-table.blade.php as classes

@bvfi-dev That is probably the problem, tailwind doesn't know about those classes.

I'm guessing you are using the default Tailwind config file?

/** @type {import('tailwindcss').Config} */
export default {
  content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      "./resources/**/*.vue",
  ],
  theme: {
    extend: {
  
    },
  },
  plugins: [],
}

If so it only looks for classes in js, vue and blade files. You could probaby add your livewire classes to the list of content.

@Tray2 Sorry for the delayed response, but I also posted my tailwind.config.js in the original Post. It would seem that was the issue, I forgot a long time ago I split my code into Livewire components. But, Ialways had TailwindCSS classes in there work. It seems I have missed to add './resources/views/livewire/**/*.blade.php',. I added this file and now I no longer need to have a <div class=..></div> initializer

Just a general wonderment, is there a way to simply include all subfolders in ./resources/views/livewire/, because I might have subfolders in the future and Im not sure If this would handle it, and this would just look Bleh: './resources/views/livewire/**/**/*.blade.php', as repeat code?