Merhaba dostlar, Tailwind ile tasarladığım componentlerim yarn dev yaptığımda kusursuz çalışıyor. Fakat yarn production olarak css çıktısı aldığımda buttonlarım ve bir takım css stillerim productionda eksik generate ediliyor.
Hatayı daha iyi anlamanız için bir kod örneği paylaşmak istiyorum. Büyük ihtimal component tasarımından ziyade config dosyamda bir eksik var. yardımlarınızı bekliyorum teşekkürler.
secondary.blade.php, ikincil button componentim.
@props(['color' => 'indigo'])
<button {{ $attributes->merge([
'type' => 'submit',
'class' => 'inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-'.$color.'-700 bg-'.$color.'-100 hover:bg-'.$color.'-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-'.$color.'-500']) }}>
{{ $slot }}
</button>
componenti blade de kullanma şeklim.
<x-buttons.secondary color="green">
Ürün Güncelle
</x-buttons.secondary>
yarn dev olarak sorunsuz render ediyor stilimi. Fakat yarn production aldığımda sadece bu buttonun sonrada verdiğim renk değişken render almıyor. color="green" color attributesini kaldırdığımda default olan indigo ise production modunda sorunsuz çalışmakta
bu da tailwind.config.js dosyam
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
]
};