En esta guía rápida, voy a contarte como instalar Laravel 8 con la ultima versión de Tailwind 2. Todavía no es oficial este método de instalación por lo que puede cambiar en los próximos meses. Tailwind 2.0. Instalar Tailwind 2.0 en Laravel 8 puede ser un poco complicado, ya que Laravel Mix presenta incompatibilidades por el momento. Si no conoces de que se trata Tailwind te invito a pasar por el siguiente post que te explico de que se trata este framework utilitario.

TailwindCSS: un framework utilitario y ligero

Este pasado 18 de Noviembre, el creador de Tailwind libero la versión 2.0 de Tailwind. Uno de los mejores cambios que presento esta nueva versión fue el Dark Mode. Ideal para manejar los templates Dark y Light.

Antes de empezar asegúrate de tener instalado Node.js en alguna versión mayor a Node 8. Te recomendamos la ultima versión estable. Ahora si empezamos con lo primero, instalar una versión limpia de Laravel 8:

laravel new tailwind2

Una vez finalizada la instalación de Laravel, vamos a pasar a instalar las ultimas versiones de Tailwind, PostCSS, Autoprefixer y Laravel Mix en su versión beta 6.0.14 (La ultima al momento de escribir este post).

npm install tailwindcss@latest postcss@latest autoprefixer@latest laravel-mix@6.0.0-beta.14

Hay algunos cambios que tiene Laravel Mix, que van a impedir que Tailwind compile correctamente. Por lo que vamos a abrir el archivo package.json y editar el script de “production”. Necesitamos borrar la opción de –no-progress ya que no es necesaria con Laravel Mix 6. De este modo, nos quedaría la sección scripts de la siguiente manera:

"scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js"
    }

Ahora ya tenemos instalado Laravel 8 con Tailwind 2.0. Te recomiendo leer la Upgrade Guide – Tailwind CSS de Tailwind para modificar y agregar las funciones nuevas.

npm run prod