So verwenden Sie Tailwind CSS mit einem einfachen PHP-Projekt

(Bildquelle)

Um Tailwind CSS mit Ihrem einfachen PHP-Projekt zu verwenden, können Sie Tailwind CSS in Ihrem Projekt installieren. So geht's:

• Führen Sie npm init -y im Terminal aus.

• Tailwind-Abhängigkeiten installieren: npm install tailwindcss postcss autoprefixer

• Tailwind-Konfigurationsdatei generieren: npx tailwindcss init

• Erstellen Sie eine postcss.config.js-Datei und fügen Sie diesen Code hinzu:
  

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

• Erstellen Sie einen Ordner namens src und eine Datei „styles.css“ mit diesem Code:

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

• Fügen Sie ein Build-Skript zu Ihrer package.json hinzu:

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

• Führen Sie npm run build:css im Terminal aus.

• Fügen Sie einen Link zur Datei „public/styles.css“ in die Datei Ihrer Seite ein (Beispiel: index.php):
  

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

• Stellen Sie sicher, dass Sie npm run build:css ausführen, nachdem Sie Änderungen vorgenommen haben.

• Stellen Sie außerdem sicher, dass Ihre tailwind.config.js die Pfade zu Ihren .php- und .html-Dateien enthält:
  

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

Viel Spaß beim Programmieren!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Tailwind CSS mit einem einfachen PHP-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!