TailwindCss instal.lacio

Tailwind CSS funciona escanejant tots els vostres fitxers HTML, components JavaScript i qualsevol altra plantilla per trobar noms de classe,

Guia d'Instal·lació de Tailwind CSS en Laravel

Aquesta guia et mostra com integrar Tailwind CSS al teu projecte de Laravel pas a pas.

1. Preparació del Projecte

Assegura't de tenir una instal·lació de Laravel. Un cop dins del directori del projecte, executa la següent comanda per instal·lar les dependències de Node.js:

npm install
2. Instal·lació de Tailwind CSS

Instal·la Tailwind CSS i les seves dependències (PostCSS i Autoprefixer) utilitzant npm:

npm install -D tailwindcss postcss autoprefixer
3. Creació dels Fitxers de Configuració

Genera els fitxers de configuració de Tailwind i PostCSS. Aquesta comanda crearà tailwind.config.js i postcss.config.js a l'arrel del teu projecte:

npx tailwindcss init
4. Configuració de Tailwind

Obre el fitxer tailwind.config.js i modifica la secció content per incloure les rutes dels teus arxius de plantilla Blade, JS i Vue:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
5. Afegir les Directives de Tailwind al CSS

Obre el fitxer principal de CSS (normalment resources/css/app.css) i afegeix les directives de Tailwind a la part superior del fitxer:

@tailwind base;
@tailwind components;
@tailwind utilities;
6. Compilació dels Actius

Per a finalitzar, compila els teus actius amb una de les següents comandes:

  • Mode de desenvolupament (vigilància):
    npm run dev
  • Mode de producció:
    npm run build

Ara ja pots començar a utilitzar les classes de Tailwind en els teus fitxers Blade!

Anterior Notepad++ Tots els posts Següent bootstrapmade