Cómo instalar Flowbite y Tailwind CSS con Laravel
En esta guía, aprenderá cómo instalar y trabajar con Laravel, Tailwind CSS y Flowbite.
Flowbite es una popular biblioteca de componentes de código abierto construida sobre el marco CSS de Tailwind, que es la primera utilidad, que incluye componentes de interfaz de usuario como menús desplegables, modales, botones y más.
Laravel es el marco web PHP más popular basado en el modelo modelo-vista-controlador (MCV) que lo ayuda a crear aplicaciones web y API modernas.
Instalar Tailwind CSS con Laravel
Siga los siguientes pasos para instalar Tailwind CSS y Flowbite con Laravel Mix.
Asegúrese de tener Composer y Node.js instalados localmente en su computadora.
Requiere el instalador de Laravel globalmente usando Composer.
composer global require laravel/installer
Asegúrese de colocar el directorio bin del proveedor en su RUTA. Así es como puede hacerlo en función de cada sistema operativo:
- macOS:
export PATH="$PATH:$HOME/.composer/vendor/bin" - Windows:
set PATH=%PATH%;%USERPROFILE%\AppData\Roaming\Composer\vendor\bin - Linux:
export PATH="~/.config/composer/vendor/bin:$PATH"
Cree un nuevo proyecto usando la CLI de Laravel:
laravel new awesome-projectcd awesome-project
Ahora puede acceder a la aplicación Laravel en http://localhost:8000.
Este comando inicializará un proyecto de Laravel en blanco con el que puede comenzar.
Instale Tailwind CSS y Flowbite usando NPM:
npm install -D tailwindcss postcss autoprefixer @themesberg/flowbite
Cree un archivo de configuración Tailwind CSS:
npx tailwindcss init
Se creará un nuevo archivo tailwind.config.js dentro de su carpeta raíz.
Agregue las rutas de vista y requiera Flowbite como un complemento dentro de tailwind.config.js:
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
"./node_modules/@themesberg/flowbite/**/*.js"
],
theme: {
extend: {},
},
plugins: [
require('@themesberg/flowbite/plugin')
],
}
Agregue Tailwind CSS a su configuración de Laravel Mix solicitándolo dentro del archivo webpack.mix.js:
mix.js("resources/js/app.js", "public/js") .postCss("resources/css/app.css", "public/css", [ // add here require("tailwindcss"), ]);
Agregue las directivas dentro del archivo ./resources/css/app.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
Incluya el archivo app.css dentro de la etiqueta <head> de sus plantillas de vista:
<link href="/css/app.css" rel="stylesheet">
Solicite el archivo flowbite.bundle.js antes del final de la etiqueta <body>:
<script src="../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"></script>
Alternativamente, también puede incluir el archivo JavaScript usando CDN:
<script src="https://unpkg.com/@themesberg/flowbite@{{< current_version >}}/dist/flowbite.bundle.js"></script>
Ahora que ha configurado todo, inicie un servidor de desarrollo local usando php artisan serve y ejecute el proceso de compilación para Webpack usando npm run watch.
Componentes de Flowbite
Ahora que ha instalado correctamente el proyecto, puede comenzar a utilizar los componentes de la interfaz de usuario de Flowbite y Tailwind CSS para desarrollar sitios web y aplicaciones web modernos.
Recomendamos explorar los componentes utilizando la navegación de la barra de búsqueda (cmd o ctrl + k) o navegando por la sección de componentes de la barra lateral en el lado izquierdo de esta página.
Esta guía se basa en la documentación oficial de Tailwind CSS Laravel de Flowbite.
Diego Pacheco
Ingeniero en Sitemas, MBA (Babson College). Desarrollador PHP/Java/JavaScript. Fundador & CEO de EpicStudio. Entusiasta de las tecnologías web (JavaScript, Vue, Laravel, AWS, Docker) Viajes, Negocios, Surf y Growth.
Recent Post
Paginación: ejemplo con Laravel Livewire
Notificaciones de Telegram con Laravel 9
