Tailwind CSS styled tabs for Drupal 8 Twig. See https://tailwindcss.com/docs/examples/navigation#tabs

menu-local-task.html.twig

{#
/**
 * @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>

menu-local-tasks.html.twig

{#
/**
 * @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>