Imiter le fichier de config de Tailwind en Sass

Après avoir enchaîné plusieurs projets utilisant Tailwind CSS, je démarre en ce moment un nouveau projet n’utilisant que Sass. Et c’est assez libérateur. Mais il y a un petit truc de Tailwind CSS qui me manque : son fichier de config (tailwind.config.js).

L’idée n’a rien de nouveau et on n’a pas attendu Tailwind pour créer des variables. Mais jusque là, mes fichiers de variables en Sass ressemblaient plutôt à un fichier monolithique avec une queue leu-leu de variables, un peu comme celui de Bootstrap.

Voici comment j’ai procédé pour imiter le fichier de configuration de Tailwind CSS v3.0 en Sass.

Dans un fichier _theme.scss, je définis une Map nommée $theme :

$theme: (
	'borderRadius': (
		'4xl': '2rem',
	),
	'colors': (
		'blue': '#1fb6ff',
		'purple': '#7e5bef',
		'pink': '#ff49db',
		'orange': '#ff7849',
		'green': '#13ce66',
		'yellow': '#ffc82c',
		'gray-dark': '#273444',
		'gray': '#8492a6',
		'gray-light': '#d3dce6',
	),
	'fontFamily': (
		'sans': unquote("Graphik, sans-serif"),
		'serif': unquote("Merriweather, sans-serif"),
	),
	'spacing': (
		'8xl': '96rem',
		'9xl': '128rem',
	),
);

Petite particularité : Sass interprète une suite séparée par des virgules comme une liste. Pour déclarer une fontFamily, j’utilise alors la fonction unquote() pour éviter ça et que la valeur soit une unique chaîne de caractères.

Ensuite, dans un fichier _functions.scss, je crée les fonctions qui vont me permettre de récupérer les valeurs définies dans le fichier de thème.

Par exemple, pour les couleurs :

@function color($key) {
	@return map-get($theme, "colors", $key);
}

Dans mes styles, je peux ensuite utiliser la fonction comme suit :

a {
	color: color('blue');
}

Pour récupérer n’importe quelle valeur du thème, je crée une fonction theme(), à la Tailwind CSS v4.0, que je peux utiliser ensuite comme suit :

.btn {
	border-radius: theme('borderRadius.sm');
}

Voici ma fonction theme() en question en Sass :

@function theme($key) {
	$keys: str-split($key, ".");
	$value: map-get($theme, $keys...);
	@if type-of($value) == 'map' {
		$default-value: map-get($value, 'DEFAULT');
		@if $default-value != null {
			$value: $default-value;
		}
	}
	@return $value;
}

J’ai fait en sorte qu’on puisse utiliser le mot-clé DEFAULT de Tailwind pour définir une valeur par défaut. Par exemple, avec la configuration suivante…

$theme: (
	'colors': (
		// ...
		'tahiti': (
			'light': '#67e8f9',
			'DEFAULT': '#06b6d4',
			'dark': '#0e7490',
		),
		// ...
	),
);

… je peux ensuite récupérer mes couleurs comme suit :

.media {
	background-color: theme('colors.tahiti');
	border-color: theme('colors.tahiti.dark')
}

Et voilà ! Tout ça n’a rien de révolutionnaire, et ça ne fait pas de Tailwind un modèle à suivre. Mais ça me plaît plutôt pas mal.