Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tailwind CSS styled tabs for Drupal 8 Twig. See https://tailwindcss.com/docs/examples/navigation#tabs
{#
/**
* @file
* Theme override for a local task link.
*
* Available variables:
* - attributes: HTML attributes for the wrapper element.
* - is_active: Whether the task item is an active tab.
* - link: A rendered link element.
*
* Note: This template renders the content for each task item in
* menu-local-tasks.html.twig.
*
* @see template_preprocess_menu_local_task()
*/
#}
{% if is_active %}
{% set classes = ['mr-1', '-mb-px'] %}
{% set link = link | merge({
'#attributes': {
'class': ['border-gray-lightest', 'border-l', 'border-t', 'border-r', 'rounded-t', 'bg-white', 'inline-block', 'py-2', 'px-4', 'text-blue', 'hover:text-gray', 'font-semibold']
}
}) %}
{% else %}
{% set classes = ['mr-1'] %}
{% set link = link | merge({
'#attributes': {
'class': ['bg-white', 'inline-block', 'py-2', 'px-4', 'text-blue', 'hover:text-gray', 'font-semibold']
}
}) %}
{% endif %}
<li{{ attributes.addclass(classes) }}>{{ link }}</li>
{#
/**
* @file
* Theme override to display primary and secondary local tasks.
*
* Available variables:
* - primary: HTML list items representing primary tasks.
* - secondary: HTML list items representing primary tasks.
*
* Each item in these variables (primary and secondary) can be individually
* themed in menu-local-task.html.twig.
*/
#}
<ul class="list-reset flex border-b border-gray-lightest my-5">
{% if primary %}
{{ primary }}
{% elseif secondary %}
{{ secondary }}
{% endif %}
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment