Diferencia entre revisiones de «Usuario:ManuelRomero/Laravel/Ejemplo»
De WikiEducator
Línea 61: | Línea 61: | ||
*Ahora ya lo podemos usar en un fichero html | *Ahora ya lo podemos usar en un fichero html | ||
+ | }} | ||
+ | |||
+ | {{MRM_Actividad|Title=Diseño de pantallas| | ||
+ | ;Layout de la aplicación | ||
+ | *Lo primero planteamos una pantalla general para la aplicación que podría ser en una primera instancia | ||
+ | [[Archivo:layout.png]] | ||
+ | ;Pantalla de inicio | ||
+ | [[Archivo:facturas_inicio.png|500px|center]] | ||
+ | |||
+ | |||
+ | |||
+ | |||
}} | }} |
Revisión de 03:51 22 abr 2021
https://tailwindcss.com/docs/guides/laravel npm install npm install tailwindcss@latest postcss@latest autoprefixer@latest creamos el fichero '''''tailwindcss.config.js''''' <source lang=bash> npx tailwindcss init 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 // tailwind.config.js module.exports = { purge: [ './resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue', ], //.....
mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', ['tailwindcss']);
@tailwind base; @tailwind components; @tailwind utilities; 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) "scripts": { "dev": "npm run development -- --watch", //....
npm run watch & Esto nos generará ficheros y directorios en la caperta pública
|
|