Improved Tailwind Config Docs

[rishabkapadia]

Reason: To save time for those not well versed with tailwind config file.

By default, the modal view uses 2xl as mentioned in the ModalComponent.php file under modalMaxWidth() method. Also the docs mention to add the sm:max-w-2xl in the safelist.

But when I tried to return for eg. 4xl from the modalMaxWidth() in custom livewire component and add below code block to safelist it doesn't work.

public static function modalMaxWidth(): string
{
    return '4xl';
}

safelist: [
  'max-w-4xl',
  'sm:max-w-4xl',
],

That is because the ModalComponent.php maps xl, 2xl, etc width to a list of classes which the user needs to add in the safelist. for eg. for 4xl: sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl

Below seems like a better alternative to cover all the class combinations to make it work for various modal sizes used in a project:

safelist: [
  {
    pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
    variants: ['sm', 'md', 'lg', 'xl', '2xl']
  }      
],

ref: https://tailwindcss.com/docs/content-configuration#using-regular-expressions

Would be great if this code block could be added to the Docs instead of just mentioning sm:max-w-2xl in the safelist.