Laravel

Cómo usar TailwindCSS v2 en Laravel 8

Publicado

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.