Quelle est la différence entre le CSS tailwind en ligne et le CSS tailwind multi-fichiers ?

Question

Devons-nous l'écrire en ligne comme :

• Fichier index .css contenant tous les lanceurs Tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

Ou dans un fichier séparé, par exemple :

• index.css
  • Fichier 1.css
  • Fichier 2.css

Answer 1

Votre fichier index.css peut contenir des classes utilitaires. Vous utilisez la commande tailwind tailwind -i index.css -o output.css pour créer et générer le fichier CSS.

Dans votre fichier html : vous devez utiliser tailwind inline dans l'attribut class :

    you rest of body

Le dernier dont vous avez besoin est le fichier de configuration tailwind, qui est automatiquement créé lorsque vous exécutez tailwind init dans votre répertoire de travail. Le fichier de configuration ressemble à ceci :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Le but de ce fichier est de vérifier si un fichier html utilise la classe tailwind et si c'est le cas, le rendu basé sur output.css lors de l'exécution de la commande build.