Cara Menggunakan CSS Tailwind Dengan Projek PHP Biasa

(Sumber Imej)

Untuk mula menggunakan Tailwind CSS dengan projek PHP biasa anda, anda boleh memasang Tailwind CSS dalam projek anda. Begini caranya:

• Jalankan npm init -y dalam terminal.

• Pasang kebergantungan Tailwind: npm pasang tailwindcss postcss autoprefixer

• Jana fail konfigurasi Tailwind: npx tailwindcss init

• Buat fail postcss.config.js dan tambah kod ini:
  

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

• Buat folder bernama src dan fail styles.css dengan kod ini:

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

• Tambahkan skrip binaan pada package.json anda:

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

• Jalankan npm run build:css dalam terminal.

• Sertakan pautan ke public/styles.css dalam fail halaman anda (contoh: index.php):
  

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

• Pastikan anda menjalankan npm run build:css selepas membuat perubahan.

• Selain itu, pastikan tailwind.config.js anda menyertakan laluan ke fail .php dan .html anda:
  

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

Selamat Mengkodkan Rakyat!

Atas ialah kandungan terperinci Cara Menggunakan CSS Tailwind Dengan Projek PHP Biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!