5 quick Tailwind CSS tips and a bunch of resources

Introduction

If you're a Tailwind CSS user, you know it's hard to shut up about it. At least for me. I'm always happy to share my experience with it, so here are 5 quick tips and resources.

Use custom plugins

I came across a issue where I had to clamp a line of text. I created a local css style tag in my Vue file named .clamp and clamped the line to only show 1 row. Quickly I found myself copying the same clamp class but now for a five line piece of text. Repeating the code and only replacing one line. This is redundant and can be solved with a custom plugin. Here is the example code in my tailwind.config.js.

module.exports = {
  theme: {
    lineClamp: {
      1: 1,
      5: 5,
    },
  },

  plugins: [
    plugin(({ addUtilities, theme, e, variants }) => {
      const mappedClamp = Object.entries(theme('lineClamp')).map(
        ([key, value]) => {
          return {
            [`.${e(`clamp-${key}`)}`]: {
              display: '-webkit-box',
              '-webkit-box-orient': 'vertical',
              '-webkit-line-clamp': `${value}`,
              overflow: 'hidden',
            },
          }
        }
      )

      addUtilities(mappedClamp, variants('lineClamp', []))
    }),
  ],
}

Now you can use clamp-1 or clamp-5 wherever you want. It's also really easy to add another clamp value in theme.lineClamp. Learn more about using plugins.

Safari gradient that works

The gradient transparent option Tailwind provides doesn't work in Safari (at time of writing). If we have bg-gradient-to-r from-blue-600 to-transparent we'll see a nice fading gradient in Chrome. But in Safari instead of fading we'll see a gray color. Luckily we can quickly fix this.

module.exports = {
  theme: {
    gradientColorStops: (theme) => ({
      ...theme('colors'),
      transparent: 'rgba(255, 255, 255, 0.01)',
    }),
  },
}

This will make transparent a black with an alpha channel so low ('0.01'), that it's practically transparent. Safari will now show a gradient that fades out instead of a gray color.

Use components over '@apply'

Use Tailwind CSS how it is intended. As an utility-first framework. If your app scales and you find yourself repeating classes, make a component over a reusable css class with @apply.

<div>
  <button class="btn btn--orange">orange button</button>

  <button class="btn btn--blue">blue button</button>
</div>

.btn {
  @apply px-3 py-2;
}

.btn--orange {
  @apply bg-orange-400;
}

.btn--blue {
  @apply bg-blue-400;
}

What if we want to reuse the orange button on another page? We have to extract the btn and btn--orange to a global css file or duplicate our css code. If your project really grows it's hard to understand where all css is located.

Instead of recreating different buttons we can create a button component which receives a prop that changes just a fraction of the css making it very re-useable and scaleable. For this example I'm using Vue.

<template>
  <button
    class="px-3 py-2"
    :class="[
      { 'bg-blue-400': color === 'blue' },
      { 'bg-orange-400': color === 'orange' },
    ]"
  >
    {{ color }} button
  </button>
</template>

<script>
  export default {
    props: {
      color: {
        type: String,
        required: true,
      },
    },
  }
</script>

Now we have a BaseButton component that keeps your code organized and is reusable. Let's change our index.vue.

<template>
  <div>
    <base-button color="orange" />

    <base-button color="blue" />
  </div>
</template>

Use tailwind VS Code extensions

Headwind

On of the arguments against Tailwind is that it clutters your html and makes the classes unreadable. A solution to this problem is Headwind. Headwind, like Stylelint does for normal css, sorts Tailwind classes in VS Code forcing an order. So mt-2 w-12 flex items-center and flex w-12 mt-2 items-center in the same project will be mt-2 w-12 flex items-center twice. This makes your code consistent and saves you a lot of headaches.

Tailwind CSS IntelliSense

Unmissable is Tailwind CSS IntelliSense. It enhances your editor with autocomplete, syntax highlighting and linting.

Master margins

Maybe not a Tailwind specific tip, but relevant nonetheless. Try to be consistent with margins. Choose to use mt- or mb- consistently. Also make sure to have parent components place children. In the following example I only use mt- to create space between the elements.

<template>
  <div>
    <h1>Title of the page</h1>

    <card-list class="mt-4" />

    <p class="mt-8">Some random text</p>
  </div>
</template>

In the next example I like to use space-y- on the outside element to indicate that all items inside will have an equal distance. Though not consistent with mt- it saves repeating and is more declarative.

<template>
  <div class="space-y-4">
    <card-list-item />

    <card-list-item />

    <card-list-item />
  </div>
</template>

Never add a margin on the outside element of a child component. Otherwise your component is not reusable or you'll spend frustrating time in figuring out where the margin of the card is coming from.

<template>
  <div class="p-4 mx-12">Card</div>
</template>

Instead the CardList we've shown before should take care of the margin.

Conclusion

Tailwind is a framework that makes our lives more easy and productive. I hope these tips added an extra cherry on top of that. If you have a tip yourself or a question, let me know. Happy building!

Other interesting resources

Tailwind UI - Why design and build yourself when the maintainers built it for you?

UI Devtools - A devtool that helps your style with Tailwind CSS in the browser.

Windy - A tool that let's you select elements in the browser and converts the styling to Tailwind CSS.