Tailwind logotype from <a href="https://tailwindcss.com/brand" target="_blank" rel="noreferrer noopener">Tailwind Official Brand page (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-vector/3d-abstract-background-with-paper-cut-flower-shape_18695224.htm" target="_blank" rel="noreferrer noopener"> 3d abstract background with paper cut flower shape (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/garrykillian" target="_blank" rel="noreferrer noopener">GarryKillian (Opens in a new tab)</a> via <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>

Tailwind

Managing CSS styles efficiently can be a challenge, especially in projects that use Tailwind, where the nature of utility classes is to have quite a bunch of them together — inevitably having some overlap when inheriting styling from different sources.

The <a href="https://www.npmjs.com/package/tailwind-merge" target="_blank" rel="noreferrer noopener">`tailwind-merge` npm package (Opens in a new tab)</a> by <a href="https://github.com/dcastil" target="_blank" rel="noreferrer noopener">Dany Castillo (Opens in a new tab)</a> offers a solution that combines and reuses Tailwind utility classes.

From their documentation we have the following example

```typescript
import { twMerge } from 'tailwind-merge'

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'
```

that shows how Tailwind Merge combines the classes `px-2 py-1` with `p-3` and results in an overall cleaner list of classes, and explains in extremely simple terms the core of Tailwind Merge. There are more examples available in the <a href="https://www.npmjs.com/package/tailwind-merge" target="_blank" rel="noreferrer noopener">`tailwind-merge` npm package (Opens in a new tab)</a> by <a href="https://github.com/dcastil" target="_blank" rel="noreferrer noopener">Dany Castillo (Opens in a new tab)</a> <a href="https://github.com/dcastil/tailwind-merge/blob/main/docs/when-and-how-to-use-it.md" target="_blank" rel="noreferrer noopener">When and how to use it documentation page in Tailwind Merge GitHub repository (Opens in a new tab)</a>.

It's probably not the easiest to implement in an already-existing project, and the author also puts a lot of cases in favour and against using it. <a href="https://github.com/dcastil/tailwind-merge" target="_blank" rel="noreferrer noopener">The readme section in GitHub of `tailwind-merge` (Opens in a new tab)</a> contains all the information you'll need to weight in whether it's going to be the solution you were looking for in your project, or if you should approach your issues from a different perspective.

I'd personally try to use it from the get-go, as implementing it in an already-existing project would require some refactoring that might or might not be time-consuming, but it's completely harmless to have it and update its usage progressively!

Custom

Tailwind Merge: clean your code by removing conflicting styling

Logo and background image from <a href="https://www.raycast.com/" target="_blank" rel="noreferrer noopener">Raycast official website (Opens in a new tab)</a>

Raycast

A lot of tools online promise a massive productivity boost, but only a few actually keep up on that bold promise: __Raycast__ is definitely one of them and I personally am an avid user of the tool!

For those that got curious, <a href="https://raycast.com" target="_blank" rel="noreferrer noopener">Raycast (Opens in a new tab)</a> is a __virtual command center__ meant to replace the bland Mac Spotlight search with an incredible set of tools such as inline currency conversions, timezone conversions, superior file search and anything else that comes to your mind right at the tips of your fingers!

Youtuber <a href="https://www.youtube.com/@christianlempa" target="_blank" rel="noreferrer noopener">Christian Lempa (Opens in a new tab)</a> has <a href="https://www.youtube.com/watch?v=hZ2hXMi-h8I" target="_blank" rel="noreferrer noopener">a great video about Raycast (Opens in a new tab)</a> and how it helped him transform his workflow; you'll find everything I want you to know in that video and more!

<iframe width="100%" height="400" src="https://www.youtube-nocookie.com/embed/hZ2hXMi-h8I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

You'll find that it comes out of the box with a lot of things, but you'll immediately want to customize it to integrate the tools that you use on a daily basis, for which they have an amazing set of extensions in their official <a href="https://www.raycast.com/store" target="_blank" rel="noreferrer noopener">Raycast store (Opens in a new tab)</a>.

Some of my favourite extensions, in no particular order, are:
<ul>
 <li><a href="https://www.raycast.com/ajaypremshankar/vim-bro" target="_blank" rel="noreferrer noopener">Vim Bro - Search Vim Commands (Opens in a new tab)</a> by <a href="https://www.raycast.com/ajaypremshankar" target="_blank" rel="noreferrer noopener">Ajay Prem Shankar (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/mattisssa/spotify-player" target="_blank" rel="noreferrer noopener">Spotify Player (Opens in a new tab)</a> by <a href="https://www.raycast.com/mattisssa" target="_blank" rel="noreferrer noopener">Artem Konovalov (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/gebeto/translate" target="_blank" rel="noreferrer noopener">Google Translate (Opens in a new tab)</a> by <a href="https://www.raycast.com/gebeto" target="_blank" rel="noreferrer noopener">Slavik Nychkalo (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/vimtor/tailwindcss" target="_blank" rel="noreferrer noopener">Tailwind CSS (Opens in a new tab)</a> by <a href="https://www.raycast.com/vimtor" target="_blank" rel="noreferrer noopener">Victor Navarro (Opens in a new tab)</a> (I wonder if they misspell your last name as mine xD)</li>
 <li><a href="https://www.raycast.com/blessanm86/bitly-url-shortener" target="_blank" rel="noreferrer noopener">Bitly URL Shortener (Opens in a new tab)</a> by <a href="https://www.raycast.com/blessanm86" target="_blank" rel="noreferrer noopener">Blessan Mathew (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/eluce2/list-keyboard-maestro-macros" target="_blank" rel="noreferrer noopener">Keyboard Maestro - List Macros (Opens in a new tab)</a> by <a href="https://www.raycast.com/eluce2" target="_blank" rel="noreferrer noopener">Eric (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/FezVrasta/emoji" target="_blank" rel="noreferrer noopener">Emoji Search (Opens in a new tab)</a> by <a href="https://www.raycast.com/FezVrasta" target="_blank" rel="noreferrer noopener">Federico Zivolo (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/HenriChabrand/notion" target="_blank" rel="noreferrer noopener">Notion (Opens in a new tab)</a> by <a href="https://www.raycast.com/HenriChabrand" target="_blank" rel="noreferrer noopener">Henri (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/abielzulio/chatgpt" target="_blank" rel="noreferrer noopener">ChatGPT (Opens in a new tab)</a> by <a href="https://www.raycast.com/abielzulio" target="_blank" rel="noreferrer noopener">Abiel Zulio M (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/thomas/github-repository-search" target="_blank" rel="noreferrer noopener">GitHub Repository Search (Opens in a new tab)</a> by <a href="https://www.raycast.com/thomas" target="_blank" rel="noreferrer noopener">Thomas Paul Mann (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/mblode/google-search" target="_blank" rel="noreferrer noopener">Google Search (Opens in a new tab)</a> by <a href="https://www.raycast.com/mblode" target="_blank" rel="noreferrer noopener">Matthew Blode (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/thomas/visual-studio-code" target="_blank" rel="noreferrer noopener">Visual Studio Code (Opens in a new tab)</a> by <a href="https://www.raycast.com/thomas" target="_blank" rel="noreferrer noopener">Thomas Paul Mann (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/the-browser-company/arc" target="_blank" rel="noreferrer noopener">Arc (Opens in a new tab)</a> by <a href="https://www.raycast.com/the-browser-company" target="_blank" rel="noreferrer noopener">The Browser Company (Opens in a new tab)</a> (and damn this is such an amazing browser, it deserves its own snippet!)</li>
 <li><a href="https://www.raycast.com/raycast/github" target="_blank" rel="noreferrer noopener">GitHub (Opens in a new tab)</a> by <a href="https://www.raycast.com/raycast" target="_blank" rel="noreferrer noopener">Raycast (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/khasbilegt/1password" target="_blank" rel="noreferrer noopener">1Password (Opens in a new tab)</a> by <a href="https://www.raycast.com/khasbilegt" target="_blank" rel="noreferrer noopener">Khasbilegt.TS (Opens in a new tab)</a></li>
 <li><a href="https://www.raycast.com/tumtum/apple-notes" target="_blank" rel="noreferrer noopener">Apple Notes (Opens in a new tab)</a> by <a href="https://www.raycast.com/tumtum" target="_blank" rel="noreferrer noopener">Thomas (Opens in a new tab)</a></li>
</ul>

Seriously, have a look at the <a href="https://www.raycast.com/store" target="_blank" rel="noreferrer noopener">Raycast store (Opens in a new tab)</a> because if you thought of anything you'd want to launch and do with one simple command, it probably already exists!

Apps

Productivity

Technology

Raycast: Supercharged productivity

When I started working with <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">TailwindCSS (Opens in a new tab)</a> (mostly known as just Tailwind), I soon realized that there was a need to give a hierarchy to its utilitarian classes. While I had my structure, it seems that peeps at Tailwind have heard this feedback a few times and apparently last year they came up with their <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">automatic class sorting plugin for Prettier (Opens in a new tab)</a>.

What you would have had before as

```html
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>
```

will become

```html
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>
```

and that's simply great! You won't have to spend time reorganizing classes, as if you have Prettier set up `onSave` you'll have the classes' sorting right at your fingertips!

## Hierarchy of the sorting

Classes in the `base` layer will be sorted first, followed by classes in the `components` layer, and then finally classes in the `utilities` layer.

From their documentation
<blockquote>
 The actual order of the different utilities is loosely based on the box model, and tries to put high impact classes that affect the layout at the beginning and decorative classes at the end, while also trying to keep related utilities together.

 <div class="text-right">— <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">Automatic Class Sorting with Prettier
 (Opens in a new tab)</a> by <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">TailwindCSS (Opens in a new tab)</a></div>
</blockquote>

To understand better how the sorting happens and if you need to keep something in mind, I recommend checking <a href="https://github.com/tailwindlabs/prettier-plugin-tailwindcss" target="_blank" rel="noreferrer noopener">the GitHub page of Tailwind Automatic Class Sorting with Prettier (Opens in a new tab)</a> together with the official page <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noreferrer noopener">Automatic Class Sorting with Prettier (Opens in a new tab)</a>.

The article shows the names of <a href="https://twitter.com/reinink" target="_blank" rel="noreferrer noopener">Jonathan Reinink (Opens in a new tab)</a> and <a href="https://twitter.com/adamwathan" target="_blank" rel="noreferrer noopener">Adam Wathan (Opens in a new tab)</a>, so thank you peeps!

Prettier

Tailwind Automatic Class Sorting with Prettier

Screenshot of the website <a href="https://isthisarabic.com/" target="_blank" rel="noreferrer noopener">isthisarabic.com (Opens in a new tab)<a/>, developed by <a href="https://ramiismail.com/" target="_blank" rel="noreferrer noopener">Rami Ismail (Opens in a new tab)<a/>

Isthisarabic

[isthisarabic.com](https://isthisarabic.com/) is the ultimate resort of [Rami Ismail](https://ramiismail.com/) to educate people about the overall appearance of Arabic, and how media and companies do not respect the part of the population they so claim to include.

There are a lot of instances where this language presents a challenge (right-to-left layouts online, mishaps while copying and pasting texts, encoding etc.), and the additional challenge of companies disregarding proper translations does not help the world to learn more about this language and the cultures behind it.

Thank you for not giving up, Rami! I'll do my best to do my part in this! :D

P.S: He also has a great crash course on YouTube!

<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/X1ynZm1wI18" data-embed-title="Rami Ismail, Vlambeer - XOXO Festival (2015)" data-embed-url="https://www.youtube.com/watch?v=X1ynZm1wI18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Accessibility

UI/UX

CoolWebsites

isthisarabic.com - Is this عربي? Let's figure it out!

Screenshot of a section of the page <a href="https://heyreliable.com/ultimate-google-font-pairings/" target="_blank" rel="noreferrer noopener">The Ultimate Collection of Google Font Pairings and Combinations (Displayed Beautifully with Classic Art) (Opens in a new tab)<a/> curated by Lou Levit through <a href="https://heyreliable.com/" target="_blank" rel="noreferrer noopener">Reliable (Opens in a new tab)<a/>

Font Pairing example by Hey Reliable

[The Ultimate Collection of Google Font Pairings and Combinations (Displayed Beautifully with Classic Art)](https://heyreliable.com/ultimate-google-font-pairings/) from Lou Levit through [Reliable](https://heyreliable.com/ "Reliable website") is one of those delightful ways to spend time in front of your screen and come out with fresh ideas on how to style your site.

![Font Pairing example from HeyReliable](//images.ctfassets.net/hzu7wkrk7tly/6zIqzUWDNKINzJmP3hedpU/21b444d3998b182de9f8e78d0304e737/Screenshot_2023-03-04_at_23.58.33.png)

Browse through 50 font pairings (by style or mood) and find the combinations that speak to you the most - and yes, that's completely free!

oh-no.ooo

Ultimate Google Font Pairings and Combinations

More Snippets

Tailwind Merge: clean your code by removing conflicting styling

Raycast: Supercharged productivity