This week I’ve been using Atom as my primary IDE, instead of PHPStorm. One of the crucial things that Atom doesn’t come out of the box with is the ability to have multiple lines of tabs. What’s amazing though is that since Atom is mostly a glorified browser, everything about it is customizable through CSS. Here’s the CSS I’m using to have multiple lines of tabs.

.tab-bar {
  height: auto;
  flex-wrap: wrap;
  .tab,
  .tab.active {
    flex: 1 0 auto;
    height: 30px;
    line-height: 27px;
  }
  .tab .title,
  .tab.active .title {
    padding-right: 5px;
    position: relative;
    top: 1px;
  }
}

To use this, just paste it in Atom -> Stylesheet... in the menu bar. It’s is a modified copy and paste from this GitHub issue. The only thing I changed was the line height. Probably the core CSS for Atom has changed since then, because that line height made the close buttons look really bad.

The ability to just customize your IDE directly via CSS like this is so amazing.