Saltar al contenido principal

React + Tailwind CSS

Este snippet y comando crea un componente funcional de React con clases de Tailwind CSS. Para otros snippets, es posible que necesites instalar algunas dependencias como react-icons, axios, etc. Puedes instalarlas usando el comando npm install <nombre-dependencia>.

Cómo usar el Snippet​

Escribe el snippet en tu nuevo archivo rfct:

MyComponent
import React from 'react';

const MyComponent = () => {
  return (
    <div className='container mx-auto p-4'>
      <h1 className='text-2xl font-bold'>¡Hola mundo desde MyComponent!</h1>
    </div>
  );
};

export default MyComponent;

Cómo usar el Comando​

  1. Abre la paleta de comandos (Ctrl+Shift+P o Cmd+Shift+P en Mac).
  2. Escribe MERN: React Function Component y presiona Enter.
  3. Ingresa la extensión (.jsx, .tsx) y el nombre del componente.
  4. Presiona Enter y el snippet será creado.
Mostrar GIF

React Function Component

"La sabiduría comienza en la maravilla." - Sócrates