DEV Community

Genaro Hernández
Genaro Hernández

Posted on • Updated on

Instalar Tailwind CSS en Ionic con Vue

Bienvenidos a esta nueva publicación en el cual les voy a enseñar a integrar tailwindcss a su proyecto de ionic con vue.

El primer requisito para seguir el tutorial es tener instalado node.js para poder instalar globalmente el cli de ionic.

Ahora, haciendo uso de la terminal voy a ubicarme en un directorio donde guardaré todos mis proyectos de ionic y ejecutaré el siguiente comando

  1. Instalar Ionic
ionic start ionic-tailwind blank --type=vue
Enter fullscreen mode Exit fullscreen mode
  1. Una vez instalado nuestro proyecto, nos ubicamos en la ruta del proyecto en la terminal y ejecutamos:
code .
Enter fullscreen mode Exit fullscreen mode

Para abrir nuestro proyecto en Visual Studio Code. En la terminal ejecutamos el siguiente comando que va instalar tailwindcss, postcss y autoprefixer.

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Una vez culminada la instalación debemos de crear un archivo de configuración de tailwindcss, para ello escribimos en la terminal:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode
  1. En este nuevo archivo vamos agregar las rutas de todos los componentes de vue.
module.exports = {
  content: ["./src/**/*.{js,vue}"],
  dark: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode
  1. Ahora debemos de crear un archivo llamado postcss.config.js y agregar el siguiente contenido.
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. Una vez instalado y configurado tailwindcss y postcss, para tener super poderes en nuestro proyecto debemos de instalar sass y sass-loader.
npm i sass
npm i sass-loader
Enter fullscreen mode Exit fullscreen mode
  1. Perfecto, ahora debemos de crear un nuevo archivo en ./src/theme/tailwind.scss y le agregamos los componentes de tailwind.
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  1. Para tener un mejor orden de los archivos css que está en la raíz de la configuración de nuestro proyecto ./src/main.js, cortamos todos los import.css y creamos un archivo llamado global.scss en la carpeta theme y pegamos, para corregir los import agregamos al inicio el @arroba, como estamos dentro de la carpeta theme, vamos a corregir la ubicación de las variables y le agregamos la extensión de scss., también importamos tailwind.scss.
/* 1. En main.js */
import './theme/global.scss';

/* 2. En /theme/global.scss */

@import '@ionic/vue/css/core.css';
@import '@ionic/vue/css/normalize.css';
@import '@ionic/vue/css/structure.css';
@import '@ionic/vue/css/typography.css';
@import '@ionic/vue/css/padding.css';
@import '@ionic/vue/css/float-elements.css';
@import '@ionic/vue/css/text-alignment.css';
@import '@ionic/vue/css/text-transformation.css';
@import '@ionic/vue/css/flex-utils.css';
@import '@ionic/vue/css/display.css';
@import './variables.scss';
@import './tailwind.scss';
@import './custom.scss';
Enter fullscreen mode Exit fullscreen mode
  1. Ya culminamos con la configuración, lo siguiente que tenemos que hacer es levantar nuestro proyecto, para ello vamos a ejecutar uno de los siguientes comandos.
ionic s
ionic serve
Enter fullscreen mode Exit fullscreen mode
  1. Perfecto, nuestro proyecto se ejecutó sin ningún error. Ahora vamos a escribir las clases que nos ofrece tailwind en nuestro componente de vue. Verificamos los cambios en el navegador... yyyy si!!! se reflejan los cambios en nuestro proyecto.
<template>
  <section class="flex justify-between">
    <p class="font-bold text-base">IONIC</p>
    <p class="text-base">TAILWINDCSS</p>
  </section >
</template>
Enter fullscreen mode Exit fullscreen mode
  1. Ahora dentro del componente en la etiqueta style, hay que indicarle que el lenguaje es scss para poder hacer uso de la directiva de tailwind llamada @apply que nos permite agrupar clases de tailwind en una nueva clase personalizada, es un nuevo superpoder desbloqueado que nos ayuda en escribir mucho más rápido los estilos para las interfaces de usuarios.
<style scoped lang="postcss">
section {
 @apply bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-300;
}
</style>
Enter fullscreen mode Exit fullscreen mode
  1. Recuerden que también podemos crear archivos scss globales y personalizados.
section {
 @apply bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-300;
}
Enter fullscreen mode Exit fullscreen mode

Espero que les sirva esta publicación y si les gusto por favor no se olviden de darle me encanta o escribir un comentario. Pronto más novedades de Ionic con vue. Hasta luego.

Discussion (0)