🔹 1. Inicialitza el projecte

Si no tens Node.js, instal·la'l primer.

npm init -y

🔹 2. Instal·la Tailwind CSS

npm install -D tailwindcss

🔹 3. Crea la configuració

npx tailwindcss init

🔹 4. Configura `tailwind.config.js`

Afegeix el camí als arxius del projecte.

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

🔹 5. Crea l'entrada de Tailwind

A `dist/input.css` afegeix:

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

🔹 6. Compila Tailwind en temps real

npx tailwindcss -i ./dist/input.css -o ./dist/output.css --watch

🔹 7. Instal·la Preline

npm install preline

🔹 8. Afegeix Preline a Tailwind

Modifica `tailwind.config.js`:

const preline = require("preline/plugin");

module.exports = {
  content: ["*.php", "./src/**/*.{html,js,php}"],
  theme: {
    extend: {},
  },
  plugins: [preline],
};
            

🔹 9. Importa Preline al teu HTML

Afegeix aquest script abans de tancar ` `:

<script src="node_modules/preline/dist/preline.js"></script>
            

🔹 10. Executa el servidor PHP

php -S localhost:8000

Obre el navegador i visita:

http://localhost:8000