Tailwind CSS v4 : erreur inconnue dans les règles @plugin, @custom-variant, @theme, @utility, @variant, @apply, @source, @reference du fichier global.css

Le recours à Tailwind CSS au sein d'un projet Next.js peut mener à un message d'erreur assez classique. Voici comment le solutionner

Tailwind CSS est un framework CSS orienté utilitaire (" utility-first ") qui permet de styliser des pages web directement dans le code HTML en assemblant de petites classes prêtes à l'emploi.

Suite à l'utilisation de Tailwind CSS dans le cadre du framework Next.js, il n'est pas rare d'aboutir à cette erreur :

Inconnu dans la règle @plugin css(unknownAtRules)
Inconnu dans la règle @custom-variant css(unknownAtRules)
Inconnu dans la règle @theme css(unknownAtRules)
Inconnu dans la règle @utility css(unknownAtRules)
Inconnu dans la règle @variant css(unknownAtRules)
Inconnu dans la règle @apply css(unknownAtRules)
Inconnu dans la règle @source css(unknownAtRules)
Inconnu dans la règle @reference css(unknownAtRules)Le contenu du fichier global.css sera typiquement le suivant : 

@import "tailwindcss";

@plugin "tailwindcss-animate";

@custom-variant dark (&:is(.dark *));

@theme inline {
  /* theme customization */
}

Ici, le dysfonctionnement provient de directives TailwindCSS personnalisées que les IDE CSS ne prennent pas en charge par défaut. Si Visual Studio Code est utilisé comme environnement de développement, il est conseillé de recourir à l'extension IntelliSense officielle de TailwindCSS. 

Dans ce cas, il est aussi conseillé d'indiquer à Visual Studio Code que les fichiers .css doivent être traités comme des fichiers TailwindCSS. Partant de là, le paramètres files.associations pourra être utilisé comme suit :

{
  "files.associations": {
    "*.css": "tailwindcss",
    "*.scss": "tailwindcss",
  },
}