sandren

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

dikiaap

Update: As of 11 January 2022, git.io no longer accepts new URLs.

Command:

curl https://git.io/ -i -F "url=https://github.com/YOUR_GITHUB_URL" -F "code=YOUR_CUSTOM_NAME"

URLs that can be created is from:

• https://github.com/*
• https://*.github.com

ElijahLynn

// Say you have a Repo and you are in a few levels deep. /profiles/publisher/modules/contrib/
// You have a module called ../contrib/embed_external
// You want to pull changes you made to it to upstream
// pwd ../contrib
// git clone embed-external-upstream EE-upstream
// cd EE-upstream 

git -C ../embed_external/ diff --relative 76da308..HEAD . | patch -p1

// http://stackoverflow.com/a/9507417/292408