CSS from add-ons is overwritten

[helloDanuk]

Bug description

#13885 has already fixed a lot, so I am not sure what's happening here. In the following example, lg:grid-cols-3 works as intended. But adding md:grid-cols-2 overrides lg:grid-cols-3. I actually expect 3 columns to be displayed.

How to reproduce

• Create a widget… php please make:widget BestPracticeTipps
• php please setup-cp-vite
• npm run cp:build

<template>
    <Widget title="BestPracticeTipps">

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            …
        </div>
            
    </Widget>
</template>

Logs

Environment

Environment
Application Name: Statamic
Laravel Version: 12.52.0
PHP Version: 8.3.30
Composer Version: 2.9.3
Environment: stage
Debug Mode: ENABLED
URL: six-21-widgets-KEEP-IT.test
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: log
Queue: sync
Session: file

Storage
public/storage: NOT LINKED

Statamic
Addons: 3
Sites: 1
Stache Watcher: Disabled (auto)
Static Caching: Disabled
Version: 6.3.2 PRO

Statamic Addons
daun/statamic-original-filename: 1.1.1
mitydigital/statamic-sticky-notes: 2.0.0
statamic/seo-pro: 7.0.3

Installation

Fresh statamic/statamic site via CLI

Additional details

No response