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

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 <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!

oh-no.ooo

Tailwind

Snippets

Tailwind Merge: clean your code by removing conflicting styling

Tailwind Automatic Class Sorting with Prettier

hypercolor.dev - Cool Tailwind Gradients