Discovering lesser-known features of Tailwind CSS

Hey everyone, hope you're all doing great! Today, I want to share some hidden gems in Tailwind CSS that can make your web development smoother and more fun. I've kept it simple and beginner-friendly, so let's jump right in!

Aspect Ratio Utility

Keeping your images and videos responsive with consistent aspect ratios is easy with Tailwind CSS. Just use classes like aspect-square and aspect-video, and you're good to go on any screen size. You can also use variant modifiers to target different screen sizes and modes. For example, use md:aspect-square to apply the aspect-square utility only at medium screen sizes and above.

<iframe class="w-full aspect-video md:aspect-square" src="https://www.youtube.com/..."></iframe>

Preflight

Another point to take note that Tailwind CSS comes with Preflight, a built-in CSS reset. Just include @tailwind base in your CSS, and it automatically injects these styles.

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

Preflight is a great way to avoid those annoying browser inconsistencies, like default margins on headings and paragraphs.

File input buttons

You can easily style file input buttons using the :file modifier

  <label class="block">
    <span class="sr-only">Choose profile photo</span>
    <input type="file" class="block w-full text-sm text-slate-500
      file:mr-4 file:py-2 file:px-4
      file:rounded-full file:border-0
      file:text-sm file:font-semibold
      file:bg-blue-50 file:text-blue-700
      hover:file:bg-violet-100
    "/>
  </label>

Change radio/checkbox colors

Want to customize the color of checkboxes and radio buttons? Use the accent-* utilities to override the default browser colors. One ofo the feature I used most of the time.

<label>
  <input type="checkbox" checked> Browser default
</label>
<label>
  <input type="checkbox" class="accent-violet-500" checked> Customized color
</label>

Transition Utilities

Adding transitions to UI elements is super easy with Tailwind CSS. Especially when I work on hover/active states, Transitions can really improve the user experience by making your app feel smoother and more responsive.

With transition

<button class=" bg-indigo-100 hover:bg-indigo-200 text-indigo-500 transition delay-150 duration-300 ease-in-out rounded py-2 px-3">Save Changes</button>

Without transition

<button class=" bg-indigo-100 hover:bg-indigo-200 text-indigo-500 rounded py-2 px-3">Save Changes</button>

Truncating multi-line text

Another feature I like to use is the line-clamp-* utilities to truncate a block of text after a specific number of lines without writing CSS. Furthermore, you can also remove the line clamp by using line-clamp-none. For instance, use lg:line-clamp-none to undo the previously applied line clamp on larger screens.

<p class="line-clamp-3">Reaaally long text here to truncate 3 lines above. On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.</p>

By exploring these features, you can make your development process easier and your web applications look awesome. Give these a try and see how they can improve your Tailwind CSS projects!

That's it for now. Thanks for reading! 🪄