DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Jose Restrepo
Jose Restrepo

Posted on

10 Tailwind CSS tips

In your Tailwind config file, set !important to true.

This option will append all the utility classes with the !important keyword.

This is especially useful when you’re dealing with third-party libraries that add style to some elements. This way, you’ll make sure that when you add a new utility class to these elements, they will always be applied.

javascript
// tailwind.config.js
module.exports = {
  important: true,
};
Enter fullscreen mode Exit fullscreen mode

Now, all of Tailwind’s utility classes will be generated as !important:

css
.mt-1 {
  margin-top: 1px !important;
}
.mt-2 {
  margin-top: 2px !important;
}
.mt-3 {
  margin-top: 3px !important;
}
/* And so on... */
Enter fullscreen mode Exit fullscreen mode

Tired of centering and defining the padding of your main container class?

Set some settings for your container in your configuration file and it will automatically be applied to all .container classes.

javascript
// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
      padding: "1.5rem",
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

So, there is no need to do this:

html
<div class="container p-6 mx-auto"></div>
Enter fullscreen mode Exit fullscreen mode

Now, you can just do this:

Image description

html
<div class="container"></div>
Enter fullscreen mode Exit fullscreen mode

Don’t forget, you can still add your own utility classes

The extend property in the configuration file will automatically generate and add new classes for your project. It is convenient when you need additional classes for a given CSS property.

For instance, when it comes to max-height, you only have access to the following classes:

.max-h-full    /* max-height: 100%; */
.max-h-screen  /* max-height: 100vh; */
Enter fullscreen mode Exit fullscreen mode

But, what if you need to control the max-height property with a little bit more precision with classes like: max-h-xs, max-h-sm or max-h-md?

Well, here’s how you can generate them:

javascript
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          maxHeight: {
            xs: "20rem",
            sm: "24rem",
            md: "28rem",
            lg: "32rem",
            xl: "36rem",
            "2xl": "42rem",
            "3xl": "48rem",
            "4xl": "56rem",
            "5xl": "64rem",
            "6xl": "72rem",
          },
        },
      },
    };
Enter fullscreen mode Exit fullscreen mode

Always know which breakpoint is currently active
Tailwind CSS debug screen.
The TailwindCSS Debug Screens plugin will let you display the currently active screen in development mode. It does not take more than a few seconds to set up, and it will probably save you a lot of time in the long run. This is how you can Install it:

bash
npm install tailwindcss-debug-screens --save-dev
javascript
// tailwind.config.js
module.exports = {
  plugins: [require("tailwindcss-debug-screens")],
};
Enter fullscreen mode Exit fullscreen mode

Add the class debug-screens to your

tag.
html
<body class="debug-screens"></body>
Enter fullscreen mode Exit fullscreen mode

You can disable preflight if you need to integrate Tailwind in an existing project

From the documentation: preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

This means that preflight will remove all of the default margins, font sizes, etc., for all your elements like your headings, blockquotes, lists, and so on.

A few months ago, I needed to progressively integrate Tailwind into an existing project (which had rigorous base styles). The issue with preflight is that it was breaking all the application interfaces. It took me some time before I could find a way to disable it:

javascript
// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  },
};
Enter fullscreen mode Exit fullscreen mode

Do you need to define your own breakpoints?
If your designers are being used with breakpoints that are different from the ones provided by Tailwind, no worries! Just open your configuration file and define your own. Keep in mind that you can create breakpoints with both min-width and max-width definitions if necessary.

javascript
// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: { min: "640px", max: "767px" },
      md: { min: "768px", max: "1023px" },
      lg: { min: "1024px", max: "1279px" },
      xl: { min: "1280px" },
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

// Will equal to

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      // => @media (min-width: 640px) { ... }
      md: "768px",
      // => @media (min-width: 768px) { ... }
      lg: "1024px",
      // => @media (min-width: 1024px) { ... }
      xl: "1280px",
      // => @media (min-width: 1280px) { ... }
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

Do you prefer px instead of the default rem for your padding, margins, width, and height?

The spacing property in your configuration file allows you to override the default spacing/sizing scale in a snap.

javascript
// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      "1": "8px",
      "2": "12px",
      "3": "16px",
      "4": "24px",
      "5": "32px",
      "6": "48px",
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

How to order flex-items

You are probably used to the order property if you are using flexbox. Unfortunately, Tailwind does not include it.

You will then be able to configure and generate the flexbox order classes with all of their responsive variants.

By default, here are the utility classes that are generated:

css
.-order-1 {
  order: -1;
}
.order-0 {
  order: 0;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
Enter fullscreen mode Exit fullscreen mode

It is best to avoid using @apply and extract everything into components

Adam Wathan (Tailwind’s creator), said this in a tweet:

Confession: The apply feature in Tailwind only exists to trick people who are put off by long lists of classes into trying the framework. You should almost never use it. Reuse your utility-littered HTML instead.

In a nutshell, this can result in maintainability issues. I built several projects, and I seldom had to rely on them. So trust me, this is possible!

If you are using a framework like Vue.js or React (where you define everything as components), it will be simple to avoid using the @apply feature. I rarely (if ever) use it.

I also have another reason for not using it much: I find it easier to debug the code when I only use the utility classes in my code. You can see which style is applied to each tag as you only have one place where your team can control the style (i.e., the classes).

So, use the @apply feature carefully so you can save yourself some time in the long run!

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!