[Résolu] Récupération couleur Tailwind

MrSoul

6 Mar 2021 à 21:04

Bonjour,

Je suis en train de découvrir Tailwind et je cherche à faire un truc un peu avancé.

Le contexte :

Je cherche a utiliser des couleurs différentes (mais présente dans la conf) entre le border top et bottom. Hors, l'utility n'existe pas !

Je précise que je n'ai aucune difficulté à le faire en css, mais ce n'est pas l'idée ici.

Du coup, j'ai pensé créer un utility custom :

  plugins: [
    plugin(function({ addUtilities, addComponents, e, prefix, theme }) {

      const newUtilities = {
        '.dbox': {
          'border-top-color': '#ff0000',
          'border-bottom-color': '#00ff00',
        },
      }

      addUtilities(newUtilities)

    }),
  ]

Mais ce que j'aimerais, c'est pouvoir réutiliser les couleurs définis dans le thème avec un truc du genre :

'border-top-color': theme(colors.red),

Vous savez si c'est possible ?

MrSoul

6 Mar 2021 à 21:23

Autant pour moi, ça se fait directement dans la feuille de style :

@layer components {
	.volume {
		@apply bg-gray-800 border-t border-b;
        	border-top-color: theme(colors.gray.700);
        	border-bottom-color: theme(colors.black);
	}
}

Modifié par MrSoul (06 Mar 2021 - 21:23)

CSS et mise en forme, CSS3

[Résolu] Récupération couleur Tailwind