[vc_row el_class=”blog-info”][vc_column][vc_single_image source=”featured_image” img_size=”full” style=”vc_box_rounded”][vc_empty_space height=”40px”][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text el_class=”font-weight-bold”]

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.

[/vc_column_text][vc_empty_space height=”40px”][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”social-info”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text][social_share_button themes=’theme1′][/vc_column_text][/vc_column_inner][vc_column_inner el_class=”youtube-inner-col” width=”1/2″][vc_column_text][likebtn theme=”youtube” lang=”auto” show_like_label=”0″ white_label=”1″ alignment=”right”][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner el_class=”social-info-inner”][vc_column_inner width=”1/4″][vc_single_image image=”921″][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text]

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.[/vc_column_text][asvc_list_item icon_fontawesome=”fa fa-calendar-o” icon_size=”14px”]Programar una reunión[/asvc_list_item][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Flowbite y Tailwind: Cómo instalar con Laravel

Cómo instalar Flowbite y Tailwind CSS con Laravel

Instalar Tailwind CSS con Laravel

Componentes de Flowbite

Diego Pacheco

Recent Post