Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
5 views2 pages

React Tailwind VSCode CheatSheet

This document is a cheat sheet for using React, TailwindCSS, and VSCode, providing essential shortcuts and snippets. It includes VS Code shortcuts for efficient coding, useful React snippets for component creation, and handy TailwindCSS classes for styling. Additionally, it offers pro tips for maintaining clean code and enhancing productivity.

Uploaded by

Anisha Dwivedi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views2 pages

React Tailwind VSCode CheatSheet

This document is a cheat sheet for using React, TailwindCSS, and VSCode, providing essential shortcuts and snippets. It includes VS Code shortcuts for efficient coding, useful React snippets for component creation, and handy TailwindCSS classes for styling. Additionally, it offers pro tips for maintaining clean code and enhancing productivity.

Uploaded by

Anisha Dwivedi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

React + Tailwind + VSCode Cheat Sheet by Buddy

VS Code Shortcuts:

---------------------

1. Multi-cursor Editing: Alt + Click

2. Move Lines Up/Down: Alt + Up / Alt + Down

3. Wrap with Emmet: Type div>p then Tab

4. Rename Symbol: F2

5. Format Document: Shift + Alt + F

6. Quick Open Files: Ctrl + P

7. Command Palette: Ctrl + Shift + P

8. IntelliSense Trigger: Ctrl + Space

9. Switch Between Files: Ctrl + Tab

10. Auto Close Tag: Automatically closes JSX tags

React Useful Snippets:

-------------------------

- rfce: React Functional Component (React Snippets extension)

- imr: import React from 'react';

- clg: console.log();

TailwindCSS Handy Classes:

-----------------------------

- bg-blue-500 : Background color

- text-white : Text color

- p-4 : Padding
- m-2 : Margin

- rounded : Rounded corners

- shadow-md : Shadow

- flex, justify-center, items-center : Flexbox utilities

Pro Tips:

------------

- Always use "editor.formatOnSave": true

- Use Prettier + ESLint together for clean code

- Use Tailwind IntelliSense for class suggestions

Good Luck Buddy! You got this!

You might also like