Cómo usar TailwindCSS v2 con Laravel 8

Hola desarrolladores, vamos a ver cómo configurar de manera manual un entorno de desarrollo con Laravel 8 y TailwindCSS 2.

Crear un nuevo proyecto

Siguiendo la documentación de laravel crearemos un nuevo proyecto con composer

composer create-project laravel/laravel laravel-tailwind

Instalar dependencias

Luego de crear nuestro proyecto seguiremos a instalar nuestras dependencias para el desarrollo a través de npm:

npm i -D tailwindcss autoprefixer postcss sass sass-loader

o si está usando yarn cómo administrador de paquetes:

yarn add -D tailwindcss autoprefixer postcss sass sass-loader

Al momento de escribir este artículo las versiones instaladas en las dependencias son las siguientes:

"devDependencies": {
   "autoprefixer": "^10.2.1",
   "laravel-mix": "^6.0.6",
   "postcss": "^8.2.4",
   "sass": "^1.32.2",
   "sass-loader": "^8.0.2",
   "tailwindcss": "^2.0.2"
}

Crea tu archivo de configuración

A continuación, genera tu archivo tailwind.config.js:

npx tailwindcss init

Esto creará un archivo tailwind.config.js mínimo en la raíz de su proyecto:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Configuremos Tailwind para eliminar los estilos no utilizados en producción:

// tailwind.config.js
- module.exports = {
+ module.exports = (isProd) => ({
-  purge: [],
+  purge: {
+    enabled: isProd,
+    content: [
+       "./app/**/*.php",
+       "./resources/**/*.html",
+       "./resources/**/*.php",
+     ],
+  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
- }
+ })

Configuración para AlpineJs

// tailwind.config.js
- module.exports = {
+ module.exports = (isProd) => ({
-  purge: [],
+  purge: {
+    enabled: isProd,
+    content: [
+       "./app/**/*.php",
+       "./resources/**/*.html",
+       "./resources/**/*.php",
+     ],
+     options: {
+            defaultExtractor: (content) =>
+                content.match(/[\w-/.:]+(?<!:)/g) || [],
+            whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
+        },
+  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
- }
+ })

Crear archivo SCSS

Vamos a la ruta resources/sassy creamos un archivo llamado app.scss:

@tailwind base;
@tailwind components;
@tailwind utilities;

Configurar Tailwind con Laravel Mix

En su webpack.mix.js, agregue tailwindcss:

const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");
const isProd = mix.inProduction();
const tailwindConfig = require("./tailwind.config")(isProd);

mix.js("resources/js/app.js", "public/js/app.js")
    .sass("resources/sass/app.scss", "public/css/app.css")
    .options({
        processCssUrls: false,
        postCss: [tailwindcss(tailwindConfig)],
    })
    .sourceMaps();

if (isProd) {
    mix.version();
}

Ahora solo falta correr el comando:

// Desarrollo
npm run development

// Producción
npm run production

Agregar los estilos a tu aplicación:

<link rel="stylesheet" href="{{ url(mix('css/app.css')) }}">

Y comenzar a probar con TailwindCSS.