packy
6 months ago
1412
4
Laravel

Add style tag to Laravel 7 Component with @section

Posted 6 months ago by packy

I love how Vue files have the ability to add style right in the file, keep things tidy and reusable if I want to copy to another project. Laravel 7 components have some great use cases but is there a way to add style to the component besides just inline? I can get away with Tailwind classes most the time, but sometimes I need some extra. I would love doing this in a component:

<div
    class="banner relative  bg-carbon-900 py-4 text-white font-heading tracking-wider text-center text-3xl uppercase border-green md:text-5xl">

    <p>{{ $text }}</p>

</div>

@section('head')
<style>
    .banner {
        transform: skewY(-5.6deg);
        margin-top: -89px;
        overflow: hidden;
        border-top-width: 20px;
        border-bottom-width: 20px;
    }


    .banner p:before,
    .banner p:after {
        border-top: 4px dotted white;
        content: '';
        display: table-cell;
        position: relative;
        top: 1.3rem;
        width: 45%;
    }
</style>
@endsection

This way it would add the style to the head of my site layout where the component is used. Yet, it doesnt, I imagine because it just renders the view? Maybe this could be added to Laravel 7??

Please sign in or create an account to participate in this conversation.