Tailwind CSS v4 and BladeWind UI use the same utility class names #18231

ye42 · 2025-06-05T14:31:29Z

ye42
Jun 5, 2025

Tailwind CSS v4 and BladeWind UI use the same utility class names (.p-4, .mx-auto, etc.) causing CSS conflicts. There is no config file in Tailwind v4, so prefixing isn’t the issue. Even on normal divs, BladeWind CSS styles override Tailwind classes. How can I prevent this conflict?

it's a normal tw class but searching with bladewind-ui.min.css, not app.css with vite

here my html `

<head>
    
    {{-- Meta tags --}}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- Generate seo tags --}}
    {!! SEO::generate() !!}
   

    {{-- Favicon --}}
    <link rel="icon" type="image/png" href="{{ src( settings('general')->favicon ) }}"/>

    

    <wireui:scripts />

    {{-- Css styles --}}
    <link href="{{ url('vendor/bladewind/css/animate.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendor/bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" />

    {{-- Custom fonts --}}
	{!! settings('appearance')->font_link !!}
    @vite(['resources/css/app.css','resources/js/app.js'])
    {{-- Custom css --}}
    <style>
        :root {
            --color-primary-h: {{ hex2hsl( settings('appearance')->colors['primary'] )[0] }};
            --color-primary-s: {{ hex2hsl( settings('appearance')->colors['primary'] )[1] }}%;
            --color-primary-l: {{ hex2hsl( settings('appearance')->colors['primary'] )[2] }}%;
        }
        html {
            font-family: @php echo settings('appearance')->font_family @endphp, sans-serif !important;
        }
    </style>

    {{-- Inject custom css --}}
    @stack('styles')

    {{-- JavaScript variables --}}
    <script>
        __var_app_url        = "{{ url('/') }}";
        __var_app_locale     = "{{ app()->getLocale() }}";
        __var_rtl            = @js(config()->get('direction') === 'ltr' ? false : true);
        __var_primary_color  = "{{ settings('appearance')->colors['primary'] }}";
        __var_axios_base_url = "{{ url('/') }}/";
        __var_currency_code  = "{{ settings('currency')->code }}";
    </script>

    {{-- Livewire styles --}}
    @livewireStyles

    {{-- Custom head code --}}
    @if (settings('appearance')->custom_code_head_admin_layout)
        {!! settings('appearance')->custom_code_head_admin_layout !!}
    @endif

    <script src="https://unpkg.com/@phosphor-icons/web@2.0.3"></script>`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Tailwind CSS v4 and BladeWind UI use the same utility class names #18231

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Tailwind CSS v4 and BladeWind UI use the same utility class names #18231

Uh oh!

Uh oh!

ye42 Jun 5, 2025

Replies: 0 comments

ye42
Jun 5, 2025