Pour utiliser mes couleurs ainsi que certaines déclarations inexistantes dans tailwind css de manière simple et en utilisant au maximum ce framework, mon niveau à ce sujet étant, pour le moment, un peu limité et ne souhaitant pas trop perdre de temps dessus, j’ai conservé quelques déclarations dans un fichier CSS standard dans lequel j’utilise aussi ces déclarations.

Partie CSS standard

Pour déclarer des variables en CSS, il suffit de faire comme suit :

:root {

--aiop_blue : #1975bb;

--aiop_darkblue : #1f2937;

--aiop_darkgrey : #2c3338;

--aiop_green : #73b54a;

--aiop_lightblue : #c1e1f8;

--aiop_lightgreen : #e7f1ce;

--aiop_lightgrey : #d1d5db;

--aiop_lightred : #fde6e6;

--aiop_orange : #f6931e;

--aiop_red : #bf1e2e;

}

A partir de ce moment là, pour utiliser une de ces variables, il suffit d’utiliser une déclaration du type :

background-color: var(--aiop_blue); et la couleur affichée sera donc #1975bb

Partie tailwind css

Pour cette partie, il faut éditer le fichier tailwind.config.js se trouvant à la racine du projet et le modifier comme ceci :

theme: {

extend: {

colors: {

'aiop_blue' : '#1975bb',

...

'aiop_red' : '#bf1e2e',

},

width: {

'1/8' : '12.5%',

...

'7/8' : '87.5%',

'1/10' : '10%',

...

'9/10' : '90%',

}

},

Les classes seront alors utilisables dans les éléments HTML sous la forme :

border-aiop_green

w-1/8