Cara Menggunakan CSS Tailwind Dengan Projek PHP Biasa

DDD
Lepaskan: 2024-09-19 02:18:08
asal
1060 orang telah melayarinya

(Sumber Imej)

How To Use Tailwind CSS With A Plain PHP Project

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'),
  ],
};
Salin selepas log masuk
  • Buat folder bernama src dan fail styles.css dengan kod ini:
@tailwind base;
@tailwind components;
@tailwind utilities;
Salin selepas log masuk
  • Tambahkan skrip binaan pada package.json anda:
  "scripts": {
    "build:css": "npx postcss src/styles.css -o public/styles.css"
  },
Salin selepas log masuk
  • 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">
Salin selepas log masuk
  • 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: [],
}
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan