Replace flux:textarea inline style with tailwindcss class

[ghabriel25]

The scenario

Although I can't seem to reproduce this issue #2627, I think this might be better to use tailwind class on flux:textarea since this style not exposed to Alpine like flux:progress in #2512.

We can revert it if this style need to be set dynamically using Alpine. I just never see the need of it, at least for me.

The problem

flux:textarea current template using inline style for resize type and field-sizing.

<textarea
    ...
    style="{{ $resizeStyle }}; {{ $rows === 'auto' ? 'field-sizing: content' : '' }}"
    ... 
    >{{ $slot }}</textarea>

The solution

Change inline style with tailwindcss class which can cover it all.

$classes = Flux::classes()
    ...
    ->add($rows === 'auto' ? 'field-sizing-content' : '')
    ->add($resize ? match ($resize) {
        default => 'resize', // to prevent unhandled match type when user only provide the attribute without value
        'none' => 'resize-none',
        'both' => 'resize',
        'horizontal' => 'resize-x',
        'vertical' => 'resize-y',
    } : 'resize-none')
    ...

File Changes

• stubs/resources/views/flux/textarea.blade.php

[troccoli-sgr]

I think this could be improved.

If $resize is not defined this would use resize-none but the original default was resize-y.

To make sure that $resize is always defined, and defaults to vertical, you can use

$resize ??= 'vertical';

just before setting the classes, and maybe remove the default in the props.

Then this block can be simplified as

Suggested change

	->add($resize ? match ($resize) {
	default => 'resize', // to prevent unhandled match type when user only provide the attribute without value
	'none' => 'resize-none',
	'both' => 'resize',
	'horizontal' => 'resize-x',
	'vertical' => 'resize-y',
	} : 'resize-none')
	->add(match ($resize) {
	'none' => 'resize-none',
	'both' => 'resize',
	'horizontal' => 'resize-x',
	'vertical' => 'resize-y',
	default => 'resize-y'
	})

what do you thnk?

[calebporzio]

Thanks @ghabriel25! Since removing an inline style can be load-bearing, I verified this one behaviorally (fresh Laravel app, Flux as a path repo, computed styles compared on main vs this branch):

• resize default / none / horizontal / both: computed resize values identical in every mode.
• rows="auto": computed field-sizing: content intact, and the auto-grow behavior is unchanged (typed 8 lines into the textarea: grew 46px -> 186px on both branches).
• No JS dependency: the only textarea reference in Flux's JS is a focusable-elements selector, so nothing reads or writes these inline styles.
• Bonus fix worth calling out: on main, <flux:textarea resize /> (bare attribute) throws an UnhandledMatchError because the old match has no default arm. This branch renders it fine.

On @troccoli-sgr's note: $resize always has a value here — the prop defaults to 'vertical' — so the default path still produces resize-y/resize: vertical (confirmed in the computed styles above). The default arm only catches non-standard values like the bare attribute.

Two small thoughts: I'd move the default arm to the end of the match (valid where it is, but the end is where the eye expects it), and field-sizing-content / resize-x are Tailwind v4 utilities, which is fine since Flux already requires v4.

Nice cleanup — this also means user-supplied classes can actually override resize behavior now, which the old inline style silently blocked.