3 Simple Tailwind CSS Tips and Tricks

tailwind-css
Table of Contents

Finding it hard to remember what breakpoint you're currently viewing your screen at? Struggle no more!

Install the tailwindcss-debug-screens plugin and you'll be provided with a small visual helper in the bottom-left of your site.

Run this command in your project directory:

npm install tailwindcss-debug-screens --save-dev

Then register the plugin in your Tailwind configuration file:

module.exports = {
    //...
    plugins: [
        require('tailwindcss-debug-screens'),
    ]
}

And finally add the new debug-screens class to your <body> tag:

<body class="debug-screens">

You should ensure that this class is only added to the <body> in development. Wrap the class inside of a conditional or exclude the plugin at part of your build process.

This is definitely one that you can start implementing in your project. Have you ever seen any class lists like this?

<h1 class="text-xl text-gray-500 focus:text-gray-800 hover:text-gray-800 mb-1 sm:text-2xl sm:mb-2 md:text-3xl md:mb-4 xl:text-5xl">

These can get rather large, rather quickly. As they get larger and more breakpoint-specific classes come into play, it can get harder to see each breakpoints styles.

One trick that I like to use is inserting a style-less / marker class between each breakpoints section.

<h1 class="text-xl text-gray-500 focus:text-gray-800 hover:text-gray-800 mb-1 | sm:text-2xl sm:mb-2 | md:text-3xl md:mb-4 | xl:text-5xl">

In this case, I'm using a single | as the marker for a new breakpoint. It gives each section some breathing room but also provides a visual indicator for where a new screen definition starts.

You could use any valid CSS class here instead, but a | is very common for separating things in many contexts.

3. Give your text editor / IDE some Tailwind love

There are plenty of great extensions out there for improving your Tailwind development experience. Here are some of my favourites and ones I would highly recommend to any Tailwind developer.

This is an official extension for Visual Studio Code and comes with some really, really neat features.

  • Autocompletion for class names and CSS functions.
  • Linting of your classes and CSS files.
  • Syntax highlighting of custom Tailwind directives.
  • Hover previews that show entire CSS definitions for CSS classes.

I think it's great when a project develops a first-party extension for their own tool. It adds a certain degree of reliability and trust.

Headwind is a Tailwind class sorter extension for Visual Studio Code. The documentation states that "It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order".

I've been using this one for quite a while now and once you get used to the order, it can make finding a class in a long list much easier.

If you're a PhpStorm user, you can get a Headwind port plugin here.

Enjoyed this post or found it useful? Please consider sharing it on Twitter.