Diferencia entre revisiones de «Usuario:ManuelRomero/Laravel/Ejemplo»
De WikiEducator
(Página creada con «{{Actividad|Title=Crear un proyecto| <source lang=bash> laravel new empresas </source> }} {{Actividad|Title=Instalar tailwind| https://tailwindcss.com/docs/guides/laravel...») |
|||
| Línea 17: | Línea 17: | ||
Modificamos en el fichero '''''tailwind.config.js''''' para que se eliminen aquellas clases no utilizadas escribiendo en el elemento purge qué ficheros hay que revisar para ver qué clases se están usando y así quitar aquellas que no se usen | Modificamos en el fichero '''''tailwind.config.js''''' para que se eliminen aquellas clases no utilizadas escribiendo en el elemento purge qué ficheros hay que revisar para ver qué clases se están usando y así quitar aquellas que no se usen | ||
| − | <source lang= | + | <source lang=js> |
// tailwind.config.js | // tailwind.config.js | ||
module.exports = { | module.exports = { | ||
| Línea 32: | Línea 32: | ||
mix.js('resources/js/app.js', 'public/js') | mix.js('resources/js/app.js', 'public/js') | ||
| − | .postCss('resources/css/app.css', 'public/css', [' | + | .postCss('resources/css/app.css', 'public/css', ['tailwindcss']); |
| + | </source> | ||
| + | *Ahora completamos el fichero '''''app.css''''' ubicado en la carpeta '''''resources'''''. Si el fichero tuviera algún contenido habría que quitarlo. | ||
| + | <source lang=bash> | ||
| + | @tailwind base; | ||
| + | @tailwind components; | ||
| + | @tailwind utilities; | ||
</source> | </source> | ||
| + | Ahora necesitamos transpilar el fichero resource/app.css a public/app.css para poderlo importar en nuestros fichero html y usar los estilos. | ||
| + | Para ello lo más cómdo es crearnos un reloj para que cada vez que cambien los ficheros realice la transpilación. | ||
| + | Esto se consigue modificando el fichero '''''package.json''''' de nuestro directorio raiz añadiendo '''''-- --watch''''' como se muestra (solo la línea) | ||
| + | <soruce lang= bash> | ||
| + | "scripts": { | ||
| + | "dev": "npm run development -- --watch", | ||
| + | //.... | ||
| + | </source> | ||
| + | *Una vez hecho esto podemos ejecutar el comando correspondiente. | ||
| + | *Mejor dejarlo en background la ejecución para no perder el terminal (en linux se pone al final de la línea ampersan '''''&''''') | ||
| + | <source lang=bash> | ||
| + | npm run watch & | ||
| + | </source> | ||
| + | Esto nos generará ficheros y directorios en la caperta pública | ||
| + | ;Antes de la transpilación | ||
| + | [[Archivo:public_after_trasp.png]] | ||
| + | ;Después de la transpilación | ||
| + | [[Archivo:public_before_trasp.png]] | ||
| + | |||
| + | *Ahora ya lo podemos usar en un fichero html | ||
| + | |||
}} | }} | ||
Revisión de 03:30 22 abr 2021
laravel new empresas
|
| {{{1}}}
|
