Tabla de contenido
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.
