Está en la página 1de 2

composer global require laravel/installer

laravel new example-app

composer create-project laravel/laravel example-app

cd example-app

php artisan serve

TAILWIND
Una vez instalado Node, lo que tendremos que hacer es crear la carpeta ra�z de
nuestro proyecto y lanzar el siguiente comando:

npm init -y
Este comando generar� un archivo llamado package.json donde se guardar� informaci�n
del proyecto ya sean librer�as instaladas, versi�n del proyecto o el nombre del
creador.

Una vez hecho esto, instalaremos las librer�as que vamos a utilizar, en nuestro
caso Tailwind CSS, autoprefixer y postcss-cli:

npm install tailwindcss autoprefixer postcss-cli


Ahora que ya tenemos Tailwind en nuestro proyecto, es hora de crear el archivo base
de configuraci�n de Tailwind, este archivo podremos modificarlo posteriormente para
importar plugins, temas, etc. Para crearlo lanzaremos el siguiente comando que
generar� un archivo llamado tailwind.config.js.

npx tailwindcss init


Tambi�n podemos generar el archivo de configuraci�n completo para ver los c�digos
de los colores, la correspondencia del tama�o de texto con los p�xeles, etc. Esto
lo haremos con el siguiente comando que generar� un archivo llamado
tailwind.config.full.js.

npx tailwindcss init tailwind.config.full.js --full


Ahora creamos el archivo postcss.config.js. Aunque en este tutorial no vamos a
profundizar en postcss, para poner un poco en contexto, es una herramienta para
transformar CSS con plugins de Javascript. Una vez creado el archivo, a�adimos la
siguiente l�nea:

module.exports = { plugins: [require('tailwindcss'), require('autoprefixer')], };


Una vez hecho esto, crearemos un archivo llamado css/tailwind.css, y a�adiremos las
siguientes l�neas. Con esto importaremos los estilos de Tailwind y podremos usarlo
en nuestro proyecto. Tambi�n en este archivo podremos a�adir nuestras propias
clases customizadas aunque de esto hablaremos en el siguiente tutorial:

@tailwind base;

@tailwind components;

@tailwind utilities;
Por �ltimo vamos a crear una carpeta llamada public que contendr� toda la parte
visible del proyecto. Dentro de ella creamos un archivo llamado css/styles.css que
es donde se guardar�n todos los estilos y otro archivo donde guardaremos todo el
HTML llamado index.html.

Una vez hecho esto, a�adiremos un comando al proyecto para que cuando realicemos
modificaciones autom�ticamente se reflejen en el archivo styles.css y de esta forma
siempre tengamos nuestros estilos actualizados. Esto lo haremos abriendo el archivo
package.json y a�adiendo la siguiente l�nea dentro de scripts:

{
.
.
.
"scripts": {
"dev": "postcss css/tailwind.css -o public/css/styles.css --watch"
},
.
.
.
}
Ahora solo tenemos que lanzar el comando de m�s abajo por consola y cada vez que
actualicemos el archivo css/tailwind.css se ver� reflejado en el archivo
public/css/styles.css que es el que importaremos en el archivo index.html.

npm run dev

También podría gustarte