Cómo usar TailwindCSS v2 en Laravel 8

Jan 11, 2021

Crear un nuevo proyecto
Instalar dependencias
Crea tu archivo de configuración
- Configuración para AlpineJs
Crear archivo SCSS
Configurar Tailwind con Laravel Mix

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

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:

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:

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#

module.exports = (isProd) => ({
  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:

npm run development

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.