---
tags: tailwind
---

# 10-tailwind-css-tips-to-boost-your-productivity

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

可讓所有的utility class都加上!important

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

css
.mt-1 {
  margin-top: 1px !important;
}
.mt-2 {
  margin-top: 2px !important;
}
.mt-3 {
  margin-top: 3px !important;
}

## 2. 覺得將main container置中跟定義padding很麻煩?

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

No need to do

html
<div class="container p-6 mx-auto"></div>

現在很簡單

html
<div class="container"></div>

## 3. 別忘了，你還是可以加入你自己的utility class
在configuration file中的**extend**會自動產生並加上新的class在你的project。當你需要新增class到CSS時，非常方便

舉例來說，當你只能access底下的class，但又想更精準控制max-height像max-h-xs, max-h-sm or max-h-md?

.max-h-full    /* max-height: 100%; */
.max-h-screen  /* max-height: 100vh; */

就可以這樣做

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",
          },
        },
      },
    };

累了，後面有空再翻，先自己看
https://blog.logrocket.com/10-tailwind-css-tips-to-boost-your-productivity/