<a href="https://www.freepik.com/free-ai-image/view-3d-young-school-student_133758575.htm" target="_blank" rel="noreferrer noopener">3d young school student (Opens in a new tab)</a> by <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-vector/flat-abstract-wireframe-background_16133537.htm" target="_blank" rel="noreferrer noopener">Flat abstract wireframe background (Opens in a new tab)</a> by <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, Tailwind logotype from <a href="https://tailwindcss.com/brand" target="_blank" rel="noreferrer noopener">Tailwind Official Brand page (Opens in a new tab)</a>, semi-random coding text generated with <a href="https://carbon.now.sh" target="_blank" rel="noreferrer noopener">Carbon (Opens in a new tab)</a>

Tailwind Level up

Level up your Tailwind game

Custom

Tailwind

UI/UX

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>

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!

Tailwind Merge: clean your code by removing conflicting styling

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

<a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a> 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

<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/1Sya7mkv1gBc2mUiEhxyjv/21a18d65cc5ee768075cb2a9c0ec6eb5/Hypercolor-ColdDawn.jpeg" alt="Cool Dawn, a gradient that goes from bottom left blue to top right yellowish. Despite the cold colors, it's still conveying some sense of warmth." />
	<figcaption>
 I call this Cool Down, because despite the cold tones, it still conveys a lot of warmth. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

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

<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/7KuOQsr0Ks7pYQPqcnTmhb/5aedcb2e7bd5a85a9f44ef3d81ca9b69/Hypercolor-StillStone.jpeg" alt="Still Stone, a linear gradient that conveys the idea of a cold carving stone" />
	<figcaption>
 This one is Still Stone, because it reminds me of the marbles and stones used to carve those beautiful museum-worthy statues. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```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
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/1kzfNlJA8siaSaDqabWi6x/1bff5c945228045638e85172034991df/HypercolorPastelCottonCandy.jpeg" alt="Pastel Cotton Candy, a cold and muted rainbow that reminds of different flavours of cotton candy" />
	<figcaption>
 Pastel Cotton Candy proposes a cold and muted rainbow that would serve great for background purposes. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.</a>
	</figcaption>
</figure>

```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
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/aqIG3tp5GrKE1qTTeNPYG/8facf50e11b3642b4f1e6551d2dbc527/Hypercolor-LastDawn.jpeg" alt="Last Dawn, a seemingly warm dawn-inspired gradient that shows top black tones." />
	<figcaption>
 Last Dawn represents how a seemingly warm dawn can still feel overwhelming when you're looking at it with your heart full of worries, hence the black top, as if your vision is constantly unable to see the full picture. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```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
<figure>
	<img src="https://images.ctfassets.net/hzu7wkrk7tly/48QZPSGEUw4NDMF2piW8TW/555ef8157ae1683eb382b9f68c79e0a3/Hypercolor-Everyday.jpeg" alt="Everyday, a sharp conic gradient that represents both of the light and dark stages of a day" />
	<figcaption>
 Everyday has a strong conic gradient that divides in the top center, conveying to me personally the feeling of a full-cycle day. Generated with <a href="https://hypercolor.dev/" target="_blank" rel="noreferrer noopener">Hypercolor (Opens in a new tab)</a>.
	</figcaption>
</figure>

```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))

```

... <a href="https://hypercolor.dev/generator" target="_blank" rel="noreferrer noopener">give the gradient generator a go by yourself (Opens in a new tab)</a>, and have some fun with it!

oh-no.ooo

CSS

Articles

Level up your Tailwind game

Snippets

Tailwind Merge: clean your code by removing conflicting styling

hypercolor.dev - Cool Tailwind Gradients