Level 122
You need to let tailwind discover the additional widths. I remember I had the same issue and had to publish the config and view, and might have also added the config file to the tailwind monitored files.
1 like
Aug 25, 2022
7
Level 1
Cant change wire-ui Modal Width in Laravel 8.83.23 And PHP 7.4.26
I created a brand new Laravel Project with Jetstream (Livewire without Teams). Then I proceed to include the Wire Elements Modal library through: composer -require wire-elements/modal-. Then I put all the references in the main view and proceed to create a Livewire new component named: "modal-test". I changed the extends from the component controller from "Component" to "ModalComponent" and put some button on the view to call the modal and it works well. The problem comes when I try to change the modal width from "2xl (the default one)" to "4xl" or something else (The options are 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'), but nothing changes. Even If I clean the views and cache and everything else, the modal size is still the same no matter how much elements I put in it.
Even If I publish the modal configuration file and changed the default "2xl" size to anything else, the modal is still the same. All the other options works perfectly, like "closeModalOnEscape()", "closeModalOnClickAway()", etc. The only problem is the width.
Level 1
@Snapey Ok. I'm probably wrong. I published the view and config file, and alter the file "tailwind.config.js" like this:
const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
purge: {
content: [
'./vendor/wire-elements/modal/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
options: {
safelist: [
'sm:max-w-2xl'
]
}
},
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./vendor/wire-elements/modal/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./config/livewire-ui-modal.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};
Believing that's the way to tell Tailwind to monitor the modal component config and view files, but nothing changes. I even created a new project from 0 and the same happens.
Level 122
@galaners you seem to have a mix of tailwind 2 and tailwind 3 config?
Level 1
@Snapey I seriously can't tell. I just created the project and then I install Jetstream right away. I didn't alter any file after that but proceed to install the modal library.
webpack.mix.js:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
resources/css/app.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
resources/js/app.js:
import './bootstrap';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
app layout:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="57x57" href="{{ asset('img/favicon/apple-icon-57x57.png') }}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ asset('img/favicon/apple-icon-60x60.png') }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ asset('img/favicon/apple-icon-72x72.png') }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ asset('img/favicon/apple-icon-76x76.png') }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ asset('img/favicon/apple-icon-114x114.png') }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ asset('img/favicon/apple-icon-120x120.png') }}">
<link rel="apple-touch-icon" sizes="144x144" href="{{ asset('img/favicon/apple-icon-144x144.png') }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ asset('img/favicon/apple-icon-152x152.png') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('img/favicon/apple-icon-180x180.png') }}">
<link rel="icon" type="image/png" sizes="192x192" href="{{ asset('img/favicon/android-icon-192x192.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('img/favicon/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="96x96" href="{{ asset('img/favicon/favicon-96x96.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('img/favicon/favicon-16x16.png') }}">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel').' - '.$title }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@iconscout/[email protected]/css/line.css">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
@livewireStyles
@stack('styles')
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased bg-white overflow-x-hidden max-w-full">
@if (session('info'))
@livewire('toast', ['type' => '1', 'message' => session('info')])
@elseif(session('error'))
@livewire('toast', ['type' => '4', 'message' => session('error')])
@endif
<div>
<main>
{{ $slot }}
</main>
</div>
@livewireScripts
@livewire('livewire-ui-modal')
@stack('modals')
@stack('scripts')
</body>
</html>
Those are the files generated after Jetstream (Livewire).
Level 1
@Snapey Ok, I found out. I've to monitor the ModalComponent.php file within the vendor/wire-elements directory.
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./vendor/wire-elements/modal/src/ModalComponent.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
height: {
post_image_xl: "calc((((100vw * 2)/3) * 9)/32)",
post_image_lg: "calc((((100vw * 4)/5) * 9)/32)",
post_image: "calc((100vw * 9)/32)",
admin_master: "94vh",
},
},
},
plugins: [require('@tailwindcss/forms')],
};
3 likes
Level 51
Level 3
@galaners Thanks for your answer. It works fine for me too.
Please or to participate in this conversation.