Postingan lainnya

Tailwind CSS pada laravel component tidak bekerja

Saya membuat component pada laravel, yang didalamnya terdapat tailwind.

Namun ketika saya coba gunakan pada views tidak bekerja

Kode file app/View/Components/Button.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Button extends Component
{
    /**
     * The button color.
     * @var string
     */
    public $color;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($color)
    {
        $this->color = $color;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.button');
    }
}

Kode file resources/views/components/button.blade.php

<button class="text-white px-3.5 py-2 rounded-lg font-semibold focus:outline-none focus:ring transition duration-300
        hover:ease-in-out hover:duration-500 hover:transform hover:scale-105 bg-{{ $color }}-600 hover:bg-{{ $color }}-700
        focus:ring-{{ $color }}-200">{{ $slot }}</button>

Kode file resources/views/button.blade.php

@extends('layouts.app')

@section('content')

<div class="space-x-2">
    <x-button color="green">Primary</x-button>
</div>

@endsection

Kode file tailwind.config.js

module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue"
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Kode resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Kode webpaack.mix.js

const mix = require('laravel-mix');

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss"),
    ]);

Kode resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <link rel="stylesheet" href="/css/app.css">
</head>

<body>

    <div
        class="antialiased tracking-tighter min-h-screen flex items-center justify-center @yield('bg-color', 'bg-white') @yield('text-color', 'text-white')">
        <div class="w-1/3">
            <div class="bg-white p-6 rounded-2xl">
                @yield('content')
            </div>
        </div>
    </div>

</body>

</html>

Terima kasih

tailwindcss laravel php

@Muhtasaq

10 Kontribusi 6 Poin

Dipost 3 tahun yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban