Comment utiliser Tailwind CSS avec un projet PHP simple

(Source de l'image)

Pour commencer à utiliser Tailwind CSS avec votre projet PHP simple, vous pouvez installer Tailwind CSS dans votre projet. Voici comment :

• Exécutez npm init -y dans le terminal.

• Installer les dépendances Tailwind : npm install tailwindcss postcss autoprefixer

• Générer le fichier de configuration Tailwind : npx tailwindcss init

• Créez un fichier postcss.config.js et ajoutez ce code :
  

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

• Créez un dossier appelé src et un fichier styles.css avec ce code :

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

• Ajoutez un script de build à votre package.json :

  "scripts": {
    "build:css": "npx postcss src/styles.css -o public/styles.css"
  },

• Exécutez npm run build:css dans le terminal.

• Incluez un lien vers public/styles.css dans le fichier de votre page (exemple : index.php) :
  

<link href="./public/styles.css" rel="stylesheet">

• Assurez-vous d'exécuter npm run build:css après avoir apporté des modifications.

• Assurez-vous également que votre tailwind.config.js inclut les chemins d'accès à vos fichiers .php et .html :
  

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

Bon codage à tous !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!