Styliser les liens actifs EmberJS avec Tailwind

Par défaut, le routeur Ember ajoute une class .active à tous les liens pointant vers une route actuellement active. C’est une fonctionnalité bien pratique lorsque l’on cherche à leur donner un style.

Cependant, lorsque l’on utilise Tailwind, il n’y a pas de mécanique par défaut permettant de styliser ces liens actifs.

Utiliser @apply #

On pourrait être tenté par l’usage de @apply pour définir les styles appliqués au liens affublés lde la classe .active :

.active {
  @apply text-green-600;
}

Cela fonctionne mais va cependant à l’encontre de l’approche utility-first de Tailwind. Il devient, de plus, relativement difficile de varier les styles appliqués à des liens situés à des emplacements différents.

Utiliser une variante personnalisée #

Une approche plus efficace et permettant de tirer parti de tout ce que Tailwind a à offrir est d’utiliser une variante personnalisée. Pour ce faire, ouvrez for fichier tailwind.config.js pour y ajouter le code suivant :

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('active-link', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => `.${e(`active-link${separator}${className}`)}.active`);
      });
    })
  ],

  // reste de votre config…
};

Cela crée une nouvelle variante active-link qui sera activée dès lors que l’élément cible se verra appliqué la classe .active.

MAIS… cette variante ne peut être utilisée qu’après son activation :

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('active-link', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => `.${e(`active-link${separator}${className}`)}.active`);
      });
    })
  ],

  variants: {
    textColor: ['responsive', 'hover', 'focus', 'active-link']
  },

  // reste de votre config…
};

Vous pouvez maintenant styliser la couleur de vos liens comme vous en avez l’habitude avec Tailwind :

<LinkTo @route="some-route" class="text-gray-500 active-link:text-green-600" />

Ressources #

Vous pouvez en apprendre plus dans la documentation de Tailwind sur les variantes personnalisées.

Mis à jour le 17 juin 2020 #

Si vous tirez parti du support récent de PurgeCSS, les classes générées pour votre variantes vont probablement être éliminées du résultat final. Cela est dû au fait que la class active n’est pas présente dans le code et est uniquement insérée au runtime.

Pour contourner ce problème, ajoutée la classe aux réglages de purge :

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('active-link', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => `.${e(`active-link${separator}${className}`)}.active`);
      });
    })
  ],

  purge: {
    content: [
      'app/**/*.hbs',
      'app/**/*.js'
    ],

    options: {
      whitelist: ['active']
    }
  },

  variants: {
    textColor: ['responsive', 'hover', 'focus', 'active-link']
  },

  // rest of your config…
};

Cela va assurer que vos classes sont conservées dans le résultat final.