Diese Editor-Settings vereinfachen das Arbeiten mit Tailwind CSS

Tailwind CSS hat sich vor allem in der React-Community als Quasi-Standard für viele durchgesetzt, was das Styling angeht. Ich bin noch immer nicht wirklich Fan, ich kann aber durchaus verstehen, was die Vorteile sind.

Bessere Lesbarkeit durch Umbrechen von Klassennamen

Was mich aber aber am meisten gestört hat, ist wie sehr die Länge der Klassennamen ausarten kann. Der Code für ein etwas gestylten Button kann dann gerne mal so aussehen:

<button
    type="button"
    class="font-inherit m-0 flex h-10 items-center justify-center rounded-xl border border-sky-200 bg-sky-50 px-3.5 text-base leading-6 font-medium text-sky-900 outline-0 select-none hover:bg-sky-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:border-t-sky-300 active:bg-sky-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] data-disabled:text-sky-500 active:data-disabled:border-t-sky-200 active:data-disabled:bg-sky-50 active:data-disabled:shadow-none"
>
    Click me
</button>

Die Lesbarkeit ist wirklich miserabel. Man muss seitlich scrollen, um Klassennamen weiter hinten zu bearbeiten und es ist nicht möglich, auf einem Blick alle zu sehen. Glücklicherweise gibt es in Visual Studio Code eine Einstellung, die hier helfen kann: editor.wordWrap. So sieht der gleiche Code aus mit editor.wordWrap: "bounded":

<button
    type="button"
    class="font-inherit m-0 flex h-10 items-center
    justify-center rounded-xl border border-sky-200 bg-sky-50
    px-3.5 text-base leading-6 font-medium text-sky-900
    outline-0 select-none hover:bg-sky-100
    focus-visible:outline-2 focus-visible:-outline-offset-1
    focus-visible:outline-blue-800 active:border-t-sky-300
    active:bg-sky-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,
    0.1)] data-disabled:text-sky-500
    active:data-disabled:border-t-sky-200
    active:data-disabled:bg-sky-50
    active:data-disabled:shadow-none"
>
    Click me
</button>

Deutlich besser meiner Meinung nach. Ich empfehle, diese Setting in jedem Workspace zu setzen, wo Tailwind CSS verwendet wird (.vscode/settings.json):

{
    "editor.wordWrap": "bounded"
}

In anderen Code Editoren gibt es wahrscheinlich ähnliche Einstellungen.

IntelliSense und automatisch Klassen sortieren

Diese beiden Punkte hat Tailwind selbst unter Editor setup dokumentiert. Eine offizielle Extension für VS Code für IntelliSense und ein Prettier plugin. Die Extension schlägt dir automatisch bassende Tailwind-Klassen vor und "lintet" auch, also unterstreicht falsche Klassennamen oder welche du auch mögliche Duplikate. Das Prettier Plugin sortiert die Klassen automatisch in der empfohlenen Reihenfolge, was es anderen Entwickler:innen und dir selbst erleichtert, Klassennamen zu finden, bzw. sich gar nicht Gedanken machen zu müssen, an welche Stelle eine neue Klasse kommen sollte.

Ich empfehle, die Extension mit in die VS Code Recommendations des Workspaces mit aufzunehmen, für Projekte, in denen Tailwind CSS verwendet wird. Ebenso die Extension für Prettier (.vscode/extensions.json):

{
    "recommendations": ["esbenp.prettier-vscode", "bradlc.vscode-tailwindcss"]
}

Einstellungen automatisch setzen mit lgk-prettier

In Vorstellung von lgk-prettier habe ich bereits mein Helfer-CLI-Tool vorgestellt, das durch ein Node-Script automatisch die von präferierten Prettier- und VS-Code-Einstellungen setzt. Dieses habe ich jetzt durch die in diesem Artikel zu Tailwind CSS empfohlenen Einstellungen ergänzt. Mit dem optionalen Parameter --tailwindcss (oder die Kurzform -t) werden diese dann mit gesetzt. Für die auf VS Code bezogenen Einstellungen muss zusätzlich auch der optionale Parameter --vscode (oder kurz -c) gesetzt werden. Also so:

npx lgk-prettier@latest -c -t

@latest habe ich mit reingeschrieben, damit tatsächlich die neueste Version von lgk-prettier verwendet wird. Mehr Informationen zum Tool findest du in der GitHub Repository.