1. Cómo instalar Tailwind en tu proyecto Laravel


12 comentarios

Inicia sesión para comentar

Comentarios:

  • Luis Bueno

    Luis Bueno hace 1 semana

    hola amigos

    siguiendo este primer video , veo que antes de instalar tailwind en proyecto video ya existe este archivo WEBPACK.MIX.JS
    dicho archivo no lo tengo en mi proyecto (uso el mismo proyecto de curso laravel 10)
    una vez q instalo,configuro @import y compilo no me crea la carpeta css/js en public (si me creo la carpeta node_modules)
    y me crea el archivo llamado vite.config.js en la raiz

    cada vez que compilo me sale todo esto

    PS D:\laragon\www\example-app> npm run dev

    > dev 
    > vite


     VITE v5.2.11  ready in 243 ms

     ➜  Local:   http://localhost:5173/
     ➜  Network: use --host to expose
     ➜  press h + enter to show help

     LARAVEL v10.48.9  plugin v1.0.2

     ➜  APP_URL: http://example-app.test

     

    quiero saber como se crea el archivo webpack.mix.js ya que no puedo modificar la linea
    mix.postCss('resources/css/main.css', 'public/css', [
      require('tailwindcss'),
    ])
    o en todo caso ya no es necesario y en la vista como tendria q llamarlo?

    archivo vite.config.js
    import { defineConfig } from 'vite';

    import laravel from 'laravel-vite-plugin';

    export default defineConfig({

        plugins: [

            laravel({

                input: ['resources/css/app.css', 'resources/js/app.js'],

                refresh: true,

            }),

        ],

    });

    muchas gracias

  • Pablo Mendez

    Pablo Mendez hace 1 mes

    Hola amigos, para los que estamos siguiendo el curso  lo unico que cambia es que al crear el proyecto sea de la siguiente manera : $ laravel new tailwind --jet

    Sustituimos el link css por : @vite('resources/css/app.css')

    con esto automaticamente configura todos los requerimientos de tailwind y funciona como lo explica el maestro.
     

  • Angel Marthans Ruiz

    Angel Marthans Ruiz hace 5 meses

    Excelente explicación introductoria de cómo utilizar TailwindCSS en laravel. 

  • Cfig

    Cfig hace 1 año

    Hola. Al parecer Laravel 9 y 10 vienen con Vite, he seguido las indicaciones dadas en el link que indicaste a otro usuario https://tailwindcss.com/docs/guides/laravel pero no logro hacer que funcione, es decir, se muestran los h1,h2,h3 de diferente tamaño (No aparece mensaje de error en storage/logs/laravel.log).

    • Marco Lopez hace 9 meses

      asi es, se debe actualizar el curso

  • Douglas Deodanes

    Douglas Deodanes hace 1 año

    Hola he intentado ver el curso desde móvil pero no se si es mi Mobile  o no se pero no me cargan los videos tocará irlos a ver desde YouTube, probado desde iOS 15 safari y brave 

  • Eliseo Practicas

    Eliseo Practicas hace 1 año

    terminé el curso con éxito gracias profe Victor, si valió la pena leer la documentación e ir aprendiendo mas en cada caso por las nuevas versiones. Saludos…!!!

  • Christian Torres

    Christian Torres hace 1 año

    Hola, una constulta, se pude usar taldwind y bootstrap a la vez, ya que esta opcion no tiene para el trabajo conn tablas por ejemplo.

    • Victor Arana Flores hace 1 año

      Puedes usarlo en diferentes vistas, pero no puedes cargar ambos en la misma vista.

  • Antonio Domínguez

    Antonio Domínguez hace 1 año

    Soy de entorno linux y si es complicado para win, no te digo nada para ubuntu, Conseguido

    Guia de instalación proporcionada Daniel

    fallo por que los paquete deb de ubuntu son anteriores a la versión 14 y no funcionan

    los desinstalo

    Descargo la última versión de node https://nodejs.org/dist/v16.16.0/node-v16.16.0-linux-x64.tar.xz

    sudo tar -xvf node-v16.16.0-linux-x64.tar.xz

    sudo cp -r node-v16.16.0-linux-x64/{bin,include,lib,share} /usr/

    export PATH=/usr/node-v16.16.0-linux-x64/bin:$PATH

    node -v
    v16.16.0

    sudo npm install -g npm@8.17.0

    npm install -D tailwindcss

    ✔ Compiled Successfully in 1771ms

     

    No me extiendo más, el linuxero que lo busque lo va a enternder

    Seguimos

     

  • Daniel Velásquez

    Daniel Velásquez hace 1 año

    Cuando empece a ver el video, confundi porque no encontraba el webpack.mix.js pense que yo estaba haciendo algo mal, pero leyendo e investigando, laravel mix migro a Vite, y lo mas sencillo es al momento de instalar un nuevo proyecto con “laravel new blog --jet” por defecto instala y configura tailwind

    • Daniel Velásquez hace 1 año

      tambien lo que se puede hacer es instalar una version de proyecto 8 y seguir el tutorial, funciona muy bien 

  • Hugo

    Hugo hace 1 año

    tengo una duda, será que en otros frameworks como net core, se pueda instalar tailwind? si alguien sabe le agradeceria, aunque veo que en la documentacion hay que pagar

    • Victor Arana Flores hace 1 año

      Tailwind es un framework css gratuito, y lo puedes instalar donde gustes, incluso en un archivo html