Integración de Bubble.io y Tailwind: Guía paso a paso 2024

Paso 1: Instalar Tailwind CSS
Antes de integrarlo con Bubble.io, necesitamos instalar primero Tailwind CSS. Para esto, necesitamos tener Node.js y npm instalados en nuestro sistema. A continuación, se detallan los pasos de instalación requeridos.

• Abre tu terminal.
• Verifica si tienes Node.js instalado escribiendo node -v. Si se muestra un número de versión, entonces tienes Node.js. Si no está instalado, descárgalo e instálalo desde https://nodejs.org/.
• Comprueba si tienes npm instalado escribiendo npm -v. Si se muestra un número de versión, entonces tienes npm. Si no lo tienes, npm viene incluido con Node.js, por lo que se instalará cuando instales Node.js.
• Una vez que confirmes que tienes Node.js y npm, navega hasta la carpeta de tu proyecto con este comando: cd tu-carpeta-de-proyecto.
• En tu carpeta de proyecto, instala Tailwind a través de npm ejecutando npm install tailwindcss.
• Después de instalar Tailwind CSS, genera el archivo de configuración ejecutando npx tailwindcss init. Esto crea un archivo tailwind.config.js en la raíz de tu proyecto donde puedes personalizar tu sistema de diseño.

NOTA: Si estás usando una técnica de instalación diferente (por ejemplo, cdn, postscript), los pasos subsiguientes seguirán aplicándose, pero los nombres/rutas de los archivos pueden variar.

Paso 2: Crea tu CSS

• Después de instalar Tailwind y generar el archivo de configuración, necesitarás crear tu CSS. Para hacer esto, abre el archivo tailwind.config.js que se creó en el paso anterior.
• En este archivo de configuración, necesitarás especificar las rutas a todos tus archivos CSS. La configuración debería verse algo así:

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

• Guarda y cierra este archivo.
• Ahora, en la Terminal o Símbolo del sistema, navega hasta el directorio raíz de tu proyecto e ingresa el siguiente comando y presiona Enter: npx tailwindcss build -o tailwind.css. Esto creará un archivo tailwind.css en la raíz de tu proyecto.

Paso 3: Configura una aplicación Bubble.io

• Abre tu navegador web y ve a Bubble.io.
• Si aún no tienes una cuenta, regístrate para obtener una y luego inicia sesión.
• Una vez que hayas iniciado sesión, en tu Tablero, haz clic en el botón "New App" (Nueva aplicación).
• Dale a tu aplicación un nombre, selecciona un plan (gratuito para comenzar) y pulsa el botón "Create a new app" (Crear una nueva aplicación).

Paso 4: Cargar tu CSS

• Ahora, necesitamos cargar nuestro archivo tailwind.css en Bubble.
• En tu aplicación, ve a la configuración (icono de engranaje) y luego selecciona la pestaña "SEO & metatags" en la barra de navegación de la izquierda.
• Desplázate hacia abajo hasta la sección "Script/meta tags in header" (Script/meta tags en el encabezado) y haz clic en el botón "Add a new script/meta tag" (Agregar un nuevo script/meta tag).
• Aparecerá un editor. En el menú desplegable Type, selecciona Style (CSS) de la lista.
• Abre tu archivo tailwind.css generado con un editor de texto (como Notepad, o TextEdit en macOS) y copia todo el contenido.
• Pega este CSS en el área de texto Add a new script/meta tag en Bubble.io.
• Haz clic en el botón Save cuando hayas terminado.

Paso 5: Utilizar Tailwind CSS

• Ahora puedes usar las clases de Tailwind CSS en toda tu aplicación Bubble.io. Para hacer esto, selecciona un elemento en el lienzo de Bubble, ve al Element Inspector a la izquierda, desplázate hacia abajo hasta ID attribute y dale un ID.
• Desplázate hacia la derecha y, en el menú desplegable Type, selecciona Style (CSS). Agrega tus clases de utilidad de Tailwind CSS aquí.

¡Felicidades! Ahora tienes Tailwind CSS integrado con tu aplicación Bubble.io. Has integrado con éxito una herramienta poderosa en tu kit de desarrollo web en Bubble.io para hacer tu aplicación más interactiva y visualmente atractiva.