YNA Tailwind markup guide

Use tailwindcss according to the developer's recommendations, i.e.

• Use the mobile-first approach, i.e. pt-4 md:pt-8 lg:pt-12
• Use tw-classes in template and script code, as HTML is much easier to maintain
• Use @apply only when necessary in components like buttons, arrows, etc.
• If you need to implement CSS inheritance, use the tw-modifier group-hover, i.e. group-hover:text-red
• Do not use dynamic class names; instead, use the twig function attr(), otherwise these styles will be cleared during deployment
• In CSS components, use the theme function to access tw settings, i.e. background: theme('colors.grey.300')
• For elements with complex layouts (such as multi-level responsive menus), it is recommended to create CSS components
• For wysiwyg fields configured in CMS using Redactor plugin or similar, use the .redactor component (see usage guide inside)