Postingan lainnya

Buku Ini Koding!

Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!

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