Postingan lainnya
Buku Ini Koding!
Baru!
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
0
Belum ada Jawaban. Jadi yang pertama Jawaban
Login untuk ikut Jawaban