Level up your Tailwind game
Tags: tailwindcss, css, mixin, webdev
Published: 2024-06-07 20:28:07

---
title: Level up your Tailwind game
published: true
description: Use Tailwind like you mean it! Whether you're a seasoned developer or just starting out, this article will help you navigate Tailwind CSS and expand your knowledge with advanced practices.
tags: #tailwind #tailwindcss #css #mixin #webdev
cover_image: https://images.ctfassets.net/hzu7wkrk7tly/5yJtow80Yw1D8adU9DekLV/382e0bb9fba9ed030fcc5877049ad73c/level_up_your_tailwind_game.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-07 20:51 +0000
canonical_url: https://www.oh-no.ooo/articles/level-up-your-tailwind-game
---

This is my first article in Dev.to, please be patient with the poor markdown-ing!

<hr />

Alright, this article might or might not be for you.

If you're the type of person that finds some Tailwind UI components and copies all the classes without any second thought, this might be for you.

If you're passionate about Tailwind and you appreciate getting creative with its utilitarian classes, this might be for you.

If you struggle with Tailwind and wonder *why can't we just stick to plain old CSS*, this might be for you.

If you don't like repetition and suspect that (besides wasting your time with the previous statements) some of the things that I'll show here are something you're already aware of, this might still be for you — repetition can't be that bad and I really tried to bring in something for everybody!

The idea here is to __go through a Tailwind speed-run and find things that could help you use it more efficiently__. And if nothing resonates with you, share with me in the comment section what did I miss :D

*(And yes, the assumption is that you use VSCode, and occasionally Next.js for a thing or two, although a lot of these topics remain valid also with other frameworks.)*

Let's get started then, shall we?

Before you proceed reading, let's make sure you are already using <a href="https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss" target="_blank">Tailwind CSS Intellisense</a>, because if you're not, you definitely should. It's impossible to remember all the classes that Tailwind offers, and a little while we type them out is really appreciated!

Speaking of classes...

<br/>
## Classes, classes everywhere!
![The typical ToyStory meme with Buzz and Woody looking up. The top text says 'classes' and the bottom text says 'classes everywhere' to emphasise on the amount of CSS classes people have to deal with usually when they start with Tailwind. Image made at imgflip.com](https://images.ctfassets.net/hzu7wkrk7tly/6cofV2U5rxDoRXjqVmbyFy/4c80c2a0de01e3282adb73cdaf04496e/classes_classes_everywhere.jpeg)Meme generated with <a href="https://imgflip.com/memegenerator" target="_blank">Imgflip Meme Generator</a>
<br />

Yes, let's make sure we start with the easy-peasy. Lots of people complain that Tailwind *litters* the project components with hecklots of classes, making it difficult to read through the component. To them I tell... have you heard of <a href="https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold" target="_blank">Tailwind Fold</a> by <a href="https://marketplace.visualstudio.com/publishers/stivo" target="_blank">Stivo</a>? No? Now you have.

In his <a href="https://flaviocopes.com/hiding-classes-in-vs-code/" target="_blank">article about Hiding classes in VSCode</a>, our friend and constant source of inspiration <a href="https://flaviocopes.com/" target="_blank">Flavio Copes</a> goes through a quick look at how this VSCode extension simply shows and hides the classes through a simple click.

While this is a worthy approach, you might not want to click to toggle classes visibility (I know I don't), and therefore the next suggestion would be...

<br/>
## Tailwind + Sass (and a sprinkle of `@mixin` if you will)
*(We'll assume you're using Next.js, because, let's be honest, what else would you want to use if you had a choice?! I'm kidding, kinda :D)*

We all love (I hope, otherwise why are you here?!) the power of Tailwind, but separating the functional part of a component from its styling is still a dream for many. The good news? You can achieve this by combining Tailwind with Sass! You just need to install Sass and everything will start working right off the bat!

Joaquin Collado, through <a href="https://www.rootstrap.com/" target="_blank">Rootstrap</a>, has <a href="https://www.rootstrap.com/blog/how-to-use-module-scss-with-tailwind-in-next-js" target="_blank">an easy guide on how to Use Module SCSS with Tailwind in Next.js</a>. Let's follow along!

First, install Sass

```bash
npm install --save sass
```

Then, create the `.module.scss` for your components, e.g. `Button.module.scss`

```scss
.button {
  @apply p-4 rounded bg-blue-500;
}
```

Import the styles in the component
```tsx
import styles from './Button.module.scss';
```

And finally use them in your React component
```tsx
/* ... */

<button className={styles.button}>Click Me</button>

/* ... */
```

Ta-da! 🎉 You will now be able, for most things, to separate the Tailwind classes from your component.

And you know what?! This approach allows you to use also the `@mixin` properties if you're used to them!

<blockquote>
<p>Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like <code class="not-italic">.float-left</code>, and to distribute collections of styles in libraries.</p>
— <a href="https://sass-lang.com/documentation/at-rules/mixin/" target="_blank">@mixin and @include</a> explanation from the <a href="https://sass-lang.com/" target="_blank">official Sass documentation</a>
</blockquote>

<a title="CodeSandbox Tailwind + Sass + @mixin demo repository" href="https://codesandbox.io/p/github/mahdava/quirky-kiwi/main?amp%3Bembed=1&file=%2Fcomponents%2FsassButton%2FsassButton.tsx&embed=1" target="_blank">Have a look at this demo repository in CodeSandbox where you can see Tailwind + Sass + a simple implementation of `@mixin` in action</a>, or — if you prefer — <a href="https://github.com/mahdava/quirky-kiwi" target="_blank">test this implementation of Tailwind + Sass + `@mixin` locally by cloning it from GitHub</a>.

So, let's take it slow and check... what do we have over there?

```jsx
// page.tsx
import SassButton from "@/components/sassButton/sassButton";
/* ... */
<SassButton>Hello, I am a simple button</SassButton>
<SassButton className="block mt-4" variant="cancel">
    Me too!
</SassButton>
/* ... */
<SassButton className="w-full m-2" variant="alert">
    I am a variant that takes in
    both color and optional text color
</SassButton>
```

We have a poorly-named `SassButton` component that can accept two props (ignoring the children, in our case the text we want our button to have), `className` and `variant`. Both props are optional, and while we get later to `className` and best practices on how to use that, let's focus on the `variant` part.

Now, moving to the button component

```jsx
// SassButton.tsx
import cx from "classnames";
import { FC } from "react";
import styles from "./sassButton.module.scss";

interface SassButtonProps {
  variant?: "default" | "cancel" | "alert";
  className?: string;
  children: React.ReactElement | string;
}

const SassButton: FC<SassButtonProps> = ({
  variant = "default",
  className = "",
  children,
}) => (
  <button className={cx(
    styles["button-" + variant], 
    className
  )}>
    {children}
  </button>
);

export default SassButton;
```

we use the `variant` prop to determine what style the button will inherit from our `sassButton.module.scss` (which will be `button-<variant_name>`), and when no variant is set we just set its value to `default`.

Let's finally have a look at the Sass module.

```scss
@mixin button-styles(
$button-bg-color, 
$button-text-color: "white"
) {
  background-color: $button-bg-color;
  color: $button-text-color;
  @apply p-4 rounded;
}

.button-default {
  // here you can pass the background color
  // text color will use the default from the @mixin
  @include button-styles(blue);
}

.button-alert {
  // here you can pass both background color and text color
  @include button-styles(orange, black);
}

.button-cancel {
  @include button-styles(#ff0000);
}
```

Our sass module starts with the overall shape and appearance of our button through the `@mixin` directive called `button-styles`, and it uses `$button-bg-color` and `$button-text-color` as variables to customize the color of the background and the text of the button.

Subsequently, we reuse the same setup by providing the variants *default* *alert* and *cancel* with the desired background and text color (the latter being optional and defaulting to *white* if nothing else is specified) by calling on `button-style` through the `@include` directive.

(Congratulations, you just had an absolute speed-run on how to use `@mixin` if this is your first time!)

Notice that with this approach nothing forbids us to use Tailwind classes at any point; we are already using simultaneously traditional CSS properties combined with Tailwind classes. Allegedly, no one could stop us from doing

```scss
.button-cancel {
  @include button-styles(#ff0000);
  @apply text-xs underline;
}
```

and it would be up to us to choose how to organise and create all the variants.

Heck, you might and think "why bringing `@mixin` up at all?" and in general I would say that Tailwind on its own is more than enough, but in a system that needs to contemplate multiple variants of the same component, `@mixin` could be the solution you were looking for — also, my objective with this article is to showcase more possibilities on how to work with Tailwind!

(Also... for some reason, I am not successful setting up a default value for `$button-bg-color`, if you know why let me know in the comments how to set all the parameters optional!)

<hr />

So do you remember that `className` I said I was gonna mention again later? Now it's the time, for we are going to talk about...

<br/>
## The misunderstood art of managing space between elements and sections

If you're working with a good design system, I'd expect everything to be well-divided in <strong>sections</strong> and you being blessed with the consistency of everything spaced *consistently* throughout the project.

A good design system would have an atomic structure, where each smallest __atom__ is a discernible component that may coincide to one or a few more HTML elements in the page that provide some value. Using these atoms/components together would form __molecules__, which would be the equivalent of a header, footer, sidebar — which all are __sections__ of a website page — and a full page could be then considered an __organism__.

The reality is that most times, __designers work in components and not in sections__, meaning that there's no real concept of molecules, just atoms and straight into organisms. This implies that there is easily a lot of discrepancy on how much space there can be above an heading or below a section based on the rest of the content of the page if there is no clear demarcation of the end of a section and the beginning of another.

![Example of bad spacing in a design system and/or its implementation](https://images.ctfassets.net/hzu7wkrk7tly/4JIxIJWuwdWQLMEoJdgF30/c2bb17815dd812a8f65ed28532562760/bad_spacing_in_design.png)In the above image (titled *Bad spacing*), the elements have an __add a margin down approach__ to space components between each other. While this might still result in the desired appearance for some pages, reusing the same components in new pages will cause issues as the margins might differ. There is no clarity on how much space the navigation or the article header should have, nor how much their components should have space around them.
<br />


![Example of a better spacing handling in a design system and/or its implementation](https://images.ctfassets.net/hzu7wkrk7tly/2GnHsEx4Y2uK59iRuumJ4R/e99c6c93d925b5759a2e51c17ecce6d5/better_spacing_in_design.png)In this other image (titled "Better spacing") we can see an improved understanding of spacing between elements and a clearer use of sections. We are able to deduct how much space there should be around each component, not only under, and which part of the overall space doesn't really belong to any component.

(Yes, I know, some components such as "Tags" should also be able to see the settings of each single "Tag" and in my picture they are all compact together, but I just wanted to get the spacing point across... :D)
<br />

While we are not here to discuss about design systems (although I would anytime), I want you to acknowledge that __components shouldn't directly take care of accommodating spacing based to their position in a page__, but rather, they should be able to __circumstantially receive and accommodate their spacing directives__. 

What do I mean by circumstantially? Nothing more than accepting classes related to the spacing that is needed for the page where the component will show up.

<a href="https://codesandbox.io/p/github/mahdava/snappy-melon/main?file=%2Fapp%2Farticles%2Fpage.tsx&workspaceId=ffe5e611-b2f7-47e3-8cb3-c95e41c7d6b5" target="_blank">You can check this CodeSandbox to test how to give arbitrary spacing classes to a component</a> or, like before, <a href="https://github.com/mahdava/snappy-melon/blob/main/app/page.tsx" target="_blank">you can check how to give arbitrary spacing classes from this GitHub repository</a>.

Let's dig into the code.

We have three different pages, `app/pages.tsx`, `app/articles/page.tsx` and `app/about/page.tsx` that make use of the same `<HeaderTitle>` component. The homepage uses the component without worrying much about its spacing in the page:

```jsx
// app/page.tsx

/* ... */

<HeaderTitle
  title="Lorem ipsum"
  description="This HeaderTitle component 
doesn't have any extra spacing setting"
/>

/* ... */
```

Meanwhile, both `app/articles/page.tsx` and `app/about/page.tsx` infer an extra `className` property that allows the `<HeaderTitle>` component to take up different space in the page.

```jsx
// app/articles/page.tsx

/* ... */

<HeaderTitle
  title="Lorem ipsum"
  description="This HeaderTitle has some extra margin 
around it to fit better something like an article title"
  className="my-24 mx-12" // we added margins for this page
/>

/* ... */

// app/about/page.tsx

/* ... */

<HeaderTitle
  title="Lorem ipsum"
  description={
    <>
      <ul>
        <li>
          This HeaderTitle shows how much 
          flexibility you can have
        </li>
        <li>
          while the component itself doesn&apos;t have 
          to include natively any &apos;fixed&apos; 
          position
        </li>
      </ul>
    </>
  }

  // with this approach, we can also infer
  // other styles related to the position of the element
  className="fixed right-0 top-24"
            
/>

/* ... */

```

The point here is that __the code of the `<HeaderTitle>` component itself remains untouched and un-duplicated, while its spacing properties are relative to the contexts it gets used on, allowing for flexibility of usage across different pages and different needs__.

You might want to argue now "couldn't we just wrap the component into another div whenever we need more space around it?", and while that is possible, it also creates extra elements that might create challenges while delivering semantic HTML. Also, it really helps us categorizing which classes we need for its spacing and positioning, and which ones are for the component itself.

Which, guess what, leads us straight into the next topic!

<br/>
## Grouping by purpose for the sake of readability
It takes absolutely nothing to make Tailwind classes difficult to digest; you check one component's styling and all you see is a long list of classes and no quick glance will prevent you from mistakenly apply a second `mx-` class or so. 

So, next in my personal recommended Tailwind best-practices, is to think about what each class is doing — layout, spacing, typography, colors, etc. — and group by that!

For example, instead of writing

```html
<div class="mt-4 bg-blue-500 text-white p-6 rounded-lg shadow-lg hover:bg-blue-700">
  <!-- content -->
</div>
```

You could organize them like this

```html
<div class="p-6 mt-4 rounded-lg shadow-lg bg-blue-500 text-white hover:bg-blue-700">
  <!-- content -->
</div>
```

Grouping similar classes together makes it easier to read and understand what stylings are being applied to the element. 

If it sounds daunting as a task, worry not! Someone has already thought of a VSCode extension, <a href="https://marketplace.visualstudio.com/items?itemName=Trapfether.tailwind-raw-reorder" target="_blank">Tailwind Raw Reorder</a>, that will take care of the sorting for you! (And apparently, it also works in `module.scss` files without any extra configuration!)

The order that the extension proposes is as follows (or at least ChatGPT think it is — at least I couldn't find this from anywhere else):

<ol>
  <li><strong>Layout:</strong> container, box-border, box-content, etc.</li>
<li><strong>Positioning:</strong> static, fixed, absolute, relative, sticky, etc.</li>
<li><strong>Flex and Grid:</strong> flex, inline-flex, grid, inline-grid, etc.</li>
<li><strong>Spacing:</strong> m-0, p-0, space-x-0, etc.</li>
<li><strong>Sizing:</strong> w-full, h-full, max-w-full, min-h-full, etc.</li>
<li><strong>Typography:</strong> font-sans, text-sm, font-bold, etc.</li>
<li><strong>Background:</strong> bg-white, bg-opacity-50, etc.</li>
<li><strong>Border:</strong> border, border-0, rounded, ring, etc.</li>
<li><strong>Effects:</strong> shadow, opacity-0, etc.</li>
<li><strong>Transitions and Transforms:</strong> transition, duration-300, ease-in, scale-100, etc.</li>
<li><strong>Miscellaneous:</strong> cursor-pointer, select-none, etc.</li>
</ol>

<a href="https://www.reddit.com/r/tailwindcss/comments/1720acu/vscode_tailwind_class_reorder_extension/" target="_blank">You can read more about the development journey of Tailwind Raw Reorder on Reddit</a>, where people talk also about the <a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank">official recommendation for Automatic class sorting with Tailwind</a> (which I don't recommend anymore because it only sorts classes alphabetically, although I wouldn't necessarily diss, as <a href="https://www.oh-no.ooo/snippets/tailwind-automatic-class-sorting-with-prettier">I did like the combo of Tailwind + Prettier it when I discovered its existence</a>).

It is fair to note that <a href="https://marketplace.visualstudio.com/items?itemName=Trapfether.tailwind-raw-reorder" target="_blank">Tailwind Raw Reorder</a> by <a href="https://marketplace.visualstudio.com/publishers/Trapfether" target="_blank">Andrew Trefethen</a> is a fork of <a href="https://marketplace.visualstudio.com/items?itemName=heybourn.headwind" target="_blank">the now dated Headwind VSCode extension</a>.

Well damn, if this isn't all that you need to make the most out of Tailwind in a smart way!

But wait! There's more!

<br/>
## Tailwind Merge to the rescue
While I've already written <a href="https://www.oh-no.ooo/snippets/tailwind-merge-clean-your-code-by-removing-conflicting-styling">a small snippet about Tailwind Merge</a>, let me reiterate here what's for.

Like the name suggests, <a href="https://www.npmjs.com/package/tailwind-merge" target="_blank">`tailwind-merge` npm package</a> by <a href="https://github.com/dcastil" target="_blank">Dany Castillo</a> offers a solution that combines and reuses Tailwind utility classes.

Suppose you have a button component that can be either primary or secondary, with different styles for each state, some styles taken from a `button.module.scss` and perhaps with something else inherited by `className` as we have seen is possible from above (oh god, what a mess — I am legally obligated to mention the classic *"Your scientists were so preoccupied with whether or not they could that they didn't stop to think if they should."*).

Instead of having to figure out *whyyy is the padding not working* as you'd expect, you can use tailwind-merge and give hierarchy on how all the various classes take priority.

```jsx
// button.tsx

import { FC, ReactNode } from 'react';
import { twMerge } from 'tailwind-merge';
import styles from './button.module.scss';

interface ButtonProps {
  type?: 'primary' | 'secondary';
  className?: string;
  children: ReactNode;
}

const Button: FC<ButtonProps> = ({ type = 'primary', className, children }) => {
  const baseClasses = 'p-4 rounded-lg';
  const typeClasses = type === 'primary' ? 'bg-blue-500 text-white' : 'bg-gray-500 text-black';

  return (
    <button className={twMerge(baseClasses, typeClasses, styles.button, className)}>
      {children}
    </button>
  );
};

export default Button;
```

Assuming a fictitious `button.module.scss` containing

```scss
// button.module.scss

.button {
  @apply text-xl;
}
```

The button will eventually have the following classes
```text
'p-4 rounded-lg bg-red-500 underline text-xl text-white'
```

This approach eliminates potential conflicts and contradictions and hopefully keeps your elements rendered with fewer clean(er) classes.

The one caveat of Tailwind Merge, imho, is that you would have to start using it at the beginning of a project; however, nothing prevents you from progressively add it into the codebase.

<hr />

Now, what else? Well, there's plenty! 

<br/>
## Speed it up with component libraries
We all like to keep rebuilding the wheel, as every project proposes different nuances and we just want that button to work *exactly* as we had it envisioned. But the key to a successful "I build it my way" is to know when to build and when to borrow.

<a href="https://ui.shadcn.com/" target="_blank">shadcn/ui</a> offers a great set of components (styled with Tailwind) that you can take as-is and customize all while they already include some accessibility contemplations. It differs from other libraries as it invites you to be hands-on the actual component and it allows you to modify it to your exact needs without having to create extra levels of abstractions for customisation.

It is worth to note that, like everything, it is not perfect and sometimes you might want to rewrite a couple of things here and there. For example, its class handling proposes a mix of `clsx` and `twMerge` that might be redundant, as described by <a href="https://medium.com/@pablo.haller" target="_blank">Pablo Haller</a> in his article <a href="https://medium.com/@pablo.haller/something-i-dont-like-from-shadcn-ui-3b71c9080a7d" target="_blank">Something I don’t like from shadcn/ui</a>.

That being said, shadcn/ui is a great way to speed up your work, especially combined with some good Figma prototyping made simple for you by <a href="https://www.figma.com/@skirano" target="_blank">Pietro Schirano</a> with their Figma <a href="https://www.figma.com/community/file/1203061493325953101" target="_blank">@shadcn/ui - Design System</a>.

And while shadcn/ui is a great free solution to implement ready-made-tailwind-styled components, you might want to use a more mature system such as Flowbite.

<a href="https://flowbite.com/" target="_blank">Flowbite</a> (whose main contributor is <a href="https://flowbite.com/blog/author/zoltan/" target="_blank">Zoltán Szőgyényi</a>) is a component library that is also built on top of Tailwind CSS. It provides a broader set of UI components that you can easily integrate into your Tailwind projects and it really helps you making everything look professional and curated from the very beginning.

On top of everything, Flowbite proposes a lot of videos that help you navigate the new ecosystem, as well as a lot of constant updates to their product, which we know is something we desire in a system that we want to implement and hopefully use for a long time.

If you want to familiarise with a great design system but you're not ready yet to make a monetary commitment, Flowbite is the right resource nonetheless. They offer also a free version of their <a href="https://www.figma.com/community/file/1179442320711977498" target="_blank">Flowbite Design System</a>, which can help you speed up your prototyping and design process while keeping high-quality mockups — and eventually figure out if Flowbite is the solution you were looking for.

<br/>
## Let's talk about forms
Got no time to make that form pretty? Worry not, because <a href="https://github.com/tailwindlabs/tailwindcss-forms/tree/master?tab=readme-ov-file" target="_blank">Tailwind Forms</a> can come to the rescue to style in a consistent manner all your forms!

It provides base styles for form controls like inputs, text areas, checkboxes, and radio buttons. 

You can simply install the plugin
```bash
npm install @tailwindcss/forms
```

add it to your tailwind.config.js
```js
module.exports = {
  //...
  plugins: [
    require('@tailwindcss/forms'),
  ],
}
```

and that's pretty much it! Wanna customise something more? Feel free to add some extra styles to the form elements like you normally would!

Be sure to check out the <a href="https://github.com/tailwindlabs/tailwindcss-forms/tree/master?tab=readme-ov-file" target="_blank">Tailwind Forms documentation</a> and be sure to checkout the <a href="https://tailwindcss-forms.vercel.app/" target="_blank">Tailwind Form example</a> they provide!

<br/>
## Snippity snippets!
I'd like to end this article by shining some lights on other majestic work that people have done and shared.

![Tailwind UI Homepage](https://images.ctfassets.net/hzu7wkrk7tly/1VqHSzwMvbUCSHeNpRFxT4/9eb7ae356355ca3f412c2ae581724f3b/tailwindui.png)The homepage of <a href="https://tailwindui.com/" target="_blank">Tailwind UI</a>.
<br />

You can find a ready-made collection of templates in <a href="https://tailwindui.com/components" target="_blank">Tailwind UI</a>, developed and curated by the very same creators of Tailwind. It's a nice mature collection of components and templates, with the only downside that it will cost you some money. But hey, quality stuff nevertheless!

![Tailwind Snippets](https://images.ctfassets.net/hzu7wkrk7tly/6cDgdFcacIB63GNFTkSpcd/351abeabebb69df812e1ab624a62a950/tailwind_snippets.png)The homepage of <a href="https://react-tailwind-snippets.vercel.app/" target="_blank">Tailwind Snippets</a>.
<br />

<a href="https://react-tailwind-snippets.vercel.app/" target="_blank">Tailwind Snippets</a>, as it mentions in their homepage, proposes a collection of UI templates to speed up your UI development using React and Tailwind CSS. Quick and easy to browse, find the elements you need and copy away!

![Tailwind Snippets](https://images.ctfassets.net/hzu7wkrk7tly/aMB4NOWpxJrjqKI9L0Aqq/c370438339aaa99b6c65aead47948375/tailwind_snippets_vscode.png)<a href="https://tws.zarifprogrammer.com/" target="_blank">Tailwind Snippets</a> website, but the one of the <a href="https://marketplace.visualstudio.com/items?itemName=Zarifprogrammer.tailwind-snippets" target="_blank">Tailwind Snippets VSCode plugin</a>.
<br />

With the same name but with a VSCode extension coming along with it, <a href="https://marketplace.visualstudio.com/items?itemName=Zarifprogrammer.tailwind-snippets" target="_blank">Tailwind Snippets</a> is a VSCode extension that allows you to take advantage of the numerous snippets available in <a href="https://tws.zarifprogrammer.com/" target="_blank">Tailwind Snippets</a> and developed by <a href="https://studio.zarifprogrammer.com/" target="_blank">ZS Software Studio</a>.

![Tailwind Components](https://images.ctfassets.net/hzu7wkrk7tly/KeYdPqQhZnTQFU7gZERvA/2fb0ebf91613215023933b52fc93a569/tailwind_components.png)<a href="https://tailwindcomponents.com/" target="_blank">Tailwind Components</a> website.
<br />

On the same note, you'll find <a href="https://tailwindcomponents.com/" target="_blank">Tailwind Components</a> with its community-shared free-to-use components... all the options!

And these are just a few of the ready-made snippets you can copy away. Do you have a favourite one, or am I missing out on something good? Please share!

<hr />

I hope you found some good resources in this article, and that ideally you might have learned a thing or two. If you have any questions or additional tips, drop a comment below!

## Sources and inspiration
- <a href="https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss" target="_blank">Tailwind CSS Intellisense</a> by <a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a>
- <a href="https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold" target="_blank">Tailwind Fold</a> by <a href="https://marketplace.visualstudio.com/publishers/stivo" target="_blank">Stivo</a>
- <a href="https://flaviocopes.com/hiding-classes-in-vs-code/" target="_blank">Hiding classes in VSCode</a> by <a href="https://flaviocopes.com/" target="_blank">Flavio Copes</a>
- <a href="https://www.rootstrap.com/blog/how-to-use-module-scss-with-tailwind-in-next-js" target="_blank">How to Use Module SCSS with Tailwind in Next.js</a> by Joaquin Collado via <a href="https://www.rootstrap.com/" target="_blank">Rootstrap</a>
- <a href="https://chat.openai.com/" target="_blank">ChatGPT</a> prompt:
`Can you show me what order would the class list (handled by Tailwind Raw Reorder) have?`
- <a href="https://marketplace.visualstudio.com/items?itemName=Trapfether.tailwind-raw-reorder" target="_blank">Tailwind Raw Reorder</a> by <a href="https://marketplace.visualstudio.com/publishers/Trapfether" target="_blank">Andrew Trefethen</a>
- <a href="https://www.npmjs.com/package/tailwind-merge" target="_blank">`tailwind-merge` npm package</a> by <a href="https://github.com/dcastil" target="_blank">Dany Castillo</a>
- <a href="https://ui.shadcn.com/" target="_blank">shadcn/ui</a> main website
- <a href="https://medium.com/@pablo.haller/something-i-dont-like-from-shadcn-ui-3b71c9080a7d" target="_blank">Something I don’t like from shadcn/ui</a> by <a href="https://medium.com/@pablo.haller" target="_blank">Pablo Haller</a>
- <a href="https://flowbite.com/" target="_blank">Flowbite</a> by <a href="https://flowbite.com/blog/author/zoltan/" target="_blank">Zoltán Szőgyényi</a>
- <a href="https://www.figma.com/community/file/1179442320711977498" target="_blank">Flowbite Design System</a> on <a href="https://www.figma.com" target="_blank">Figma</a>
- <a href="https://github.com/tailwindlabs/tailwindcss-forms/tree/master?tab=readme-ov-file" target="_blank">Tailwind Forms documentation</a> 
- <a href="https://tailwindui.com/components" target="_blank">Tailwind UI</a>
- <a href="https://react-tailwind-snippets.vercel.app/" target="_blank">Tailwind Snippets</a>
- <a href="https://tws.zarifprogrammer.com/" target="_blank">Tailwind Snippets</a>, the one that offers the <a href="https://marketplace.visualstudio.com/items?itemName=Zarifprogrammer.tailwind-snippets" target="_blank">Tailwind Snippets VSCode plugin</a>
- <a href="https://tailwindcomponents.com/" target="_blank">Tailwind Components</a>
- Cover: <a href="https://www.freepik.com/free-ai-image/view-3d-young-school-student_133758575.htm" target="_blank">3d young school student</a> by <a href="https://freepik.com" target="_blank">Freepik</a>, <a href="https://www.freepik.com/free-vector/flat-abstract-wireframe-background_16133537.htm" target="_blank">Flat abstract wireframe background</a> by <a href="https://freepik.com" target="_blank">Freepik</a>, Tailwind logotype from <a href="https://tailwindcss.com/brand" target="_blank">Tailwind Official Brand page</a>, semi-random coding text generated with <a href="https://carbon.now.sh" target="_blank">Carbon</a>
<hr />

Originally posted in <a href="https://oh-no.ooo">oh-no.ooo</a> (<a href="https://www.oh-no.ooo/articles/level-up-your-tailwind-game">Level up your Tailwind game</a>), my personal website.