Tailwind Tips you should know

Tailwind is an amazing utility first CSS framework... it will no doubt take you a little bit of getting used to when you first use it, but I think it's safe to say that once you start to use it you'll be pleasantly surprised at how nice it can be. Here are some of my top tips when using it.

1. Always think about component separation

I've placed this rule at the beginning, as to me this is the number 1 rule I wish I taught myself about tailwind as soon as I started out with it.

I have to admit coming from a mainly Bootstrap CSS background I got used to the fact that my HTML markup was always much easier to read semantically than it is with Tailwind, and that is true with any HTML where you can name your classes to anything you like. Tailwind unfortunately doesn't have this unique class naming ability and therefore you really need to think a bit more about splitting up your JavaScript components instead.

All modern JS frameworks are built around component separation and you can see why Tailwind was designed as a utility first CSS framework, once you stat using it, and ou start to split up your components neatly it really starts to pay off!

2. Tailwind supports per pixel amounts

Padding, margins etc can be defined as pixel values and not just their pre-defined amounts such as pt-1 or pt-5 etc - for me this was a pleasant surprise when I first found out, because I thought what a limitation it might end up being if I was trapped to only use tailwinds default margin/padding sizes. It's only rare you might need to use this syntax but super useful to know.

<div className="pt-[17px]">
    I have a top padding of exactly 17 pixels
</div>

3. Use clsx utility to join classes neatly in your JS code

One problem with tailwind is that your semantic HTML can get long, and hard to read, plus changing different classes depending on your state can get a bit horrible as well, this tiny utility can really help to make that problem easier to deal with, install it with yarn add clsx or view full code and documentation here: https://github.com/lukeed/clsx

It can be used to make your longer classes names a bit more readable by splitting onto new lines, or using a ternary statement so your UI updates depending on the state

<div className={ clsx('text-white border-2 p-3', 
    myCondition ? 
        'bg-red-400' 
        : 
        'bg-green-400'
    )
}/>

clsx also supports conditions for objects and arrays, so you could have something like the following, great when dealing with large objects that might control your UI:

<div className={ clsx('text-white border-2 p-3', {
        'bg-red-400': true,
        'bg-green-400': false
    })
}/>

4. Add your own custom classes with the @apply

Generally speaking you should consider splitting your markup into separate components, however there are times when it might be beneficial to create your own classes that you can use within your projects, instead of writing your own CSS you should consider looking at using the @apply method within your globals.css file like this:

@layer components {
  .btn {
    @apply py-2 px-4 bg-cyan-500 text-white font-semibold rounded-lg shadow-md hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-opacity-75;
  }
}

You can then re-use this within your code simply by using: <div className="btn"></div> each time! Sweet! - However, as stated, try to avoid this and use good component splitting design instead! It's better in the long run!

5. Animate your UI components using the hover method

This tip shows you how you can add a animated hover effect to a button, in this example we are making use of our @apply created btn about

<div className="btn rounded-3xl hover:rounded-xl transition-all duration-300 ease-linear">HELLO</div>

6. DarkMode - either manual of based on your OS

These days most operating systems come with a Dark mode toggle, and we can pick this up as a CSS media query with prefers-color-scheme - we can read this to change the display of tail wind by applying different colors for text, background etc.

A word of warning - this can be a tedious task to add dark mode to a pre-existing site, so I recommend you doing this early on.

Here's the basic tailwind syntax for a button that changes from a light to darker appearance if DarkMode is enabled:

<div className="btn bg-gray-400 text-gray-800 dark:bg-gray-800 dark:text-gray-200"></div>

7. Make use of pre-built components

I'm one of those developers that doesn't mind getting my hands dirty with a bit of design, but I find myself spending way too much time tweaking on stupid bits instead of getting on with the job at hand, i.e. nudging pixels 1 at a time until it's perfect, and then coming back and nudging it some more.

Anyhow, I'd recommend using ay one of these sites as they have some great Pre-built components. Some free, some paid:

...any of these links above will be able to save you a lot of time.

8. You can add !important flag to your tailwind globally

If you use a lot of 3rd party libraries that come with their own CSS then it's likely you'll have a few conflicts along the way, this can screw up the look of your site (to be fair this isn't always the fault of sloppy coding by the 3rd party, but more of design bug with CSS in general in my opinion) - anyhow to fix this you can always "put your foot firmly down" by appending the !important keyword to all of your classes globally, simply edit your tailwind.config.js file like this:

module.exports = {
  important: true,
};

This will then update your CSS file so that all classes now look like this:

.pt-1 {
  padding-top: 0.25rem !important;
}
.pt-2 {
  padding-top: 0.5rem !important;
}
.pt-3 {
  padding-top: 0.75rem !important;
}

A word of warning - Try to avoid this only as a last resort, the !important is a get out of jail card that can only really be used once!

Do you prefer Pixels instead of REM values?

Please note - this will 100% mess up your pre-existing tailwind site, but you can change the spacing to be pixels instead of rem units if you so wish:

module.exports = {
  theme: {
    spacing: {
      "1": "8px",
      "2": "12px",
      "3": "16px",
      //etc...
    },
  },
};