Style to make Atom's tab character a wide line like Sublime Text and to only show invisibles on document highlight.

atom-invisibles-override.less

atom-text-editor::shadow {
	/**
	 * Put this in your Atom stylesheet to replace the tab character with
	 * a full-width line like in Sublime Text. Change the background color
	 * to match your theme.
	 *
	 * Open your Atom settings and under "Editor Settings" change your
	 * "Invisbles Tab" field to a single space (" "). Otherwise you will see
	 * both tab indicators.
	 */
	.hard-tab {
		position: relative;
		&::after {
			content: "";
			position: absolute;
			height: 1px;
			left: 1px;
			right: 2px;
			top: 50%;
			background: rgba(134, 133, 125, .5);
		}
	}

	/**
	 * Optional: Add these lines to have invisble characters
	 * show ONLY when you have an active selection in the document.
	 * It will show all invisibles when you highlight anything, this
	 * is a current limitation with Atom's selection process.
	 */
	.invisible-character {
		visibility: hidden;
	}
	.has-selection {
		.invisible-character {
			visibility: visible;
			color: rgba(134, 133, 125, 1);
		}
	}
}

Looks like this:

There are some deprecation warnings in Atom 1.18 when using this:

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--. To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

atom-text-editor::shadow => atom-text-editor.editor
atom-text-editor::shadow .hard-tab => atom-text-editor.editor .hard-tab
atom-text-editor::shadow .hard-tab::after => atom-text-editor.editor .hard-tab::after
atom-text-editor::shadow .invisible-character => atom-text-editor.editor .invisible-character
atom-text-editor::shadow .has-selection .invisible-character => atom-text-editor.editor .has-selection .invisible-character
Automatic translation of selectors will be removed in a few release cycles to minimize startup time. Please, make sure to upgrade the above selectors as soon as possible.

And it is just not working in Atom 1.25.1, just updated to test this.

Does anyone have a working fix?

@stelonix I do:

// Hide invisible characters. Show them when selected.
@import 'syntax-variables';

atom-text-editor.editor {
	.invisible-character {
		// 1. Set invisbles to the theme's background color, hiding them.
		color: @syntax-background-color;
	}

	.hard-tab {
		visibility: hidden;
		position: relative;

		&::after {
			visibility: visible;
			content: '';
			position: absolute;
			height: 1px;
			left: 1px;
			right: 2px;
			top: 50%;
			background: @syntax-background-color;
		}
	}

	.cursor-line {
		.invisible-character, .hard-tab::after {
			visibility: hidden;
		}
	}

	// EXCEPT for trailing white space characters. We wanna see those.
	.line:not(.cursor-line) { // <- but not while we're typing. :)
		.trailing-whitespace {
			background-color: @background-color-error;
			color: contrast(@background-color-error);

			&.hard-tab {
				visibility: visible;
				color: transparent;
				&::after {
					background-color: contrast(@background-color-error);
				}
			}
		}
	}
}

This is based on atom/atom#6669 (comment) as well.

This version also hides the Invisbles Tab character set in the settings.

Thanks, I've now switched to VSC, since Atom feels abandoned and VSC is fast and just works. Not my desire though, I wanted to fix up Atom but it seems simply not worth the trouble.