Usar Tailwind CSS 2 en Laravel 8

Una guía rápida para comenzar a usar TailwindCSS en Laravel 8.

Laravel/Installer

Vamos a usar laravel/installer para descargar la versión más reciente de laravel en un nuevo proyecto. Para ello vamos a instalarlo:

  • Instalar el instalador de laravel
composer global require laravel/installer
  • Crear proyecto:
laravel new miproyecto

Tailwind CSS 2

Hacemos cd miproyecto y aquí vamos a correr las siguientes líneas para Tailwind CSS:

npm install tailwindcss postcss autoprefixer

Si por alguna razón les devuelve este error:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

En este caso hay que desinstalar tailwindcss, postcss y autoprefixer e instalamos los paquetes compatibles.

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Si en un futuro las herramientas que utilizas han actualizado a la nueva versión de PostCSS, entonces actualizamos de la siguiente manera:

npm uninstall tailwindcss autoprefixer @tailwindcss/postcss7-compat
npm install tailwindcss@latest postcss@latest autoprefixer@latest

Creamos el archivo de configuración de tailwindcss:

npx tailwindcss init

Ahora necesitamos actualizar el archivo webpack.mix.js a lo siguiente:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
  .js('resources/js/app.js', 'public/js')
  .postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'),
    require('autoprefixer'),
  ]);

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

También hay que actualizar el archivo de configuración tailwind.config.js al siguiente código:

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

Ahora vamos a hacer uso de Tailwind CSS incluyendo este código en el archivo resources/css/app.css:

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

Finalmente añadimos en nuestra plantilla principal el archivo css:

<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}" >

Ahora podemos comenzar a utilizar tailwind en cualquiera de nuestras plantillas blade.