Joomla自定义告警栏样式的方法

Joomla模板开发中经常会对当前分类下是否有文章进行判断，如果判断没有文章，则会出现一个提示框。本文则对常见的提示信息进行总结，结合tailwind CSS进行样式展示。

<div class="flex w-full m-2 p-2 rounded-md bg-teal-50 p-4 text-sm text-teal-500" x-cloak x-show="showAlert" x-data="{ showAlert: true }">
        <svg class="mr-3 h-5 w-5 flex-shrink-0 size-5 fill-teal-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M19 10.5a8.5 8.5 0 11-17 0 8.5 8.5 0 0117 0zM8.25 9.75A.75.75 0 019 9h.253a1.75 1.75 0 011.709 2.13l-.46 2.066a.25.25 0 00.245.304H11a.75.75 0 010 1.5h-.253a1.75 1.75 0 01-1.709-2.13l.46-2.066a.25.25 0 00-.245-.304H9a.75.75 0 01-.75-.75zM10 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
<div><b>Info alert: </b><?php echo Text::_('COM_CONTENT_NO_ARTICLES');?></div>