Can I hide native tabs at the top of Firefox?

To hide the native tabs, you'll have to add a new file called userChrome.css and the css property visibility: collapse.

To do this, in Firefox click on Click on Menu -> Help -> More Troubleshooting Information or navigate to about:support in the address bar.

Under the Application Basics section, there will be a section called Profile Folder with a button to Open Directory.

In the Profile Directory create a new folder called chrome. In the chrome folder create or edit the file userChrome.css if it already exists.

The contents of userChrome.css should be the following.

/* hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}

Some optional further modifications to put in userChrome.css are:

/* hides the title bar */
#titlebar {
  visibility: collapse;
}

/* hides the sidebar */
#sidebar-header {
  visibility: collapse !important;
} 

A configuration that Xilin Sun uses is:

/* hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}
/* leaves space for the window buttons */
#nav-bar {
    margin-top: -8px;
    margin-right: 74px;
    margin-bottom: -4px;
}

Try these out and see what you think looks best.

To answer your question in the comment, you may like this option better. I tried using visibility, but it was extremely flashy and jittery with the hover.

/* Option 1 */
#TabsToolbar {
    opacity: 0.0;
}

#TabsToolbar:hover {
    opacity: 1.0;
}

/* Option 2 */
#TabsToolbar {
    visibility: collapse;
}

#navigator-toolbox:hover #TabsToolbar {
    visibility: visible;
}

Before you close and relaunch, you must open about:config and toggle the property toolkit.legacyUserProfileCustomizations.stylesheets to true for this to be enabled.

Re-enable Custom CSS

1. Visit about:config
2. Search toolkit.legacyUserProfileCustomizations.stylesheets
3. Toggle it, making the value true

Create userChrome.css

1. Visit about:support
2. To the right of "Profile Folder", press the button Open Directory
3. Create a new folder named chrome
4. Open the chrome folder and create a new file named userChrome.css

Set the styling in userChrome.css

Different CSS needs to be used depending on whether you have the titlebar enabled.

With Titlebar

Titlebar visible (Hamburger menu at top-right -> More Tools -> Customize Toolbar..)

Result (Ubuntu screenshot)

1. Inside the userChrome.css file, insert the code below to hide tabs:

#TabsToolbar {
  visibility: collapse;
}

2. Close and reopen Firefox to see the changes.

Without Titlebar

Titlebar not visible (Hamburger menu at top-right -> More Tools -> Customize Toolbar..)

Result (Ubuntu screenshot)

1. Inside the userChrome.css file, insert the code below to hide tabs:

#tabbrowser-tabs {
    visibility: collapse;
}

2. Close and reopen Firefox to see the changes.

Alternative Styling

Without Titlebar: Mini bar

Result (Ubuntu)

Styling

#tabbrowser-tabs {
  visibility: collapse;
}
#TabsToolbar .titlebar-buttonbox-container {
  max-height: 20px;
}
#TabsToolbar .titlebar-buttonbox-container {
  transform: scale(.7) translateX(12px);
}

Without Titlebar: Inline Window Buttons (with Drag Box)

Result (Ubuntu)

Styling

/* Hide top tabs */
#tabbrowser-tabs {
  visibility: collapse;
}
/* Container: All UI elements at the top of the window */
#navigator-toolbox {
  display: grid;
  grid-template-columns: 1fr auto; /* URL bar (1fr), minimize/close buttons (auto) */
}
/* Top-right rounded corner */
:root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #TabsToolbar {
  border-top-right-radius: var(--border-radius-medium);
}
/* Container: "Menu bar" - File, Edit, View, etc */
#toolbar-menubar:not([inactive="true"]) {
  grid-column: 1 / span 2; /* Full width: span both columns */
  /* Make the menu bar look a little better */
  align-items: center;
  padding: 2px var(--toolbar-start-end-padding) !important;
}
/* Unset extra vertical padding when the menu bar is shown */
#toolbar-menubar[autohide="true"]:not([inactive="true"]) {
  :root[tabsintitlebar] #navigator-toolbox:not([tabs-hidden]) > & {
    min-height: unset;
  }
}
/* Container: URL bar, back buttons, addon buttons, etc */
#nav-bar {
  /* Place below application menu, to the left of the minimize/maximize/close buttons */
  order: 0;
  grid-row: 2;
}
/* Top-left rounded corner */
:root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #nav-bar {
  border-top-left-radius: var(--border-radius-medium);
}
/* When window is not focused, match the URL bar opacity with the inactive application buttons */
#nav-bar {
  :root[tabsintitlebar] & {
    will-change: opacity;
    transition: opacity var(--inactive-window-transition);

    &:-moz-window-inactive {
      opacity: var(--inactive-titlebar-opacity);
    }
  }
}
/* Remove right-side padding on last item in the URL bar */
#PanelUI-menu-button {
  padding-inline-end: 0 !important;
}
/* Container: minimize, maximize, close buttons and drag box */
#navigator-toolbox #TabsToolbar {
  /* Place below application menu, to the right of the URL bar */
  order: 1;
  grid-row: 2;
  /* Match this container styling with the URL bar */
  background-color: var(--toolbar-bgcolor) !important;
  background-image: var(--toolbar-bgimage);
  color: var(--toolbar-color) !important;
  /* Right-side padding is moved from menu button to the right edge */
  padding-right: var(--toolbar-start-end-padding) !important;
}
/* Inline drag box */
#TabsToolbar .titlebar-spacer {
  background-color: rgba(0,0,0,0.06);
  margin: var(--toolbarbutton-outer-padding);
  border-radius: var(--border-radius-medium);
  cursor: grab;
  width: var(--urlbar-min-height) !important;
  height: var(--urlbar-min-height);
  align-self: center;
}
#TabsToolbar .titlebar-spacer[type="pre-tabs"] {
  display: none;
}
/* Make buttons in the #TabsToolbar look a little better */
#TabsToolbar .toolbar-items {
  margin: var(--toolbarbutton-outer-padding);
}
/* Container: "Bookmarks Toolbar" - this is under the URL bar */
#PersonalToolbar {
  /* Place below URL bar and back buttons */
  order: 2;
  grid-row: 3;
  grid-column: 1 / span 2; /* Full width: span both columns */
}
/* If you would like to hide one of:
 - "Recent browser history across windows and devices" button
 - "List all tabs" dropdown
Do that through the "Customize Toolbar" and drag the items off the toolbar.
*/

For MacOS, you can also set

#nav-bar {
    order: 0;
    width: 100%;
}

This will move the window buttons on the bookmarks tab, making the top bar look more complete.

Tweaking these custom styles

You don't have to guess and check the styling. Firefox has a devtools window for the browser itself. It's called "Browser Toolbox", but looks identical to Firefox's website devtools.

Mozilla has info on how to use that here: https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html

The TL;DR is: Open Devtools -> Go to settings -> Check "Enable browser chrome and add-on debugging" and "Enable remote debugging" -> Use Ctrl + Shift + Alt + i to launch it.

If you're running Windows 10, I've found the following gives the best integration:

1. Enable "Title Bar" mode by going to the hamburger menu (☰) → Customize → Check the "Title Bar" checkbox at the bottom of the screen.
2. Apply the following userChrome.css:

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
    opacity: 0;
    pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

This css removes tabs, but preserves menu and minimize/maximize/close buttons.

#tabbrowser-tabs {  visibility: collapse;}

Works in FF version 83