Skip to content

Instantly share code, notes, and snippets.

@sandren
sandren / tailwind.md
Last active April 26, 2024 12:37
Tailwind CSS best practices

Tailwind CSS best practices

Utility classes

  1. When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!

  2. Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.

  3. Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

@Isaddo
Isaddo / import-github-labels.js
Last active February 9, 2024 22:44
import github labels via console command
/*
Go on your labels page (https://github.com/user/repo/labels)
Edit the following label array
or
Use this snippet to export github labels (https://gist.github.com/MoOx/93c2853fee760f42d97f)
and replace it
Paste this script in your console
Press Enter!!
@MoOx
MoOx / index.js
Last active February 9, 2024 22:44
Export/import github labels
// go on you labels pages
// eg https://github.com/cssnext/cssnext/labels
// paste this script in your console
// copy the output and now you can import it using https://github.com/popomore/github-labels !
var labels = [];
[].slice.call(document.querySelectorAll(".label-link"))
.forEach(function(element) {
labels.push({
name: element.textContent.trim(),
@adamjohnson
adamjohnson / publickey-git-error.markdown
Last active May 27, 2024 18:08
Fix "Permission denied (publickey)" error when pushing with Git

"Help, I keep getting a 'Permission Denied (publickey)' error when I push!"

This means, on your local machine, you haven't made any SSH keys. Not to worry. Here's how to fix:

  1. Open git bash (Use the Windows search. To find it, type "git bash") or the Mac Terminal. Pro Tip: You can use any *nix based command prompt (but not the default Windows Command Prompt!)
  2. Type cd ~/.ssh. This will take you to the root directory for Git (Likely C:\Users\[YOUR-USER-NAME]\.ssh\ on Windows)
  3. Within the .ssh folder, there should be these two files: id_rsa and id_rsa.pub. These are the files that tell your computer how to communicate with GitHub, BitBucket, or any other Git based service. Type ls to see a directory listing. If those two files don't show up, proceed to the next step. NOTE: Your SSH keys must be named id_rsa and id_rsa.pub in order for Git, GitHub, and BitBucket to recognize them by default.
  4. To create the SSH keys, type ssh-keygen -t rsa -C "your_email@example.com". Th