Skip to main content

React + Tailwind CSS

This snippet and command creates a React function component with Tailwind CSS classes. For other snippets, you may need to install some dependencies like react-icons, axios, etc. You can install them using the command npm install <dependency-name>.

How to use the Snippet​

Write the snippet in your new file rfct:

MyComponent
import React from 'react';

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

export default MyComponent;

How to use the Command​

  1. Open the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
  2. Type MERN: React Function Component and press Enter.
  3. Enter the extension (.jsx,.tsx) and the component name.
  4. Press Enter and the snippet will be created.
Show GIF

React Function Component

"Wisdom begins in wonder." - Socrates