Vue3 Tailwind CSS

Usar Tailwind CSS en proyectos Vue es una opción muy popular, ya que ofrece un enfoque de utilidades primero para escribir CSS, que te permite aplicar estilos directamente en los nombres de las clases. Este método hace que la escritura de estilos sea más concisa e intuitiva.

Tutorial de Tailwind CSS:https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Sitio web oficial de Tailwind CSS:https://tailwindcss.com/

Dirección de GitHub:https://github.com/tailwindlabs/tailwindcss

Tailwind CSS es un potente framework de CSS que, mediante un enfoque de utilidades primero, hace que la escritura de estilos sea más concisa y modular. A diferencia de los frameworks CSS tradicionales basados en clases, Tailwind proporciona un conjunto de clases de utilidad de bajo nivel que se pueden usar directamente en los elementos HTML para construir diseños personalizados de manera rápida y flexible.

El siguiente es un ejemplo introductorio completo que utiliza Vue 3 y Tailwind CSS, y muestra cómo integrar Tailwind CSS con Vue 3 y usar sus funciones para construir interfaces receptivas.

Instalar Vue 3 y Tailwind CSS

Primero, asegúrate de haber instalado Vue 3 y Tailwind CSS.

Instalar Vue 3. Ejecuta en la terminalnpm create vue@latestel comando para crear un nuevo proyecto de Vue 3:

npm create vue@latest

En la ventana de salida, ingresa el nombre del proyecto y luego presiona Enter hasta el final:

Al ejecutar el comando anterior, es necesario configurar algunas opciones de inicialización; usa las teclas de dirección para seleccionar.

Entra en el directorio inicializado vue-tailwind-app e instala las dependencias:

cd vue-tailwind-app
npm install

Instalar Tailwind CSS. Instala Tailwind CSS y las dependencias relacionadas:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Una vez completada la creación, la estructura de directorios es la siguiente:

Configurar Tailwind CSS. Abre el archivo tailwind.config.js y modifícalo a:

Ejemplo

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Agregar directivas de Tailwind. En el directorio src/assets, crea un archivo styles.css y agrega el siguiente contenido:

/* src/assets/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Luego importa ese archivo en src/assets/main.js:

import './assets/styles.css

Crear componentes y estilos de Vue

Ahora puedes comenzar a escribir tus componentes de Vue 3 y usar Tailwind CSS para embellecer la página.

App.vue

App.vue es el componente principal de la aplicación y contiene el uso básico de Vue 3 y Tailwind CSS.

Ejemplo

<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-6">
    <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-lg">
      <h1 class="text-2xl font-semibold text-center text-gray-800 mb-6">
Ejemplo de Vue 3 + Tailwind CSS
      </h1>

      <!-- Campo de entrada y botón -->
      <div class="mb-4">
        <label for="name" class="block text-sm font-medium text-gray-700">Nombre de usuario</label>
        <input
         type="text"
         id="name"
         v-model="username"
         placeholder="Por favor, ingresa el nombre de usuario"
         class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
      </div>

      <button
       @click="submitForm"
       class="w-full bg-blue-500 text-white py-2 rounded-md shadow-md hover:bg-blue-600 transition duration-200"
     >
Enviar
      </button>

      <!-- Mostrar nombre de usuario -->
      <p v-if="submitted" class="mt-4 text-center text-gray-600">Bienvenido, {{ username }}!</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      submitted: false
    };
  },
  methods: {
    submitForm() {
      if (this.username) {
        this.submitted = true;
      } else {
alert('Por favor, ingrese el nombre de usuario');
      }
    }
  }
};
</script>

<style scoped>
/* Aquí los estilos son personalizados, si es necesario */
</style>

Además, podemos configurar nuestro propio puerto en el archivo vite.config.js, por ejemplo, después de configurar el puerto como se muestra a continuación:3000：

Ejemplo

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    port: 3000, // Número de puerto definido por nosotros
  },
})

Después de completar la configuración, ejecuta el siguiente comando:npm run devEl resultado del comando es el siguiente:

# npm run dev                                                         

> [email protected] dev
> vite


  VITE v6.0.3  ready in 333 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:3000/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help

Visitahttp://localhost:3000/, se muestra lo siguiente:

A continuación, intentamos crear una lista. Modifica el archivo App.vue, el código es el siguiente:

Ejemplo

<template>
  <div class="min-h-screen flex flex-col">
    <!-- Cabecera -->
    <header class="bg-blue-600 text-white py-4">
      <div class="container mx-auto text-center">
        <h1 class="text-3xl font-semibold">Página de lista</h1>
      </div>
    </header>

    <!-- Lista -->
    <main class="flex-grow py-8">
      <div class="container mx-auto px-4">
        <ul class="space-y-4">
          <li v-for="(item, index) in items" :key="index" class="p-4 bg-white border rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">{{ item.title }}</h2>
            <p class="text-gray-600">{{ item.description }}</p>
          </li>
        </ul>
      </div>
    </main>

    <!-- Pie de página -->
    <footer class="bg-gray-800 text-white py-4">
      <div class="container mx-auto text-center">
        <p>&copy;2024 Mi aplicación Vue3</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "ListPage",
  data() {
    return {
      items: [
{ title: "Elemento de lista 1", description: "Esta es la descripción del primer elemento de la lista." },
{ title: "Elemento de lista 2", description: "Esta es la descripción del segundo elemento de la lista." },
{ title: "Elemento de lista 3", description: "Esta es la descripción del tercer elemento de la lista." }
// Más elementos de lista
      ],
    };
  },
};
</script>

<style scoped>
/* Agrega algunos estilos adicionales (si es necesario) */
</style>

Análisis del código:

  • Cabecera (header): Usabg-blue-600Configura el color de fondo,text-whiteConfigura el color del texto,py-4Configura el relleno superior e inferior,container mx-autose usa para establecer un ancho fijo y centrar el contenido.
  • Lista (main): Usaflex-growpara hacer que la parte de la lista ocupe el espacio restante,py-8Agrega relleno vertical. Cada elemento de la lista usap-4, bg-white, border, rounded-lg, shadow-mdclases de Tailwind, etc., para configurar la apariencia.
  • Pie de página (footer): Usabg-gray-800Configura un fondo oscuro,text-whiteConfigura texto blanco,py-4Configura el relleno.

Visitahttp://localhost:3000/, se muestra lo siguiente:

Otras extensiones