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

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!

CoolWebsites

UI/UX

Fonts

Ultimate Google Font Pairings and Combinations

Screenshot of the <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">main page of hypercolor.dev (Opens in a new tab)<a/>

hypercolor.dev - Tailwind CSS Gradients

[Hypercolor](https://hypercolor.dev/) is a design tool that offers a collection of gradients and allows you to create your own. If you don't have any fantasy like me when it's about colors, this is a lovely site where you can get some great inspiration!

And yes, I used one of them (Ice) for this site as well. :)

And well, since I have some spare time at hand before hitting the bed, let me share a few.

### Cold Dawn

![Cold Dawn](//images.ctfassets.net/hzu7wkrk7tly/1Sya7mkv1gBc2mUiEhxyjv/21a18d65cc5ee768075cb2a9c0ec6eb5/Hypercolor-ColdDawn.jpeg?r=50)

```css
{/* Tailwind */}
bg-gradient-to-tr from-indigo-900 via-sky-300 to-lime-200

{/* plain css */}
background: linear-gradient(to right top, rgb(49, 46, 129), rgb(125, 211, 252), rgb(217, 249, 157))
```

### Still stone
![Still Stone](//images.ctfassets.net/hzu7wkrk7tly/7KuOQsr0Ks7pYQPqcnTmhb/5aedcb2e7bd5a85a9f44ef3d81ca9b69/Hypercolor-StillStone.jpeg?r=50)

```css
{/* Tailwind */}
bg-[conic-gradient(at_bottom_left,_var(--tw-gradient-stops))] from-white via-stone-500 to-stone-600

{/* plain css */}
conic-gradient(at left bottom, rgb(255, 255, 255), rgb(120, 113, 108), rgb(87, 83, 78))
```

### Pastel Cotton Candy

![Pastel Cotton Candy](//images.ctfassets.net/hzu7wkrk7tly/1kzfNlJA8siaSaDqabWi6x/1bff5c945228045638e85172034991df/HypercolorPastelCottonCandy.jpeg?r=50)

```css
{/* Tailwind */}
bg-gradient-to-l from-cyan-300 via-amber-200 to-purple-300

{/* plain css */}
linear-gradient(to left, rgb(103, 232, 249), rgb(253, 230, 138), rgb(216, 180, 254))
```

### Last Dawn

![Last Dawn](//images.ctfassets.net/hzu7wkrk7tly/aqIG3tp5GrKE1qTTeNPYG/8facf50e11b3642b4f1e6551d2dbc527/Hypercolor-LastDawn.jpeg?r=50)

```css
{/* Tailwind */}
bg-gradient-to-b from-neutral-700 via-orange-400 to-pink-500

{/* plain css */}
linear-gradient(rgb(64, 64, 64), rgb(251, 146, 60), rgb(236, 72, 153))

```

### Everyday

![Everyday](//images.ctfassets.net/hzu7wkrk7tly/48QZPSGEUw4NDMF2piW8TW/555ef8157ae1683eb382b9f68c79e0a3/Hypercolor-Everyday.jpeg?r=50)

```css
{/* Tailwind */}
bg-[conic-gradient(var(--tw-gradient-stops))] from-yellow-500 via-pink-900 to-blue-400

{/* plain css */}
conic-gradient(rgb(234, 179, 8), rgb(131, 24, 67), rgb(96, 165, 250))

```

... [give the gradient generator a go by yourself](https://hypercolor.dev/generator "Hyperlink Gradient Generator"), and have some fun with it!

hypercolor.dev - Cool Tailwind Gradients

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>

oh-no.ooo

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

More Snippets

Tailwind Merge: clean your code by removing conflicting styling

Raycast: Supercharged productivity